✨ feat<报表管理>: 筛选器缓存

src/views/reportManage/TaskManage/index.vue

@@ -15,7 +15,8 @@ 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 } from '/@/views/reportManage/TaskManage/utils/enum';
+import { dateType ,requiredFields} from '/@/views/reportManage/TaskManage/utils/enum';
+import { filter } from 'xe-utils';
 
 const selectorRef = ref(null);
 const message = ref('');
@@ -90,6 +91,8 @@ interface RowVO {
 const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
 let allTasks = []; // 用于存储所有任务数据
+const operationList = ref([]);//填写人列表
+const filter = ref({});
 
 const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: 'inner',
@@ -221,8 +224,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   data: [],
 });
 
-const operationList = ref([]);
-
 const gridEvents: VxeGridListeners<RowVO> = {
   pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
@@ -233,13 +234,14 @@ const gridEvents: VxeGridListeners<RowVO> = {
   },
 };
 
-async function getTaskList(filters = {}) {
+// 获取任务列表
+async function getTaskList() {
   try {
     gridOptions.loading = true;
     const response = await getTasks({
       page: gridOptions.pagerConfig.currentPage,
       limit: gridOptions.pagerConfig.pageSize,
-      ...filters,
+      ...filter.value,
     });
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
@@ -250,9 +252,10 @@ async function getTaskList(filters = {}) {
   }
 }
 
+// 筛选器变化
 function filteredDataChange(newList) {
+  filter.value = newList.value;
   if (selectorRef.value) {
-    // 重置页码到第一页
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = 1;
     }
@@ -296,6 +299,7 @@ const clearRowEvent = (row: RowVO) => {
   }
 };
 
+// 删除任务
 async function deleteTask() {
   const $grid = xGrid.value;
   if ($grid) {
@@ -342,21 +346,6 @@ const removeEvent = async () => {
   }
 };
 
-const requiredFields = [
-  { field: 'platformNumber', title: '平台编号' },
-  { field: 'platformName', title: '平台名称' },
-  { field: 'country', title: '国家' },
-  { field: 'brandName', title: '品牌' },
-  { field: 'user', title: '填写人' },
-  { field: 'operater', title: '运营' },
-  { field: 'currencyCode', title: '平台币种' },
-  { field: 'currencyCodePlatform', title: '回款/余额币种' },
-  { field: 'line', title: '线路' },
-  { field: 'ipaddress', title: 'IP地址' },
-  { field: 'company', title: '注册公司' },
-  { field: 'platform', title: '平台' },
-];
-
 const validateRow = (row) => {
   for (const { field, title } of requiredFields) {
     if (!row[field] || (Array.isArray(row[field]) && row[field].length === 0)) {
@@ -409,6 +398,7 @@ async function updateRow(row) {
   }
 }
 
+// 更新状态
 async function handleStatusChange(row) {
   const $grid = xGrid.value;
   if ($grid) {
@@ -433,6 +423,7 @@ async function handleStatusChange(row) {
   }
 }
 
+// 更新任务保存按钮
 const saveRowEvent = async (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -595,7 +586,7 @@ async function sendMessage(selectedValue: string) {
 }
 
 onMounted(() => {
-  getTaskList();
+  //getTaskList();
   fetchOperationSelect();
   fetchCurrencyList();
 });

src/views/reportManage/TaskManage/utils/enum.ts

@@ -3,3 +3,18 @@ export const dateType = [
   { value: 'week', label: '周', },
   { value: 'month', label: '月', },
 ]
+
+export const requiredFields = [
+  { field: 'platformNumber', title: '平台编号' },
+  { field: 'platformName', title: '平台名称' },
+  { field: 'country', title: '国家' },
+  { field: 'brandName', title: '品牌' },
+  { field: 'user', title: '填写人' },
+  { field: 'operater', title: '运营' },
+  { field: 'currencyCode', title: '平台币种' },
+  { field: 'currencyCodePlatform', title: '回款/余额币种' },
+  { field: 'line', title: '线路' },
+  { field: 'ipaddress', title: 'IP地址' },
+  { field: 'company', title: '注册公司' },
+  { field: 'platform', title: '平台' },
+];

src/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { computed, inject, provide, Ref, ref, onMounted, watch } from 'vue';
+import { inject, onMounted, ref, Ref, watch } from 'vue';
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import DateRangePicker from '/src/components/DateRangePicker/index.vue';
+import enLocale from 'element-plus/es/locale/lang/en';
 
 dayjs.extend(isoWeek);
-import enLocale from 'element-plus/es/locale/lang/en';
 //import { storeToRefs } from 'pinia';
 //import { usePublicData } from '/src/stores/publicData';
 
@@ -15,7 +15,7 @@ const dateType = inject<Ref>('dateDimension');
 //const publicData = usePublicData();
 //const {dateRange} = storeToRefs(publicData);
 
-const dateRange = ref( [
+const dateRange = ref([
   dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
   dayjs().endOf('day').format('YYYY-MM-DD')
 ]);
@@ -104,13 +104,13 @@ const handleMonthChange = (value) => {
       const start = new Date(monthlyDataTime.value[0]);
       const year = start.getFullYear();
       const month = start.getMonth();
-      startDate.value = `${year}-${String(month + 1).padStart(2, '0')}-01`;
+      startDate.value = `${ year }-${ String(month + 1).padStart(2, '0') }-01`;
       if (monthlyDataTime.value[1]) {
         const end = new Date(monthlyDataTime.value[1]);
         const year = end.getFullYear();
         const month = end.getMonth() + 1;
         const lastDay = new Date(year, month, 0).getDate();
-        endDate.value = `${year}-${String(month).padStart(2, '0')}-${lastDay}`;
+        endDate.value = `${ year }-${ String(month).padStart(2, '0') }-${ lastDay }`;
       }
       changeDate();
     }
@@ -158,7 +158,7 @@ watch(dateType, () => {
 </script>
 
 <template>
-  <div >
+  <div>
     <div class="demo-date-picker">
       <div class="block" style="display: flex; align-items: center;">
         <span class="demonstration" style="margin-right: 8px;">日数据:</span>

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

@@ -11,6 +11,7 @@ const props = defineProps({
   taskIds: Object,
 });
 
+const taskIds = ref(null);
 const tableColumns = ref([]);
 const tableData = ref([]);
 
@@ -52,7 +53,7 @@ const gridOptions = reactive({
   },
   customConfig: {
     storage: {
-      visible:true,
+      visible: true,
     }
   },
   toolbarConfig: {
@@ -205,6 +206,7 @@ async function fetchMainData(taskIds, resetPage = false) {
   }
 }
 
+//排序
 function handleSortChange({ column, order }) {
   sortOrder.value = order === 'asc' ? 'smallfirst' : 'bigfirst';
   const sortField = column.field;
@@ -226,8 +228,38 @@ function handleSortChange({ column, order }) {
   fetchMainData(props.taskIds, true);
 }
 
+// 导出数据接口
+async function handleExport() {
+  try {
+    gridOptions.loading = true;
+    const params = {
+      page: gridOptions.pagerConfig.currentPage,
+      limit: gridOptions.pagerConfig.pageSize,
+      task_ids: props.taskIds,
+      day_start_date: dayStartDate.value,
+      day_end_date: dayEndDate.value,
+      week_start_date: weekStart.value,
+      week_end_date: weekEnd.value,
+      month_start_date: monthStartDate.value,
+      month_end_date: monthEndDate.value,
+    };
+    const response = await exportData(params);
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', '合并数据展示.xlsx');
+    document.body.appendChild(link);
+    link.click();
+    gridOptions.loading = false;
+    ElMessage.success('导出数据成功');
+  } catch (error) {
+    console.error('导出数据失败:', error);
+  }
+}
+
 // 监测 taskIds 变化
 watch(() => props.taskIds, (newTaskIds) => {
+  taskIds.value = newTaskIds;
   fetchMainData(newTaskIds, true);
 });
 
@@ -243,18 +275,14 @@ watch(() => props.dayDate, (newDayDate) => {
     dayStartDate.value = dailyStartDate;
     dayEndDate.value = dailyTime;
   }
-  //clearSorting();
 });
 
-
 watch(() => props.weekDate, (newWeekDate) => {
   if (newWeekDate) {
     const { weekStartDate, weekEndDate } = newWeekDate;
     weekStart.value = weekStartDate;
     weekEnd.value = weekEndDate;
-    fetchMainData(props.taskIds);
   }
-  //clearSorting();
 });
 
 watch(() => props.monthDate, (newMonthDate) => {
@@ -263,9 +291,12 @@ watch(() => props.monthDate, (newMonthDate) => {
     monthStartDate.value = startDate;
     monthEndDate.value = endDate;
   }
-  //clearSorting();
+  if (taskIds.value) {
+    fetchMainData(props.taskIds, true);
+  }
 });
 
+//以下是表格样式
 const cellStyle = ({ columnIndex }) => {
   if (columnIndex < 6) {
     return {
@@ -296,34 +327,6 @@ const cellStyleHandler = ({ column }) => {
   return { fontSize: '12px' };
 };
 
-async function handleExport() {
-  try {
-    gridOptions.loading = true;
-    const params = {
-      page: gridOptions.pagerConfig.currentPage,
-      limit: gridOptions.pagerConfig.pageSize,
-      task_ids: props.taskIds,
-      day_start_date: dayStartDate.value,
-      day_end_date: dayEndDate.value,
-      week_start_date: weekStart.value,
-      week_end_date: weekEnd.value,
-      month_start_date: monthStartDate.value,
-      month_end_date: monthEndDate.value,
-    };
-    const response = await exportData(params);
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', '合并数据展示.xlsx');
-    document.body.appendChild(link);
-    link.click();
-    gridOptions.loading = false;
-    ElMessage.success('导出数据成功');
-  } catch (error) {
-    console.error('导出数据失败:', error);
-  }
-}
-
 function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {
     return '--';
@@ -357,7 +360,7 @@ onMounted(() => {
       <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
     </template>
     <template #brandName_default="{ row }">
-      <el-tag effect="plain" type="success" round>{{ row.brandName }}</el-tag>
+      <el-tag effect="plain" round type="success">{{ row.brandName }}</el-tag>
     </template>
   </vxe-grid>
 </template>

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

@@ -14,6 +14,7 @@ const tableData = ref([]);
 // const taskIds = ref(props.taskIds);
 const monthStartDate = ref(null);
 const monthEndDate = ref(null);
+const taskIdsAvailable = ref(false);
 
 const gridOptions = reactive({
   border: 'inner',
@@ -51,14 +52,6 @@ const gridOptions = reactive({
   data: tableData,
 });
 
-watch(() => props.monthCurrentDate, (newMonthDate) => {
-  if (newMonthDate) {
-    //console.log('newMonthDate', newMonthDate);
-    monthStartDate.value = newMonthDate.startDate;
-    monthEndDate.value = newMonthDate.endDate;
-    fetchMonthlyData(props.taskIds);
-  }
-});
 // 分页
 const gridEvents = {
   pageChange({currentPage, pageSize}) {
@@ -120,8 +113,22 @@ async function fetchMonthlyData(taskIds, resetPage = false) {
   }
 }
 
+watch(() => props.monthCurrentDate, (newMonthDate) => {
+  if (newMonthDate) {
+    monthStartDate.value = newMonthDate.startDate;
+    monthEndDate.value = newMonthDate.endDate;
+    fetchMonthlyData(props.taskIds);
+  }
+});
+
 watch(() => props.taskIds, (newTaskIds) => {
-  fetchMonthlyData(newTaskIds, true);
+  if (newTaskIds) {
+    taskIdsAvailable.value = true;
+  }
+  if (taskIdsAvailable.value && newTaskIds) {
+    fetchMonthlyData(newTaskIds, true);
+    taskIdsAvailable.value = false; // 调用后重置标记
+  }
 });
 
 function formatEmptyCell({cellValue}) {

src/views/reportManage/dataCenter/combinedDisplay/index.vue

@@ -109,10 +109,11 @@ function handleButtonClick(tableName) {
         </div>
         <component :is="currentTable[showTable]"
                    :dayDate="dayDate"
-                   :monthCurrentDate="monthCurrentDate"
+                   :weekDate="weekDate"
                    :monthDate="monthDate"
                    :taskIds="taskIds"
-                   :weekDate="weekDate">
+                   :monthCurrentDate="monthCurrentDate"
+                   >
         </component>
       </el-card>
     </div>

src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue

@@ -6,6 +6,7 @@ import XEUtils from 'xe-utils';
 import MetricsCards from '../MetricsCards/index.vue';
 import emitter from '/src/utils/emitter';
 import { parseQueryParams } from '/src/views/reportManage/dataCenter/utils/tools';
+import { get } from 'lodash-es';
 
 defineOptions({
   name: 'DataTendencyChart',
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const metrics = ref(props.initMetric);
+const dataSet = ref([]);
 const metricsItems: Ref<MetricData[]> = ref([]);
 let chartObj: any;
 const chartRef = ref();
@@ -162,7 +164,8 @@ const queryParams = computed(() => parseQueryParams(props.query));
 provide('statDim', statDim);
 
 onMounted(() => {
-  getMetricsItems();
+  //getDataset()
+  //getMetricsItems();
   addResize();
   setTimeout(() => {
     initLine();
@@ -193,7 +196,7 @@ function initYAxis() {
 
 async function initLine() {
   chartObj = echarts.init(chartRef.value);
-  option.dataset.source = await getDataset();
+  option.dataset.source = dataSet.value;
   // 初始化系列和 y 轴
   option.series = metrics.value.map((metric, index) => ({
     id: index,
@@ -254,20 +257,19 @@ async function initLine() {
 }
 
 async function getDataset() {
+  let resp;
   if (statDim.value === 'week') {
     if (props.fetchLineWeek) {
-      const resp = await props.fetchLineWeek(queryParams.value);
-      return resp.data;
+      resp = await props.fetchLineWeek(queryParams.value);
     }
   } else if (statDim.value === 'month') {
     if (props.fetchLineMonth) {
-      const resp = await props.fetchLineMonth(queryParams.value);
-      return resp.data;
+      resp = await props.fetchLineMonth(queryParams.value);
     }
   } else {
-    const resp = await props.fetchLine(queryParams.value);
-    return resp.data;
+    resp = await props.fetchLine(queryParams.value);
   }
+  dataSet.value = resp.data;
 }
 
 const getMetricsItems = async () => {
@@ -399,6 +401,7 @@ watch(props.query, async () => {
   await getMetricsItems();
   initYAxis();
   chartObj.setOption(option, true);
+  await getDataset()
   await initLine();
   loading.value = false;
 });

src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue

@@ -6,16 +6,17 @@ const props = defineProps({
   showOperationSearch: {
     type: Boolean,
     default: false
-  }
+  },
+  cacheForParent1: Boolean
 });
 
 const emit = defineEmits();
-const platformNumberList = ref('');
-const platformNameList = ref('');
-const operationList = ref('');
-const usersList = ref([]);
-const countryList = ref([]);
-const brandNameList = ref([]);
+const platformNumberList = ref(localStorage.getItem('platformNumberList') || '');
+const platformNameList = ref(localStorage.getItem('platformNameList') || '');
+const operationList = ref(localStorage.getItem('operationList') || '');
+const usersList = ref(JSON.parse(localStorage.getItem('usersList') || '[]'));
+const countryList = ref(JSON.parse(localStorage.getItem('countryList') || '[]'));
+const brandNameList = ref(JSON.parse(localStorage.getItem('brandNameList') || '[]'));
 
 const platformNumberOptions = ref([]);
 const platformNameOptions = ref([]);
@@ -107,15 +108,24 @@ async function emitChange() {
   await fetchFilteredData();
   emit('update:filteredData', filteredData);
   emit('update:updateData', updateData);
+
+  // 保存筛选条件到 localStorage
+  localStorage.setItem('platformNumberList', platformNumberList.value);
+  localStorage.setItem('platformNameList', platformNameList.value);
+  localStorage.setItem('operationList', operationList.value);
+  //localStorage.setItem('usersList', JSON.stringify(usersList.value));
+  localStorage.setItem('countryList', JSON.stringify(countryList.value));
+  localStorage.setItem('brandNameList', JSON.stringify(brandNameList.value));
 }
 
-watch([countryList, brandNameList, usersList], () => {
+watch([platformNumberList, platformNameList, operationList, countryList, brandNameList, usersList], () => {
   emitChange();
 });
 
 onMounted(() => {
   fetchAllTasks();
   fetchUsersSelect();
+  emitChange();
 });
 
 defineExpose({ fetchFilteredData, filteredData, updateData });

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

@@ -8,6 +8,7 @@ import dayjs from 'dayjs';
 const router = useRouter();
 const dateType = inject<Ref>('dateDimension');
 const currentDate = inject<Ref>('currentDate');
+const taskIdsAvailable = ref(false);
 const props = defineProps({
   taskIds: Object,
 });
@@ -39,7 +40,7 @@ const gridOptions = reactive({
   id: 'normalCustomStorage',
   customConfig: {
     storage: {
-      visible:true,
+      visible: true,
     }
   },
   columnConfig: {
@@ -113,23 +114,6 @@ const loadSortState = () => {
   sortOrder.value = localStorage.getItem('sortOrder') || '';
 };
 
-
-watch(currentDate, (newValue) => {
-  if (dateType.value === 'day') {
-    dayStartDate.value = dayjs(newValue.dailyStartDate).format('YYYY-MM-DD');
-    dayEndDate.value = dayjs(newValue.dailyTime).format('YYYY-MM-DD');
-  } else if (dateType.value === 'week') {
-    weekStartDate.value = dayjs(newValue.weekStartDate).format('YYYY-MM-DD');
-    weekEndDate.value = dayjs(newValue.weekEndDate).format('YYYY-MM-DD');
-  } else if (dateType.value === 'month') {
-    monthStartDate.value = dayjs(newValue.startDate).format('YYYY-MM-DD');
-    monthEndDate.value = dayjs(newValue.endDate).format('YYYY-MM-DD');
-  }
-  sortOrder.value = '';
-  order_date.value = '';
-  fetchCurrentData(props.taskIds);
-});
-
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
   try {
     gridOptions.loading = true;
@@ -245,7 +229,6 @@ function fetchCurrentData(taskIds, resetPage = false) {
   }
 }
 
-
 function handleSortChange({ field, order }) {
   //salesOrder.value = order;
   //salesField.value = field;
@@ -268,16 +251,6 @@ function handleSortChange({ field, order }) {
   tableKey.value = Math.random();
 }
 
-watch(() => props.taskIds, (newTaskIds) => {
-  fetchCurrentData(newTaskIds, true); // 添加第二个参数表示重置页码
-});
-
-// 组件挂载时读取排序状态
-onMounted(() => {
-  //loadSortState();
-  //fetchCurrentData(props.taskIds);
-});
-
 const handleImport = () => {
   const url = router.resolve({
     name: 'TableDataEntry',
@@ -313,15 +286,38 @@ const headerCellStyle = () => {
     fontSize: '12px',
   };
 };
+
+watch([() => props.taskIds, currentDate], ([newTaskIds, newCurrentDate]) => {
+  if (dateType.value === 'day') {
+    dayStartDate.value = dayjs(newCurrentDate.dailyStartDate).format('YYYY-MM-DD');
+    dayEndDate.value = dayjs(newCurrentDate.dailyTime).format('YYYY-MM-DD');
+  } else if (dateType.value === 'week') {
+    weekStartDate.value = dayjs(newCurrentDate.weekStartDate).format('YYYY-MM-DD');
+    weekEndDate.value = dayjs(newCurrentDate.weekEndDate).format('YYYY-MM-DD');
+  } else if (dateType.value === 'month') {
+    monthStartDate.value = dayjs(newCurrentDate.startDate).format('YYYY-MM-DD');
+    monthEndDate.value = dayjs(newCurrentDate.endDate).format('YYYY-MM-DD');
+  }
+  sortOrder.value = '';
+  order_date.value = '';
+  if (newTaskIds) {
+    taskIdsAvailable.value = true;
+  }
+  if (taskIdsAvailable.value && newTaskIds) {
+    fetchCurrentData(newTaskIds, true);
+    taskIdsAvailable.value = false; // 调用后重置标记
+  }
+});
+
 onMounted(() => {
   loadSortState();
-  //fetchCurrentData(props.taskIds);
 });
 </script>
 
 <template>
   <div>
-    <vxe-grid :key="tableKey" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :sort-config="sortConfig" stripe
+    <vxe-grid :key="tableKey" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :sort-config="sortConfig"
+              stripe
               v-bind="currentGridOptions" v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>
         <el-button icon="plus" target="_blank" type="primary" @click="handleImport">数据录入</el-button>
@@ -333,7 +329,7 @@ onMounted(() => {
         <div class="font-semibold" style="color: #0097f8">{{ row.platformName }}</div>
       </template>
       <template #brandName_default="{ row }">
-        <el-tag effect="plain" type="success" round>{{ row.brandName }}</el-tag>
+        <el-tag effect="plain" round type="success">{{ row.brandName }}</el-tag>
       </template>
     </vxe-grid>
   </div>

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

@@ -317,7 +317,6 @@ const handelEditRow = (row: RowVO) => {
   }
 };
 
-
 function updateDataChange(newId) {
   if (selectorRef.value) {
     if (gridOptions.pagerConfig) {
@@ -425,7 +424,6 @@ const validateNumericFields = (fields: Record<string, any>, fieldsToValidate: st
 };
 
 //表单规则
-
 function createDayDataRules() {
   if (dateType === 'day') {
     rules.ad_sales_original[0].required = false;

src/views/reportManage/dataCenter/normalDisplay/index.vue

@@ -40,7 +40,6 @@ const handelDateChange = (date) => {
 
 emitter.on('DateTendency-dateChange', (value: string) => {
   dateDimension.value = value;
-  // console.log('dateDimension', dateDimension.value);
 });
 
 provide('currentDate', currentDate);
@@ -49,7 +48,6 @@ provide('currentDate', currentDate);
 function updateDataChange(newId) {
   if (selectorRef.value) {
     taskIds.value = newId.value;
-    // console.log('newId', newId.value);
   }
 }