🐛 feat<数据中心-合并展示,任务列表,数据录入>: 修改日期选择器,任务列表创建表单修改

合并展示:日期选择器修改
任务列表:录入人员修改,删除保存按钮
数据录入:日数据创建校验,增加列

src/views/reportManage/TaskManage/index.vue

@@ -30,7 +30,7 @@ const taskRuleForm = reactive({
   name: '',
   country: '',
   brand: '',
-  operation: '',
+  operation: [],
   currency: '',
 });
 const resetForm = (formEl: FormInstance | undefined) => {
@@ -47,9 +47,8 @@ const rules = reactive<FormRules>({
 });
 
 //表格
-let page = 1;
-let limit = 10;
-
+// let page = 1;
+// let limit = 10;
 
 interface RowVO {
   platformNumber: string;
@@ -68,7 +67,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: false,
   keepSource: true,
   showOverflow: true,
-  height: 1000,
+  height: 850,
   loading: false,
   round: true,
   toolbarConfig: {
@@ -101,7 +100,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   },
   columns: [
     {type: 'checkbox', width: 50},
-    // {type: 'seq', title: 'ID', width: 120},
     {
       field: 'platformNumber',
       title: '平台编号',
@@ -119,14 +117,14 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     {field: 'brandName', title: '品牌', editRender: {}, slots: {edit: 'brand_edit'}},
     {field: 'user_name', title: '运营', editRender: {}, slots: {edit: 'operation_edit'}},
     {field: 'currencyCode', title: '汇款币种', editRender: {}, slots: {edit: 'currency_edit'}},
-    {field: 'child_user_number', title: '录入人员数', editRender: {}, slots: {edit: 'quantity_edit'}},
+    {field: 'child_user_number', title: '录入人员数', slots: {edit: 'quantity_edit'}},
     {title: '操作', width: 300, slots: {default: 'operate'}},
   ],
   data: [],
 });
 
 const operationList = ref([]);
-const quantityList = ref([]);
+// const quantityList = ref([]);
 
 // 分页
 const gridEvents: VxeGridListeners<RowVO> = {
@@ -288,18 +286,6 @@ const saveRowEvent = async (row: RowVO) => {
   }
 };
 
-// 保存全部数据
-const saveEvent = async () => {
-  const $grid = xGrid.value;
-  if ($grid) {
-    const {insertRecords, removeRecords, updateRecords} = $grid.getRecordset();
-    await VXETable.modal.message({
-      content: `新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`,
-      status: 'success',
-    });
-  }
-};
-
 async function createTask() {
   const body = {
     country: taskRuleForm.country,
@@ -307,7 +293,7 @@ async function createTask() {
     platformName: taskRuleForm.name,
     brandName: taskRuleForm.brand,
     currencyCode: taskRuleForm.currency,
-    user: [taskRuleForm.operation],
+    user: taskRuleForm.operation,
   };
   try {
     const resp = await postCreateTask(body);
@@ -371,7 +357,6 @@ async function fetchOperationSelect() {
   }
 }
 
-
 onMounted(() => {
   getTaskList();
   fetchOperationSelect();
@@ -388,7 +373,7 @@ onMounted(() => {
         <template #toolbar_buttons>
           <vxe-button icon="vxe-icon-add" plain @click="dialogFormVisible = true"> 添加任务</vxe-button>
           <vxe-button icon="vxe-icon-delete" @click="removeEvent">删除</vxe-button>
-          <vxe-button icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>
+          <!--<vxe-button icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>-->
         </template>
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
@@ -399,7 +384,6 @@ onMounted(() => {
             <vxe-button content="编辑" @click="editRowEvent(row)"></vxe-button>
           </template>
         </template>
-
         <template #number_edit="{ row }">
           <vxe-input v-model="row.platformNumber"></vxe-input>
         </template>
@@ -422,10 +406,6 @@ onMounted(() => {
           <vxe-input v-model="row.currencyCode"></vxe-input>
         </template>
         <template #quantity_edit="{ row }">
-          <vxe-select v-model="row.child_user_number" transfer>
-            <vxe-option v-for="item in quantityList" :key="item.value" :value="item.value"
-                        :label="item.label"></vxe-option>
-          </vxe-select>
         </template>
       </vxe-grid>
     </div>
@@ -433,13 +413,13 @@ onMounted(() => {
   <el-dialog v-model="dialogFormVisible" title="新建任务" width="500">
     <el-form
         ref="taskRuleFormRef"
-        style="max-width: 600px"
         :model="taskRuleForm"
         :rules="rules"
-        label-width="auto"
-        class="demo-taskRuleForm"
         :size="formSize"
-        status-icon>
+        class="demo-taskRuleForm"
+        label-width="auto"
+        status-icon
+        style="max-width: 600px">
       <el-form-item label="平台编号" prop="number">
         <el-input v-model="taskRuleForm.number" placeholder="请输入平台编号" />
       </el-form-item>
@@ -452,10 +432,10 @@ onMounted(() => {
       <el-form-item label="品牌" prop="brand">
         <el-input v-model="taskRuleForm.brand" placeholder="请输入品牌" />
       </el-form-item>
-      <el-form-item label="运营" prop="operation">
-        <el-select v-model="taskRuleForm.operation" placeholder="请选择运营">
-          <el-option v-for="item in operationList" :key="item.value" :value="item.value"
-                     :label="item.label"></el-option>
+      <el-form-item label="录入人员" prop="operation">
+        <el-select v-model="taskRuleForm.operation" multiple collapse-tags collapse-tags-tooltip placeholder="请选择录入人员">
+          <el-option v-for="item in operationList" :key="item.value" :label="item.label"
+                     :value="item.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="回款币种" prop="currency">

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

@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import { computed, inject, provide, Ref, ref, onMounted, watch } from 'vue';
+import dayjs from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import DateRangePicker from '/src/components/DateRangePicker/index.vue';
+
+dayjs.extend(isoWeek);
+import enLocale from 'element-plus/es/locale/lang/en';
+import { storeToRefs } from 'pinia';
+import { usePublicData } from '/src/stores/publicData';
+
+const dateType = inject<Ref>('dateDimension');
+
+//公共数据
+const publicData = usePublicData();
+const {dateRange} = storeToRefs(publicData);
+
+const startWeek = ref(null);
+const endWeek = ref(null);
+const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD'));
+const weekEndDate = ref<string | null>(dayjs().locale('en').endOf('week').format('YYYY-MM-DD'));
+
+const currentYear = new Date().getFullYear();
+const currentMonth = new Date().getMonth();
+const monthlyDataTime = ref([
+  new Date(currentYear, 0, 1),
+  new Date(new Date().getFullYear(), currentMonth, 0),
+]);
+
+const startDate = ref(null);
+const endDate = ref(null);
+
+const emit = defineEmits(['changeDate']);
+const changeDate = async () => {
+  emit('changeDate', {
+    dayDate: {
+      dailyStartDate: dateRange.value[0],
+      dailyTime: dateRange.value[1],
+    },
+    weekDate: {
+      weekStartDate: weekStartDate.value,
+      weekEndDate: weekEndDate.value,
+    },
+    monthDate: {
+      startDate,
+      endDate,
+    },
+  });
+};
+
+const monthShortCuts = [
+  {
+    text: '本月',
+    value: [new Date(), new Date()],
+  },
+  {
+    text: '今年',
+    value: () => {
+      const end = new Date();
+      const start = new Date(new Date().getFullYear(), 0);
+      return [start, end];
+    },
+  },
+  {
+    text: '上六个月',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 6);
+      return [start, end];
+    },
+  },
+];
+
+// 处理开始周变化的函数
+const handleStartWeekChange = (value) => {
+  if (value) {
+    weekStartDate.value = dayjs(value).locale('en').startOf('week').format('YYYY-MM-DD');
+  }
+  checkAndEmitDateChange();
+};
+
+const handleEndWeekChange = (value) => {
+  if (value) {
+    weekEndDate.value = dayjs(value).locale('en').endOf('week').format('YYYY-MM-DD');
+  }
+  checkAndEmitDateChange();
+};
+
+const checkAndEmitDateChange = () => {
+  if (startWeek.value && endWeek.value) {
+    changeDate();
+  }
+};
+
+const handleMonthChange = (value) => {
+  if (value) {
+    if (monthlyDataTime.value[0]) {
+      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`;
+      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}`;
+      }
+      changeDate();
+    }
+  }
+};
+
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now();
+};
+
+const weekDisabledDate = (time: Date) => {
+  if (startWeek.value) {
+    const startDate = dayjs(startWeek.value).toDate();
+    const currentDate = new Date();
+    // 禁用结束日期不是在当前日期之前或不是在开始日期之后的日期
+    return time.getTime() >= currentDate.getTime() || time.getTime() <= startDate.getTime();
+  }
+  return time.getTime() >= new Date().getTime();
+};
+
+function setDefaultDate() {
+  dateRange.value = [
+    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
+    dayjs().endOf('day').format('YYYY-MM-DD')
+  ];
+  startWeek.value = dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD');
+  endWeek.value = dayjs().locale('en').endOf('week').format('YYYY-MM-DD');
+  const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1);
+  const endOfMonth = new Date();
+  monthlyDataTime.value = [startOfMonth, endOfMonth];
+  const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');
+  const formattedEndDate = dayjs(endOfMonth).format('YYYY-MM-DD');
+  startDate.value = formattedStartDate;
+  endDate.value = formattedEndDate;
+  changeDate();
+}
+
+onMounted(() => {
+  setDefaultDate();
+});
+
+watch(dateType, () => {
+  setDefaultDate();
+});
+</script>
+
+<template>
+  <div>
+    <div class="demo-date-picker">
+      <div class="block" style="display: flex; align-items: center;">
+        <span class="demonstration" style="margin-right: 8px;">日数据:</span>
+        <DateRangePicker v-model="dateRange" style="flex-grow: 1;" @change="changeDate"></DateRangePicker>
+      </div>
+    </div>
+    <div class="demo-date-picker">
+      <div class="block">
+        <span class="demonstration">周数据:</span>
+        <el-config-provider :locale="enLocale">
+          <el-date-picker
+              v-model="startWeek"
+              :clearable="false"
+              :disabled-date="disabledDate"
+              format="YYYY 第 WW 周"
+              placeholder="选择开始周"
+              type="week"
+              @change="handleStartWeekChange"
+          />
+        </el-config-provider>
+      </div>
+      <div class="block">
+        <span class="demonstration">至</span>
+        <el-config-provider :locale="enLocale">
+          <el-date-picker
+              v-model="endWeek"
+              :clearable="false"
+              :disabled="!startWeek"
+              :disabled-date="weekDisabledDate"
+              format="YYYY 第 WW 周"
+              placeholder="选择结束周"
+              type="week"
+              @change="handleEndWeekChange"
+          />
+        </el-config-provider>
+      </div>
+    </div>
+    <div class="demo-date-picker">
+      <div class="block">
+        <span class="demonstration">月数据:</span>
+        <el-date-picker
+            v-model="monthlyDataTime"
+            :disabled-date="disabledDate"
+            :shortcuts="monthShortCuts"
+            end-placeholder="结束月"
+            range-separator="To"
+            start-placeholder="开始月"
+            type="monthrange"
+            unlink-panels
+            @change="handleMonthChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  padding: 0;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin: 10px;
+}
+</style>

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

@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch, defineProps } from 'vue';
+import { onMounted, reactive, ref, watch, defineProps, inject, Ref } from 'vue';
 import { getMainData } from '/@/views/reportManage/dataCenter/api';
+import dayjs from 'dayjs';
 
 const props = defineProps({
+  dayDate:Object,
+  weekDate:Object,
+  monthDate:Object,
   taskIds: Object,
-  dayDate: Array,
-  weekDate: Array,
-  monthDate: Array,
 });
+const dateType = inject<Ref>('dateDimension');
+const currentDate = inject<Ref>('currentDate')
 
 const tableColumns = ref([]);
 const tableData = ref([]);
 
 const dayStartDate = ref(null);
 const dayEndDate = ref(null);
-const weekStartDate = ref(null);
+const weekDate = ref(null);
 const monthStartDate = ref(null);
 
 const gridOptions = reactive({
@@ -51,6 +54,12 @@ const gridEvents = {
   },
 };
 
+watch(currentDate,(newValue)=>{
+  if (newValue){
+    console.log(newValue);
+  }
+})
+
 // 获取数据
 async function fetchMainData(taskIds) {
   try {
@@ -61,7 +70,7 @@ async function fetchMainData(taskIds) {
       task_ids: taskIds,
       day_start_date: dayStartDate.value,
       day_end_date: dayEndDate.value,
-      week_start_date: weekStartDate.value,
+      week_start_date: weekDate.value,
       month_start_date: monthStartDate.value,
     });
     gridOptions.data = response.data;
@@ -82,24 +91,26 @@ watch(() => props.taskIds, (newTaskIds) => {
 // 监测 dayDate 变化
 watch(() => props.dayDate, (newDayDate) => {
   if (newDayDate) {
-    const [startDate, endDate] = newDayDate;
-    dayStartDate.value = startDate;
-    dayEndDate.value = endDate;
+    // console.log('newDayDate',newDayDate);
+    const {dailyStartDate, dailyTime}= newDayDate;
+    dayStartDate.value = dailyStartDate;
+    dayEndDate.value = dailyTime;
     loadData();
   }
 });
 // 监测 weekDate 变化
 watch(() => props.weekDate, (newWeekDate) => {
   if (newWeekDate) {
-    const [startDate] = newWeekDate;
-    weekStartDate.value = startDate;
+    // console.log('newWeekDate',newWeekDate);
+    const {weekStartDate} = newWeekDate;
+    weekDate.value= weekStartDate;
     loadData();
   }
 });
 // 监测 monthDate 变化
 watch(() => props.monthDate, (newMonthDate) => {
   if (newMonthDate) {
-    const [startDate] = newMonthDate;
+    const {startDate} = newMonthDate;
     monthStartDate.value = startDate;
     loadData();
   }
@@ -115,7 +126,7 @@ async function fetchColumnNames(data) {
         .map((key, index) => ({
           field: key,
           title: key, // 使用字段名作为列标题
-          width: index < 5 ? 100 : 150,
+          width: key.includes('~') ? 120 : (index < 5 ? 90 : 87),
           fixed: index < 5 ? 'left' : undefined // 前五列固定
         }));
   }

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

@@ -1,24 +1,39 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { dayMetricsEnum, monthMetricsEnum, weekMetricsEnum } from '/src/views/reportManage/dataCenter/utils/enum';
-import { getCardDayData, getCardMonthData, getCardWeekData, getLineForDay, getLineForMonth, getLineForWeek, getLineData, } 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 {
+  getCardDayData,
+  getCardMonthData,
+  getCardWeekData,
+  getLineForDay,
+  getLineForMonth,
+  getLineForWeek,
+  getLineData,
+} 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 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'
-import monthlyComparativeData from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/monthlyComparativeData.vue'
+import DateRangePicker from '/src/components/DateRangePicker/index.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';
+import monthlyComparativeData
+  from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/monthlyComparativeData.vue';
 import emitter from '/@/utils/emitter';
+import DataPicker from '/@/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue';
+// 筛选查询
+const selectorRef = ref(null);
+const taskIds = ref({});
 
 //日周月
-const dateDimension = ref('day')
+const dateDimension = ref('day');
+provide('dateDimension', dateDimension);
 
-const dayDate = ref(getLastSevenDays());
-const weekDate = ref(getLastSevenDays());
-const monthDate = ref(getLastSevenDays());
-const monthCurrentDate = ref({});
-const actualDate = computed(() => {
+const dayDate = ref(null);
+const weekDate = ref(null);
+const monthDate = ref(null);
+
+const currentDate = computed(() => {
   if (dateDimension.value === 'day') {
     return dayDate.value;
   } else if (dateDimension.value === 'week') {
@@ -28,35 +43,40 @@ const actualDate = computed(() => {
   }
 });
 
-watch(actualDate, (val) => {
-  console.log('actualDate', val);
+watch(currentDate, (val) => {
+  // console.log('currentDate', val);
 });
-// 筛选查询
-const selectorRef = ref(null);
-const taskIds = ref({});
 
+const monthCurrentDate = ref({});
+
+const processingDateChange = (date) => {
+  // currentDate.value = date;
+  dayDate.value = date.dayDate;
+  weekDate.value = date.weekDate;
+  monthDate.value = date.monthDate;
+};
+
+provide('currentDate', currentDate);
 const mainQueryParams = ref({
-  actualDate,
+  currentDate,
   taskIds,
-})
+});
+
 const monthQueryParams = ref({
   taskIds,
   monthCurrentDate,
-})
-
-
-
+});
 
 // 表格
 const showTable = ref('mainData'); // 初始显示表格
 const currentTable: any = {
   mainData,
   monthlyComparativeData,
-}
+};
 const panes = [
-  { label: '主数据', name: 'mainData' },
-  { label: '月度对比数据', name: 'monthlyComparativeData' },
-]
+  {label: '主数据', name: 'mainData'},
+  {label: '月度对比数据', name: 'monthlyComparativeData'},
+];
 
 function updateDataChange(newId) {
   if (selectorRef.value) {
@@ -64,20 +84,20 @@ function updateDataChange(newId) {
   }
 }
 
-const handelDateChange = (date)=>{
-  monthCurrentDate.value = date
-}
+const handelDateChange = (date) => {
+  monthCurrentDate.value = date;
+};
 
 function handleButtonClick(tableName) {
   showTable.value = tableName;
 }
 
-function getLastSevenDays() {
-  const endDate = new Date();
-  const startDate = new Date();
-  startDate.setDate(endDate.getDate() - 6);
-  return [startDate.toISOString().substring(0, 10), endDate.toISOString().substring(0, 10)];
-}
+// function getLastSevenDays() {
+//   const endDate = new Date();
+//   const startDate = new Date();
+//   startDate.setDate(endDate.getDate() - 6);
+//   return [startDate.toISOString().substring(0, 10), endDate.toISOString().substring(0, 10)];
+// }
 
 emitter.on('DateTendency-dateChange', (value: string) => {
   dateDimension.value = value;
@@ -97,67 +117,55 @@ const currentMetricEnum = computed(() => {
 
 <template>
   <div>
-    <el-card>
-      <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2" style="display: flex; align-items: center;">
-        <Selector ref="selectorRef" @update:updateData="updateDataChange"/>
-        <div v-if="showTable === 'monthlyComparativeData'">
-          <MonthlyDatePicker @monthDateChange="handelDateChange"></MonthlyDatePicker>
-        </div>
-      </div>
-      <div  v-if="showTable === 'mainData'" class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
-      <div class="block" style="display: flex; align-items: center;">
-        <span class="demonstration" style="margin-right: 8px;">日数据:</span>
-        <DateRangePicker v-model="dayDate" style="flex-grow: 1;"></DateRangePicker>
-      </div>
-      <div class="block" style="display: flex; align-items: center;">
-        <span class="demonstration" style="margin-right: 8px;">周数据:</span>
-        <DateRangePicker v-model="weekDate" style="flex-grow: 1;"></DateRangePicker>
+    <el-card class="mb-3">
+      <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2"
+           style="display: flex; align-items: center;">
+        <Selector ref="selectorRef" @update:updateData="updateDataChange" />
+        <MonthlyDatePicker v-if="showTable === 'monthlyComparativeData'" @monthDateChange="handelDateChange"></MonthlyDatePicker>
       </div>
-      <div class="block" style="display: flex; align-items: center;">
-        <span class="demonstration" style="margin-right: 8px;">月数据:</span>
-        <DateRangePicker v-model="monthDate" style="flex-grow: 1;"></DateRangePicker>
+      <div v-if="showTable === 'mainData'">
+        <DataPicker style="display: flex; align-items: center;" @changeDate="processingDateChange" />
       </div>
-    </div>
     </el-card>
     <el-card v-if="showTable === 'mainData'" class="mb-1.5">
       <DateTendency
-          :metricEnum="currentMetricEnum"
-          :query="mainQueryParams"
+          :fetch-line-month="getLineForMonth"
+          :fetch-line-week="getLineForWeek"
           :fetchCard="getCardDayData"
-          :fetchCardWeek="getCardWeekData"
           :fetchCardMonth="getCardMonthData"
+          :fetchCardWeek="getCardWeekData"
           :fetchLine="getLineForDay"
-          :fetch-line-week="getLineForWeek"
-          :fetch-line-month="getLineForMonth"
+          :metricEnum="currentMetricEnum"
+          :query="mainQueryParams"
       >
       </DateTendency>
     </el-card>
     <el-card v-if="showTable === 'monthlyComparativeData'" class="mb-1.5">
       <chartDateTendency
+          :fetch-line-month="getLineForMonth"
+          :fetch-line-week="getLineForWeek"
+          :fetchLine="getLineData"
           :metricEnum="currentMetricEnum"
           :query="monthQueryParams"
-          :fetchLine="getLineData"
-          :fetch-line-week="getLineForWeek"
-          :fetch-line-month="getLineForMonth"
       >
       </chartDateTendency>
     </el-card>
-    <el-card>
+    <el-card class="mt-3">
       <div class="custom-button my">
         <el-button
             v-for="pane in panes"
             :key="pane.name"
-            @click="handleButtonClick(pane.name)"
-            :type="showTable === pane.name ? 'primary' : 'default'">
+            :type="showTable === pane.name ? 'primary' : 'default'"
+            @click="handleButtonClick(pane.name)">
           {{ pane.label }}
         </el-button>
       </div>
       <component :is="currentTable[showTable]"
-                 :taskIds="taskIds"
                  :dayDate="dayDate"
-                 :weekDate="weekDate"
+                 :monthCurrentDate="monthCurrentDate"
                  :monthDate="monthDate"
-                 :monthCurrentDate="monthCurrentDate">
+                 :taskIds="taskIds"
+                 :weekDate="weekDate">
       </component>
     </el-card>
   </div>
@@ -169,18 +177,21 @@ const currentMetricEnum = computed(() => {
   position: sticky;
   top: 0;
 }
+
 .demonstration {
   color: var(--el-text-color-secondary);
   font-size: 14px;
   margin: 10px;
 }
+
 .custom-button {
   z-index: 1000;
   position: absolute;
   color: #3a83f7 !important;
 }
+
 .my {
-  margin-top: 0.8rem;
-  margin-bottom: 0.8rem;
+  margin: 0.8rem 0;
+
 }
 </style>

src/views/reportManage/dataCenter/index.vue

@@ -31,7 +31,7 @@ function handleTabClick(tab: TabsPaneContext, event: Event) {
 </script>
 
 <template>
-  <div class="px-2 my-2">
+  <div class="pr-2">
     <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @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>

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

@@ -137,7 +137,7 @@ function setDefaultDate() {
         dayjs().endOf('day').format('YYYY-MM-DD')
       ];
       dateChange();
-      console.log(dateRange.value);
+      // console.log(dateRange.value);
       break;
     case 'week':
       startWeek.value = dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD');

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

@@ -261,7 +261,6 @@ const getMetricsItems = async () => {
     resp = await props.fetchCard(queryParams.value);
   }
   const data = resp.data;
-  console.log('卡片数据', queryParams.value);
   metricsItems.value.length = 0;
   XEUtils.arrayEach(props.metricEnum, (info) => {
     // console.log('info', info);

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

@@ -18,6 +18,7 @@ const brandNameOptions = ref([]);
 async function fetchInitialData() {
   try {
     const response = await getTasks();
+    // console.log('response', response);
     const data = response.data;
     platformNumberOptions.value = [...new Set(data.map(item => item.platformNumber))];
     platformNameOptions.value = [...new Set(data.map(item => item.platformName))];
@@ -92,7 +93,7 @@ defineExpose({fetchFilteredData, filteredData, updateData});
 </script>
 
 <template>
-  <div class="flex gap-1.5">
+  <div class="flex gap-2">
     <el-select v-model="platformNumberList" multiple collapse-tags collapse-tags-tooltip placeholder="平台编号" style="width: 160px">
       <el-option v-for="item in platformNumberOptions" :key="item" :label="item" :value="item" />
     </el-select>

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

@@ -80,10 +80,8 @@ let dailyTime, weekEndDate, endDate, data_datetime_exact;
 watch(currentDate,(newValue)=>{
   if (dateType.value === 'day') {
     dailyTime = dayjs(newValue.dailyTime).format("YYYY-MM-DD");
-    // console.log('dailyTime',dailyTime);
   }else if (dateType.value === 'week') {
     weekEndDate = dayjs(newValue.weekEndDate).format("YYYY-MM-DD");
-    console.log('week',weekEndDate);
   }else if(dateType.value === 'month'){
     endDate = dayjs(newValue.endDate).format("YYYY-MM-DD");
   }
@@ -159,9 +157,9 @@ onMounted(() => {
     <vxe-grid v-bind="currentGridOptions" v-on="gridEvents">
       <template #toolbar_buttons>
         <vxe-button status="primary" icon="vxe-icon-add" @click="handleImport" >数据录入</vxe-button>
-        <p v-if="dateType === 'day'">{{dailyTime}}日数据</p>
-        <p v-else-if="dateType === 'week'">{{weekEndDate}}周数据</p>
-        <p v-else-if="dateType === 'month'">{{endDate}}月数据</p>
+        <span v-if="dateType === 'day'" class="text-right">{{dailyTime}}日数据</span>
+        <span v-else-if="dateType === 'week'" class="text-right">{{weekEndDate}}周数据</span>
+        <span v-else-if="dateType === 'month'" class="text-right">{{endDate}}月数据</span>
       </template>
       <template #platformNumber_default="{ row }">
         <div>{{ row.task_info.platformNumber }}</div>
@@ -190,5 +188,7 @@ onMounted(() => {
 .vxe-grid {
   border-radius: 10px;
 }
-
+.text-right {
+  margin-left: auto; /* 用于在不需要Flex布局时，将元素推到最右边 */
+}
 </style>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { reactive, ref, computed, inject, watch, onMounted, nextTick } from 'vue';
 import { VXETable, VxeGridInstance, VxeGridProps, VxeGridEvents } from 'vxe-table';
 import dayjs from 'dayjs';
@@ -11,8 +11,9 @@ import {
   postCreateMonthData, getMonthTaskData, getWeekTaskData, postUpdateDayData, postUpdateWeekData, postUpdateMonthData
 } from '/src/views/reportManage/dataCenter/api';
 import { dayColumns, weekColumns, monthColumns } from '../../utils/columns';
-import { ComponentSize, FormInstance, FormRules } from 'element-plus';
+import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import enLocale from 'element-plus/es/locale/lang/en';
+import Selector from '/@/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
 
 dayjs.extend(isoWeek);
 
@@ -138,21 +139,21 @@ const formSize = ref<ComponentSize>('default');
 const dayFormVisible = ref(false);
 const taskDataFormRef = ref<FormInstance>();
 const taskDataForm = reactive({
-  sales: 0,
-  ad_sales: 0,
-  ad_cost: 0,
-  total_sales_current_monthly: 0,
-  impression: 0,
-  ad_click: 0,
-  ad_order: 0,
-  money_by_amazon: 0,
-  money_by_other: 0,
+  sales: null,
+  ad_sales: null,
+  ad_cost: null,
+  total_sales_current_monthly: null,
+  impression: null,
+  ad_click: null,
+  ad_order: null,
+  money_by_amazon: null,
+  money_by_other: null,
   session: '',
   order: '',
-  availableSalesDay: 0,
-  intransitInventory: 0,
-  overseasStorage: 0,
-  refundRate: 0,
+  availableSalesDay: null,
+  intransitInventory: null,
+  overseasStorage: null,
+  refundRate: null,
 });
 
 const resetForm = (formEl: FormInstance | undefined) => {
@@ -170,7 +171,7 @@ const rules = reactive<FormRules>({
   money_by_amazon: [{required: true, message: '请输入亚马逊佣金', trigger: 'blur'}],
   money_by_other: [{required: true, message: '请输入其他佣金', trigger: 'blur'}],
   session: [{required: true, message: '请输入会话数', trigger: 'blur'}],
-  order: [{required: true, message: '请输入订单数', trigger: 'blur'}],
+  order: [{required: true, message: '请输入转化', trigger: 'blur'}],
   availableSalesDay: [{required: true, message: '请输入可用销量天数', trigger: 'blur'}],
   intransitInventory: [{required: true, message: '请输入在途库存', trigger: 'blur'}],
   overseasStorage: [{required: true, message: '请输入海外仓库存', trigger: 'blur'}],
@@ -209,7 +210,7 @@ interface RowVO {
 const xGrid = ref<VxeGridInstance<RowVO>>();
 const gridOptions = reactive({
   border: false,
-  height: 600,
+  height: 900,
   align: null,
   round: true,
   loading: false,
@@ -226,7 +227,7 @@ const gridOptions = reactive({
     enabled: true,
     total: 20,
     currentPage: 1,
-    pageSize: 10,
+    pageSize: 20,
     pageSizes: [10, 20, 30],
   },
   editConfig: {
@@ -350,6 +351,7 @@ function fetchCurrentTaskData() {
 
 const editEvent = async (row: RowVO) => {
   taskId = row.task;
+  // console.log('row', taskId);
   currentId = row.id;
   Object.assign(taskDataForm, row);
   dayFormVisible.value = true;
@@ -357,6 +359,14 @@ const editEvent = async (row: RowVO) => {
 
 //创建日数据
 async function createDayData() {
+  if (
+      isNaN(parseFloat(taskDataForm.sales)) ||
+      isNaN(parseFloat(taskDataForm.ad_sales)) ||
+      isNaN(parseFloat(taskDataForm.ad_cost))
+  ) {
+    ElMessage.warning('销售额、广告销售额、广告花费必须为数字');
+    return; // 停止执行后续操作
+  }
   const body = {
     sales: taskDataForm.sales,
     ad_sales: taskDataForm.ad_sales,
@@ -372,6 +382,7 @@ async function createDayData() {
         dayFormVisible.value = false;
         await fetchDayTaskData();
         await VXETable.modal.message({content: '创建成功', status: 'success'});
+        taskDataFormRef.value.resetFields();
       }
     } catch (e) {
       await VXETable.modal.message({content: '创建失败', status: 'error'});
@@ -384,6 +395,7 @@ async function createDayData() {
 
 //创建周数据
 async function createWeekData() {
+
   const body = {
     sales: taskDataForm.sales,
     total_sales_current_monthly: taskDataForm.total_sales_current_monthly,
@@ -415,6 +427,7 @@ async function createWeekData() {
         dayFormVisible.value = false;
         await fetchWeekTaskData();
         await VXETable.modal.message({content: '创建成功', status: 'success'});
+        taskDataFormRef.value.resetFields();
       }
     } catch (e) {
       await VXETable.modal.message({content: '创建失败', status: 'error'});
@@ -447,6 +460,7 @@ async function createMonthData() {
         dayFormVisible.value = false;
         await fetchMonthTaskData();
         await VXETable.modal.message({content: '创建成功', status: 'success'});
+        taskDataFormRef.value.resetFields();
       }
     } catch (e) {
       await VXETable.modal.message({content: '创建失败', status: 'error'});
@@ -471,7 +485,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       if (dateType === 'month') {
         await createMonthData();
       }
-      taskDataFormRef.value.resetFields();
+      // taskDataFormRef.value.resetFields();
     }
   });
 };
@@ -610,15 +624,15 @@ const currentGridOptions = computed(() => {
 });
 
 const filteredDayColumns = computed(() => {
-  return dayColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
+  return dayColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
 });
 
 const filteredWeekColumns = computed(() => {
-  return weekColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
+  return weekColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
 });
 
 const filteredMonthColumns = computed(() => {
-  return monthColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作'].includes(item.title));
+  return monthColumns.value.filter(item => !['平台编号', '平台名称', '国家', '品牌', '操作', '运营'].includes(item.title));
 });
 
 onMounted(() => {
@@ -628,90 +642,93 @@ onMounted(() => {
 
 <template>
   <div>
-    <el-card class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
-      <div class="demo-date-picker" v-if="dateType === 'day'">
-        <div class="block">
-          <span class="demonstration">日录入数据时间:</span>
-          <el-date-picker
-              v-model="dailyEntryTime"
-              type="Date"
-              :disabled-date="disabledDate"
-              :shortcuts="shortcuts"
-              @change="handleDayChange"
-          />
-        </div>
-        <div class="block">
-          <span class="demonstration">日数据时间:</span>
-          <el-date-picker
-              v-model="dailyTime"
-              type="Date"
-              :shortcuts="shortcuts"
-              disabled
-          />
-        </div>
-      </div>
-      <div class="demo-date-picker" v-if="dateType === 'week'">
-        <el-config-provider :locale="enLocale">
-        <div class="block">
-          <span class="demonstration">周录入数据时间:</span>
-          <el-date-picker
-              v-model="weeklyEntryTime"
-              type="week"
-              :format="entryFormat"
-              placeholder="选择一周"
-              :disabled-date="disabledDate"
-              @change="handleWeekChange"
-          />
+    <el-card class="custom-card-style justify-between my-1.5 mx-2" >
+      <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2" >
+        <!--<Selector ref="selectorRef" @update:updateData="updateDataChange" />-->
+        <div v-if="dateType === 'day'" class="demo-date-picker">
+          <div class="block">
+            <span class="demonstration">日数据时间:</span>
+            <el-date-picker
+                v-model="dailyTime"
+                :shortcuts="shortcuts"
+                disabled
+                type="Date"
+            />
+          </div>
+          <div class="block">
+            <span class="demonstration">日录入数据时间:</span>
+            <el-date-picker
+                v-model="dailyEntryTime"
+                :disabled-date="disabledDate"
+                :shortcuts="shortcuts"
+                type="Date"
+                @change="handleDayChange"
+            />
+          </div>
         </div>
-        <div class="block">
-          <span class="demonstration">周销售数据时间:</span>
-          <el-date-picker
-              v-model="weeklySalesTime"
-              type="week"
-              :format="salesFormat"
-              placeholder="选择一周"
-              disabled
-          />
+        <div v-if="dateType === 'week'" class="demo-date-picker">
+          <el-config-provider :locale="enLocale">
+            <div class="block">
+              <span class="demonstration">周广告数据时间:</span>
+              <el-date-picker
+                  v-model="weeklyAdTime"
+                  :format="adFormat"
+                  disabled
+                  placeholder="选择一周"
+                  type="week"
+              />
+            </div>
+            <div class="block">
+              <span class="demonstration">周销售数据时间:</span>
+              <el-date-picker
+                  v-model="weeklySalesTime"
+                  :format="salesFormat"
+                  disabled
+                  placeholder="选择一周"
+                  type="week"
+              />
+            </div>
+            <div class="block">
+              <span class="demonstration">周录入数据时间:</span>
+              <el-date-picker
+                  v-model="weeklyEntryTime"
+                  :disabled-date="disabledDate"
+                  :format="entryFormat"
+                  placeholder="选择一周"
+                  type="week"
+                  @change="handleWeekChange"
+              />
+            </div>
+          </el-config-provider>
         </div>
-        <div class="block">
-          <span class="demonstration">周广告数据时间:</span>
-          <el-date-picker
-              v-model="weeklyAdTime"
-              type="week"
-              :format="adFormat"
-              placeholder="选择一周"
-              disabled
-          />
-        </div>
-        </el-config-provider>
-      </div>
-      <div class="demo-date-picker" v-if="dateType === 'month'">
-        <div class="block">
-          <span class="demonstration">月录入数据时间:</span>
-          <el-date-picker
-              v-model="monthlyEntryTime"
-              type="month"
-              :format="monthlyEntryFormat"
-              placeholder="选择月份"
-              @change="handleMonthChange"
-              :disabled-date="disabledDate"
-          />
+        <div v-if="dateType === 'month'" class="demo-date-picker">
+          <div class="block">
+            <span class="demonstration">月录入数据时间:</span>
+            <el-date-picker
+                v-model="monthlyEntryTime"
+                :disabled-date="disabledDate"
+                :format="monthlyEntryFormat"
+                placeholder="选择月份"
+                type="month"
+                @change="handleMonthChange"
+            />
+          </div>
         </div>
       </div>
     </el-card>
   </div>
   <el-card class="mx-2">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" v-bind="currentGridOptions" v-on="gridEvents" stripe>
+      <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents">
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
-            <el-button @click="clearRowEvent" size="small" link>取消</el-button>
-            <el-button @click="editRowEvent(row)" size="small" link type="warning">保存</el-button>
+            <el-button link size="small" @click="clearRowEvent">取消</el-button>
+            <el-button link size="small" type="warning" @click="editRowEvent(row)">保存</el-button>
           </template>
           <template v-else>
-            <el-button @click="handelEditRow(row)" size="small" type="success" link :disabled="!row.id">更新</el-button>
+            <el-button :disabled="!row.id" link size="small" type="success" @click="handelEditRow(row)">修改</el-button>
           </template>
-          <el-button @click="editEvent(row)" size="small" type="primary" link :disabled="row.id">创建</el-button>
+          <el-button :disabled="row.id" link size="small" type="primary" @click="editEvent(row)">创建</el-button>
         </template>
         <template #sales_edit="{ row }">
           <vxe-input v-model="row.sales"></vxe-input>
@@ -764,13 +781,13 @@ onMounted(() => {
   <el-dialog v-model="dayFormVisible" title="创建任务" width="600">
     <el-form
         ref="taskDataFormRef"
-        style="max-width: 600px"
         :model="taskDataForm"
         :rules="rules"
-        label-width="auto"
         :size="formSize"
         label-position="top"
-        status-icon>
+        label-width="auto"
+        status-icon
+        style="max-width: 600px">
       <div v-if="dateType === 'day'">
         <el-form-item v-for="item in filteredDayColumns" :key="item.field" :label="item.title" :prop="item.field">
           <el-input v-model="taskDataForm[item.field]" :placeholder="`请输入${item.title}`" />
@@ -778,7 +795,7 @@ onMounted(() => {
       </div>
       <div v-if="dateType === 'week'" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px">
         <el-form-item v-for="item in filteredWeekColumns" :key="item.field" :label="item.title" :prop="item.field">
-          <el-input style="width: 100%" v-model="taskDataForm[item.field]" />
+          <el-input v-model="taskDataForm[item.field]" style="width: 100%" />
         </el-form-item>
       </div>
       <div v-if="dateType === 'month'">
@@ -802,6 +819,7 @@ onMounted(() => {
   width: 100%;
   padding: 0;
   flex-wrap: wrap;
+  flex-direction: row-reverse;
 }
 
 .demo-date-picker .block:last-child {

src/views/reportManage/dataCenter/utils/columns.ts

@@ -3,6 +3,7 @@ export const dayColumns = ref([
   { field: 'platformName', title: '平台名称' },
   { field: 'country', title: '国家' },
   { field: 'brandName', title: '品牌' },
+  { field: 'user_name', title: '运营' },
 
   { field: 'sales', title: '销售额', editRender: {}, slots: { edit: 'sales_edit' } },
   { field: 'ad_sales', title: '广告销售额', editRender: {}, slots: { edit: 'ad_sales_edit' } },
@@ -15,6 +16,7 @@ export const weekColumns = ref([
   {field: 'platformName', title: '平台名称',fixed:"left",width: 90},
   {field: 'country', title: '国家',fixed:"left",width: 90},
   {field: 'brandName', title: '品牌',fixed:"left",width: 90},
+  {field: 'user_name', title: '运营',fixed:"left",width: 90},
 
   {field: 'sales', title: '销售额',editRender: {}, slots: {edit: 'sales_edit'},width: 120},
   {field: 'total_sales_current_monthly', title: '当月累计销售额',editRender: {}, slots: {edit: 'total_sales_current_monthly_edit'},width: 120},
@@ -39,6 +41,7 @@ export const monthColumns = ref([
   {field: 'platformName', title: '平台名称'},
   {field: 'country', title: '国家'},
   {field: 'brandName', title: '品牌'},
+  { field: 'user_name', title: '运营' },
 
   {field: 'sales', title: '销售额',editRender: {}, slots: {edit: 'sales_edit'}},
   {field: 'ad_sales', title: '广告销售额',editRender: {},slots: {edit: 'ad_sales_edit'}},

src/views/reportManage/dataCenter/utils/tools.ts

@@ -42,7 +42,6 @@ export function parseQueryParams(body: any) {
 
   for (const key in body) {
     const val = unref(body[key]);
-
     if (key === 'currentDate') {
       if (val.dailyStartDate && val.dailyTime) {
         ret['data_start_date'] = val.dailyStartDate;
@@ -58,9 +57,6 @@ export function parseQueryParams(body: any) {
       }
     } else if (key === 'taskIds') {
       ret['task_ids'] = val; // 将 task_ids 直接赋给返回对象的属性
-    }else if (key === 'actualDate') {
-      ret['data_start_date'] = val[0];
-      ret['data_end_date'] = val[1];
     } else {
       ret[key] = val;
     }
@@ -80,6 +76,5 @@ export function monthlyQueryParams(body: any) {
       date[key] = val
     }
   }
-  console.log('date',date);
   return date
 }