🎨 perf<数据中心>: 表格展示修改

src/views/reportManage/TaskManage/index.vue

@@ -64,6 +64,8 @@ interface RowVO {
 
 const xGrid = ref<VxeGridInstance<RowVO>>();
 const originalDataMap = new Map();
+let allTasks = []; // 用于存储所有任务数据
+
 
 const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: 'inner',
@@ -95,7 +97,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     pageSizes: [10, 20, 30],
   },
   editConfig: {
-    trigger: 'click',
+    trigger: 'manual',
     mode: 'row',
     showStatus: true,
   },
@@ -133,7 +135,6 @@ const operationList = ref([]);
 
 const gridEvents: VxeGridListeners<RowVO> = {
   pageChange({currentPage, pageSize}) {
-    // console.log(currentPage, pageSize)
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
@@ -142,6 +143,19 @@ const gridEvents: VxeGridListeners<RowVO> = {
   },
 };
 
+async function fetchAllTasks(page = 1, limit = 100) {
+  try {
+    const response = await getTasks({ page, limit });
+    allTasks = allTasks.concat(response.data);
+
+    if (response.data.length === limit) {
+      await fetchAllTasks(page + 1, limit);
+    }
+  } catch (error) {
+    console.error('Error fetching all tasks:', error);
+  }
+}
+
 async function getTaskList(filters = {}) {
   try {
     gridOptions.loading = true;
@@ -152,6 +166,9 @@ async function getTaskList(filters = {}) {
     });
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
+
+    allTasks = []; // 重置 allTasks
+    await fetchAllTasks(); // 获取所有任务数据
   } catch (error) {
     console.error('Error fetching task data:', error);
   } finally {
@@ -159,13 +176,16 @@ async function getTaskList(filters = {}) {
   }
 }
 
+
 const selectorRef = ref(null);
 
 function filteredDataChange(newList) {
-  // console.log('newList:', newList.value);
   if (selectorRef.value) {
+    // 重置页码到第一页
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
     getTaskList(newList.value);
-    // gridOptions.data = newList.value;
   }
 }
 
@@ -324,54 +344,36 @@ async function createTask() {
   };
   try {
     const resp = await postCreateTask(body);
+    if (resp.code === 2000) {
+      dialogFormVisible.value = false;
+      await getTaskList(); // 重新获取任务列表
+      ElMessage({message: '创建成功', type: 'success',})
+    }
   } catch (error) {
-    console.error('error:', error);
-    await VXETable.modal.message({content: '创建失败，请重试', status: 'error'});
+    ElMessage({message: '创建失败', type: 'error',})
   }
 }
 
-const submitEvent = async () => {
-  // 创建一个新的行对象，用于保存表单数据
-  const newRow: RowVO = {
-    platformNumber: taskRuleForm.number,
-    platformName: taskRuleForm.name,
-    country: taskRuleForm.country,
-    brandName: taskRuleForm.brand,
-    user_name: taskRuleForm.operation,
-    currencyCode: taskRuleForm.currency,
-    currencyCodePlatform: taskRuleForm.currencyCodePlatform,
-    child_user_number: '',
-  };
-  // 将新行添加到表格数据中
-  gridOptions.data.push(newRow);
-  try {
-    await createTask();
-    dialogFormVisible.value = false;
-    //获取更新表格数据
-    await getTaskList();
-    gridOptions.loading = true;
-    setTimeout(() => {
-      gridOptions.loading = false;
-    }, 300);
-  } catch (error) {
-    console.error('Failed to save task:', error);
-  }
-};
-
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
-      await submitEvent();
-      await nextTick();
+      const isDuplicate = allTasks.some(task => String(task.platformNumber) === String(taskRuleForm.number));
+      if (isDuplicate) {
+        await ElMessage({message: '平台编号已存在，请重新输入', type: 'warning',})
+        return;
+      }
+      await createTask();
       taskRuleFormRef.value.resetFields();
-      await VXETable.modal.message({content: '创建成功', status: 'success'});
-    } else {
-      // console.log('error submit!', fields);
     }
   });
 };
 
+function handleClose(done: Function) {
+  if (taskRuleFormRef.value) taskRuleFormRef.value.resetFields();
+  done();
+}
+
 async function fetchOperationSelect() {
   try {
     const resp = await getOperationSelect();
@@ -440,7 +442,7 @@ onMounted(() => {
       </vxe-grid>
     </div>
   </el-card>
-  <el-dialog v-model="dialogFormVisible" title="新建任务" width="500" style="border-radius: 10px;">
+  <el-dialog v-model="dialogFormVisible" title="新建任务" width="500" style="border-radius: 10px;" :before-close="handleClose">
     <el-form
         ref="taskRuleFormRef"
         :model="taskRuleForm"

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref, watch, defineProps, inject, Ref } from 'vue';
 import { exportData, getMainData } from '/@/views/reportManage/dataCenter/api';
-import dayjs from 'dayjs';
+import { universal } from '../../../utils/columns';
 import { ElMessage } from 'element-plus';
 
 const props = defineProps({
@@ -66,7 +66,10 @@ const gridEvents = {
 };
 
 // 获取数据
-async function fetchMainData(taskIds) {
+async function fetchMainData(taskIds, resetPage = false) {
+  if (resetPage) {
+    gridOptions.pagerConfig.currentPage = 1; // 重置页码为第一页
+  }
   try {
     gridOptions.loading = true;
     const response = await getMainData({
@@ -127,25 +130,39 @@ watch(() => props.monthDate, (newMonthDate) => {
 });
 
 const fetchColumnNames = (data) => {
-  const firstItem = data[0];
-  if (firstItem) {
-    const excludedColumns = ['任务ID', '可录人数', '_X_ROW_KEY'];
-    tableColumns.value = Object.keys(firstItem)
-        .filter(key => !excludedColumns.includes(key))
-        .map((key, index) => ({
-          field: key,
-          title: key, // 使用字段名作为列标题
-          width: key.includes('~') ? 102 : index < 5 ? 75 : /\d{4}-\d{2}-\d{2}/.test(key) ? 94 : 82,
-          fixed: index < 6 ? 'left' : undefined,
-          align: 'center',
-          formatter: formatEmptyCell,
-        }));
+  if (data && data.length > 0) {
+    const dynamicColumns = [];
+    const allColumns = new Set();
+    // 遍历所有数据行以获取所有列名
+    data.forEach(row => {
+      Object.keys(row).forEach(key => {
+        if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
+          allColumns.add(key);
+        }
+      });
+    });
+    allColumns.forEach(key => {
+      dynamicColumns.push({
+        field: key,
+        title: key, // 使用字段名作为列标题
+        minWidth: key.includes('~') ? 90 : /\d{4}-\d{2}-\d{2}/.test(key) ? 81 : 70,
+        align: 'center',
+        formatter: formatEmptyCell,
+      })
+    });
+    tableColumns.value = [
+      ...universal,
+      ...dynamicColumns
+    ];
+  }else {
+    tableData.value = [];
+    gridOptions.pagerConfig.total = 0;
   }
 };
 
 const cellStyle = () => {
   return {
-    fontSize: '13px',
+    fontSize: '12px',
     fontWeight: '500',
   };
 };
@@ -169,7 +186,7 @@ const cellStyleHandler = ({column}) => {
 
 // 加载数据
 async function loadData() {
-  const data = await fetchMainData(props.taskIds);
+  const data = await fetchMainData(props.taskIds,true);
   fetchColumnNames(data);
   tableData.value = data;
   gridOptions.columns = tableColumns.value;
@@ -239,5 +256,6 @@ function formatEmptyCell({cellValue}) {
 :deep(.vxe-table--header .vxe-header--row th .vxe-cell,
 .vxe-table--body .vxe-body--row td .vxe-cell) {
   padding-right: 0 !important;
+  padding-left: 3px !important;
 }
 </style>

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

@@ -48,7 +48,7 @@ const gridOptions = reactive({
 
 watch(() => props.monthCurrentDate, (newMonthDate) => {
   if (newMonthDate) {
-    console.log('newMonthDate', newMonthDate);
+    //console.log('newMonthDate', newMonthDate);
     monthStartDate.value = newMonthDate.startDate;
     monthEndDate.value = newMonthDate.endDate;
     fetchMonthlyData(props.taskIds);
@@ -60,12 +60,15 @@ const gridEvents = {
     if (gridOptions.pagerConfig) {
       gridOptions.pagerConfig.currentPage = currentPage;
       gridOptions.pagerConfig.pageSize = pageSize;
-      fetchMonthlyData();
+      fetchMonthlyData(props.taskIds);
     }
   },
 };
 
-async function fetchMonthlyData(taskIds) {
+async function fetchMonthlyData(taskIds, resetPage = false) {
+  if (resetPage) {
+    gridOptions.pagerConfig.currentPage = 1; // 重置页码为第一页
+  }
   try {
     gridOptions.loading = true;
     const response = await getMonthlyData({
@@ -78,19 +81,24 @@ async function fetchMonthlyData(taskIds) {
     if (response.data && response.data.length > 0) {
       tableData.value = response.data;
       gridOptions.pagerConfig.total = response.total;
-      const firstRow = response.data[0];
-      const dynamicColumns = [];
-      for (const key in firstRow) {
-        if (key.includes('的销售额') || key.includes('的周销售额')) {
-          dynamicColumns.push({
-            field: key,
-            title: key,
-            minWidth: 97,
-            align: 'center',
-            formatter: formatEmptyCell,
-          });
-        }
-      }
+
+      const allColumns = new Set();
+      response.data.forEach(row => {
+        Object.keys(row).forEach(key => {
+          if (key.includes('的销售额') || key.includes('的周销售额')) {
+            allColumns.add(key);
+          }
+        });
+      });
+
+      const dynamicColumns = Array.from(allColumns).map(key => ({
+        field: key,
+        title: key,
+        minWidth: 97,
+        align: 'center',
+        formatter: formatEmptyCell,
+      }));
+
       tableColumns.value = [
         ...universal,
         ...dynamicColumns
@@ -108,7 +116,7 @@ async function fetchMonthlyData(taskIds) {
 }
 
 watch(() => props.taskIds, (newTaskIds) => {
-  fetchMonthlyData(newTaskIds);
+  fetchMonthlyData(newTaskIds,true);
 });
 
 function formatEmptyCell({ cellValue }) {

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

@@ -115,21 +115,26 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
     gridOptions[dateType.value].data = resp.data;
     gridOptions.pagerConfig.total = resp.total;
     if (resp.data.length > 0) {
-      const firstRow = resp.data[0];
+      const allColumns = new Set();
       const dynamicColumns = [];
       dataColumns.value = dataColumns.value.filter(column => !/\d{2}-\d{2}的/.test(column.field) && !column.field.includes('余额币种') && !column.field.includes('退货率'));
-      for (const key in firstRow) {
-        if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
-          dynamicColumns.push({
-            field: key,
-            title: key,
-            minWidth: key.includes('~') ? 101 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : 78,
-            align: 'center',
-            formatter: formatEmptyCell,
-          });
+      resp.data.forEach(row => {
+        for (const key in row) {
+          if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
+            allColumns.add(key);
+          }
         }
-      }
-      //console.log(dynamicColumns);
+      });
+      // 将所有可能的列添加到 dynamicColumns
+      allColumns.forEach(key => {
+        dynamicColumns.push({
+          field: key,
+          title: key,
+          minWidth: key.includes('~') ? 101 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : 78,
+          align: 'center',
+          formatter: formatEmptyCell,
+        });
+      });
       if (dateType.value === dateTypeKey) {
         dataColumns.value = [...dataColumns.value, ...dynamicColumns];
       } else {
@@ -156,7 +161,10 @@ async function fetchMonthData(taskIds) {
   await fetchData(taskIds, getMonthData, monthStartDate, monthEndDate, monthDataColumns, 'month');
 }
 
-function fetchCurrentData(taskIds) {
+function fetchCurrentData(taskIds,resetPage = false) {
+  if (resetPage) {
+    gridOptions.pagerConfig.currentPage = 1; // 重置页码为第一页
+  }
   if (dateType.value === 'day') {
     fetchDayData(taskIds);
   } else if (dateType.value === 'week') {
@@ -167,8 +175,8 @@ function fetchCurrentData(taskIds) {
 }
 
 watch(() => props.taskIds, (newTaskIds) => {
-  fetchCurrentData(newTaskIds);
-},);
+  fetchCurrentData(newTaskIds, true); // 添加第二个参数表示重置页码
+});
 
 const handleImport = () => {
   router.push({
@@ -185,7 +193,7 @@ function formatEmptyCell({ cellValue }) {
 
 const cellStyle =() => {
   return {
-    fontSize: '13px',
+    fontSize: '12px',
     fontWeight: '500',
   };
 }
@@ -226,7 +234,7 @@ onMounted(() => {
 }
 :deep(.vxe-table--header .vxe-header--row th .vxe-cell,
 .vxe-table--body .vxe-body--row td .vxe-cell) {
-  /* padding-left: 0 !important; */
+  padding-left: 5px !important;
   padding-right: 0 !important;
 }
 </style>

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

@@ -304,6 +304,9 @@ const handelEditRow = (row: RowVO) => {
 
 function updateDataChange(newId) {
   if (selectorRef.value) {
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = 1;
+    }
     taskIds.value = newId.value;
     fetchCurrentTaskData();
   }
@@ -407,12 +410,10 @@ const validateNumericFields = (fields: Record<string, any>, fieldsToValidate: st
 
 //创建日数据
 async function createDayData() {
-  //if (!validateNumericFields(taskDataForm)) return;
   const body = {
     sales_original: taskDataForm.sales_original,
     ad_sales_original: taskDataForm.ad_sales_original,
     ad_cost_original: taskDataForm.ad_cost_original,
-    // enter_datetime: dailySalesTime.value,
     data_datetime: dailySalesTime.value,
     task: taskId,
   };
@@ -436,7 +437,6 @@ async function createDayData() {
 
 //创建周数据
 async function createWeekData() {
-  //if (!validateNumericFields(taskDataForm)) return;
   const body = {
     sales_original: taskDataForm.sales_original,
     ad_sales_original: taskDataForm.ad_sales_original,
@@ -479,7 +479,6 @@ async function createWeekData() {
 
 //创建月数据
 async function createMonthData() {
-  //if (!validateNumericFields(taskDataForm)) return;
   const body = {
     sales_original: taskDataForm.sales_original,
     ad_sales_original: taskDataForm.ad_sales_original,
@@ -694,6 +693,24 @@ const filteredMonthColumns = computed(() => {
   return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '回款币种'].includes(item.title));
 });
 
+function handleClose(done: Function) {
+  if (taskDataFormRef.value) taskDataFormRef.value.resetFields();
+  done();
+}
+
+const cellStyle =() => {
+  return {
+    fontSize: '13px',
+    fontWeight: '500',
+  };
+}
+
+const headerCellStyle =() => {
+  return {
+    fontSize: '13px',
+  };
+}
+
 onMounted(() => {
   setDefaultDate();
   fetchCurrentTaskData();
@@ -764,7 +781,7 @@ onMounted(() => {
   </div>
   <el-card class="mx-8">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents">
+      <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
             <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>
@@ -773,7 +790,7 @@ onMounted(() => {
           <template v-else>
             <el-button :disabled="!row.id" link size="small" type="success" @click="handelEditRow(row)">修改</el-button>
           </template>
-          <el-button :disabled="row.id" link size="small" type="primary" @click="editEvent(row)">创建</el-button>
+          <el-button v-if="!hasActiveEditRow(row)" :disabled="row.id" link size="small" type="primary" @click="editEvent(row)">创建</el-button>
         </template>
         <template #sales_original_edit="{ row }">
           <vxe-input v-model="row.sales_original"></vxe-input>
@@ -823,7 +840,7 @@ onMounted(() => {
       </vxe-grid>
     </div>
   </el-card>
-  <el-dialog v-model="dayFormVisible" style="border-radius: 10px;" title="创建任务" width="600">
+  <el-dialog v-model="dayFormVisible" style="border-radius: 10px;" title="创建任务" width="600" :before-close="handleClose">
     <el-form
         ref="taskDataFormRef"
         :model="taskDataForm"