fix: 人员筛选bug修复

src/views/message/reportmessage/ReportOperation.vue

@@ -12,60 +12,31 @@
     </div>
     <div class="content">
       <div class="left">
-        <el-form
-          ref="ruleFormRef"
-          style="max-width: 1000px"
-          :model="form"
-          :rules="rules"
-          label-width="auto"
-          class="demo-ruleForm"
-          :size="formSize"
-          :label-position="labelPosition"
-        >
-          <el-form-item
-            v-if="form.type === 3"
-            label="指定人员:"
-            required
-            prop="designatedUserList.value"
-            style="width: 660px"
-            :rules="{ required: true, message: '请选择人员', trigger: ['change'] }"
-          >
+        <el-form ref="ruleFormRef" style="max-width: 1000px" :model="form" :rules="rules" label-width="auto"
+          class="demo-ruleForm" :size="formSize" :label-position="labelPosition">
+          <el-form-item v-if="form.type === 3" label="指定人员:" required prop="designatedUserList" style="width: 660px"
+            :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
             <el-col :span="18">
               <DesignatedPersonSelection :form="form" :disableType="disableType" />
             </el-col>
           </el-form-item>
 
           <el-form-item label="报表周期：" prop="statisticType" required>
-            <el-radio-group
-              v-model="form.statisticType"
-              :disabled="disableType.statisticTypeDisable"
-            >
+            <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
-                  >
+                  <span>每次推送上个自然周数据</span><br />
+                  <div style="text-align: center">(每周一至周日)</div>
                 </template>
-                <el-radio
-                  :value="1"
-                  @mouseenter="weekVisible = true"
-                  @mouseleave="weekVisible = false"
-                  >周报</el-radio
-                >
+                <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
-                  >
+                  <span>每次推送上个自然月数据</span><br />
+                  <div style="text-align: center">(每月第一天至最后一天)</div>
                 </template>
-                <el-radio
-                  :value="2"
-                  @mouseenter="monthVisible = true"
-                  @mouseleave="monthVisible = false"
-                  >月报</el-radio
-                >
+                <el-radio :value="2" @mouseenter="monthVisible = true" @mouseleave="monthVisible = false">月报</el-radio>
               </el-tooltip>
 
               <!-- <el-tooltip :visible="seasonVisible" placement="top">
@@ -84,25 +55,15 @@
                 <template #content>
                   <span>每次推送上一整年的数据</span>
                 </template>
-                <el-radio
-                  :value="4"
-                  @mouseenter="yearVisible = true"
-                  @mouseleave="yearVisible = false"
-                  >年报</el-radio
-                >
+                <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-radio el-radio :value="5" @mouseenter="customVisible = true"
+                  @mouseleave="customVisible = false">自定义</el-radio>
               </el-tooltip>
             </el-radio-group>
           </el-form-item>
@@ -120,12 +81,9 @@
           </div>
 
           <div v-if="form.statisticType === 5" class="custom-report">
-            <CustomReport
-              ref="CustomReportComponent"
-              :form="form"
-              :disableType="disableType"
-              :ruleFormRef="ruleFormRef"
-            ></CustomReport>
+            <CustomReport ref="CustomReportComponent" :form="form" :disableType="disableType"
+              :ruleFormRef="ruleFormRef">
+            </CustomReport>
           </div>
 
           <el-form-item label="推送渠道：" prop="pushChannel" required>
@@ -145,11 +103,7 @@
         </el-form>
         <div class="two-btns">
           <el-button @click="clickBack">取消</el-button>
-          <el-button
-            type="primary"
-            @click="submitForm(ruleFormRef)"
-            :disabled="disableType.contentDisable"
-          >
+          <el-button type="primary" @click="submitForm(ruleFormRef)" :disabled="disableType.contentDisable">
             确定
           </el-button>
         </div>
@@ -162,223 +116,230 @@
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch, onBeforeMount } from 'vue';
-  import type { FormInstance } from 'element-plus';
-  import TemplateExample from './TemplateExample.vue';
-  import WeekReport from './WeekReport.vue';
-  import MonthReport from './MonthReport.vue';
-  import YearReport from './YearReport.vue';
-  import CustomReport from './CustomReport.vue';
-  import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
-  import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
-  import { ElMessage } from 'element-plus';
-  import { storeToRefs } from 'pinia';
-  import { useUserStore } from '@/store/modules/user';
-  import { useFormList } from './store/useFormList';
-  import { useRoute, useRouter } from 'vue-router';
-  import DesignatedPersonSelection from './components/DesignatedPersonSelection.vue';
-  import type { FormProps } from 'element-plus';
-  import { debounce } from 'lodash-es';
-
-  const labelPosition = ref<FormProps['labelPosition']>('left');
-
-  const useUser = useUserStore();
-  const FormList = useFormList();
-  const { info } = storeToRefs(useUser);
-  const { type } = storeToRefs(FormList);
-  let operater = info.value.nickname;
-
-  const weekVisible = ref(false); // 控制Tooltip显示
-  const monthVisible = ref(false); // 控制Tooltip显示
-  // const seasonVisible = 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();
-
-  // let pageType = 3  // 功能类型：1是新增，2是查询，3是编辑
-  // let reportType = 1  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
-  const route = useRoute();
-  const router = useRouter();
-  const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : 0);
-  const reportType = ref<number>(route.query.type ? Number(route.query.type) : 0);
-  const statisticType = ref<number>(
-    route.query.statisticType ? Number(route.query.statisticType) : 0,
-  );
-  let queryType = { type: reportType.value, statisticType: statisticType.value };
-
-  const form = reactive<reportMessage>({
-    configIdList: null,
-    type: 0,
-    statisticType: 0,
-    monthAndDayList: ['1', '1'],
-    dayOfWeek: 1,
-    monthList: [''],
-    dayOfMonthList: ['1'],
-    pushTimeList: ['09:00:00'],
-    pushChannel: [],
-    userGroupList: [],
-    designatedUserList: [],
-    recipientType: undefined,
-    customPushConfigList: [],
-    customUserList: [],
-  });
+import { reactive, ref, watch, onBeforeMount } from 'vue';
+import type { FormInstance } from 'element-plus';
+import TemplateExample from './TemplateExample.vue';
+import WeekReport from './WeekReport.vue';
+import MonthReport from './MonthReport.vue';
+import YearReport from './YearReport.vue';
+import CustomReport from './CustomReport.vue';
+import { reportMessage, toReportMessage, reportMessageToFinal } from './class.ts';
+import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/modules/user';
+import { useFormList } from './store/useFormList';
+import { useRoute, useRouter } from 'vue-router';
+import DesignatedPersonSelection from './components/DesignatedPersonSelection.vue';
+import type { FormProps } from 'element-plus';
+import { debounce } from 'lodash-es';
 
-  form.customUserList.value = []; // 防止进入页面开始就显示校验错误
-  form.designatedUserList.value = [];
+const labelPosition = ref<FormProps['labelPosition']>('left');
 
-  const rules = reactive({
-    statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
-    pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
-    dayOfWeek: [{ required: true, message: '请选择推送日期', trigger: 'change' }],
-    dayOfMonthList: [{ required: true, message: '请选择推送日', trigger: 'change' }],
-    recipientType: [{ required: true, message: '请选择推送对象', trigger: ['blur', 'change'] }],
-    userGroupList: [{ required: true, message: '请选择推送分组', trigger: 'change' }],
-  });
+const useUser = useUserStore();
+const FormList = useFormList();
+const { info } = storeToRefs(useUser);
+const { type } = storeToRefs(FormList);
+let operater = info.value.nickname;
 
-  const addDebounce = debounce((form) => {
-    addMassage(form).then(() => {
-      ElMessage.success('新增成功');
-      clickBack();
-    });
-  }, 500);
+const weekVisible = ref(false); // 控制Tooltip显示
+const monthVisible = ref(false); // 控制Tooltip显示
+// const seasonVisible = ref(false); // 控制Tooltip显示
+const yearVisible = ref(false); // 控制Tooltip显示
+const customVisible = ref(false); // 控制Tooltip显示
 
-  const editDebounce = debounce((form) => {
-    editMassage(form).then(() => {
-      ElMessage.success('修改成功');
-      clickBack();
-    });
-  }, 500);
-
-  const submitForm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    await formEl.validate((valid, fields) => {
-      if (valid) {
-        console.log('submit!');
-        let submitForm = reportMessageToFinal(form);
-        console.log('submitForm', submitForm);
-        if (pageType.value != 3) {
-          addDebounce(submitForm);
-        } else {
-          editDebounce(submitForm);
-        }
-      } else {
-        console.log('error submit!', fields);
-      }
-    });
-  };
+let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
+
+const formSize = ref('default'); // 校验表单
+const ruleFormRef = ref();
 
-  // const resetForm = (formEl: FormInstance | undefined) => {
-  //   if (!formEl) return;
-  //   formEl.resetFields();
-  // };
+// let pageType = 3  // 功能类型：1是新增，2是查询，3是编辑
+// let reportType = 1  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
+const route = useRoute();
+const router = useRouter();
+const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : 0);
+const reportType = ref<number>(route.query.type ? Number(route.query.type) : 0);
+const statisticType = ref<number>(
+  route.query.statisticType ? Number(route.query.statisticType) : 0,
+);
+let queryType = { type: reportType.value, statisticType: statisticType.value };
 
-  const clickBack = () => {
-    type.value = reportType.value;
-    router.back();
-  };
+const form = reactive<reportMessage>({
+  configIdList: null,
+  type: 0,
+  statisticType: 0,
+  monthAndDayList: ['1', '1'],
+  dayOfWeek: 1,
+  monthList: [''],
+  dayOfMonthList: ['1'],
+  pushTimeList: ['09:00:00'],
+  pushChannel: [],
+  userGroupList: [],
+  designatedUserList: [],
+  recipientType: undefined,
+  customPushConfigList: [],
+  customUserList: [],
+});
 
-  watch(form, () => {
-    console.log(`form newvalue:`, form);
+form.customUserList.value = []; // 防止进入页面开始就显示校验错误
+form.designatedUserList = [];
+
+const rules = reactive({
+  statisticType: [{ required: true, message: '请选择统计时间段', trigger: 'change, blur' }],
+  pushChannel: [{ required: true, message: '请选择推送渠道', trigger: 'change' }],
+  dayOfWeek: [{ required: true, message: '请选择推送日期', trigger: 'change' }],
+  dayOfMonthList: [{ required: true, message: '请选择推送日', trigger: 'change' }],
+  recipientType: [{ required: true, message: '请选择推送对象', trigger: ['blur', 'change'] }],
+  userGroupList: [{ required: true, message: '请选择推送分组', trigger: 'change' }],
+});
+
+const addDebounce = debounce((form) => {
+  addMassage(form).then(() => {
+    ElMessage.success('新增成功');
+    clickBack();
   });
+}, 500);
 
-  const getDisableType = (pageType) => {
-    if (pageType === 1) {
-      // 新增
-      disableType.value.statisticTypeDisable = false;
-      disableType.value.contentDisable = false;
-    } else if (pageType === 2) {
-      // 查询
-      disableType.value.statisticTypeDisable = true;
-      disableType.value.contentDisable = true;
-    } else if (pageType === 3) {
-      // 编辑
-      disableType.value.statisticTypeDisable = true;
-      disableType.value.contentDisable = false;
-    }
-  };
+const editDebounce = debounce((form) => {
+  editMassage(form).then(() => {
+    ElMessage.success('修改成功');
+    clickBack();
+  });
+}, 500);
 
-  onBeforeMount(() => {
-    if (pageType.value === 1) {
-      // 新增
-      getDisableType(1);
-    }
-    if (pageType.value === 2) {
-      // 查询
-      getDisableType(2);
-      searchMassage(queryType).then((res) => {
-        console.log('res', res);
-        toReportMessage(form, res);
-        return res;
-      });
-    }
-    if (pageType.value === 3) {
-      // 编辑
-      getDisableType(3);
-      searchMassage(queryType).then((res) => {
-        console.log('res', res);
-        toReportMessage(form, res);
-        return res;
-      });
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let submitForm = reportMessageToFinal(form);
+      if (pageType.value != 3) {
+        addDebounce(submitForm);
+      } else {
+        editDebounce(submitForm);
+      }
+    } else {
+      console.log('error submit!', fields);
     }
-    form.type = reportType.value;
   });
+};
+
+// const resetForm = (formEl: FormInstance | undefined) => {
+//   if (!formEl) return;
+//   formEl.resetFields();
+// };
+
+const clickBack = () => {
+  type.value = reportType.value;
+  router.back();
+};
+
+watch(form, () => {
+  console.log(`form newvalue:`, form);
+});
+
+const getDisableType = (pageType) => {
+  if (pageType === 1) {
+    // 新增
+    disableType.value.statisticTypeDisable = false;
+    disableType.value.contentDisable = false;
+  } else if (pageType === 2) {
+    // 查询
+    disableType.value.statisticTypeDisable = true;
+    disableType.value.contentDisable = true;
+  } else if (pageType === 3) {
+    // 编辑
+    disableType.value.statisticTypeDisable = true;
+    disableType.value.contentDisable = false;
+  }
+};
+
+onBeforeMount(() => {
+  if (pageType.value === 1) {
+    // 新增
+    getDisableType(1);
+  }
+  if (pageType.value === 2) {
+    // 查询
+    getDisableType(2);
+    searchMassage(queryType).then((res) => {
+      console.log('res', res);
+      toReportMessage(form, res);
+      return res;
+    });
+  }
+  if (pageType.value === 3) {
+    // 编辑
+    getDisableType(3);
+    searchMassage(queryType).then((res) => {
+      console.log('res3333', res);
+      toReportMessage(form, res);
+      return res;
+    });
+  }
+  form.type = reportType.value;
+});
 </script>
 
 <style lang="scss" scoped>
-  .page {
-    height: calc(100vh - 64px - 18px);
-    background-color: rgba(255, 255, 255, 1);
-    .top {
+.page {
+  height: calc(100vh - 64px - 18px);
+  background-color: rgba(255, 255, 255, 1);
+
+  .top {
+    display: flex;
+    padding: 16px 0 15px 20px;
+    border-bottom: 1px solid #e9e9e9;
+
+    .topLeft {
       display: flex;
-      padding: 16px 0 15px 20px;
-      border-bottom: 1px solid #e9e9e9;
-      .topLeft {
+      align-items: center;
+      cursor: pointer;
+
+      a {
         display: flex;
         align-items: center;
-        cursor: pointer;
-        a {
-          display: flex;
-          align-items: center;
-        }
-      }
-      .topRight {
-        margin-left: 20px;
       }
     }
-    .content {
+
+    .topRight {
+      margin-left: 20px;
+    }
+  }
+
+  .content {
+    display: flex;
+    height: calc(100vh - 130px);
+
+    .left {
       display: flex;
-      height: calc(100vh - 130px);
-      .left {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        padding: 20px 0 0 32px;
-        width: 769px;
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
+      flex-direction: column;
+      position: relative;
+      padding: 20px 0 0 32px;
+      width: 769px;
+      border-right: 1px solid rgba(0, 0, 0, 0.06);
+      overflow-y: auto;
+
+      .custom-report {
+        max-height: calc(100vh - 450px);
         overflow-y: auto;
-        .custom-report {
-          max-height: calc(100vh - 450px);
-          overflow-y: auto;
-        }
-        .two-btns {
-          position: absolute;
-          right: 33px;
-          bottom: 32px;
-        }
       }
-      .right {
-        height: 299px;
-        width: 363px;
-        margin-left: 31px;
-        margin-top: 20px;
-        background: #ffffff;
-        border-radius: 4px 4px 0px 0px;
-        border: 1px solid #e9e9e9;
+
+      .two-btns {
+        position: absolute;
+        right: 33px;
+        bottom: 32px;
       }
     }
+
+    .right {
+      height: 299px;
+      width: 363px;
+      margin-left: 31px;
+      margin-top: 20px;
+      background: #ffffff;
+      border-radius: 4px 4px 0px 0px;
+      border: 1px solid #e9e9e9;
+    }
   }
+}
 </style>

src/views/message/reportmessage/class.ts

@@ -1,4 +1,5 @@
 import { reactive, computed } from 'vue';
+import { SelectedFilterPersonInfo } from '@/api/message/person-group';
 
 export enum type {
   violationAlarm = 1,
@@ -41,7 +42,7 @@ export interface reportMessage {
   pushTimeList: [string];
   pushChannel: [];
   userGroupList: any[];
-  designatedUserList: any;
+  designatedUserList: SelectedFilterPersonInfo[];
   customUserList: any;
   recipientType: number | undefined;
   customPushConfigList: computeCustom[] | any;
@@ -52,7 +53,7 @@ export interface finalCustom {
   configId: number | null;
   customStartTime: string;
   customEndTime: string;
-  customUserList: [];
+  customUserList: SelectedFilterPersonInfo[];
   pushTime: string;
   recipientType: string;
   userGroupList: [];
@@ -115,8 +116,16 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
   form.pushTimeList = receivedData.pushTimeList;
   form.pushChannel = receivedData.pushChannel;
   form.userGroupList = receivedData.userGroupList?.map((user: any) => user.id);
-  form.designatedUserList.value = receivedData.designatedUserList;
-  form.customUserList.value = receivedData.customUserList;
+  form.designatedUserList = receivedData.designatedUserList.map((user: any) => ({
+    id: user.userId,
+    staffNo: user.userId,
+    nickname: user.userNickname,
+  }));
+  form.customUserList.value = receivedData.customUserList.map((user: any) => ({
+    id: user.userId,
+    staffNo: user.userId,
+    nickname: user.userNickname,
+  }));
   form.recipientType = receivedData.recipientType;
   form.customPushConfigList = [];
 
@@ -169,11 +178,11 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
       tempconfig['pushTime'] = config.pushTime.split(' ')[1];
       tempconfig['recipientType'] = config.recipientType.toString();
       tempconfig['userGroupList'] = config.userGroupList;
-      tempconfig['customUserList'] = config.customUserList.map((user: UserList) => {
+      tempconfig['customUserList'] = config.customUserList.map((user: any) => {
         return {
-          id: `u${user.userId}`,
-          name: user.userLoginName + '-' + user.userNickname,
-          userId: user.userId,
+          id: user.userId,
+          staffNo: user.userId,
+          nickname: user.userNickname,
         };
       });
       tempconfig['userGroupList'] = config.userGroupList?.map((user: any) => user.id);
@@ -237,7 +246,7 @@ export const reportMessageToFinal = (form) => {
     userGroupList: form.userGroupList?.map((userOrId) => (userOrId.id ? userOrId.id : userOrId)), // 用户对象和id可能会同时存在列表中
     recipientType: form.recipientType,
     customPushConfigList: customPushConfigList,
-    designatedUserList: form.designatedUserList.value?.map((user) => user.id), // 只取出id
+    designatedUserList: form.designatedUserList.map((user) => user.id), // 只取出id
     customUserList: form.customUserList.value?.map((user) => user.id),
   };
 };

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

@@ -1,87 +1,65 @@
 <template>
   <div>
-    <el-select
-      v-model="prop.form.customPushConfigList[index].customUserList"
-      value-key="id"
-      multiple
-      placeholder="请选择人员"
-      @click="dialogVisible = !disableType.contentDisable"
-      :disabled="disableType.contentDisable"
-    >
-      <el-option
-        v-for="user in selectedUser"
-        :key="user.id"
-        :label="user.staffNo + '-' + user.nickname"
-        :value="user"
-      />
+    <el-select v-model="prop.form.customPushConfigList[index].customUserList" value-key="id" multiple
+      placeholder="请选择人员" @click="dialogVisible = !disableType.contentDisable" :disabled="disableType.contentDisable">
+      <el-option v-for="user in selectedUser" :key="user.id" :label="user.staffNo + '-' + user.nickname"
+        :value="user" />
     </el-select>
-    <el-dialog
-      v-model="dialogVisible"
-      title="添加人员"
-      align-center
-      :close-on-click-modal="false"
-      style="height: 583px"
-      :width="731"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      class="workShopDialog"
-    >
+    <el-dialog v-model="dialogVisible" title="添加人员" align-center :close-on-click-modal="false" style="height: 583px"
+      :width="731" :destroy-on-close="true" :append-to-body="true" class="workShopDialog">
       <!-- <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" /> -->
-      <PersonFilterSelection
-        @cancel="handleCancle"
-        @submit="handleSubmit"
-        :init-selected="selectedUser"
-      />
+      <PersonFilterSelection @cancel="handleCancle" @submit="handleSubmit" :init-selected="selectedUser" />
     </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, watch } from 'vue';
-  import { SelectedFilterPersonInfo } from '@/api/message/person-group';
-  // import SelectTree from '@/views/message/persongroup/components/SelectTree.vue';
-  import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
-  // interface UserList {
-  //   id: string;
-  //   name: string;
-  //   userId: number;
-  // }
-  const dialogVisible = ref<boolean>(false);
-  const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
+import { ref, onMounted, watch } from 'vue';
+import { SelectedFilterPersonInfo } from '@/api/message/person-group';
+// import SelectTree from '@/views/message/persongroup/components/SelectTree.vue';
+import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
+// interface UserList {
+//   id: string;
+//   name: string;
+//   userId: number;
+// }
+const dialogVisible = ref<boolean>(false);
+const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
 
-  const prop = defineProps(['form', 'disableType', 'index', 'ruleFormRef']);
+const prop = defineProps(['form', 'disableType', 'index', 'ruleFormRef']);
 
-  const handleCancle = () => {
-    dialogVisible.value = false;
-  };
-  const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
-    selectedUser.value = selectedData;
-    prop.form.customPushConfigList[prop.index].customUserList.length = 0;
-    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.customPushConfigList[prop.index].customUserList;
-    }
-  });
+const handleCancle = () => {
+  dialogVisible.value = false;
+};
+const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
+  selectedUser.value = selectedData;
+  prop.form.customPushConfigList[prop.index].customUserList.length = 0;
+  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.customPushConfigList[prop.index].customUserList;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .el-dialog__body {
-    height: 527px;
-  }
-  ::v-deep .el-select__selection {
-    min-height: 25px;
-    max-height: 60px;
-    overflow-y: auto;
-  }
+::v-deep .el-dialog__body {
+  height: 527px;
+}
+
+::v-deep .el-select__selection {
+  min-height: 25px;
+  max-height: 60px;
+  overflow-y: auto;
+}
 </style>

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

@@ -1,93 +1,71 @@
 <template>
   <div>
-    <el-select
-      v-model="prop.form.designatedUserList.value"
-      value-key="id"
-      multiple
-      placeholder="请选择人员vbbnnb"
-      @click="dialogVisible = !disableType.contentDisable"
-      :disabled="disableType.contentDisable"
-    >
-      <el-option
-        v-for="user in selectedUser"
-        :key="user.id"
-        :label="user.staffNo + '-' + user.nickname"
-        :value="user"
-      />
+    <el-select v-model="prop.form.designatedUserList" value-key="id" multiple placeholder="请选择人员"
+      @click="dialogVisible = !disableType.contentDisable" :disabled="disableType.contentDisable">
+      <el-option v-for="user in selectedUser" :key="user.id" :label="user.staffNo + '-' + user.nickname"
+        :value="user" />
     </el-select>
-    <el-dialog
-      v-model="dialogVisible"
-      title="添加人员"
-      align-center
-      :close-on-click-modal="false"
-      style="height: 583px"
-      :width="731"
-      :destroy-on-close="true"
-      :append-to-body="true"
-      class="workShopDialog"
-    >
+    <el-dialog v-model="dialogVisible" title="添加人员" align-center :close-on-click-modal="false" style="height: 583px"
+      :width="731" :destroy-on-close="true" :append-to-body="true" class="workShopDialog">
       <!-- <SelectTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" /> -->
-      <PersonFilterSelection
-        @cancel="handleCancle"
-        @submit="handleSubmit"
-        :init-selected="selectedUser"
-      />
+      <PersonFilterSelection @cancel="handleCancle" @submit="handleSubmit" :init-selected="selectedUser" />
     </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onBeforeUpdate, watch } from 'vue';
-  import { SelectedFilterPersonInfo } from '@/api/message/person-group';
-  // import SelectTree from '@/views/message/persongroup/components/SelectTree.vue';
-  import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
-  // interface UserList {
-  //   id: string;
-  //   name: string;
-  //   userId: number;
-  // }
-  const dialogVisible = ref<boolean>(false);
-  const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
+import { ref, onBeforeUpdate, watch } from 'vue';
+import { SelectedFilterPersonInfo } from '@/api/message/person-group';
+// import SelectTree from '@/views/message/persongroup/components/SelectTree.vue';
+import PersonFilterSelection from '@/views/message/components/PersonFilterSelection.vue';
+// interface UserList {
+//   id: string;
+//   name: string;
+//   userId: number;
+// }
+const dialogVisible = ref<boolean>(false);
+const selectedUser = ref<SelectedFilterPersonInfo[]>([]);
 
-  const prop = defineProps(['form', 'disableType']);
+const prop = defineProps(['form', 'disableType']);
 
-  const handleCancle = () => {
-    dialogVisible.value = false;
-  };
-  const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
-    selectedUser.value = selectedData;
-    prop.form.designatedUserList.value = selectedUser.value;
-    dialogVisible.value = false;
-  };
+const handleCancle = () => {
+  dialogVisible.value = false;
+};
+const handleSubmit = (selectedData: SelectedFilterPersonInfo[]) => {
+  selectedUser.value = selectedData;
+  prop.form.designatedUserList = selectedUser.value;
+  dialogVisible.value = false;
+};
 
-  watch(
-    () => prop.form.designatedUserList.value,
-    (newSelected) => {
-      selectedUser.value = newSelected;
-    },
-    { deep: true, immediate: true },
-  );
+watch(
+  () => prop.form.designatedUserList,
+  (newSelected) => {
+    selectedUser.value = newSelected;
+  },
+  { deep: true, immediate: true },
+);
 
-  onBeforeUpdate(() => {
-    if (prop.form.designatedUserList?.value?.length > 0) {
-      selectedUser.value = prop.form.designatedUserList.value.map((item) => {
-        return {
-          id: item.userId,
-          nickname: item.userNickname,
-          staffNo: item.userLoginName,
-        };
-      });
-    }
-  });
+onBeforeUpdate(() => {
+  if (prop.form.designatedUserList?.value?.length > 0) {
+    selectedUser.value = prop.form.designatedUserList.map((item) => {
+      return {
+        id: item.userId,
+        nickname: item.userNickname,
+        staffNo: item.userLoginName,
+      };
+    });
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .el-dialog__body {
-    height: 527px;
-  }
-  ::v-deep .el-select__selection {
-    min-height: 25px;
-    max-height: 60px;
-    overflow-y: auto;
-  }
+::v-deep .el-dialog__body {
+  height: 527px;
+}
+
+::v-deep .el-select__selection {
+  min-height: 25px;
+  max-height: 60px;
+  overflow-y: auto;
+}
 </style>