🐛 feat<数据中心>: 表格动态列修改

src/views/reportManage/TaskManage/index.vue

@@ -172,7 +172,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     },
     {
       field: 'currencyCode',
-      title: '回款币种',
+      title: '平台币种',
       editRender: {},
       slots: { edit: 'currency_edit' },
       align: 'center',
@@ -337,7 +337,7 @@ const requiredFields = [
   { field: 'country', title: '国家' },
   { field: 'brandName', title: '品牌' },
   { field: 'user', title: '运营' },
-  { field: 'currencyCode', title: '回款币种' },
+  { field: 'currencyCode', title: '平台币种' },
   { field: 'currencyCodePlatform', title: '回款/余额币种' },
   { field: 'line', title: '线路' },
   { field: 'ipaddress', title: 'IP地址' },
@@ -726,7 +726,7 @@ onMounted(() => {
                      :value="item.value"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="回款币种" prop="currency">
+      <el-form-item label="平台币种" prop="currency">
         <el-autocomplete
             v-model="taskRuleForm.currency"
             :debounce="100"

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

@@ -32,6 +32,7 @@ const gridOptions = reactive({
   align: null,
   round: true,
   loading: false,
+  id: 'mainDataCustomStorage',
   columnConfig: {
     resizable: true,
     isCurrent: true,
@@ -49,6 +50,9 @@ const gridOptions = reactive({
   sortConfig: {
     remote: true
   },
+  customConfig: {
+    storage: true
+  },
   toolbarConfig: {
     custom: true,
     zoom: {
@@ -140,7 +144,7 @@ async function fetchMainData(taskIds, resetPage = false) {
         const column = {
           field: key,
           title: key, // 使用字段名作为列标题
-          minWidth: key.includes('~') ? 90 : key.includes('截止') ? 90 : regex2.test(key) ? 91 : 79,
+          minWidth: key.includes('~') ? 90 : key.includes('截止') ? 90 : regex2.test(key) ? 91 : 72,
           align: 'center',
           formatter: formatEmptyCell,
           sortable: isSortable,
@@ -153,10 +157,9 @@ async function fetchMainData(taskIds, resetPage = false) {
           firstColumns.push(column);
         }
       });
-
       // 对 firstColumns 中包含‘的销售额’字段的日期进行排序
-      const daysalesColumns = firstColumns.filter(column => column.field.includes('的销售额'));
-      daysalesColumns.sort((a, b) => {
+      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) {
@@ -165,7 +168,7 @@ async function fetchMainData(taskIds, resetPage = false) {
         return 0;
       });
 
-      const weekSalesColumns = middleColumns.filter(column => column.field.includes('的销售额')&&!column.field.includes('增长率'));
+      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];
@@ -180,9 +183,12 @@ async function fetchMainData(taskIds, resetPage = false) {
       });
 
       // 将排序后的列和其他列合并
-      dynamicColumns.push(...daysalesColumns, ...firstColumns.filter(column => !column.field.includes('的销售额')),
-          ...weekSalesColumns,...middleColumns.filter(column => !column.field.includes('的销售额')),
-          ...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,
@@ -266,8 +272,8 @@ const cellStyle = ({ columnIndex }) => {
     };
   }
   return {
-    fontSize: '11px',
-    fontWeight: '600',
+    fontSize: '12px',
+    fontWeight: '500',
   };
 };
 
@@ -322,8 +328,7 @@ function formatEmptyCell({ cellValue }) {
   }
   if (typeof cellValue === 'number') {
     const formatter = new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
+      minimumFractionDigits: 0,
     });
     return formatter.format(cellValue);
   }

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

@@ -21,6 +21,10 @@ const gridOptions = reactive({
   align: null,
   round: true,
   loading: false,
+  id: 'monthlyCustomStorage',
+  customConfig: {
+    storage: true
+  },
   columnConfig: {
     resizable: true,
   },

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

@@ -28,24 +28,16 @@ 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,
+  id: 'normalCustomStorage',
+  customConfig: {
+    storage: true
+  },
   columnConfig: {
     resizable: true,
   },
@@ -105,6 +97,19 @@ const gridEvents = {
   }
 };
 
+// 保存排序状态到 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') || '';
+};
+
+
 watch(currentDate, (newValue) => {
   if (dateType.value === 'day') {
     dayStartDate.value = dayjs(newValue.dailyStartDate).format('YYYY-MM-DD');
@@ -124,12 +129,12 @@ watch(currentDate, (newValue) => {
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
   try {
     gridOptions.loading = true;
-    loadSortState()
+    loadSortState();
     const resp = await apiFunc({
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
-      [`${dateTypeKey}_start_date`]: startDate.value,
-      [`${dateTypeKey}_end_date`]: endDate.value,
+      [`${ dateTypeKey }_start_date`]: startDate.value,
+      [`${ dateTypeKey }_end_date`]: endDate.value,
       task_ids: taskIds,
       sort: sortOrder.value,
       order_date: order_date.value,
@@ -142,11 +147,11 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       const salesColumns = [];
       const otherColumns = [];
 
-      dataColumns.value = dataColumns.value.filter(column => !/\d{2}-\d{2}的/.test(column.field) && !column.field.includes('余额币种') && !column.field.includes('退货率'));
+      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('退货率')) {
+          if (/\d{2}-\d{2}/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
             allColumns.add(key);
           }
         }
@@ -155,18 +160,18 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       //"的销售额"字段可以排序
       allColumns.forEach(key => {
         let isSortable = false;
-        if (key.includes('的销售额')) {
+        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) ? 88 : 82,
+          minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : key.includes('截止')? 90 :79,
           align: 'center',
           formatter: formatEmptyCell,
           sortable: isSortable,
         };
-        if (key.includes('的销售额')) {
+        if (key.includes('的销售额')&& !key.includes('增长率')) {
           salesColumns.push(column);
         } else {
           otherColumns.push(column);
@@ -174,13 +179,27 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       });
 
       // 对 salesColumns 按日期排序
-      if (dateType.value=='day'){
+      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) {
@@ -223,7 +242,14 @@ function fetchCurrentData(taskIds, resetPage = false) {
   }
 }
 
+const salesOrder = ref(null);
+const salesField = ref(null);
+
 function handleSortChange({ column, order }) {
+  salesOrder.value = order;
+  salesField.value = column.field;
+  //console.log('salesOrder', salesOrder.value);
+  //console.log('salesField', salesField.value);
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
   if (sortField) {
@@ -235,7 +261,7 @@ 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(); // 保存排序状态
@@ -248,7 +274,7 @@ watch(() => props.taskIds, (newTaskIds) => {
 
 // 组件挂载时读取排序状态
 onMounted(() => {
-  loadSortState();
+  //loadSortState();
   //fetchCurrentData(props.taskIds);
 });
 
@@ -268,8 +294,7 @@ function formatEmptyCell({ cellValue }) {
   }
   if (typeof cellValue === 'number') {
     const formatter = new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
+      minimumFractionDigits: 0,
     });
     return formatter.format(cellValue);
   }
@@ -288,7 +313,10 @@ const headerCellStyle = () => {
     fontSize: '12px',
   };
 };
-
+onMounted(() => {
+  loadSortState();
+  //fetchCurrentData(props.taskIds);
+});
 </script>
 
 <template>

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

@@ -696,17 +696,17 @@ function flattenColumns(columns) {
 
 const filteredDayColumns = computed(() => {
   const flat = flatDayColumns.value;
-  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '回款币种'].includes(item.title));
+  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '平台币种'].includes(item.title));
 });
 
 const filteredWeekColumns = computed(() => {
   const flat = flatWeekColumns.value;
-  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '当月累计销售额', '回款币种', '回款/余额币种'].includes(item.title));
+  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '当月累计销售额', '平台币种', '回款/余额币种'].includes(item.title));
 });
 
 const filteredMonthColumns = computed(() => {
   const flat = flatMonthColumns.value;
-  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '回款币种'].includes(item.title));
+  return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '平台币种'].includes(item.title));
 });
 
 function handleClose(done: Function) {

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

@@ -6,7 +6,7 @@ export const dayColumns = ref([
   { field: 'country', title: '国家', align: 'center', width: 90, },
   { field: 'brandName', title: '品牌', align: 'center', width: 90, },
   { field: 'user_name', title: '运营', align: 'center', width: 100 },
-  { field: 'currencyCode', title: '回款币种', align: 'center', width: 100 },
+  { field: 'currencyCode', title: '平台币种', align: 'center', width: 100 },
   {
     title: '销售额', align: 'center', children: [
       { field: 'sales', title: '销售额', align: 'center', minWidth: 120 },
@@ -56,7 +56,7 @@ export const weekColumns = ref([
   { field: 'country', title: '国家', fixed: 'left', width: 80, align: 'center' },
   { field: 'brandName', title: '品牌', fixed: 'left', width: 60 },
   { field: 'user_name', title: '运营', fixed: 'left', width: 80, align: 'center' },
-  { field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80, align: 'center' },
+  { field: 'currencyCode', title: '平台币种', fixed: 'left', width: 80, align: 'center' },
 
   {
     title: '销售额', align: 'center', children: [
@@ -190,7 +190,7 @@ export const monthColumns = ref([
   { field: 'country', title: '国家', fixed: 'left', width: 80, align: 'center' },
   { field: 'brandName', title: '品牌', fixed: 'left', width: 60 },
   { field: 'user_name', title: '运营', fixed: 'left', width: 80, align: 'center' },
-  { field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80, align: 'center' },
+  { field: 'currencyCode', title: '平台币种', fixed: 'left', width: 80, align: 'center' },
 
   {
     title: '销售额', align: 'center', children: [
@@ -279,7 +279,7 @@ export const universal = [
   },
   {
     field: 'currencyCode',
-    title: '回款币种',
+    title: '平台币种',
     fixed: 'left',
     minWidth: 75,
     align: 'center',