fix: 修复消息推送新增编辑功能和页面显示部分bug

src/views/message/CustomSelectTree.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import SelectTree from './persongroup/components/SelectTree.vue';
 interface UserList {
   id: string;
@@ -38,7 +38,7 @@ const dialogVisible = ref<boolean>(false);
 // const userList = ref<UserList[]>([]);
 const selectedUser = ref<UserList[]>([]);
 
-const prop = defineProps(['form', 'disableType', 'index'])
+const prop = defineProps(['form', 'disableType', 'index', 'ruleFormRef'])
 // const userIDList = ref()
 
 const handleCancle = () => {
@@ -47,9 +47,17 @@ const handleCancle = () => {
 const handleSubmit = (selectedData: UserList[]) => {
   selectedUser.value = selectedData;
   prop.form.customPushConfigList[prop.index].customUserList.length = 0
-  prop.form.customPushConfigList[prop.index].customUserList.push(...selectedUser.value);
+  prop.form.customPushConfigList[prop.index].customUserList.push(...selectedUser.value)
+  prop.ruleFormRef.validateField(`customPushConfigList[` + prop.index + `].customUserList`)
   dialogVisible.value = false;
 };
+watch(
+  () => prop.form.customPushConfigList[prop.index].customUserList,
+  (newSelected) => {
+    selectedUser.value = newSelected
+  },
+  { deep: true,immediate: true },
+);
   onMounted(()=>{
     if(prop.form.customPushConfigList[prop.index].customUserList.length > 0){
       // selectedUser.value = prop.form.customUserList.value

src/views/message/SelectTree.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import SelectTree from './persongroup/components/SelectTree.vue';
 interface UserList {
   id: string;
@@ -35,11 +35,9 @@ interface UserList {
   userId: number;
 }
 const dialogVisible = ref<boolean>(false);
-// const userList = ref<UserList[]>([]);
 const selectedUser = ref<UserList[]>([]);
 
 const prop = defineProps(['form', 'disableType'])
-// const userIDList = ref()
 
 const handleCancle = () => {
   dialogVisible.value = false;
@@ -49,6 +47,13 @@ const handleSubmit = (selectedData: UserList[]) => {
   prop.form.customUserList.value = selectedUser.value;
   dialogVisible.value = false;
 };
+watch(
+  () => prop.form.customUserList.value,
+  (newSelected) => {
+    selectedUser.value = newSelected
+  },
+  { deep: true,immediate: true },
+);
   onMounted(()=>{
     if(prop.form.customUserList.value.length > 0){
       selectedUser.value = prop.form.customUserList.value

src/views/message/designatedUserSelectTree.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeMount, onBeforeUpdate } from 'vue';
+import { ref, onBeforeUpdate, watch } from 'vue';
 import SelectTree from './persongroup/components/SelectTree.vue';
 interface UserList {
   id: string;
@@ -35,11 +35,9 @@ interface UserList {
   userId: number;
 }
 const dialogVisible = ref<boolean>(false);
-// const userList = ref<UserList[]>([]);
 const selectedUser = ref<UserList[]>([]);
 
 const prop = defineProps(['form', 'disableType'])
-// const userIDList = ref()
 
 const handleCancle = () => {
   dialogVisible.value = false;
@@ -49,16 +47,16 @@ const handleSubmit = (selectedData: UserList[]) => {
   prop.form.designatedUserList.value = selectedUser.value;
   dialogVisible.value = false;
 };
-// setTimeout(()=>{
-//   console.log("settimeout");
-  
-//   console.log("prop.form.designatedUserList?.value?.length > 0", prop.form.designatedUserList?.value?.length > 0);
-// },1000)
+
+watch(
+  () => prop.form.designatedUserList.value,
+  (newSelected) => {
+    selectedUser.value = newSelected
+  },
+  { deep: true,immediate: true },
+);
+
 onBeforeUpdate(()=>{
-    // console.log("prop.form.value", prop.form);
-    // console.log("prop.form.value.designatedUserList", prop.form.designatedUserList);
-    // console.log("prop.form.designatedUserList?.value?.length > 0", prop.form.designatedUserList?.value?.length > 0);
-    
     if(prop.form.designatedUserList?.value?.length > 0){
       selectedUser.value = prop.form.designatedUserList.value
     }

src/views/message/reportmessage/CustomReport.vue

@@ -1,183 +1,205 @@
 <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)"
-        >
+      <el-icon
+        class="cardIcon"
+        color="rgb(216,216,216)"
+        v-if="prop.form.customPushConfigList.length != 1"
+        @click="deleteReportCard(index)"
+      >
         <CircleCloseFilled />
       </el-icon>
     </a>
 
     <el-form-item label="统计区间:" required>
-      <el-form-item 
+      <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>
+        :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 
+      <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="选择日期"
-              size="default"
-              style="width: 146.5px; height: 32px;"
-              value-format="YYYY-MM-DD"
-              :disabled="disableType.contentDisable"
-            />
-          </el-col>
+      >
+        <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 
+      <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-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
+      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-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
       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-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-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"/>
-        </el-col>
+    >
+      <el-col :span="18">
+        <CustomSelectTree
+          :form="form"
+          :disableType="disableType"
+          :index="index"
+          :statisticType="5"
+          :ruleFormRef="ruleFormRef"
+        />
+      </el-col>
     </el-form-item>
   </div>
-  <el-button type="primary" @click="addCustom" class="addButton" :disabled="disableType.contentDisable">新建自定义</el-button>
+  <el-button
+    type="primary"
+    @click="addCustom"
+    class="addButton"
+    :disabled="disableType.contentDisable"
+    >新建自定义</el-button
+  >
 </template>
 
 <script lang="ts" setup>
   import { ref, reactive, onMounted } from 'vue';
   import { computeCustom, createCustomReport } from './class.ts';
-  import {CircleCloseFilled} from '@element-plus/icons-vue'
+  import { CircleCloseFilled } from '@element-plus/icons-vue';
   import { searchGroup } from '@/api/sendMessage/sendMessage';
   import CustomSelectTree from '../CustomSelectTree.vue';
 
-  const prop = defineProps(['form', 'disableType'])
+  const prop = defineProps(['form', 'disableType', 'ruleFormRef']);
   const emit = defineEmits(['customPropsChange']);
 
-  if (prop.form.customPushConfigList.length === 0){
-    prop.form.customPushConfigList = reactive<computeCustom[]>([])
-    const defaultReport = createCustomReport()
-    prop.form.customPushConfigList.push(defaultReport)
+  if (prop.form.customPushConfigList.length === 0) {
+    prop.form.customPushConfigList = reactive<computeCustom[]>([]);
+    const defaultReport = createCustomReport();
+    prop.form.customPushConfigList.push(defaultReport);
   }
 
-  
-  const options =  ref()
-  
+  const options = ref();
+
   const addCustom = () => {
-    prop.form.customPushConfigList.push(createCustomReport())
+    prop.form.customPushConfigList.push(createCustomReport());
   };
 
   const deleteReportCard = (index) => {
     prop.form.customPushConfigList.splice(index, 1);
   };
 
-  onMounted(()=>{
-    searchGroup().then(res => {
-      options.value = res.groupVOList
-    }).catch(error => {});
-  })
+  const disabledDate = (time: Date) => {
+    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
+  };
+
+  onMounted(() => {
+    searchGroup()
+      .then((res) => {
+        options.value = res.groupVOList;
+      })
+      .catch((error) => {});
+  });
 </script>
 
 <style scoped>
-  .reportCard{
+  .reportCard {
     margin-left: 87px;
-    background-color: #FAFAFA;
+    background-color: #fafafa;
     padding-top: 12px;
     width: 530px;
     position: relative;
   }
 
-  .addButton{
+  .addButton {
     margin-top: 16px;
     margin-bottom: 32px;
     margin-left: 87px;
     width: 124px;
     height: 32px;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 4px;
-    border: 1px dashed #1790FF;
-    color: #1890FF;
+    border: 1px dashed #1790ff;
+    color: #1890ff;
   }
 
-  .cardIcon{
+  .cardIcon {
     position: absolute;
     right: 0px;
     top: 0px;

src/views/message/reportmessage/ReportOperation.vue

@@ -96,16 +96,16 @@
 
         <div v-if="form.statisticType === 5">
         
-          <CustomReport ref="CustomReportComponent" :form="form" :disableType="disableType"></CustomReport>
+          <CustomReport ref="CustomReportComponent" :form="form" :disableType="disableType" :ruleFormRef="ruleFormRef"></CustomReport>
         </div>
 
         <el-form-item label="推送渠道" prop="pushChannel" required>
           <el-checkbox-group v-model="form.pushChannel" :disabled="disableType.contentDisable">
             <el-col :span="2">
-              <el-checkbox :value="1" name="channel"> 平台推送 </el-checkbox>
+              <el-checkbox :value="1" name="channel"> 蓝信推送 </el-checkbox>
             </el-col>
             <el-col :span="2">
-              <el-checkbox :value="2" name="channel"> 蓝信推送 </el-checkbox>
+              <el-checkbox :value="2" name="channel"> 平台推送 </el-checkbox>
             </el-col>
           </el-checkbox-group>
         </el-form-item>
@@ -120,7 +120,8 @@
 
         <el-form-item>
           <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="disableType.contentDisable"> 确定 </el-button>
-          <el-button @click="resetForm(ruleFormRef)" :disabled="disableType.contentDisable">重置</el-button>
+          <!-- <el-button @click="resetForm(ruleFormRef)" :disabled="disableType.contentDisable">重置</el-button> -->
+          <el-button @click="clickBack">取消</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -225,6 +226,7 @@
             console.log("修改res", res);
             
             ElMessage.success('修改成功');
+            router.back()
             return res;
           });
         }
@@ -300,7 +302,7 @@
   .left{
     float: left;
     height: calc(100vh - 111px);
-    width: 40%;
+    width: 50%;
     margin-left: 41px;
     padding-top: 20px;
     border-right: 1px solid rgba(0,0,0,0.06);
@@ -310,7 +312,7 @@
   .right{
     float: right;
     height: 294px;
-    width: 448px;
+    width: 30%;
     /* margin-right: 59px; */
     margin-right: 12%;
     margin-top: 20px;

src/views/message/reportmessage/class.ts

@@ -141,20 +141,19 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
         let customPushConfigList: any[] = []
         for (let config of receivedData.customPushConfigList) {
             tempconfig['daterange'] = [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
+            // 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['customStartTime'] = customStartTime
+            // tempconfig['customEndTime'] = customEndTime
             tempconfig['pushDay'] = config.pushTime.split(" ")[0]
             tempconfig['pushTime'] = config.pushTime.split(" ")[1]
             tempconfig['recipientType'] = config.recipientType.toString()
             tempconfig['userGroupList'] = config.userGroupList
-            tempconfig['pushTime'] = config.pushTime.split(" ")[1]
             tempconfig['customUserList'] = config.customUserList.map((user:UserList) => {
                 return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
             })
@@ -162,11 +161,20 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
             customPushConfigList.push(tempconfig)
             tempconfig = {}
         }
-        for (let index in customPushConfigList){
-            const finalPushTime = computed(() => customPushConfigList[index]['pushDay'] + ' ' + customPushConfigList[index]['pushTime'])
-            customPushConfigList[index]['finalPushTime'] = finalPushTime
-        }
+
         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
+
+            const customStartTime = computed(() => customConfig['daterange'][0])
+            const customEndTime = computed(() => customConfig['daterange'][1])
+            customConfig['customStartTime'] = customStartTime
+            customConfig['customEndTime'] = customEndTime
+        }
     }
 };