🐛 perf<报表管理>: 普通展示界面日期选择器

src/views/reportManage/dataCenter/index.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { TabsPaneContext } from 'element-plus'
-import CombinedDisplay from '/src/views/reportManage/dataCenter/combinedDisplay/index.vue'
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import CombinedDisplay from '/src/views/reportManage/dataCenter/combinedDisplay/index.vue';
 // import DataExport from '/src/views/reportManage/dataCenter/normalDisplay/components/DataExport.vue'
-import CompareData from '/src/views/reportManage/dataCenter/normalDisplay/components/CompareData.vue'
-import NormalDisplay from '/src/views/reportManage/dataCenter/normalDisplay/index.vue'
+//import CompareData from '/src/views/reportManage/dataCenter/normalDisplay/components/CompareData.vue'
+import NormalDisplay from '/src/views/reportManage/dataCenter/normalDisplay/index.vue';
 
-const activeName = ref('NormalDisplay')
+const activeName = ref('NormalDisplay');
 const tabsComponents: any = {
   NormalDisplay,
   CombinedDisplay,
   // CompareData,
   // DataExport,
-}
+};
 const panes = [
-  { label: '普通展示', name: 'NormalDisplay' },
-  { label: '合并展示', name: 'CombinedDisplay' },
+  {label: '普通展示', name: 'NormalDisplay'},
+  {label: '合并展示', name: 'CombinedDisplay'},
   // { label: '对比数据', name: 'CompareData' },
   // { label: '数据导出', name: 'DataExport' },
-]
+];
 
 /**
  *
@@ -26,13 +26,13 @@ const panes = [
  * @param event
  */
 function handleTabClick(tab: TabsPaneContext, event: Event) {
-  return 'test name'
+  return 'test name';
 }
 </script>
 
 <template>
   <div class="pr-2">
-    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleTabClick">
+    <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleTabClick">
       <el-tab-pane v-for="pane in panes" :key="pane.name" :label="pane.label" :name="pane.name"></el-tab-pane>
       <component :is="tabsComponents[activeName]"></component>
     </el-tabs>

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

@@ -1,10 +0,0 @@
-<template>
-
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-</style>

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

@@ -1,11 +0,0 @@
-<template>
-
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped>
-
-</style>

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

@@ -224,6 +224,17 @@ watch(dateType, () => {
             unlink-panels
             @change="handleMonthChange"
             class="date-picker"
+            :popper-options="{
+              modifiers: [
+                  {
+                      name: 'flip',
+                      options: {
+                          fallbackPlacements: ['bottom'],
+                          allowedAutoPlacements: ['bottom'],
+                      }
+                  }
+              ]
+  }"
         />
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref, reactive, computed, inject, watch, Ref, onMounted, provide } from 'vue';
 import { useRouter } from 'vue-router';
 import { getDayData, getMonthData, getWeekData } from '/src/views/reportManage/dataCenter/api';
@@ -7,7 +7,7 @@ import dayjs from 'dayjs';
 
 const router = useRouter();
 const dateType = inject<Ref>('dateDimension');
-const currentDate = inject<Ref>('currentDate')
+const currentDate = inject<Ref>('currentDate');
 const props = defineProps({
   taskIds: Object,
 });
@@ -88,19 +88,19 @@ const gridEvents = {
   }
 };
 
-watch(currentDate,(newValue)=>{
+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");
+    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');
   }
-   fetchCurrentData(props.taskIds);
-})
+  fetchCurrentData(props.taskIds);
+});
 
 async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, dateTypeKey) {
   try {
@@ -117,13 +117,13 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
     if (resp.data.length > 0) {
       const firstRow = resp.data[0];
       const dynamicColumns = [];
-      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('退货率'));
       for (const key in firstRow) {
-        if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') ||key.includes('退货率')) {
+        if (/\d{2}-\d{2}的/.test(key) || key.includes('余额币种') || key.includes('退货率')) {
           dynamicColumns.push({
             field: key,
             title: key,
-            minWidth:key.includes('~') ? 120 :/\d{4}-\d{2}的/.test(key)? 100 :113,
+            minWidth: key.includes('~') ? 120 : /\d{4}-\d{2}的/.test(key) ? 100 : 113,
             align: 'center',
           });
         }
@@ -167,7 +167,7 @@ function fetchCurrentData(taskIds) {
 
 watch(() => props.taskIds, (newTaskIds) => {
   fetchCurrentData(newTaskIds);
-}, );
+},);
 
 const handleImport = () => {
   router.push({
@@ -187,30 +187,8 @@ onMounted(() => {
   <div>
     <vxe-grid v-bind="currentGridOptions" v-on="gridEvents">
       <template #toolbar_buttons>
-        <vxe-button status="primary" icon="vxe-icon-add" @click="handleImport" >数据录入</vxe-button>
-        <!--<span v-if="dateType === 'day'" class="text-right">{{dayStartDate}}日数据</span>-->
-        <!--<span v-else-if="dateType === 'week'" class="text-right">{{weekEndDate}}周数据</span>-->
-        <!--<span v-else-if="dateType === 'month'" class="text-right">{{endDate}}月数据</span>-->
+        <vxe-button icon="vxe-icon-add" status="primary" @click="handleImport">数据录入</vxe-button>
       </template>
-      <!--<template #platformNumber_default="{ row }">-->
-      <!--  <div>{{ row.task_info.platformNumber }}</div>-->
-      <!--</template>-->
-      <!--<template #platformName_default="{ row }">-->
-      <!--  <div>{{ row.task_info.platformName }}</div>-->
-      <!--</template>-->
-      <!--<template #user_name_default="{ row }">-->
-      <!--  <div>{{ row.task_info.user_name }}</div>-->
-      <!--</template>-->
-      <!--<template #country_default="{ row }">-->
-      <!--  <div>{{ row.task_info.country }}</div>-->
-      <!--</template>-->
-      <!--<template #brandName_default="{ row }">-->
-      <!--  <div>{{ row.task_info.brandName }}</div>-->
-      <!--</template>-->
-      <!--<template #currencyCode_default="{ row }">-->
-      <!--  <div>{{ row.task_info.currencyCode }}</div>-->
-      <!--</template>-->
-
     </vxe-grid>
   </div>
 </template>
@@ -219,7 +197,4 @@ onMounted(() => {
 .vxe-grid {
   border-radius: 10px;
 }
-.text-right {
-  margin-left: auto; /* 用于在不需要Flex布局时，将元素推到最右边 */
-}
 </style>

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

@@ -403,7 +403,6 @@ const validateNumericFields = (fields: Record<string, any>, fieldsToValidate: st
       }
     }
   }
-
   return true;
 };
 
@@ -681,7 +680,6 @@ function flattenColumns(columns) {
   return result;
 }
 
-
 const filteredDayColumns = computed(() => {
   const flat = flatDayColumns.value;
   return flat.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营', '销售额', '广告销售额', '广告花费', '回款币种'].includes(item.title));