增加列表排序

src/components/DeviceList.vue

@@ -43,10 +43,11 @@
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         :row-class-name="tableRowClassName"
         :highlight-current-row="false"
-        :scrollbar-always-on="true">
+        :scrollbar-always-on="true"
+        @sort-change="handleSortChange">
         <el-table-column width="40"></el-table-column>
-        <el-table-column prop="id" label="设备ID" min-width="60" />
-        <el-table-column prop="name" label="设备名称" min-width="120" />
+        <el-table-column prop="id" label="设备ID" min-width="100" sortable="custom" />
+        <el-table-column prop="name" label="设备名称" min-width="120" sortable="custom" />
         <el-table-column prop="type" label="设备类型" min-width="100">
           <template #default="scope">
             {{ formatDeviceType(scope.row.type) }}
@@ -92,6 +93,7 @@ export default {
   data() {
     return {
       tableData: [], // 树形表格数据
+      originalTableData: [], // 存储原始未排序的树形数据
       allDevices: [], // 存储所有设备用于构建树形结构
       loading: false,
       error: null,
@@ -112,10 +114,9 @@ export default {
       
       try {
         const data = await deviceService.getDevices();
-        // 保存所有设备数据
         this.allDevices = data;
-        // 构建树形结构数据
         this.tableData = this.buildTreeData(data);
+        this.originalTableData = [...this.tableData]; // 保存原始顺序
       } catch (err) {
         this.error = err.message || '未知错误';
         console.error('加载设备列表失败:', err);
@@ -123,15 +124,37 @@ export default {
         this.loading = false;
       }
     },
+
+    // 处理表格排序
+    handleSortChange({ prop, order }) {
+      if (!order) {
+        // 如果取消排序，则恢复原始顺序
+        this.tableData = [...this.originalTableData];
+        return;
+      }
+
+      const sortFactor = order === 'ascending' ? 1 : -1;
+
+      // 只对顶层项（区域主控）进行排序
+      this.tableData.sort((a, b) => {
+        const valA = a[prop];
+        const valB = b[prop];
+
+        if (valA < valB) {
+          return -1 * sortFactor;
+        }
+        if (valA > valB) {
+          return 1 * sortFactor;
+        }
+        return 0;
+      });
+    },
     
     // 构建树形结构数据
     buildTreeData(devices) {
-      // 先找出所有区域主控设备
       const areaControllers = devices.filter(device => device.type === 'area_controller');
       
-      // 为每个区域主控设备添加子设备列表
       return areaControllers.map(controller => {
-        // 找到属于当前区域主控的所有普通设备
         const children = devices.filter(device => 
           device.type === 'device' && device.parent_id === controller.id
         );
@@ -173,10 +196,8 @@ export default {
     },
     
     editDevice(device) {
-      // 处理设备数据，确保正确传递给表单
       const processedDevice = { ...device };
       
-      // 如果properties是字符串，则解析为对象
       if (processedDevice.properties && typeof processedDevice.properties === 'string') {
         try {
           processedDevice.properties = JSON.parse(processedDevice.properties);
@@ -201,7 +222,6 @@ export default {
         
         await deviceService.deleteDevice(device.id);
         this.$message.success('删除成功');
-        // 重新加载设备列表
         await this.loadDevices();
       } catch (err) {
         if (err !== 'cancel') {
@@ -210,15 +230,12 @@ export default {
       }
     },
     
-    // 设备操作成功回调
     async onDeviceSuccess() {
       this.$message.success(this.isEdit ? '设备更新成功' : '设备添加成功');
       this.dialogVisible = false;
-      // 重新加载设备列表
       await this.loadDevices();
     },
     
-    // 为区域主控设备添加静态高亮样式
     tableRowClassName({ row, rowIndex }) {
       if (row.type === 'area_controller') {
         return 'current-row';