|
@@ -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元素的高度)
|