fix: 消息推送新增修改编辑页面bug

.env.development

@@ -21,6 +21,12 @@ VITE_DROP_CONSOLE = true
 # 中建材 staff
 #VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68:70/skyeye-admin-api"],["/eye_api_bak","http://192.168.13.68:70/eye_api"],["/push_stream_host","http://192.168.13.68:70/push_stream_host"],["/skyeye-login","http://192.168.13.68:70/skyeye-login"],["/ws_api_bak","ws://192.168.13.68:70/ws_api_bak"]]
 VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"],["/nvr_download","http://192.168.13.68/nvr_download"]]
+
+
+# VITE_PROXY=[["/skyeye-admin-api","http://192.168.13.68/skyeye-admin-api"],[],["/eye_api_bak","http://192.168.13.68/eye_api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
+# VITE_PROXY=[["/skyeye-admin-api","http://192.168.23.182:8800/api"],[],["/eye_api_bak","http://192.168.23.182:8800"],["/push_stream_host","http://192.168.23.182/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.23.182/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
+#VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.234:8800/api"],[],["/eye_api_bak","http://192.168.22.234:8800"],["/push_stream_host","http://192.168.22.234/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.22.234/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
+
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.163:8800/api"],[],["/eye_api_bak","http://192.168.22.163:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"]]
 #VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.121:8800/api"],["/eye_api_bak","http://192.168.22.121:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.22.163:8800/api"],[],["/eye_api_bak","http://192.168.22.163:8800/api"],["/push_stream_host","http://192.168.13.68/push_stream_host"],["/skyeye-login","http://192.168.13.68/skyeye-login"],["/ws_api_bak","ws://192.168.13.68/ws_api_bak"],["/skyeye-file-upload","http://192.168.13.68/skyeye-file-upload"]]

src/views/message/CustomSelectTree.vue

@@ -46,7 +46,6 @@ const handleCancle = () => {
 };
 const handleSubmit = (selectedData: UserList[]) => {
   selectedUser.value = selectedData;
-  console.log("selectedUser.value", selectedUser.value);
   prop.form.customPushConfigList[prop.index].customUserList.length = 0
   prop.form.customPushConfigList[prop.index].customUserList.push(...selectedUser.value);
   dialogVisible.value = false;

src/views/message/designatedUserSelectTree.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <!-- v-model="userList" -->
+    <el-select
+      v-model="prop.form.designatedUserList.value"
+      value-key="id"
+      multiple
+      placeholder="请选择人员"
+      @click="dialogVisible = !disableType.contentDisable"
+      :disabled="disableType.contentDisable"
+    >
+      <el-option v-for="user in selectedUser" :key="user.id" :label="user.name" :value="user">
+      </el-option>
+    </el-select>
+    <el-dialog
+      v-model="dialogVisible"
+      title="添加组内成员"
+      align-center
+      :close-on-click-modal="false"
+      style="height: 583px"
+      :width="731"
+      :destroy-on-close="true"
+    >
+      <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" />
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeMount, onBeforeUpdate } from 'vue';
+import SelectTree from './persongroup/components/SelectTree.vue';
+interface UserList {
+  id: string;
+  name: string;
+  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;
+};
+const handleSubmit = (selectedData: UserList[]) => {
+  selectedUser.value = selectedData;
+  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)
+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
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  height: 527px;
+}
+::v-deep .el-select__selection {
+    max-height: 100px;
+    overflow-y: auto;
+}
+</style>

src/views/message/reportmessage/CustomReport.vue

@@ -112,7 +112,7 @@
       label="选择人员:"
       required
       :prop="`customPushConfigList[` + index + `].customUserList`"
-      :rules="{ required: true, message: '请选择推送人员', trigger: [, 'change'] }"
+      :rules="{ required: true, message: '请选择推送人员', trigger: 'change' }"
       >
         <el-col :span="18">
           <CustomSelectTree :form="form" :disableType="disableType" :index="index" :statisticType="5"/>

src/views/message/reportmessage/ReportOperation.vue

@@ -6,9 +6,9 @@
         <a style="color: #303133;" @click="clickBack"><el-icon><Back /></el-icon><span>返回</span></a>
       </div>
       <div class="topRight">
-        <span class="topText" v-if="form.type === 1">新建报表配置</span>
-        <span class="topText" v-if="form.type === 2">查看报表配置</span>
-        <span class="topText" v-if="form.type === 3">编辑报表配置</span>
+        <span class="topText" v-if="pageType === 1">新建报表配置</span>
+        <span class="topText" v-if="pageType === 2">查看报表配置</span>
+        <span class="topText" v-if="pageType === 3">编辑报表配置</span>
       </div>
     </div>
 
@@ -29,26 +29,15 @@
         :size="formSize"
         status-icon
       >
-        <!-- <el-form-item 
-          v-if="form.type === 3"
-          label="指定人员:"
-          required
-          :prop="'designatedUserList'"
-          :rules="{ required: true, message: '请选择人员', trigger: 'change' }"
-        >
-          <el-col :span="10">
-            <SelectTree />
-          </el-col>
-        </el-form-item> -->
         <el-form-item 
           v-if="form.type === 3"
           label="选择人员:"
           required
-          prop="customUserList.value"
+          prop="designatedUserList.value"
           :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
           >
             <el-col :span="18">
-              <SelectTree :form="form" :disableType="disableType"/>
+              <DesignatedUserList :form="form" :disableType="disableType"/>
             </el-col>
         </el-form-item>
 
@@ -140,7 +129,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch, onBeforeMount, nextTick  } from 'vue';
+  import { reactive, ref, watch, onBeforeMount } from 'vue';
   import type { FormInstance } from 'element-plus';
   import TemplateExample from './TemplateExample.vue';
   import WeekReport from './WeekReport.vue';
@@ -153,7 +142,7 @@
   import { storeToRefs } from 'pinia';
   import {useUserStore} from '@/store/modules/user';
   import { useRoute, useRouter } from 'vue-router';
-  import SelectTree from '../SelectTree.vue';
+  import DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
   import { Back } from '@element-plus/icons-vue'
 
   
@@ -189,11 +178,11 @@
   const form = reactive<reportMessage>({
     type: 0,
     statisticType: 0,
-    monthAndDayList: [''],
-    dayOfWeek: '',
+    monthAndDayList: ['1', '1'],
+    dayOfWeek: 1,
     monthList: [''],
-    dayOfMonthList: [''],
-    pushTimeList: [],
+    dayOfMonthList: ['1'],
+    pushTimeList: ['09:00:00'],
     pushChannel: [],
     userGroupList: [],
     designatedUserList: [],
@@ -201,6 +190,10 @@
     customPushConfigList: [],
     customUserList: []
   });
+
+  form.customUserList.value = []  // 防止进入页面开始就显示校验错误
+  form.designatedUserList.value = []
+
   const rules = reactive({
     statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
     pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
@@ -211,8 +204,6 @@
     // customUserList: [{ required: true, message: '请选择推送人员', trigger: 'change, blur' }],
   });
 
-  const CustomReportComponent = ref()  // 自定义组件
-
   const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return
     await formEl.validate((valid, fields) => {
@@ -224,7 +215,8 @@
           addMassage(submitForm).then((res) => {
             console.log("新增res", res);
             
-            ElMessage.success('新增');
+            ElMessage.success('新增成功');
+            router.back()
             return res;
           });
         }
@@ -232,7 +224,7 @@
           editMassage(submitForm).then((res) => {
             console.log("修改res", res);
             
-            ElMessage.success('修改');
+            ElMessage.success('修改成功');
             return res;
           });
         }
@@ -255,24 +247,17 @@
   watch(form, () => {
     console.log(`form newvalue:`, form);
 })
-  // watch(() => form.customUserList, (customUserListNewValue) => {
-  //     console.log(`customUserList`, customUserListNewValue);
-  // })
-
 
   const getDisableType = (pageType) => {
-      if (pageType === 1){
-        // return {"statisticTypeDisable": false, "contentDisable": false}  // 新增
+      if (pageType === 1){  // 新增
         disableType.value.statisticTypeDisable = false
         disableType.value.contentDisable = false
       }
-      else if (pageType === 2){
-        // return {"statisticTypeDisable": true, "contentDisable": true}  // 查询
+      else if (pageType === 2){  // 查询
         disableType.value.statisticTypeDisable = true
         disableType.value.contentDisable = true
       }
-      else if (pageType === 3){
-        // return {"statisticTypeDisable": true, "contentDisable": false}  // 编辑
+      else if (pageType === 3){  // 编辑
         disableType.value.statisticTypeDisable = true
         disableType.value.contentDisable = false
       }
@@ -302,20 +287,6 @@
     form.type = reportType.value
   })
 
-  // const options =  ref([
-  //   {
-  //     value: 1,
-  //     label: '分组1',
-  //   },
-  //   {
-  //     value: 2,
-  //     label: '分组2',
-  //   },
-  //   {
-  //     value: 3,
-  //     label: '分组3',
-  //   },
-  // ])
 </script>
 
 <style scoped>
@@ -329,10 +300,11 @@
   .left{
     float: left;
     height: calc(100vh - 111px);
-    width: 669px;
+    width: 40%;
     margin-left: 41px;
     padding-top: 20px;
     border-right: 1px solid rgba(0,0,0,0.06);
+    overflow: auto;
   }
 
   .right{

src/views/message/reportmessage/TemplateExample.vue

@@ -1,6 +1,14 @@
 <template>
     <div v-if="form.type === 1">
-        <div class="exampleTitleDiv"><span class="exampleTitle"><b>违规报警数据示例</b></span></div>
+        <div class="exampleTitleDiv">
+            <span class="exampleTitle"><b>违规报警数据示例</b></span>
+            <el-tooltip :visible="tipVisible" placement="top">
+              <template #content>
+                <span>示例样式仅供参考，最终展示以线上为准</span>
+              </template>
+              <img style="display: inline-block;" src="~@/assets/icons\info.png" @mouseenter="tipVisible = true" @mouseleave="tipVisible = false"/>
+            </el-tooltip>
+        </div>
 
         <div class="reportblock">
             <div>
@@ -26,7 +34,15 @@
 
     
     <div v-if="form.type === 2">
-        <div class="exampleTitleDiv"><span class="exampleTitle"><b>平台访问数据内容示例</b></span></div>
+        <div class="exampleTitleDiv">
+            <span class="exampleTitle"><b>平台访问数据内容示例</b></span>
+            <el-tooltip :visible="tipVisible" placement="top">
+              <template #content>
+                <span>示例样式仅供参考，最终展示以线上为准</span>
+              </template>
+              <img style="display: inline-block;" src="~@/assets/icons\info.png" @mouseenter="tipVisible = true" @mouseleave="tipVisible = false"/>
+            </el-tooltip>
+        </div>
 
         <div class="reportblock">
             <div>
@@ -52,7 +68,15 @@
 
     
     <div v-if="form.type === 3">
-        <div class="exampleTitleDiv"><span class="exampleTitle"><b>人员访问数据内容示例</b></span></div>
+        <div class="exampleTitleDiv">
+            <span class="exampleTitle"><b>人员访问数据内容示例</b></span>
+            <el-tooltip :visible="tipVisible" placement="top">
+              <template #content>
+                <span>示例样式仅供参考，最终展示以线上为准</span>
+              </template>
+              <img style="display: inline-block;" src="~@/assets/icons\info.png" @mouseenter="tipVisible = true" @mouseleave="tipVisible = false"/>
+            </el-tooltip>
+        </div>
 
         <div class="reportblock">
             <div>
@@ -77,7 +101,10 @@
 </template>
 
 <script lang="ts" setup>
-  const prop = defineProps(['form', 'disableType'])
+  import { ref } from 'vue';
+
+  defineProps(['form', 'disableType'])
+  const tipVisible = ref(false)  // 控制Tooltip显示
 </script>
 
 <style>
@@ -92,7 +119,6 @@
 
   .exampleTitle{
     display: inline-block;
-    width: 182px;
     height: 22px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
@@ -102,6 +128,7 @@
     text-align: left;
     font-style: normal;
     margin-left: 24px;
+    margin-right: 8px;
     margin-top: 11px;
   }
 

src/views/message/reportmessage/YearReport.vue

@@ -108,10 +108,6 @@
         prop.form.dayOfMonthList.length = 0
         prop.form.dayOfMonthList.push(prop.form.monthAndDayList[1])
       }
-      // prop.form.monthList.splice(0, 1);
-      // prop.form.monthList.push(prop.form.monthAndDayList[0])
-      // prop.form.dayOfMonthList.splice(0, 1);
-      // prop.form.dayOfMonthList.push(prop.form.monthAndDayList[1])
     }
   }
 

src/views/message/reportmessage/class.ts

@@ -17,10 +17,10 @@ export enum StatisticType {
 export interface finalReportMessage {
     type: number;
     statisticType: StatisticType;
-    dayOfWeek: ''
+    dayOfWeek: number
     monthList: [string];
     dayOfMonthList: [string];
-    pushTimeList: [];
+    pushTimeList: [string];
     pushChannel: [];
     userGroupList: [];
     designatedUserList: [];
@@ -32,15 +32,15 @@ export interface finalReportMessage {
 export interface reportMessage {
     type: number;
     statisticType: StatisticType;
-    dayOfWeek: ''
+    dayOfWeek: number
     monthList: [string];
-    monthAndDayList?: [string],
+    monthAndDayList?: [string, string] | any,
     dayOfMonthList: [string];
-    pushTimeList: [];
+    pushTimeList: [string];
     pushChannel: [];
-    userGroupList: [];
-    designatedUserList: [];
-    customUserList: [];
+    userGroupList: any[];
+    designatedUserList: any;
+    customUserList: any;
     recipientType: number|undefined;
     customPushConfigList: computeCustom[]|any;
 }
@@ -108,8 +108,8 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
     form.dayOfMonthList = receivedData.dayOfMonthList
     form.pushTimeList = receivedData.pushTimeList
     form.pushChannel = receivedData.pushChannel
-    form.userGroupList = receivedData.userGroupList
-    form.designatedUserList = receivedData.designatedUserList
+    form.userGroupList = receivedData.userGroupList?.map((user:any) => user.id)
+    form.designatedUserList.value = receivedData.designatedUserList
     form.customUserList.value = receivedData.customUserList
     form.recipientType = receivedData.recipientType
     form.customPushConfigList = []
@@ -119,19 +119,20 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
             return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
         })
     }
-    
-    if(receivedData.customPushConfigList[0].customUserList.length > 0){
-        for (let index in form.customPushConfigList) {
-            let userInfo = receivedData.customPushConfigList[index].customUserList.map((user:UserList) => {
-                return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
-            })
-            form.customPushConfigList[index]['customUserList'].push(userInfo)
-        }
+    if(form.designatedUserList.value.length > 0){
+        form.designatedUserList.value = form.designatedUserList.value.map((user) => {
+            return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
+        })
     }
     if(receivedData.statisticType === 2){
+        
+        // form.dayOfMonthList[0] = receivedData.dayOfMonthList[0].toString()
         form.dayOfMonthList.push(receivedData.dayOfMonthList[0].toString())
+        // form.dayOfMonthList.splice(0, form.dayOfMonthList.length);
+        // form.dayOfMonthList.push(receivedData.dayOfMonthList[0])
     }
     if(receivedData.statisticType === 4){
+        form.monthAndDayList.length = 0
         form.monthAndDayList?.push(receivedData.monthList[0].toString())
         form.monthAndDayList?.push(receivedData.dayOfMonthList[0].toString())
     }
@@ -157,30 +158,9 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
             tempconfig['customUserList'] = config.customUserList.map((user:UserList) => {
                 return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
             })
+            tempconfig['userGroupList'] = config.userGroupList?.map((user:any) => user.id)
             customPushConfigList.push(tempconfig)
             tempconfig = {}
-            
-            // if(receivedData.customPushConfigList[0].customUserList.length > 0){
-            //     for (let index in form.customPushConfigList) {
-            //         // console.log("form.customPushConfigList[index][customConfig']", form.customPushConfigList[index]["customUserList"]);
-            //         // for (let userIndex in form.customPushConfigList[index]["customUserList"]){
-            //         //     console.log("userindex", userIndex);
-            //         //     // console.log("form.customPushConfigList[index][customConfig']", form.customPushConfigList[index]["customUserList"][0]);
-                        
-            //         //     console.log("aaa",form.customPushConfigList[index]["customUserList"].map((user:UserList) => {
-            //         //         return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
-            //         //     }))
-            //         // }
-            //         // console.log("form.customPushConfigList[index].customUserList", form.customPushConfigList[index].customUserList);
-            //         // console.log("form.customPushConfigList[index].customUserList",form.customPushConfigList[index].customUserList.map((user:UserList) => {
-            //         //     return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
-            //         // }));
-            //         let userInfo = receivedData.customPushConfigList[index].customUserList.map((user:UserList) => {
-            //             return {"id": `u${user.userId}`, "name": user.userNickname, "userId": user.userId}
-            //         })
-            //         form.customPushConfigList[index]['customUserList'].push(userInfo)
-            //     }
-            // }
         }
         for (let index in customPushConfigList){
             const finalPushTime = computed(() => customPushConfigList[index]['pushDay'] + ' ' + customPushConfigList[index]['pushTime'])
@@ -208,9 +188,6 @@ export const reportMessageToFinal = (form) => {  // 临时表单转为只存在
                         tempCustom['pushTime'] = config[key]
                     }
                     else if(key === 'customUserList'){
-                        console.log("key", key);
-                        console.log("config[key]", config[key]);
-                        
                         tempCustom['customUserList'] = config[key].map((user) => user.userId)
                     }
                     else{
@@ -222,7 +199,7 @@ export const reportMessageToFinal = (form) => {  // 临时表单转为只存在
             }
         }
     }
-
+    
     return {
         "type": form.type,
         "statisticType": form.statisticType,
@@ -231,10 +208,10 @@ export const reportMessageToFinal = (form) => {  // 临时表单转为只存在
         "dayOfMonthList": form.dayOfMonthList,
         "pushTimeList": form.pushTimeList,
         "pushChannel": form.pushChannel,
-        "userGroupList": form.userGroupList,
+        "userGroupList": form.userGroupList?.map((userOrId) => userOrId.id? userOrId.id :userOrId),  // 用户对象和id可能会同时存在列表中
         "recipientType": form.recipientType,
         "customPushConfigList": customPushConfigList,
-        "designatedUserList": form.designatedUserList,
+        "designatedUserList": form.designatedUserList.value?.map((user) => user.userId),  // 只取出id
         "customUserList": form.customUserList.value?.map((user) => user.userId)
     }
 };