fix: 修复部分bug和给表单模型增加字段

src/views/message/reportmessage/CustomReport.vue

@@ -1,134 +1,137 @@
 <template>
-  <div class="reportCard" v-for="(item, index) in prop.form.customPushConfigList">
-    <a v-if="!disableType.contentDisable">
-      <el-icon
-        class="cardIcon"
-        color="rgb(216,216,216)"
-        v-if="prop.form.customPushConfigList.length != 1"
-        @click="deleteReportCard(index)"
-      >
-        <CircleCloseFilled />
-      </el-icon>
-    </a>
+  <div  v-for="(item, index) in prop.form.customPushConfigList" >
+    <div v-if="item.isDeleted != 1" class="reportCard"> 
+      <a v-if="!disableType.contentDisable">
+        <el-icon
+          class="cardIcon"
+          color="rgb(216,216,216)"
+          v-if="prop.form.customPushConfigList.filter(custom => custom.isDeleted === 0).length > 1"
+          @click="deleteReportCard(index)"
+        >
+          <CircleCloseFilled />
+        </el-icon>
+      </a>
+
+      <el-form-item label="统计区间:" required>
+        <el-form-item
+          :prop="`customPushConfigList[` + index + `].customStartTime`"
+          :rules="[{ required: true, message: '请选择推统计区间', trigger: 'change' }]"
+        >
+          <el-col :span="22">
+            <el-date-picker
+              v-model="item.daterange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="default"
+              value-format="YYYY-MM-DD"
+              :disabled="disableType.contentDisable"
+            />
+          </el-col>
+        </el-form-item>
+      </el-form-item>
+
+      <el-form-item label="推送时间:" required>
+        <el-form-item
+          :prop="`customPushConfigList[` + index + `].pushDay`"
+          :rules="{ required: true, message: '请选择推送日期', trigger: 'change' }"
+        >
+          <el-col :span="22">
+            <el-date-picker
+              v-model="item.pushDay"
+              type="date"
+              placeholder="选择日期"
+              :disabled-date="disabledDate"
+              size="default"
+              style="width: 146.5px; height: 32px"
+              value-format="YYYY-MM-DD"
+              :disabled="disableType.contentDisable"
+            />
+          </el-col>
+        </el-form-item>
+
+        <el-col class="text-center" :span="2">
+          <span class="text-gray-500">—</span>
+        </el-col>
+
+        <el-form-item
+          :prop="`customPushConfigList[` + index + `].pushTime`"
+          :rules="{ required: true, message: '请选择推送时间', trigger: 'change' }"
+        >
+          <el-col :span="22">
+            <el-time-picker
+              v-model="item.pushTime"
+              placeholder="09:00"
+              value-format="HH:mm:ss"
+              style="width: 146.5px; height: 32px"
+              :disabled="disableType.contentDisable"
+            />
+          </el-col>
+        </el-form-item>
+      </el-form-item>
 
-    <el-form-item label="统计区间:" required>
       <el-form-item
-        :prop="`customPushConfigList[` + index + `].customStartTime`"
-        :rules="[{ required: true, message: '请选择推统计区间', trigger: 'change' }]"
+        label="推送对象:"
+        required
+        :prop="`customPushConfigList[` + index + `].recipientType`"
+        :rules="{ required: true, message: '请选择推送对象', trigger: 'change' }"
       >
-        <el-col :span="22">
-          <el-date-picker
-            v-model="item.daterange"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            size="default"
-            value-format="YYYY-MM-DD"
-            :disabled="disableType.contentDisable"
-          />
-        </el-col>
+        <el-radio-group v-model="item.recipientType" :disabled="disableType.contentDisable">
+          <el-radio value="1">全员</el-radio>
+          <el-radio value="2">分组</el-radio>
+          <el-radio value="3">自定义</el-radio>
+        </el-radio-group>
       </el-form-item>
-    </el-form-item>
 
-    <el-form-item label="推送时间:" required>
       <el-form-item
-        :prop="`customPushConfigList[` + index + `].pushDay`"
-        :rules="{ required: true, message: '请选择推送日期', trigger: 'change' }"
+        v-if="item.recipientType === '2'"
+        label="选择分组:"
+        required
+        :prop="`customPushConfigList[` + index + `].userGroupList`"
+        :rules="{ required: true, message: '请选择分组', trigger: 'change' }"
       >
-        <el-col :span="22">
-          <el-date-picker
-            v-model="item.pushDay"
-            type="date"
-            placeholder="选择日期"
-            :disabled-date="disabledDate"
-            size="default"
-            style="width: 146.5px; height: 32px"
-            value-format="YYYY-MM-DD"
+        <el-col :span="10">
+          <el-select
+            v-model="item.userGroupList"
+            multiple
+            placeholder="请选择分组"
+            style="width: 240px"
             :disabled="disableType.contentDisable"
-          />
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.userGroupId"
+              :label="item.name"
+              :value="item.userGroupId"
+            />
+          </el-select>
         </el-col>
       </el-form-item>
 
-      <el-col class="text-center" :span="2">
-        <span class="text-gray-500">—</span>
-      </el-col>
-
+      <!-- :rules="{validator: validateCustom, trigger: 'change' }" -->
+      <!-- :rules="{validator: (rule, value, cb) => validateCustom(rule, value, cb, index), trigger: 'change' }" -->
+      <!-- :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }" -->
       <el-form-item
-        :prop="`customPushConfigList[` + index + `].pushTime`"
-        :rules="{ required: true, message: '请选择推送时间', trigger: 'change' }"
+        v-if="item.recipientType === '3'"
+        label="选择人员:"
+        required
+        placeholder="请选择人员"
+        :prop="`customPushConfigList[` + index + `].customUserList`"
+        :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
       >
-        <el-col :span="22">
-          <el-time-picker
-            v-model="item.pushTime"
-            placeholder="09:00"
-            value-format="HH:mm:ss"
-            style="width: 146.5px; height: 32px"
-            :disabled="disableType.contentDisable"
+        <el-col :span="18">
+          <CustomSelectTree
+            :form="form"
+            :disableType="disableType"
+            :index="index"
+            :statisticType="5"
+            :ruleFormRef="ruleFormRef"
           />
         </el-col>
       </el-form-item>
-    </el-form-item>
-
-    <el-form-item
-      label="推送对象:"
-      required
-      :prop="`customPushConfigList[` + index + `].recipientType`"
-      :rules="{ required: true, message: '请选择推送对象', trigger: 'change' }"
-    >
-      <el-radio-group v-model="item.recipientType" :disabled="disableType.contentDisable">
-        <el-radio value="1">全员</el-radio>
-        <el-radio value="2">分组</el-radio>
-        <el-radio value="3">自定义</el-radio>
-      </el-radio-group>
-    </el-form-item>
-
-    <el-form-item
-      v-if="item.recipientType === '2'"
-      label="选择分组:"
-      required
-      :prop="`customPushConfigList[` + index + `].userGroupList`"
-      :rules="{ required: true, message: '请选择分组', trigger: 'change' }"
-    >
-      <el-col :span="10">
-        <el-select
-          v-model="item.userGroupList"
-          multiple
-          placeholder="请选择分组"
-          style="width: 240px"
-          :disabled="disableType.contentDisable"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.userGroupId"
-            :label="item.name"
-            :value="item.userGroupId"
-          />
-        </el-select>
-      </el-col>
-    </el-form-item>
-
-    <!-- :rules="{validator: validateCustom, trigger: 'change' }" -->
-    <!-- :rules="{validator: (rule, value, cb) => validateCustom(rule, value, cb, index), trigger: 'change' }" -->
-    <!-- :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }" -->
-    <el-form-item
-      v-if="item.recipientType === '3'"
-      label="选择人员:"
-      required
-      placeholder="请选择人员"
-      :prop="`customPushConfigList[` + index + `].customUserList`"
-      :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
-    >
-      <el-col :span="18">
-        <CustomSelectTree
-          :form="form"
-          :disableType="disableType"
-          :index="index"
-          :statisticType="5"
-          :ruleFormRef="ruleFormRef"
-        />
-      </el-col>
-    </el-form-item>
+
+    </div>
   </div>
   <el-button
     type="primary"
@@ -162,7 +165,8 @@
   };
 
   const deleteReportCard = (index) => {
-    prop.form.customPushConfigList.splice(index, 1);
+    prop.form.customPushConfigList[index].isDeleted = 1
+    // prop.form.customPushConfigList.splice(index, 1);
   };
 
   const disabledDate = (time: Date) => {
@@ -181,8 +185,10 @@
 <style scoped>
   .reportCard {
     margin-left: 87px;
+    margin-top: 12px;
     background-color: #fafafa;
     padding-top: 12px;
+    padding-bottom: 1px;
     width: 530px;
     position: relative;
   }

src/views/message/reportmessage/ReportOperation.vue

@@ -177,6 +177,7 @@
   
 
   const form = reactive<reportMessage>({
+    configIdList: null,
     type: 0,
     statisticType: 0,
     monthAndDayList: ['1', '1'],

src/views/message/reportmessage/TemplateExample.vue

@@ -110,7 +110,7 @@
 <style>
 
 .exampleTitleDiv{
-    width: 448px;
+    /* width: 448px; */
     height: 44px;
     background: #FAFAFA;
     border-radius: 3px 3px 0px 0px;

src/views/message/reportmessage/class.ts

@@ -15,6 +15,7 @@ export enum StatisticType {
   }
 
 export interface finalReportMessage {
+    configIdList: [] | null,
     type: number;
     statisticType: StatisticType;
     dayOfWeek: number
@@ -30,11 +31,12 @@ export interface finalReportMessage {
 }  
 
 export interface reportMessage {
+    configIdList: [] | null,
     type: number;
     statisticType: StatisticType;
     dayOfWeek: number
     monthList: [string];
-    monthAndDayList?: [string, string] | any,
+    monthAndDayList: [string, string] | any,
     dayOfMonthList: [string];
     pushTimeList: [string];
     pushChannel: [];
@@ -46,15 +48,18 @@ export interface reportMessage {
 }
 
 export interface finalCustom {  // 最终返回给接口的自定义报告类
+    configId: number | null;
     customStartTime: string;
     customEndTime: string;
     customUserList: [];
     pushTime: string;
     recipientType: string;
     userGroupList: [];
+    isDeleted: number;
 }
 
-export interface computeCustom {  // 临时自定义报告类，daterange用于给customStartTime和customEndTime提供计算值，pushDay和pushTime用于给finalPushTime提供计算值
+export interface computeCustom {
+    configId: number | null;  // 临时自定义报告类，daterange用于给customStartTime和customEndTime提供计算值，pushDay和pushTime用于给finalPushTime提供计算值
     daterange: null;
     customStartTime: any;
     customEndTime: any;
@@ -64,6 +69,7 @@ export interface computeCustom {  // 临时自定义报告类，daterange用于
     recipientType: string;
     userGroupList: [];
     customUserList: [];
+    isDeleted: number;
 }
 
 interface UserList {
@@ -74,6 +80,7 @@ interface UserList {
 
 export const createCustomReport = () => {
     const newCustomReport = reactive<computeCustom>({
+        configId: null,
         daterange: null,
         customStartTime: computed(() => newCustomReport.daterange === null? null : newCustomReport.daterange[0]),
         customEndTime: computed(() => newCustomReport.daterange === null? null : newCustomReport.daterange[1]),
@@ -85,22 +92,13 @@ export const createCustomReport = () => {
         recipientType: '',
         userGroupList: [],
         customUserList: [],
+        isDeleted: 0,
     })
     return newCustomReport
 };
 
-export const toFinalCustom = (computeCustom: computeCustom) => {
-     return reactive<finalCustom>({
-        customStartTime: computeCustom.customStartTime,
-        customEndTime: computeCustom.customEndTime,
-        customUserList: computeCustom.customUserList,
-        pushTime: computeCustom.finalPushTime,
-        recipientType: computeCustom.recipientType,
-        userGroupList: computeCustom.userGroupList,
-    })
-};
-
 export const toReportMessage = (form: reportMessage, receivedData: finalReportMessage) => {
+    form.configIdList = receivedData.configIdList
     form.type = receivedData.type
     form.statisticType = receivedData.statisticType
     form.dayOfWeek = receivedData.dayOfWeek
@@ -136,6 +134,8 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
         let tempconfig = {}
         let customPushConfigList: any[] = []
         for (let config of receivedData.customPushConfigList) {
+            tempconfig['configId'] = config.configId
+            tempconfig['isDeleted'] = 0
             tempconfig['daterange'] = [config.customStartTime.split(" ")[0], config.customEndTime.split(" ")[0]]
             // const customStartTime = computed(() => tempconfig['daterange'][0])
             // const customEndTime = computed(() => tempconfig['daterange'][1])
@@ -161,8 +161,6 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
         form.customPushConfigList = customPushConfigList
 
         for (let customConfig of form.customPushConfigList){
-            console.log("form.customPushConfigList[index]", customConfig['pushDay']);
-            
             const finalPushTime = computed(() => customConfig['pushDay'] + ' ' + customConfig['pushTime'])
             customConfig['finalPushTime'] = finalPushTime
 
@@ -183,7 +181,6 @@ export const reportMessageToFinal = (form) => {  // 临时表单转为只存在
         }
         else{
             for (let config of form.customPushConfigList) {
-                console.log("form.customPushConfigList", config);
                 for(let key in config){
                     if (key === 'daterange' || key === 'pushDay' || key === 'pushTime') {
                         continue   
@@ -205,6 +202,7 @@ export const reportMessageToFinal = (form) => {  // 临时表单转为只存在
     }
     
     return {
+        "configIdList": form.configIdList,
         "type": form.type,
         "statisticType": form.statisticType,
         "dayOfWeek": form.dayOfWeek,