|
|
@@ -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>
|
xinyan