✨ feat<数据中心>: 普通展示表格列名排序

src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref, reactive, computed, inject, watch, Ref, onMounted, defineProps } from 'vue';
+import { computed, defineProps, inject, onMounted, reactive, ref, Ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { getDayData, getMonthData, getWeekData } from '/src/views/reportManage/dataCenter/api';
-import { dayDataColumns, weekDataColumns, monthDataColumns } from '../../utils/columns';
+import { dayDataColumns, monthDataColumns, weekDataColumns } from '../../utils/columns';
 import dayjs from 'dayjs';
 
 const router = useRouter();
@@ -19,23 +19,33 @@ const weekEndDate = ref(null);
 const monthStartDate = ref(null);
 const monthEndDate = ref(null);
 
-//表格
+// 表格数据
 const dayData = [];
 const weekData = [];
 const monthData = [];
 
-//排序
+// 排序
 const order_date = ref('');
 const sortOrder = ref('');
 
+//// 保存排序状态到 localStorage
+//const saveSortState = () => {
+//  localStorage.setItem('sortField', order_date.value);
+//  localStorage.setItem('sortOrder', sortOrder.value);
+//};
+//
+//// 读取排序状态并应用
+//const loadSortState = () => {
+//  order_date.value = localStorage.getItem('sortField') || '';
+//  sortOrder.value = localStorage.getItem('sortOrder') || '';
+//};
+
 const gridOptions = reactive({
   border: 'inner',
   height: 900,
   align: null,
   round: true,
   loading: false,
-  //showHeaderOverflow: true,
-  //showOverflow: true,
   columnConfig: {
     resizable: true,
   },
@@ -50,7 +60,7 @@ const gridOptions = reactive({
     pageSizes: [10, 20, 30],
   },
   sortConfig: {
-    remote: true
+    remote: true,
   },
   toolbarConfig: {
     custom: true,
@@ -86,7 +96,7 @@ const currentGridOptions = computed(() => {
 
 // 分页
 const gridEvents = {
-  pageChange({currentPage, pageSize}) {
+  pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
@@ -125,10 +135,14 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
     });
     gridOptions[dateType.value].data = resp.data;
     gridOptions.pagerConfig.total = resp.total;
+
     if (resp.data.length > 0) {
       const allColumns = new Set();
-      const dynamicColumns = [];
+      const salesColumns = [];
+      const otherColumns = [];
+
       dataColumns.value = dataColumns.value.filter(column => !/\d{2}-\d{2}的/.test(column.field) && !column.field.includes('余额币种') && !column.field.includes('退货率'));
+
       resp.data.forEach(row => {
         for (const key in row) {
           if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
@@ -136,21 +150,38 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
           }
         }
       });
+
       // 将所有可能的列添加到 dynamicColumns
       allColumns.forEach(key => {
         let isSortable = false;
         if (key.includes('销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
           isSortable = true;
         }
-        dynamicColumns.push({
+        const column = {
           field: key,
           title: key,
           minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : 82,
           align: 'center',
           formatter: formatEmptyCell,
           sortable: isSortable,
-        });
+        };
+
+        if (key.includes('销售额')&& !key.includes('广告销售额')) {
+          salesColumns.push(column);
+        } else {
+          otherColumns.push(column);
+        }
       });
+
+      // 对 salesColumns 按日期排序
+      salesColumns.sort((a, b) => {
+        const dateA = a.field.match(/\d{4}-\d{2}-\d{2}/)[0];
+        const dateB = b.field.match(/\d{4}-\d{2}-\d{2}/)[0];
+        return new Date(dateA) - new Date(dateB);
+      });
+
+      const dynamicColumns = [...salesColumns, ...otherColumns];
+
       if (dateType.value === dateTypeKey) {
         dataColumns.value = [...dataColumns.value, ...dynamicColumns];
       } else {
@@ -190,7 +221,7 @@ function fetchCurrentData(taskIds, resetPage = false) {
   }
 }
 
-function handleSortChange({column, order}) {
+function handleSortChange({ column, order }) {
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
   if (sortField) {
@@ -202,9 +233,10 @@ function handleSortChange({column, order}) {
     } else if (match) {
       order_date.value = match[1];
     } else if (matchMonth) {
-      order_date.value = `${matchMonth[1]}-01`;
+      order_date.value = `${ matchMonth[1] }-01`;
     }
   }
+  //saveSortState();
   fetchCurrentData(props.taskIds, true);
 }
 
@@ -212,6 +244,12 @@ watch(() => props.taskIds, (newTaskIds) => {
   fetchCurrentData(newTaskIds, true); // 添加第二个参数表示重置页码
 });
 
+// 组件挂载时读取排序状态
+//onMounted(() => {
+//  loadSortState();
+//  fetchCurrentData(props.taskIds);
+//});
+
 const handleImport = () => {
   const url = router.resolve({
     name: 'TableDataEntry',
@@ -222,7 +260,7 @@ const handleImport = () => {
   window.open(url, '_blank');
 };
 
-function formatEmptyCell({cellValue}) {
+function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -256,7 +294,7 @@ const headerCellStyle = () => {
     <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="currentGridOptions"
               v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>
-        <el-button icon="plus" type="primary" @click="handleImport" target="_blank">数据录入</el-button>
+        <el-button icon="plus" target="_blank" type="primary" @click="handleImport">数据录入</el-button>
       </template>
       <template #platformNumber_default="{ row }">
         <div class="font-semibold">{{ row.platformNumber }}</div>
@@ -283,7 +321,8 @@ const headerCellStyle = () => {
 }
 
 .custom-btn {
-  border: 1px solid #0085ff; padding: 8px
+  border: 1px solid #0085ff;
+  padding: 8px
 }
 
 .custom-btn:hover {