|
@@ -11,6 +11,7 @@ import { universal } from '../../../utils/columns';
|
|
import { ElMessage } from 'element-plus';
|
|
import { ElMessage } from 'element-plus';
|
|
import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
|
|
import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
|
|
import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
|
|
import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
|
|
|
|
+import { VxeGridInstance } from 'vxe-table';
|
|
|
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
taskIds: Object,
|
|
taskIds: Object,
|
|
@@ -41,8 +42,12 @@ const salesField = ref(null);
|
|
const sortStatus = ref(false);
|
|
const sortStatus = ref(false);
|
|
const totalSales = ref(null);
|
|
const totalSales = ref(null);
|
|
|
|
|
|
|
|
+const xGrid = ref<VxeGridInstance>();
|
|
|
|
+const highlightedColumn = ref(null);
|
|
|
|
+
|
|
const gridOptions = reactive({
|
|
const gridOptions = reactive({
|
|
border: 'inner',
|
|
border: 'inner',
|
|
|
|
+ keepSource: true,
|
|
height: 800,
|
|
height: 800,
|
|
align: null,
|
|
align: null,
|
|
round: true,
|
|
round: true,
|
|
@@ -54,6 +59,7 @@ const gridOptions = reactive({
|
|
},
|
|
},
|
|
rowConfig: {
|
|
rowConfig: {
|
|
isHover: true,
|
|
isHover: true,
|
|
|
|
+ height: 48
|
|
},
|
|
},
|
|
pagerConfig: {
|
|
pagerConfig: {
|
|
enabled: true,
|
|
enabled: true,
|
|
@@ -258,6 +264,9 @@ async function fetchMainData(taskIds, resetPage = false) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
saveSortState();
|
|
saveSortState();
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ handelCurrent();
|
|
|
|
+ }, 0);
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('Error fetching task data:', error);
|
|
console.error('Error fetching task data:', error);
|
|
} finally {
|
|
} finally {
|
|
@@ -352,6 +361,16 @@ function updateDataChange(newId) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+function handelIsCurrent({column}) {
|
|
|
|
+ highlightedColumn.value= column.field;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+function handelCurrent() {
|
|
|
|
+ const $grid = xGrid.value;
|
|
|
|
+ $grid.setCurrentColumn(highlightedColumn.value);
|
|
|
|
+}
|
|
|
|
+
|
|
//以下是表格样式
|
|
//以下是表格样式
|
|
const cellStyle = (row) => {
|
|
const cellStyle = (row) => {
|
|
if (row.$rowIndex === 0 && row.$columnIndex < 5) {
|
|
if (row.$rowIndex === 0 && row.$columnIndex < 5) {
|
|
@@ -384,7 +403,7 @@ const cellStyleHandler = ({ column }) => {
|
|
if (dayFormat.test(columnName)) {
|
|
if (dayFormat.test(columnName)) {
|
|
return { fontSize: '12px', padding: '2px 0', backgroundColor: '#f0f9ff' };
|
|
return { fontSize: '12px', padding: '2px 0', backgroundColor: '#f0f9ff' };
|
|
}
|
|
}
|
|
- return { fontSize: '12px', padding: '2px 0',};
|
|
|
|
|
|
+ return { fontSize: '12px', };
|
|
};
|
|
};
|
|
|
|
|
|
const rowStyle = (row) => {
|
|
const rowStyle = (row) => {
|
|
@@ -432,8 +451,8 @@ onMounted(() => {
|
|
</el-card>
|
|
</el-card>
|
|
<el-card class="mt-3">
|
|
<el-card class="mt-3">
|
|
<slot name="table-header"></slot>
|
|
<slot name="table-header"></slot>
|
|
- <vxe-grid :cell-style="cellStyle" :header-cell-style="cellStyleHandler" :row-style="rowStyle" v-bind="gridOptions" stripe
|
|
|
|
- v-on="gridEvents" @sort-change="handleSortChange">
|
|
|
|
|
|
+ <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="cellStyleHandler" :row-style="rowStyle" v-bind="gridOptions" stripe
|
|
|
|
+ v-on="gridEvents" @sort-change="handleSortChange" @header-cell-click="handelIsCurrent">
|
|
<template #toolbar_buttons>
|
|
<template #toolbar_buttons>
|
|
<div class="mx-3.5">
|
|
<div class="mx-3.5">
|
|
<vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
|
|
<vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
|