refactor：报表详情

src/types/message/constant.ts

@@ -28,4 +28,42 @@ export const OperationTypeNames = {
 } 
 
 /* 默认值 */
-export const Default_Value = 0;
+export const Default_Value = 0;
+
+/* 报表周期radio-group options  */
+export const ReportOptions = [
+  {
+    value: StatisticTypeEnum.WEEK_REPORT,
+    tooltipContent: `
+      <span>每次推送上个自然周数据</span><br />
+      <div style="text-align: center">(每周一至周日)</div>
+    `,
+    tooltipPlacement: "top",
+    label: "周报",
+  },
+  {
+    value: StatisticTypeEnum.MONTH_REPORT,
+    tooltipContent: `
+      <span>每次推送上个自然月数据</span><br />
+      <div style="text-align: center">(每月第一天至最后一天)</div>
+    `,
+    tooltipPlacement: "top",
+    label: "月报",
+  },
+  {
+    value: StatisticTypeEnum.YEAR_REPORT,
+    tooltipContent: `
+      <span>每次推送上一整年的数据</span>
+    `,
+    tooltipPlacement: "top",
+    label: "年报",
+  },
+  {
+    value: StatisticTypeEnum.CUSTOM_REPORT,
+    tooltipContent: `
+      <span>根据个人需求按开始和结束日期进行统计</span>
+    `,
+    tooltipPlacement: "top",
+    label: "自定义",
+  },
+];

src/views/message/reportmessage/ReportOperation.vue

@@ -21,36 +21,14 @@
 
           <el-form-item label="报表周期：" prop="statisticType" required>
             <el-radio-group v-model="form.statisticType" :disabled="disableType.statisticTypeDisable">
-              <el-tooltip :visible="weekVisible" placement="top">
-                <template #content>
-                  <span>每次推送上个自然周数据</span><br />
-                  <div style="text-align: center">(每周一至周日)</div>
-                </template>
-                <el-radio :value="1" @mouseenter="weekVisible = true" @mouseleave="weekVisible = false">周报</el-radio>
-              </el-tooltip>
-
-              <el-tooltip :visible="monthVisible" placement="top">
-                <template #content>
-                  <span>每次推送上个自然月数据</span><br />
-                  <div style="text-align: center">(每月第一天至最后一天)</div>
-                </template>
-                <el-radio :value="2" @mouseenter="monthVisible = true" @mouseleave="monthVisible = false">月报</el-radio>
-              </el-tooltip>
-
-              <el-tooltip :visible="yearVisible" placement="top">
-                <template #content>
-                  <span>每次推送上一整年的数据</span>
-                </template>
-                <el-radio :value="4" @mouseenter="yearVisible = true" @mouseleave="yearVisible = false">年报</el-radio>
-              </el-tooltip>
-
-              <el-tooltip :visible="customVisible" placement="top">
-                <template #content>
-                  <span>根据个人需求按开始和结束日期进行统计</span>
-                </template>
-                <el-radio el-radio :value="5" @mouseenter="customVisible = true"
-                  @mouseleave="customVisible = false">自定义</el-radio>
-              </el-tooltip>
+              <StatisticOption
+                v-for="option in ReportOptions"
+                :key="option.value"
+                :value="option.value"
+                :tooltip-content="option.tooltipContent"
+                :tooltip-placement="option.tooltipPlacement"
+                :label="option.label"
+              />
             </el-radio-group>
           </el-form-item>
 
@@ -101,7 +79,8 @@ import { addMassage, searchMassage, editMassage } from '@/api/message/report-mes
 import { useUserStore } from '@/store/modules/user';
 import { useFormList } from './store/useFormList';
 import { reportMessage, toReportMessage, reportMessageToFinal } from './class';
-import { OperationTypeEnum, StatisticTypeEnum, OperationTypeNames,PushMessageTypeEnum, Default_Value } from '@/types/message/constant';
+import { OperationTypeEnum, StatisticTypeEnum, OperationTypeNames, PushMessageTypeEnum, Default_Value,ReportOptions } from '@/types/message/constant';
+import StatisticOption from "./components/StatisticOption.vue";
 import DesignatedPersonSelection from './components/DesignatedPersonSelection.vue';
 import TemplateExample from './TemplateExample.vue';
 import WeekReport from './WeekReport.vue';
@@ -115,10 +94,6 @@ const FormList = useFormList();
 const { info } = storeToRefs(useUser);
 const { type } = storeToRefs(FormList);
 let operater = info.value.realname;
-const weekVisible = ref(false); // 控制Tooltip显示
-const monthVisible = ref(false); // 控制Tooltip显示
-const yearVisible = ref(false); // 控制Tooltip显示
-const customVisible = ref(false); // 控制Tooltip显示
 let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
 const formSize = ref('default'); // 校验表单
 const ruleFormRef = ref();
@@ -151,6 +126,7 @@ const form = reactive<reportMessage>({
   customUserList: [],
 });
 
+
 // 根据报表周期展示不同组件
 const ComponentEnum = {
   [StatisticTypeEnum.WEEK_REPORT]: WeekReport,

src/views/message/reportmessage/class.ts

@@ -74,13 +74,6 @@ export interface computeCustom {
   isDeleted: number;
 }
 
-interface UserList {
-  id: string;
-  userNickname: string;
-  userLoginName: string;
-  userId: number;
-}
-
 export const createCustomReport = () => {
   const newCustomReport = reactive<computeCustom>({
     configId: null,
@@ -119,34 +112,16 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
   form.designatedUserList = receivedData.designatedUserList.map((user: any) => ({
     id: user.userId,
     staffNo: user.userNumber,
-    nickname: user.userNickname,
+    realname: user.userNickname,
   }));
   form.customUserList.value = receivedData.customUserList.map((user: any) => ({
     id: user.userId,
     staffNo: user.userNumber,
-    nickname: user.userNickname,
+    realname: user.userNickname,
   }));
   form.recipientType = receivedData.recipientType;
   form.customPushConfigList = [];
 
-  //   if (form.customUserList.value.length > 0) {
-  //     form.customUserList.value = form.customUserList.value.map((user) => {
-  //       return {
-  //         id: `u${user.userId}`,
-  //         name: user.userLoginName + '-' + user.userNickname,
-  //         userId: user.userId,
-  //       };
-  //     });
-  //   }
-  //   if (form.designatedUserList.value.length > 0) {
-  //     form.designatedUserList.value = form.designatedUserList.value.map((user) => {
-  //       return {
-  //         id: `u${user.userId}`,
-  //         name: user.userLoginName + '-' + user.userNickname,
-  //         userId: user.userId,
-  //       };
-  //     });
-  //   }
   if (receivedData.statisticType === 2) {
     form.dayOfMonthList[0] = receivedData.dayOfMonthList[0].toString();
   }
@@ -165,15 +140,6 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
         config.customStartTime.split(' ')[0],
         config.customEndTime.split(' ')[0],
       ];
-      // const customStartTime = computed(() => tempconfig['daterange'][0])
-      // const customEndTime = computed(() => tempconfig['daterange'][1])
-      // let _ = customStartTime.value
-      // let __ = customEndTime.value
-      // console.log("customStartTime", customStartTime.value);  // 不使customStartTime.value用会报错，离谱，后续再研究
-      // console.log("customEndTime", customEndTime.value);
-      // tempconfig['customEndTime'] = tempconfig['daterange'][1]
-      // tempconfig['customStartTime'] = customStartTime
-      // tempconfig['customEndTime'] = customEndTime
       tempconfig['pushDay'] = config.pushTime.split(' ')[0];
       tempconfig['pushTime'] = config.pushTime.split(' ')[1];
       tempconfig['recipientType'] = config.recipientType.toString();

src/views/message/reportmessage/components/StatisticOption.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-tooltip :visible="tooltipVisible" :placement="tooltipPlacement">
+    <template #content>
+      <div v-html="tooltipContent"></div>
+    </template>
+    <el-radio
+      :value="value"
+      @mouseenter="tooltipVisible = true"
+      @mouseleave="tooltipVisible = false"
+    >
+      {{ label }}
+    </el-radio>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ref, PropType } from "vue";
+
+defineProps({
+  value: {
+    type: Number,
+    required: true,
+  },
+  tooltipContent: {
+    type: String,
+    required: true,
+  },
+  tooltipPlacement: {
+    type: String as PropType<"top" | "bottom" | "left" | "right">,
+    default: "top",
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+
+const tooltipVisible = ref(false);
+</script>