✨ fix<数据中心>: 添加表格汇总行

src/views/reportManage/dataCenter/api.ts

@@ -84,6 +84,31 @@ export function getMonthData(query) {
   });
 }
 
+//普通展示表格数据汇总
+export function getDayTotalData(query) {
+  return request({
+    url: `/api/report_manage/data-day/list/sum/`,
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getWeekTotalData(query) {
+  return request({
+    url: `/api/report_manage/data-week/list/sum/`,
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getMonthTotalData(query) {
+  return request({
+    url: `/api/report_manage/data-month/list/sum/`,
+    method: 'GET',
+    params: query,
+  });
+}
+
 
 //日数据插入
 export function postCreateDayData(body) {

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, onMounted, ref, Ref, watch } from 'vue';
+import { inject, onBeforeMount, onMounted, ref, Ref, watch } from 'vue';
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import DateRangePicker from '/src/components/DateRangePicker/index.vue';
@@ -152,9 +152,9 @@ onMounted(() => {
   setDefaultDate();
 });
 
-watch(dateType, () => {
-  setDefaultDate();
-});
+//watch(dateType, () => {
+//  setDefaultDate();
+//});
 </script>
 
 <template>

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

@@ -28,7 +28,7 @@ const sortOrder = ref('');
 const dateType = ref('');
 const salesOrder = ref(null);
 const salesField = ref(null);
-const sortStatus = ref(true);
+const sortStatus = ref(false);
 
 const gridOptions = reactive({
   border: 'inner',
@@ -99,6 +99,7 @@ const gridEvents = {
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
+      sortStatus.value = false;
       fetchMainData(props.taskIds);
     }
   },
@@ -128,7 +129,7 @@ async function fetchMainData(taskIds, resetPage = false) {
     });
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
-    if (sortStatus.value) {
+    if (!sortStatus.value) {
       if (response.data && response.data.length > 0) {
         const dynamicColumns = [];
         const regex1 = /\d{2}-\d{2}/;
@@ -240,7 +241,7 @@ function handleSortChange({ field, order }) {
   }
   gridOptions.sortConfig.defaultSort.order = order;
   gridOptions.sortConfig.defaultSort.field = field;
-  sortStatus.value = false;
+  sortStatus.value = true;
   fetchMainData(props.taskIds, true);
 }
 
@@ -273,19 +274,19 @@ async function handleExport() {
   }
 }
 
+const taskIdsAvailable = ref(false);
+
 // 监测 taskIds 变化
 watch(() => props.taskIds, (newTaskIds) => {
-  taskIds.value = newTaskIds;
+  sortStatus.value = false;
+
+  taskIdsAvailable.value = true;
   fetchMainData(newTaskIds, true);
 });
 
-function clearSorting() {
-  sortOrder.value = '';
-  order_date.value = '';
-  dateType.value = '';
-}
-
 watch(() => props.dayDate, (newDayDate) => {
+  sortStatus.value = false;
+
   if (newDayDate) {
     const { dailyStartDate, dailyTime } = newDayDate;
     dayStartDate.value = dailyStartDate;
@@ -294,6 +295,8 @@ watch(() => props.dayDate, (newDayDate) => {
 });
 
 watch(() => props.weekDate, (newWeekDate) => {
+  sortStatus.value = false;
+
   if (newWeekDate) {
     const { weekStartDate, weekEndDate } = newWeekDate;
     weekStart.value = weekStartDate;
@@ -302,14 +305,14 @@ watch(() => props.weekDate, (newWeekDate) => {
 });
 
 watch(() => props.monthDate, (newMonthDate) => {
+  sortStatus.value = false;
+
   if (newMonthDate) {
     const { startDate, endDate } = newMonthDate;
     monthStartDate.value = startDate;
     monthEndDate.value = endDate;
   }
-  if (taskIds.value) {
-    fetchMainData(props.taskIds, true);
-  }
+  fetchMainData(props.taskIds, true);
 });
 
 //以下是表格样式

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

@@ -1,19 +1,9 @@
 <script lang="ts" setup>
 import { monthCompareMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
-import {
-  getCardDayData,
-  getCardMonthData,
-  getCardWeekData,
-  getLineForDay,
-  getLineForMonth,
-  getLineForWeek,
-  getLineData,
-} from '/src/views/reportManage/dataCenter/api';
+import { getLineData, getLineForMonth, getLineForWeek, } from '/src/views/reportManage/dataCenter/api';
 import chartDateTendency
   from '/src/views/reportManage/dataCenter/combinedDisplay/components/chartDateTendency/index.vue';
-import DateTendency from '/src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue';
-import { computed, provide, ref, watch } from 'vue';
-import DateRangePicker from '/src/components/DateRangePicker/index.vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 import MonthlyDatePicker from '/src/views/reportManage/dataCenter/combinedDisplay/components/monthDatePicker/index.vue';
 import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
 import mainData from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue';
@@ -31,13 +21,6 @@ const monthDate = ref(null);
 
 const monthCurrentDate = ref({});
 
-const processingDateChange = (date) => {
-  // currentDate.value = date;
-  dayDate.value = date.dayDate;
-  weekDate.value = date.weekDate;
-  monthDate.value = date.monthDate;
-};
-
 const monthQueryParams = ref({
   taskIds,
   monthCurrentDate,
@@ -50,8 +33,8 @@ const currentTable: any = {
   monthlyComparativeData,
 };
 const panes = [
-  {label: '主数据', name: 'mainData'},
-  {label: '月度对比数据', name: 'monthlyComparativeData'},
+  { label: '主数据', name: 'mainData' },
+  { label: '月度对比数据', name: 'monthlyComparativeData' },
 ];
 
 function updateDataChange(newId) {
@@ -64,6 +47,12 @@ const handelDateChange = (date) => {
   monthCurrentDate.value = date;
 };
 
+const processingDateChange = (date) => {
+  dayDate.value = date.dayDate;
+  weekDate.value = date.weekDate;
+  monthDate.value = date.monthDate;
+};
+
 function handleButtonClick(tableName) {
   showTable.value = tableName;
 }
@@ -108,6 +97,7 @@ function handleButtonClick(tableName) {
           </el-button>
         </div>
         <component :is="currentTable[showTable]"
+                   ref="mainDataComponent"
                    :dayDate="dayDate"
                    :weekDate="weekDate"
                    :monthDate="monthDate"

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

@@ -117,7 +117,7 @@ async function emitChange() {
   localStorage.setItem('brandNameList', JSON.stringify(brandNameList.value));
 }
 
-watch([operationList, countryList, brandNameList, usersList], () => {
+watch([countryList, brandNameList, usersList], () => {
   emitChange();
 });
 

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

@@ -1,7 +1,13 @@
 <script lang="ts" setup>
 import { computed, defineProps, inject, onMounted, reactive, ref, Ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { getDayData, getMonthData, getWeekData } from '/src/views/reportManage/dataCenter/api';
+import {
+  getDayData,
+  getDayTotalData,
+  getMonthData, getMonthTotalData,
+  getWeekData,
+  getWeekTotalData
+} from '/src/views/reportManage/dataCenter/api';
 import { dayDataColumns, monthDataColumns, weekDataColumns } from '../../utils/columns';
 import dayjs from 'dayjs';
 
@@ -122,6 +128,44 @@ const loadSortState = () => {
   gridOptions.sortConfig.defaultSort.order = localStorage.getItem('salesOrder') || '';
   gridOptions.sortConfig.defaultSort.field = localStorage.getItem('salesField') || '';
 };
+const totalRow = ref({});
+
+async function fetchTotalData(taskIds, apiFunc,  startDate, endDate, dateTypeKey) {
+  try {
+    const resp = await apiFunc({
+      data_start_date: startDate.value,
+      data_end_date: endDate.value,
+      task_ids: taskIds,
+    });
+    totalRow.value = resp.data[0] || {};
+    totalRow.value.platformNumber = '汇总';
+  } catch (error) {
+    console.error('Error fetching total data:', error);
+  }
+}
+
+function fetchDayTotal(taskIds) {
+  fetchTotalData(taskIds, getDayTotalData, dayStartDate, dayEndDate,'day');
+}
+
+function fetchWeekTotal(taskIds) {
+  fetchTotalData(taskIds, getWeekTotalData, weekStartDate, weekEndDate,'week');
+}
+
+function fetchMonthTotal(taskIds) {
+  fetchTotalData(taskIds, getMonthTotalData, monthStartDate, monthEndDate,'month');
+}
+
+function fetchCurrentTotalData(taskIds) {
+  if (dateType.value === 'day') {
+    fetchDayTotal(taskIds);
+  } else if (dateType.value === 'week') {
+    fetchWeekTotal(taskIds);
+  }else if (dateType.value === 'month') {
+    fetchMonthTotal(taskIds);
+  }
+}
+
 
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
   try {
@@ -136,7 +180,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
       sort: sortOrder.value,
       order_date: order_date.value,
     });
-    gridOptions[dateType.value].data = resp.data;
+    gridOptions[dateType.value].data = [totalRow.value, ...resp.data];
     gridOptions.pagerConfig.total = resp.total;
     if (sortStatus.value) {
       if (resp.data.length > 0) {
@@ -163,7 +207,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
           const column = {
             field: key,
             title: key,
-            minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 93 : key.includes('截止') ? 90 : 79,
+            minWidth: key.includes('~') ? 95 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 93 : key.includes('截止') ? 90 : /\d{4}-\d{2}的销售额/.test(key) ? 127 : 79,
             align: 'center',
             formatter: formatEmptyCell,
             sortable: isSortable,
@@ -186,7 +230,6 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
           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') {
@@ -299,6 +342,8 @@ const headerCellStyle = () => {
 };
 
 watch([() => props.taskIds, currentDate], ([newTaskIds, newCurrentDate]) => {
+  sortStatus.value = true;
+
   if (dateType.value === 'day') {
     dayStartDate.value = dayjs(newCurrentDate.dailyStartDate).format('YYYY-MM-DD');
     dayEndDate.value = dayjs(newCurrentDate.dailyTime).format('YYYY-MM-DD');
@@ -315,6 +360,7 @@ watch([() => props.taskIds, currentDate], ([newTaskIds, newCurrentDate]) => {
     taskIdsAvailable.value = true;
   }
   if (taskIdsAvailable.value && newTaskIds) {
+    fetchCurrentTotalData(newTaskIds);
     fetchCurrentData(newTaskIds, true);
     taskIdsAvailable.value = false; // 调用后重置标记
   }

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

@@ -449,8 +449,8 @@ async function createDayData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchDayTaskData();
-        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
       }
     } catch (e) {
       await VXETable.modal.message({ content: '创建失败', status: 'error' });
@@ -491,8 +491,8 @@ async function createWeekData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchWeekTaskData();
-        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
       }
     } catch (e) {
       await VXETable.modal.message({ content: '创建失败', status: 'error' });
@@ -522,8 +522,8 @@ async function createMonthData() {
       if (resp.code === 2000) {
         dayFormVisible.value = false;
         await fetchMonthTaskData();
-        await VXETable.modal.message({ content: '创建成功', status: 'success' });
         taskDataFormRef.value.resetFields();
+        await VXETable.modal.message({ content: '创建成功', status: 'success' });
       }
     } catch (e) {
       await VXETable.modal.message({ content: '创建失败', status: 'error' });