🐛 fix<数据中心>: 表格排序状态修复

src/App.vue

@@ -55,7 +55,7 @@ const getGlobalI18n = computed(() => {
 });
 // 设置初始化，防止刷新时恢复默认
 onBeforeMount(() => {
-  localStorage.clear();
+  //localStorage.clear();
 	// 设置批量第三方 icon 图标
 	setIntroduction.cssCdn();
 	// 设置批量第三方 js

src/views/reportManage/TaskManage/index.vue

@@ -15,8 +15,7 @@ import {
 } from '/src/views/reportManage/TaskManage/api.ts';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Delete, Plus } from '@element-plus/icons-vue';
-import { dateType ,requiredFields} from '/@/views/reportManage/TaskManage/utils/enum';
-import { filter } from 'xe-utils';
+import { dateType, requiredFields } from '/@/views/reportManage/TaskManage/utils/enum';
 
 const selectorRef = ref(null);
 const message = ref('');
@@ -98,7 +97,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: 'inner',
   keepSource: true,
   //showOverflow: true,
-  height: 900,
+  height: 930,
   loading: false,
   round: true,
   toolbarConfig: {
@@ -190,7 +189,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
       editRender: {},
       slots: { edit: 'currency_edit' },
       align: 'center',
-      minWidth: 89
+      minWidth: 95
     },
     {
       field: 'currencyCodePlatform',
@@ -593,122 +592,125 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card class="custom-card-style flex gap-1.5 justify-between mx-8">
-    <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
-  </el-card>
-  <el-card class="mx-8 my-3">
-    <div style="position: relative">
-      <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
-                v-on="gridEvents">
-        <template #toolbar_buttons>
-          <el-button :icon="Plus" plain type="success" @click="dialogFormVisible = true"> 添加任务</el-button>
-          <el-dropdown style="padding: 0 10px;" trigger="click">
-            <el-button plain type="primary">
-              <el-icon class="el-icon--left">
-                <arrow-down />
-              </el-icon>
-              发送通知
+  <div class="p-2.5">
+    <el-card class="custom-card-style flex gap-1.5 justify-between" shadow="hover">
+      <Selector ref="selectorRef" :showOperationSearch="true" @update:filteredData="filteredDataChange" />
+    </el-card>
+    <el-card class="my-3" shadow="hover">
+      <div style="position: relative">
+        <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="gridOptions"
+                  v-on="gridEvents">
+          <template #toolbar_buttons>
+            <el-button :icon="Plus" plain type="success" @click="dialogFormVisible = true"> 添加任务</el-button>
+            <el-dropdown style="padding: 0 10px;" trigger="click">
+              <el-button plain type="primary">
+                <el-icon class="el-icon--left">
+                  <arrow-down />
+                </el-icon>
+                发送通知
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="info of dateType" @click="sendMessage(info.value)">{{
+                      info.label
+                    }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除
             </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item v-for="info of dateType" @click="sendMessage(info.value)">{{
-                    info.label
-                  }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-          <el-button :disabled="isDeleteDisabled" :icon="Delete" plain type="danger" @click="removeEvent">删除
-          </el-button>
-        </template>
-        <template #toolbar_tools>
-          <div class="mx-3.5">
-            <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
-          </div>
-        </template>
-        <template #operate="{ row }">
-          <template v-if="hasActiveEditRow(row)">
-            <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
-            <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
           </template>
-          <template v-else>
-            <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
+          <template #toolbar_tools>
+            <div class="mx-3.5">
+              <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+            </div>
           </template>
-        </template>
-        <template #number_edit="{ row }">
-          <vxe-input v-model="row.platformNumber"></vxe-input>
-        </template>
-        <template #name_edit="{ row }">
-          <vxe-input v-model="row.platformName"></vxe-input>
-        </template>
-        <template #country_edit="{ row }">
-          <vxe-input v-model="row.country"></vxe-input>
-        </template>
-        <template #brand_edit="{ row }">
-          <vxe-input v-model="row.brandName"></vxe-input>
-        </template>
-        <template #line_edit="{ row }">
-          <vxe-input v-model="row.line"></vxe-input>
-        </template>
-        <template #ipaddress_edit="{ row }">
-          <vxe-input v-model="row.ipaddress"></vxe-input>
-        </template>
-        <template #company_edit="{ row }">
-          <vxe-input v-model="row.company"></vxe-input>
-        </template>
-        <template #platform_edit="{ row }">
-          <vxe-input v-model="row.platform"></vxe-input>
-        </template>
-        <template #status_default="{ row }">
-          <el-switch
-              v-model="row.status"
-              :active-value="1"
-              :inactive-value="0"
-              inline-prompt
-              @change="handleStatusChange(row)"
-          />
-        </template>
-        <template #operation_edit="{ row }">
-          <vxe-select v-model="row.user" multiple>
-            <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
-                        :value="item.value"></vxe-option>
-          </vxe-select>
-        </template>
-        <template #operater_name_edit="{ row }">
-          <vxe-input v-model="row.operater"></vxe-input>
-        </template>
-        <template #currency_edit="{ row }">
-          <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
-          <el-autocomplete
-              v-model="row.currencyCode"
-              :debounce="100"
-              :fetch-suggestions="querySearch"
-              :trigger-on-focus="false"
-              clearable
-              @select="item => handleRowSelect(item, row)"
-          >
-            <template v-slot="{ item }">
-              <div>{{ item }}</div>
+          <template #operate="{ row }">
+            <template v-if="hasActiveEditRow(row)">
+              <vxe-button content="取消" type="text" @click="clearRowEvent(row)"></vxe-button>
+              <vxe-button content="保存" status="success" type="text" @click="saveRowEvent(row)"></vxe-button>
             </template>
-          </el-autocomplete>
-        </template>
-        <template #currencyCodePlatform_edit="{ row }">
-          <el-autocomplete
-              v-model="row.currencyCodePlatform"
-              :debounce="100"
-              :fetch-suggestions="querySearch"
-              :trigger-on-focus="false"
-              clearable
-              @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
-          >
-            <template v-slot="{ item }">
-              <div>{{ item }}</div>
+            <template v-else>
+              <el-button icon="Edit" type="text" @click="editRowEvent(row)"></el-button>
             </template>
-          </el-autocomplete>
-        </template>
-      </vxe-grid>
-    </div>
-  </el-card>
+          </template>
+          <template #number_edit="{ row }">
+            <vxe-input v-model="row.platformNumber"></vxe-input>
+          </template>
+          <template #name_edit="{ row }">
+            <vxe-input v-model="row.platformName"></vxe-input>
+          </template>
+          <template #country_edit="{ row }">
+            <vxe-input v-model="row.country"></vxe-input>
+          </template>
+          <template #brand_edit="{ row }">
+            <vxe-input v-model="row.brandName"></vxe-input>
+          </template>
+          <template #line_edit="{ row }">
+            <vxe-input v-model="row.line"></vxe-input>
+          </template>
+          <template #ipaddress_edit="{ row }">
+            <vxe-input v-model="row.ipaddress"></vxe-input>
+          </template>
+          <template #company_edit="{ row }">
+            <vxe-input v-model="row.company"></vxe-input>
+          </template>
+          <template #platform_edit="{ row }">
+            <vxe-input v-model="row.platform"></vxe-input>
+          </template>
+          <template #status_default="{ row }">
+            <el-switch
+                v-model="row.status"
+                :active-value="1"
+                :inactive-value="0"
+                inline-prompt
+                size="small"
+                @change="handleStatusChange(row)"
+            />
+          </template>
+          <template #operation_edit="{ row }">
+            <vxe-select v-model="row.user" multiple>
+              <vxe-option v-for="item in operationList" :key="item.value" :label="item.label"
+                          :value="item.value"></vxe-option>
+            </vxe-select>
+          </template>
+          <template #operater_name_edit="{ row }">
+            <vxe-input v-model="row.operater"></vxe-input>
+          </template>
+          <template #currency_edit="{ row }">
+            <!--<vxe-input v-model="row.currencyCode"></vxe-input>-->
+            <el-autocomplete
+                v-model="row.currencyCode"
+                :debounce="100"
+                :fetch-suggestions="querySearch"
+                :trigger-on-focus="false"
+                clearable
+                @select="item => handleRowSelect(item, row)"
+            >
+              <template v-slot="{ item }">
+                <div>{{ item }}</div>
+              </template>
+            </el-autocomplete>
+          </template>
+          <template #currencyCodePlatform_edit="{ row }">
+            <el-autocomplete
+                v-model="row.currencyCodePlatform"
+                :debounce="100"
+                :fetch-suggestions="querySearch"
+                :trigger-on-focus="false"
+                clearable
+                @select="item => handelRowCurrencyCodePlatformSelect(item,row)"
+            >
+              <template v-slot="{ item }">
+                <div>{{ item }}</div>
+              </template>
+            </el-autocomplete>
+          </template>
+        </vxe-grid>
+      </div>
+    </el-card>
+  </div>
   <el-dialog v-model="dialogFormVisible" :before-close="handleClose" style="border-radius: 10px;" title="新建任务"
              width="500">
     <el-form
@@ -798,7 +800,7 @@ onMounted(() => {
 .custom-card-style {
   z-index: 999;
   position: sticky;
-  margin-top: 15px;
+  /* margin-top: 15px; */
   margin-bottom: 5px;
 }
 
@@ -806,12 +808,4 @@ onMounted(() => {
   border: none;
   box-shadow: none;
 }
-
-.el-card:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-  0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-color: #eee;
-  transition: all 0.2s ease-in-out;
-}
-
 </style>

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

@@ -26,6 +26,9 @@ const monthEndDate = ref(null);
 const order_date = ref('');
 const sortOrder = ref('');
 const dateType = ref('');
+const salesOrder = ref(null);
+const salesField = ref(null);
+const sortStatus = ref(true);
 
 const gridOptions = reactive({
   border: 'inner',
@@ -49,7 +52,11 @@ const gridOptions = reactive({
     pageSizes: [10, 20, 30],
   },
   sortConfig: {
-    remote: true
+    remote: true,
+    defaultSort: {
+      field: salesField,
+      order: salesOrder,
+    }
   },
   customConfig: {
     storage: {
@@ -74,12 +81,16 @@ const gridOptions = reactive({
 const saveSortState = () => {
   localStorage.setItem('sortField', order_date.value);
   localStorage.setItem('sortOrder', sortOrder.value);
+  localStorage.setItem('salesOrder', salesOrder.value);
+  localStorage.setItem('salesField', salesField.value);
 };
 
 // 读取排序状态并应用
 const loadSortState = () => {
   order_date.value = localStorage.getItem('sortField') || '';
   sortOrder.value = localStorage.getItem('sortOrder') || '';
+  gridOptions.sortConfig.defaultSort.order = localStorage.getItem('salesOrder') || '';
+  gridOptions.sortConfig.defaultSort.field = localStorage.getItem('salesField') || '';
 };
 
 // 分页
@@ -117,86 +128,87 @@ async function fetchMainData(taskIds, resetPage = false) {
     });
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
+    if (sortStatus.value) {
+      if (response.data && response.data.length > 0) {
+        const dynamicColumns = [];
+        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天平台退货率', '余额'];
 
-    if (response.data && response.data.length > 0) {
-      const dynamicColumns = [];
-      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();
-      response.data.forEach(row => {
-        for (const key in row) {
-          if (regex1.test(key) || middleKeywords.some(kw => key.includes(kw))) {
-            allColumns.add(key);
+        const allColumns = new Set();
+        response.data.forEach(row => {
+          for (const key in row) {
+            if (regex1.test(key) || middleKeywords.some(kw => key.includes(kw))) {
+              allColumns.add(key);
+            }
           }
-        }
-      });
+        });
 
-      const firstColumns = [];
-      const middleColumns = [];
-      const lastColumns = [];
+        const firstColumns = [];
+        const middleColumns = [];
+        const lastColumns = [];
 
-      allColumns.forEach(key => {
-        let isSortable = false;
-        if (key.includes('的销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
-          isSortable = true;
-        }
-        const column = {
-          field: key,
-          title: key, // 使用字段名作为列标题
-          minWidth: key.includes('~') ? 94 : key.includes('截止') ? 94 : regex2.test(key) ? 95 : 76,
-          align: 'center',
-          formatter: formatEmptyCell,
-          sortable: isSortable,
-        };
-        if (middleKeywords.some(kw => key.includes(kw))) {
-          middleColumns.push(column);
-        } else if (regex3.test(key) && !regex2.test(key)) {
-          lastColumns.push(column);
-        } else if (regex1.test(key)) {
-          firstColumns.push(column);
-        }
-      });
-      // 对 firstColumns 中包含‘的销售额’字段的日期进行排序
-      const daySalesColumns = firstColumns.filter(column => column.field.includes('的销售额') && !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;
-      });
+        allColumns.forEach(key => {
+          let isSortable = false;
+          if (key.includes('的销售额') && !key.includes('广告销售额') && !key.includes('增长率')) {
+            isSortable = true;
+          }
+          const column = {
+            field: key,
+            title: key, // 使用字段名作为列标题
+            minWidth: key.includes('~') ? 94 : key.includes('截止') ? 94 : regex2.test(key) ? 95 : /\d{4}-\d{2}的销售额/.test(key) ? 127 : 76,
+            align: 'center',
+            formatter: formatEmptyCell,
+            sortable: isSortable,
+          };
+          if (middleKeywords.some(kw => key.includes(kw))) {
+            middleColumns.push(column);
+          } else if (regex3.test(key) && !regex2.test(key)) {
+            lastColumns.push(column);
+          } else if (regex1.test(key)) {
+            firstColumns.push(column);
+          }
+        });
+        // 对 firstColumns 中包含‘的销售额’字段的日期进行排序
+        const daySalesColumns = firstColumns.filter(column => column.field.includes('的销售额') && !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 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);
-      });
+        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 => !regex4.test(column.field)),
-          ...monthSalesColumns,
-          ...lastColumns.filter(column => !column.field.includes('的销售额')));
+        // 将排序后的列和其他列合并
+        dynamicColumns.push(...daySalesColumns,
+            ...firstColumns.filter(column => !column.field.includes('的销售额')),
+            ...weekSalesColumns,
+            ...middleColumns.filter(column => !regex4.test(column.field)),
+            ...monthSalesColumns,
+            ...lastColumns.filter(column => !column.field.includes('的销售额')));
 
-      tableColumns.value = [
-        ...universal,
-        ...dynamicColumns,
-      ];
+        tableColumns.value = [
+          ...universal,
+          ...dynamicColumns,
+        ];
+      }
     }
     saveSortState();
   } catch (error) {
@@ -207,13 +219,14 @@ async function fetchMainData(taskIds, resetPage = false) {
 }
 
 //排序
-function handleSortChange({ column, order }) {
+function handleSortChange({ field, order }) {
+  salesOrder.value = order;
+  salesField.value = field;
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
-  const sortField = column.field;
-  if (sortField) {
-    const match = sortField.match(/(\d{4}-\d{2}-\d{2})的销售额/);
-    const matchRange = sortField.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
-    const matchMonth = sortField.match(/(\d{4}-\d{2})的销售额/);
+  if (field) {
+    const match = field.match(/(\d{4}-\d{2}-\d{2})的销售额/);
+    const matchRange = field.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
+    const matchMonth = field.match(/(\d{4}-\d{2})的销售额/);
     if (matchRange) {
       order_date.value = matchRange[1];
       dateType.value = 'week';
@@ -225,6 +238,9 @@ function handleSortChange({ column, order }) {
       dateType.value = 'month';
     }
   }
+  gridOptions.sortConfig.defaultSort.order = order;
+  gridOptions.sortConfig.defaultSort.field = field;
+  sortStatus.value = false;
   fetchMainData(props.taskIds, true);
 }
 
@@ -357,10 +373,10 @@ onMounted(() => {
       <div class="font-semibold">{{ row.platformNumber }}</div>
     </template>
     <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
+      <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
     </template>
     <template #brandName_default="{ row }">
-      <el-tag effect="plain" round type="success">{{ row.brandName }}</el-tag>
+      {{ row.brandName }}
     </template>
   </vxe-grid>
 </template>

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

@@ -166,10 +166,10 @@ const headerCellStyle = () => {
       <div class="font-semibold">{{ row.platformNumber }}</div>
     </template>
     <template #platformName_default="{ row }">
-      <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
+      <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
     </template>
     <template #brandName_default="{ row }">
-      <el-tag effect="plain" type="success" round>{{ row.brandName }}</el-tag>
+      {{ row.brandName }}
     </template>
   </vxe-grid>
 </template>

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

@@ -30,7 +30,8 @@ const order_date = ref('');
 const sortOrder = ref('');
 const salesOrder = ref(null);
 const salesField = ref(null);
-const tableKey = ref(Math.random());
+const sortStatus = ref(true);
+
 const gridOptions = reactive({
   border: 'inner',
   height: 900,
@@ -58,6 +59,10 @@ const gridOptions = reactive({
   },
   sortConfig: {
     remote: true,
+    defaultSort: {
+      field: salesField,
+      order: salesOrder,
+    }
   },
   toolbarConfig: {
     custom: true,
@@ -106,12 +111,16 @@ const gridEvents = {
 const saveSortState = () => {
   localStorage.setItem('sortField', order_date.value);
   localStorage.setItem('sortOrder', sortOrder.value);
+  localStorage.setItem('salesOrder', salesOrder.value);
+  localStorage.setItem('salesField', salesField.value);
 };
 
 // 读取排序状态并应用
 const loadSortState = () => {
   order_date.value = localStorage.getItem('sortField') || '';
   sortOrder.value = localStorage.getItem('sortOrder') || '';
+  gridOptions.sortConfig.defaultSort.order = localStorage.getItem('salesOrder') || '';
+  gridOptions.sortConfig.defaultSort.field = localStorage.getItem('salesField') || '';
 };
 
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
@@ -129,71 +138,72 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
     });
     gridOptions[dateType.value].data = resp.data;
     gridOptions.pagerConfig.total = resp.total;
+    if (sortStatus.value) {
+      if (resp.data.length > 0) {
+        const allColumns = new Set();
+        const salesColumns = [];
+        const otherColumns = [];
+        //清空列名
+        dataColumns.value = dataColumns.value.filter(column => !/\d{2}-\d{2}/.test(column.field) && !column.field.includes('余额币种') && !column.field.includes('退货率'));
 
-    if (resp.data.length > 0) {
-      const allColumns = new Set();
-      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('退货率')) {
+              allColumns.add(key);
+            }
+          }
+        });
 
-      resp.data.forEach(row => {
-        for (const key in row) {
-          if (/\d{2}-\d{2}/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
-            allColumns.add(key);
+        //"的销售额"字段可以排序
+        allColumns.forEach(key => {
+          let isSortable = false;
+          if (key.includes('的销售额') && !key.includes('增长率')) {
+            isSortable = true;
           }
-        }
-      });
+          const column = {
+            field: key,
+            title: key,
+            minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 93 : key.includes('截止') ? 90 : 79,
+            align: 'center',
+            formatter: formatEmptyCell,
+            sortable: isSortable,
+          };
+          if (key.includes('的销售额') && !key.includes('增长率')) {
+            salesColumns.push(column);
+          } else {
+            otherColumns.push(column);
+          }
+        });
 
-      //"的销售额"字段可以排序
-      allColumns.forEach(key => {
-        let isSortable = false;
-        if (key.includes('的销售额') && !key.includes('增长率')) {
-          isSortable = true;
+        // 对 salesColumns 按日期排序
+        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);
+          });
+        } else if (dateType.value == 'week') {
+          salesColumns.sort((a, b) => {
+            const dateA = a.field.match(/\d{4}-\d{2}-\d{2}~\d{4}-\d{2}-\d{2}/)[0].split('~')[0];
+            const dateB = b.field.match(/\d{4}-\d{2}-\d{2}~\d{4}-\d{2}-\d{2}/)[0].split('~')[0];
+            console.log(dateA, dateB);
+            return new Date(dateA) - new Date(dateB);
+          });
+        } else if (dateType.value == 'month') {
+          salesColumns.sort((a, b) => {
+            const dateA = a.field.match(/\d{4}-\d{2}/)[0];
+            const dateB = b.field.match(/\d{4}-\d{2}/)[0];
+            return new Date(dateA) - new Date(dateB);
+          });
         }
-        const column = {
-          field: key,
-          title: key,
-          minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 93 : key.includes('截止') ? 90 : 79,
-          align: 'center',
-          formatter: formatEmptyCell,
-          sortable: isSortable,
-        };
-        if (key.includes('的销售额') && !key.includes('增长率')) {
-          salesColumns.push(column);
+        const dynamicColumns = [...salesColumns, ...otherColumns];
+
+        if (dateType.value === dateTypeKey) {
+          dataColumns.value = [...dataColumns.value, ...dynamicColumns];
         } else {
-          otherColumns.push(column);
+          dataColumns.value = [];
+          gridOptions.pagerConfig.total = 0;
         }
-      });
-
-      // 对 salesColumns 按日期排序
-      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);
-        });
-      } else if (dateType.value == 'week') {
-        salesColumns.sort((a, b) => {
-          const dateA = a.field.match(/\d{4}-\d{2}-\d{2}~\d{4}-\d{2}-\d{2}/)[0].split('~')[0];
-          const dateB = b.field.match(/\d{4}-\d{2}-\d{2}~\d{4}-\d{2}-\d{2}/)[0].split('~')[0];
-          console.log(dateA, dateB);
-          return new Date(dateA) - new Date(dateB);
-        });
-      } else if (dateType.value == 'month') {
-        salesColumns.sort((a, b) => {
-          const dateA = a.field.match(/\d{4}-\d{2}/)[0];
-          const dateB = b.field.match(/\d{4}-\d{2}/)[0];
-          return new Date(dateA) - new Date(dateB);
-        });
-      }
-      const dynamicColumns = [...salesColumns, ...otherColumns];
-
-      if (dateType.value === dateTypeKey) {
-        dataColumns.value = [...dataColumns.value, ...dynamicColumns];
-      } else {
-        dataColumns.value = [];
-        gridOptions.pagerConfig.total = 0;
       }
     }
     saveSortState();
@@ -230,14 +240,13 @@ function fetchCurrentData(taskIds, resetPage = false) {
 }
 
 function handleSortChange({ field, order }) {
-  //salesOrder.value = order;
-  //salesField.value = field;
+  salesOrder.value = order;
+  salesField.value = field;
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
-  const sortField = field;
-  if (sortField) {
-    const match = sortField.match(/(\d{4}-\d{2}-\d{2})的销售额/);
-    const matchRange = sortField.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
-    const matchMonth = sortField.match(/(\d{4}-\d{2})的销售额/);
+  if (field) {
+    const match = field.match(/(\d{4}-\d{2}-\d{2})的销售额/);
+    const matchRange = field.match(/(\d{4}-\d{2}-\d{2})~(\d{4}-\d{2}-\d{2})的销售额/);
+    const matchMonth = field.match(/(\d{4}-\d{2})的销售额/);
     if (matchRange) {
       order_date.value = matchRange[1];
     } else if (match) {
@@ -247,8 +256,10 @@ function handleSortChange({ field, order }) {
     }
   }
   saveSortState(); // 保存排序状态
+  gridOptions.sortConfig.defaultSort.order = order;
+  gridOptions.sortConfig.defaultSort.field = field;
+  sortStatus.value = false;
   fetchCurrentData(props.taskIds, true);
-  tableKey.value = Math.random();
 }
 
 const handleImport = () => {
@@ -310,13 +321,13 @@ watch([() => props.taskIds, currentDate], ([newTaskIds, newCurrentDate]) => {
 });
 
 onMounted(() => {
-  loadSortState();
+  //loadSortState();
 });
 </script>
 
 <template>
   <div>
-    <vxe-grid :key="tableKey" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :sort-config="sortConfig"
+    <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle"
               stripe
               v-bind="currentGridOptions" v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>
@@ -326,10 +337,10 @@ onMounted(() => {
         <div class="font-semibold">{{ row.platformNumber }}</div>
       </template>
       <template #platformName_default="{ row }">
-        <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
+        <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
       </template>
       <template #brandName_default="{ row }">
-        <el-tag effect="plain" round type="success">{{ row.brandName }}</el-tag>
+        {{ row.brandName }}
       </template>
     </vxe-grid>
   </div>

src/views/reportManage/dataCenter/utils/columns.ts

@@ -273,7 +273,7 @@ export const universal = [
     field: 'brandName',
     title: '品牌',
     fixed: 'left',
-    minWidth: 89,
+    minWidth: 80,
     align: 'center',
     titlePrefix: { icon: 'vxe-icon-brand' },
     slots:{default: 'brandName_default'}