🐛 feat<数据中心>: 普通展示表格排序问题修改

src/views/demo/index.vue

@@ -1,36 +1,11 @@
-/**
- * @Description: 测试
- */
-<script setup lang="ts">
-import * as ww from '@wecom/jssdk';
-import { WeComLogin } from './api';
-import { ref } from 'vue';
-import enLocale from 'element-plus/es/locale/lang/en';
-
-// const localeRef = ref(enLocale); // 直接使用ref包装英文语言包
+<template>
 
-const value = ref(null); // 假设这是你的日期选择器的v-model值
-const defaultTime = ref(null); // 你的默认时间设定
+</template>
 
+<script setup>
 
 </script>
 
-<template>
-  <!--<div>-->
-  <!--  <el-button type="primary" @click="createWXQRCode" class="m-2.5">发送</el-button>-->
-  <!--</div>-->
-  <!--<div id="wx_qrcode" style="height: 300px; width: 300px"></div>-->
-
-  <div>
-    <el-config-provider :locale="enLocale">
-      <el-date-picker
-          v-model="value"
-          type="week"
-          format="[Week] ww"
-          placeholder="Pick a week"
-      />
-    </el-config-provider>
-  </div>
-</template>
+<style scoped>
 
-<style scoped></style>
+</style>

src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref, watch, defineProps, inject, Ref } from 'vue';
+import { defineProps, onMounted, reactive, ref, watch } from 'vue';
 import { exportData, getMainData } from '/@/views/reportManage/dataCenter/api';
 import { universal } from '../../../utils/columns';
 import { ElMessage } from 'element-plus';
@@ -34,6 +34,7 @@ const gridOptions = reactive({
   loading: false,
   columnConfig: {
     resizable: true,
+    isCurrent: true,
   },
   rowConfig: {
     isHover: true,
@@ -62,9 +63,21 @@ const gridOptions = reactive({
   data: tableData,
 });
 
+// 保存排序状态到 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 gridEvents = {
-  pageChange({currentPage, pageSize}) {
+  pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
@@ -80,6 +93,7 @@ async function fetchMainData(taskIds, resetPage = false) {
   }
   try {
     gridOptions.loading = true;
+    //loadSortState()
     const response = await getMainData({
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
@@ -102,6 +116,7 @@ async function fetchMainData(taskIds, resetPage = false) {
       const regex1 = /\d{2}-\d{2}/;
       const regex2 = /\d{4}-\d{2}-\d{2}/;
       const regex3 = /\d{4}-\d{2}/;
+      const regex4 = /\d{4}-\d{2}-\d{2}~\d{4}-\d{2}-\d{2}/;
       const middleKeywords = ['~', '截止', '近90天平台退货率', '余额'];
 
       const allColumns = new Set();
@@ -119,13 +134,13 @@ async function fetchMainData(taskIds, resetPage = false) {
 
       allColumns.forEach(key => {
         let isSortable = false;
-        if (key.includes('销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
+        if (key.includes('的销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
           isSortable = true;
         }
         const column = {
           field: key,
           title: key, // 使用字段名作为列标题
-          minWidth: key.includes('~') ? 90 : key.includes('截止') ? 90 : regex2.test(key) ? 83 : 74,
+          minWidth: key.includes('~') ? 90 : key.includes('截止') ? 90 : regex2.test(key) ? 91 : 79,
           align: 'center',
           formatter: formatEmptyCell,
           sortable: isSortable,
@@ -139,23 +154,50 @@ async function fetchMainData(taskIds, resetPage = false) {
         }
       });
 
-      dynamicColumns.push(...firstColumns, ...middleColumns, ...lastColumns);
+      // 对 firstColumns 中包含‘的销售额’字段的日期进行排序
+      const daysalesColumns = firstColumns.filter(column => column.field.includes('的销售额'));
+      daysalesColumns.sort((a, b) => {
+        const dateA = a.field.match(/\d{4}-\d{2}-\d{2}/);
+        const dateB = b.field.match(/\d{4}-\d{2}-\d{2}/);
+        if (dateA && dateB) {
+          return new Date(dateA[0]) - new Date(dateB[0]);
+        }
+        return 0;
+      });
+
+      const weekSalesColumns = middleColumns.filter(column => column.field.includes('的销售额')&&!column.field.includes('增长率'));
+      weekSalesColumns.sort((a, b) => {
+        const dateA = a.field.match(regex4)[0].split('~')[0];
+        const dateB = b.field.match(regex4)[0].split('~')[0];
+        return new Date(dateA) - new Date(dateB);
+      });
+
+      const monthSalesColumns = lastColumns.filter(column => column.field.includes('的销售额'));
+      monthSalesColumns.sort((a, b) => {
+        const dateA = `${ a.field.match(regex3)[0] }-01`;
+        const dateB = `${ b.field.match(regex3)[0] }-01`;
+        return new Date(dateA) - new Date(dateB);
+      });
+
+      // 将排序后的列和其他列合并
+      dynamicColumns.push(...daysalesColumns, ...firstColumns.filter(column => !column.field.includes('的销售额')),
+          ...weekSalesColumns,...middleColumns.filter(column => !column.field.includes('的销售额')),
+          ...monthSalesColumns,...lastColumns.filter(column => !column.field.includes('的销售额')));
 
       tableColumns.value = [
         ...universal,
         ...dynamicColumns,
       ];
     }
+    saveSortState();
   } catch (error) {
     console.error('Error fetching task data:', error);
-    // 这里可以添加一个用户友好的错误提示，例如：
-    // showAlert('获取数据失败，请稍后重试。');
   } finally {
     gridOptions.loading = false;
   }
 }
 
-function handleSortChange({column, order}) {
+function handleSortChange({ column, order }) {
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
   if (sortField) {
@@ -169,7 +211,7 @@ function handleSortChange({column, order}) {
       order_date.value = match[1];
       dateType.value = 'day';
     } else if (matchMonth) {
-      order_date.value = `${matchMonth[1]}-01`;
+      order_date.value = `${ matchMonth[1] }-01`;
       dateType.value = 'month';
     }
   }
@@ -189,58 +231,61 @@ function clearSorting() {
 
 watch(() => props.dayDate, (newDayDate) => {
   if (newDayDate) {
-    //console.log('newDayDate',newDayDate);
-    const {dailyStartDate, dailyTime} = newDayDate;
+    const { dailyStartDate, dailyTime } = newDayDate;
     dayStartDate.value = dailyStartDate;
     dayEndDate.value = dailyTime;
   }
-  clearSorting();
+  //clearSorting();
 });
 
 
 watch(() => props.weekDate, (newWeekDate) => {
   if (newWeekDate) {
-    //console.log('newWeekDate',newWeekDate);
-    const {weekStartDate, weekEndDate} = newWeekDate;
+    const { weekStartDate, weekEndDate } = newWeekDate;
     weekStart.value = weekStartDate;
     weekEnd.value = weekEndDate;
     fetchMainData(props.taskIds);
   }
-  clearSorting();
+  //clearSorting();
 });
 
 watch(() => props.monthDate, (newMonthDate) => {
   if (newMonthDate) {
-    //console.log('newMonthDate',newMonthDate);
-    const {startDate, endDate} = newMonthDate;
+    const { startDate, endDate } = newMonthDate;
     monthStartDate.value = startDate;
     monthEndDate.value = endDate;
   }
-  clearSorting();
+  //clearSorting();
 });
 
-const cellStyle = () => {
+const cellStyle = ({ columnIndex }) => {
+  if (columnIndex < 6) {
+    return {
+      fontSize: '12px',
+      fontWeight: '500',
+    };
+  }
   return {
-    fontSize: '12px',
-    fontWeight: '500',
+    fontSize: '11px',
+    fontWeight: '600',
   };
 };
 
-const cellStyleHandler = ({column}) => {
+const cellStyleHandler = ({ column }) => {
   const columnName = column.field;
   const dayFormat = /\d{2}-\d{2}/;
   const dayDetailedFormat = /\d{4}-\d{2}-\d{2}/;
   const monthFormat = /\d{4}-\d{2}/;
   if (columnName.includes('~') || columnName.includes('截止') || columnName.includes('近90天平台退货率') || columnName.includes('余额')) {
-    return {fontSize: '12px', backgroundColor: '#b3ced7'};
+    return { fontSize: '12px', backgroundColor: '#b3ced7' };
   }
   if (monthFormat.test(columnName) && !dayDetailedFormat.test(columnName)) {
-    return {fontSize: '12px', backgroundColor: '#8cbacc'};
+    return { fontSize: '12px', backgroundColor: '#8cbacc' };
   }
   if (dayFormat.test(columnName)) {
-    return {fontSize: '12px', backgroundColor: '#d0dadf'};
+    return { fontSize: '12px', backgroundColor: '#d0dadf' };
   }
-  return {fontSize: '12px'};
+  return { fontSize: '12px' };
 };
 
 async function handleExport() {
@@ -271,7 +316,7 @@ async function handleExport() {
   }
 }
 
-function formatEmptyCell({cellValue}) {
+function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
   }
@@ -284,6 +329,10 @@ function formatEmptyCell({cellValue}) {
   }
   return cellValue;
 }
+
+onMounted(() => {
+  loadSortState();
+});
 </script>
 
 <template>
@@ -316,6 +365,6 @@ function formatEmptyCell({cellValue}) {
 :deep(.vxe-table--header .vxe-header--row th .vxe-cell,
 .vxe-table--body .vxe-body--row td .vxe-cell) {
   padding-right: 0 !important;
-  padding-left: 3px !important;
+  padding-left: 0 !important;
 }
 </style>

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

@@ -28,17 +28,17 @@ 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') || '';
-//};
+// 保存排序状态到 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',
@@ -124,6 +124,7 @@ watch(currentDate, (newValue) => {
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
   try {
     gridOptions.loading = true;
+    loadSortState()
     const resp = await apiFunc({
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
@@ -151,10 +152,10 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
         }
       });
 
-      // 将所有可能的列添加到 dynamicColumns
+      //"的销售额"字段可以排序
       allColumns.forEach(key => {
         let isSortable = false;
-        if (key.includes('销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
+        if (key.includes('的销售额')) {
           isSortable = true;
         }
         const column = {
@@ -165,8 +166,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
           formatter: formatEmptyCell,
           sortable: isSortable,
         };
-
-        if (key.includes('销售额')&& !key.includes('广告销售额')) {
+        if (key.includes('的销售额')) {
           salesColumns.push(column);
         } else {
           otherColumns.push(column);
@@ -174,12 +174,13 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       });
 
       // 对 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);
-      });
-
+      if (dateType.value=='day'){
+        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) {
@@ -189,6 +190,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
         gridOptions.pagerConfig.total = 0;
       }
     }
+    saveSortState();
   } catch (error) {
     console.error('Error fetching task data:', error);
   } finally {
@@ -233,11 +235,11 @@ 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);
+  saveSortState(); // 保存排序状态
+  fetchCurrentData(props.taskIds, true); // 获取数据
 }
 
 watch(() => props.taskIds, (newTaskIds) => {
@@ -245,10 +247,10 @@ watch(() => props.taskIds, (newTaskIds) => {
 });
 
 // 组件挂载时读取排序状态
-//onMounted(() => {
-//  loadSortState();
-//  fetchCurrentData(props.taskIds);
-//});
+onMounted(() => {
+  loadSortState();
+  //fetchCurrentData(props.taskIds);
+});
 
 const handleImport = () => {
   const url = router.resolve({
@@ -277,7 +279,7 @@ function formatEmptyCell({ cellValue }) {
 const cellStyle = () => {
   return {
     fontSize: '12px',
-    fontWeight: '500',
+    fontWeight: '600',
   };
 };