优化列表

2025-10-20 16:14:59 +08:00
parent 1b45e61daf
commit 0cddf99456
4 changed files with 96 additions and 60 deletions
--- a/src/components/GenericMonitorList.vue
+++ b/src/components/GenericMonitorList.vue
@@ -5,53 +5,53 @@
        <el-form-item v-for="col in filterableColumns" :key="col.dataIndex" :label="col.title">
          <template v-if="col.filterType === 'text'">
            <el-input
-              v-model="filters[col.dataIndex]"
-              :placeholder="`搜索 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-input>
          </template>
          <template v-else-if="col.filterType === 'number'">
            <el-input-number
-              v-model="filters[col.dataIndex]"
-              :placeholder="`搜索 ${col.title}`"
-              :controls="false"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                :controls="false"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-input-number>
          </template>
          <template v-else-if="col.filterType === 'dateRange'">
            <el-date-picker
-              v-model="filters[col.dataIndex]"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            ></el-date-picker>
          </template>
          <template v-else-if="col.filterType === 'select'">
            <el-select
-              v-model="filters[col.dataIndex]"
-              :placeholder="`选择 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            >
              <el-option
-                v-for="option in col.filterOptions"
-                :key="option.value"
-                :label="option.text"
-                :value="option.value"
+                  v-for="option in col.filterOptions"
+                  :key="option.value"
+                  :label="option.text"
+                  :value="option.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="col.filterType === 'boolean'">
            <el-select
-              v-model="filters[col.dataIndex]"
-              :placeholder="`选择 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
            >
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
@@ -65,44 +65,46 @@
      </el-form>

      <el-table
-        :data="data"
-        v-loading="loading"
-        border
-        style="width: 100%"
-        @sort-change="handleSortChange"
+          :data="data"
+          v-loading="loading"
+          border
+          stripe
+          style="width: 100%"
+          @sort-change="handleSortChange"
      >
        <el-table-column
-          v-for="col in tableColumns"
-          :key="col.key"
-          :prop="col.prop"
-          :label="col.title"
-          :sortable="col.sorter ? 'custom' : false"
-          :formatter="col.formatter"
+            v-for="col in tableColumns"
+            :key="col.key"
+            :prop="col.prop"
+            :label="col.title"
+            :sortable="col.sorter ? 'custom' : false"
+            :formatter="col.formatter"
+            :min-width="col.minWidth"
        >
          <template v-if="col.render" #default="{ row }">
-            <component :is="col.render(row)" />
+            <component :is="col.render(row)"/>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="pagination.currentPage"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="pagination.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pagination.total"
-        background
-        style="margin-top: 20px; text-align: right;"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          background
+          style="margin-top: 20px; text-align: right;"
      ></el-pagination>
    </el-card>
  </div>
 </template>

 <script setup>
-import { ref, reactive, onMounted, watch, computed } from 'vue';
-import { ElMessage } from 'element-plus';
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {ElMessage} from 'element-plus';

 const props = defineProps({
  fetchData: {
@@ -134,7 +136,7 @@ const filterableColumns = computed(() => {

 const tableColumns = computed(() => {
  return props.columnsConfig.map(col => {
-    const newCol = { ...col };
+    const newCol = {...col};
    newCol.prop = Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex;
    return newCol;
  });
@@ -182,7 +184,7 @@ const handleCurrentChange = (val) => {
  loadData();
 };

-const handleSortChange = ({ prop, order }) => {
+const handleSortChange = ({prop, order}) => {
  sortOrder.prop = prop;
  sortOrder.order = order;
  loadData();
@@ -213,10 +215,12 @@ onMounted(() => {
 .generic-monitor-list {
  padding: 20px;
 }
+
 .filter-form {
  margin-bottom: 20px;
 }
+
 .el-card {
-    border: none;
+  border: none;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 导入 Element Plus 中文语言包

 import App from './App.vue';
 import Home from './components/Home.vue';
@@ -47,8 +48,8 @@ router.beforeEach((to, from, next) => {
 // 创建Vue应用实例
 const app = createApp(App);

-// 使用Element Plus组件库
-app.use(ElementPlus);
+// 全局配置 Element Plus 为中文
+app.use(ElementPlus, { locale: zhCn });

 // 使用路由
 app.use(router);
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -0,0 +1,22 @@
+/**
+ * 将 RFC3339 格式的日期时间字符串格式化为 'YYYY-MM-DD HH:mm:ss'
+ * @param {string | null | undefined} rfc3339String - 后端返回的日期时间字符串
+ * @returns {string} - 格式化后的字符串，如果输入无效则返回空字符串或提示
+ */
+export function formatRFC3339(rfc3339String) {
+  if (!rfc3339String) {
+    return '--'; // 或者返回空字符串 ''
+  }
+
+  try {
+    // 例如: "2025-10-17T14:57:01.570169+08:00"
+    // 替换 'T' 为空格，并截取前 19 个字符即可得到 'YYYY-MM-DD HH:mm:ss'
+    return rfc3339String.replace('T', ' ').substring(0, 19);
+  } catch (error) {
+    console.error('Error formatting date:', rfc3339String, error);
+    return rfc3339String; // 格式化失败时返回原始值
+  }
+}
+
+// 你未来还可以添加其他全局格式化函数
+// export function formatCurrency(number) { ... }
--- a/src/views/monitor/DeviceCommandLogView.vue
+++ b/src/views/monitor/DeviceCommandLogView.vue
@@ -1,15 +1,16 @@
 <template>
  <div class="device-command-log-view">
    <GenericMonitorList
-      :fetchData="fetchDeviceCommandLogs"
-      :columnsConfig="deviceCommandLogColumns"
+        :fetchData="fetchDeviceCommandLogs"
+        :columnsConfig="deviceCommandLogColumns"
    />
  </div>
 </template>

 <script setup>
 import GenericMonitorList from '../../components/GenericMonitorList.vue';
-import { getDeviceCommandLogs } from '../../api/monitor.js';
+import {getDeviceCommandLogs} from '../../api/monitor.js';
+import {formatRFC3339} from '../../utils/format.js'; // 导入全局格式化函数

 // 适配通用组件的 fetchData prop
 const fetchDeviceCommandLogs = async (params) => {
@@ -26,12 +27,15 @@ const deviceCommandLogColumns = [
    key: 'device_id',
    sorter: true,
    filterType: 'number', // 设置筛选类型为数字
+    minWidth: 100, // 设置最小宽度
  },
  {
    title: '消息ID',
    dataIndex: 'message_id',
    key: 'message_id',
-    filterType: 'text', // 设置筛选类型为文本
+    // 后端不支持此字段筛选，暂时移除
+    // filterType: 'text', 
+    minWidth: 300, // UUID较长，设置较宽的最小宽度
  },
  {
    title: '发送时间',
@@ -39,6 +43,8 @@ const deviceCommandLogColumns = [
    key: 'sent_at',
    sorter: true,
    filterType: 'dateRange', // 设置筛选类型为日期范围
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
  },
  {
    title: '接收成功',
@@ -46,12 +52,15 @@ const deviceCommandLogColumns = [
    key: 'received_success',
    filterType: 'boolean', // 设置筛选类型为布尔值
    formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
+    minWidth: 100, // 设置最小宽度
  },
  {
    title: '确认时间',
    dataIndex: 'acknowledged_at',
    key: 'acknowledged_at',
    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
  },
 ];
 </script>