| 
					
				 | 
			
			
				@@ -138,7 +138,9 @@ defineExpose({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     <vxe-grid 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       v-if="$route.name != 'workerDrak'" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       v-bind="gridOptions" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      ref="gridRef" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       :merge-cells="mergeCells" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      v-on="gridEvents" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       <template #imgUrl_default="{ row }"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         <div> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -173,12 +175,12 @@ defineExpose({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <script setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { ref, reactive, watch, onMounted } from "vue"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { ref, reactive, watch, onMounted, nextTick } from "vue"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import rank1 from "@/assets/rank/rank1.png"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import rank2 from "@/assets/rank/rank2.png"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import rank3 from "@/assets/rank/rank3.png"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import { useRoute } from "vue-router"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const gridRef = ref(null); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const $route = useRoute(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const RANK_IMG = [rank1, rank2, rank3]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const deptName = ref(""); 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -206,6 +208,9 @@ const gridOptions = reactive({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   border: true, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   loading: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   height: 500, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  sortConfig: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    multiple: true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   columns: [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   data: [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   showOverflow: true, 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -219,7 +224,6 @@ const gridOptions = reactive({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     gt: 0 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const tableConfig = reactive({}); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const tabTitle = ref(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 // 模拟接口数据 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const rawData = ref([]); 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -243,7 +247,30 @@ defineExpose({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   init 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-// 生成动态表头 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 排序状态 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const gridEvents = { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  sortChange({ column, order }) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 如果没有选择排序列或没有排序方向,则直接返回 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (!column || !order) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      gridOptions.data = [...originalData.value]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // 排除第一行,如果路由名称不是 "workerDrak" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const rowsToSort = gridOptions.data.slice(1); // 排除第一行 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const sortedRows = rowsToSort.sort((a, b) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 根据点击的列字段和排序方向进行排序 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        if (order === "asc") { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return a[column.field] < b[column.field] ? -1 : 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } else { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          return a[column.field] > b[column.field] ? -1 : 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // 将第一行重新插入到排序后的数据顶部 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const sortedData = [gridOptions.data[0], ...sortedRows]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      gridOptions.data = sortedData; // 更新表格数据 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 // 生成动态表头 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const createColumns = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   let columns = []; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -302,6 +329,7 @@ const createColumns = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     ]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   const headerMap = new Map(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   // 遍历数据生成表头结构 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -354,6 +382,8 @@ const createColumns = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 // 加载数据 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 保存原始数据副本 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const originalData = ref([]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const loadData = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   gridOptions.loading = true; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -382,17 +412,37 @@ const loadData = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     return row; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  originalData.value = [...tableData]; // 深拷贝原始数据 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  gridOptions.data = tableData; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  setTimeout(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    gridOptions.data = tableData; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    gridOptions.loading = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-  }, 500); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // 使用 nextTick 确保表格已渲染完成后再合并单元格 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  nextTick(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    if (gridRef.value) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      gridRef.value.setMergeCells([ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // 合并第一行前两列 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { row: 0, col: 0, rowspan: 1, colspan: 2 }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        { row: 2, col: 1, rowspan: 0, colspan: 0 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      ]); // 重新合并单元格 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // setTimeout(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  //   // 重新应用合并单元格 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  //   if (gridRef.value) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  //     gridRef.value.mergeCells(); // 重新合并单元格 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  //   } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // }, 500); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  gridOptions.loading = false; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 // 监听年份变化,重新渲染 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 watch(selectYear, () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   createColumns(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   loadData(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  gridRef.value.setMergeCells([ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 合并第一行前两列 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    { row: 0, col: 0, rowspan: 1, colspan: 2 }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    { row: 2, col: 1, rowspan: 0, colspan: 0 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  ]); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const setGridHeight = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   // 设置表格的高度为设备的高度(例如,减去其他UI元素的高度) 
			 |