Merge branch 'all-v4-qindao' into 'all-v4'

fix: 删除debounce自定义指令，修复报表realname

See merge request skyeye/skyeye_frontend/skyeye-admin!338

src/directives/debounceTreeSelect.ts

@@ -1,42 +0,0 @@
-import { ObjectDirective } from 'vue';
-
-// 防抖函数
-function debounce<T extends (...args: any[]) => any>(func: T, delay: number) {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, delay);
-  };
-}
-
-// 自定义防抖指令
-const vDebounceTreeSelect: ObjectDirective = {
-  mounted(el: HTMLElement, binding) {
-    const inputElement = el.querySelector('input') as HTMLInputElement;
-    if (inputElement) {
-      const originalRemoteMethod = binding.value;
-      const debouncedRemoteMethod = debounce(originalRemoteMethod, 1000);
-      inputElement.addEventListener('input', (event) => {
-        const query = (event.target as HTMLInputElement).value;
-        debouncedRemoteMethod(query);
-      });
-    }
-  },
-  unmounted(el: HTMLElement, binding) {
-    const inputElement = el.querySelector('input') as HTMLInputElement;
-    if (inputElement) {
-      const originalRemoteMethod = binding.value;
-      const debouncedRemoteMethod = debounce(originalRemoteMethod, 1000);
-      inputElement.removeEventListener('input', (event) => {
-        const query = (event.target as HTMLInputElement).value;
-        debouncedRemoteMethod(query);
-      });
-    }
-  },
-};
-
-export default vDebounceTreeSelect;

src/views/message/reportmessage/ReportOperation.vue

@@ -5,15 +5,29 @@
         <img src="./img/rollback.png" style="margin-right: 8px" /><span>返回</span>
       </div>
       <div class="topRight">
-        <span >{{ OperationTypeNames[pageType] }}报表配置</span>
+        <span>{{ OperationTypeNames[pageType] }}报表配置</span>
       </div>
     </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 === PushMessageTypeEnum.DESIGNEE_ACCESS_DATA" label="指定人员:" required prop="designatedUserList" 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 === PushMessageTypeEnum.DESIGNEE_ACCESS_DATA"
+            label="指定人员:"
+            required
+            prop="designatedUserList"
+            style="width: 660px"
+            :rules="{ required: true, message: '请选择人员', trigger: 'change' }"
+          >
             <el-col :span="18">
               <DesignatedPersonSelection :form="form" :disableType="disableType" />
             </el-col>
@@ -34,9 +48,12 @@
 
           <component :is="currentComponent" :form="form" :disableType="disableType" />
           <div v-if="Number(form.statisticType) === StatisticTypeEnum.CUSTOM_REPORT" class="custom-report">
-            <CustomReport ref="CustomReportComponent" :form="form" :disableType="disableType"
-              :ruleFormRef="ruleFormRef">
-            </CustomReport>
+            <CustomReport
+              ref="CustomReportComponent"
+              :form="form"
+              :disableType="disableType"
+              :ruleFormRef="ruleFormRef"
+            />
           </div>
 
           <el-form-item label="推送渠道：" prop="pushChannel" required>
@@ -62,214 +79,218 @@
         </div>
       </div>
       <div class="right">
-        <TemplateExample :form="form" :disableType="disableType"></TemplateExample>
+        <TemplateExample :form="form" :disableType="disableType" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, onBeforeMount, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { ElMessage } from 'element-plus';
-import type { FormInstance, FormProps } from 'element-plus';
-import { debounce } from 'lodash-es';
-import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
-import { useUserStore } from '@/store/modules/user';
-import { useFormList } from './store/useFormList';
-import { reportMessage, toReportMessage, reportMessageToFinal } from './class';
-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';
-import MonthReport from './MonthReport.vue';
-import YearReport from './YearReport.vue';
-import CustomReport from './CustomReport.vue';
+  import { reactive, ref, onBeforeMount, computed } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
+  import { ElMessage } from 'element-plus';
+  import type { FormInstance, FormProps } from 'element-plus';
+  import { debounce } from 'lodash-es';
+  import { addMassage, searchMassage, editMassage } from '@/api/message/report-message';
+  import { useUserStore } from '@/store/modules/user';
+  import { useFormList } from './store/useFormList';
+  import { reportMessage, toReportMessage, reportMessageToFinal } from './class';
+  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';
+  import MonthReport from './MonthReport.vue';
+  import YearReport from './YearReport.vue';
+  import CustomReport from './CustomReport.vue';
 
-const labelPosition = ref<FormProps['labelPosition']>('left');
-const useUser = useUserStore();
-const FormList = useFormList();
-const { info } = storeToRefs(useUser);
-const { type } = storeToRefs(FormList);
-let operater = info.value.realname;
-let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
-const formSize = ref('default'); // 校验表单
-const ruleFormRef = ref();
-const route = useRoute();
-const router = useRouter();
-// 功能类型：1是新增，2是查询，3是编辑
-const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : Default_Value);
-// 报表类型：1是违规报警，2是平台访问，3是指定人员访问
-const reportType = ref<number>(route.query.type ? Number(route.query.type) : Default_Value);
-// 统计时间段类型：1-周报 2-月报 3-季报 4-年报 5-自定义
-const statisticType = ref<number>(
-  route.query.statisticType ? Number(route.query.statisticType) : Default_Value,
-);
-let queryType = { type: reportType.value, statisticType: statisticType.value };
+  const labelPosition = ref<FormProps['labelPosition']>('left');
+  const useUser = useUserStore();
+  const FormList = useFormList();
+  const { info } = storeToRefs(useUser);
+  const { type } = storeToRefs(FormList);
+  let operater = info.value.realname;
+  let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
+  const formSize = ref('default'); // 校验表单
+  const ruleFormRef = ref();
+  const route = useRoute();
+  const router = useRouter();
+  // 功能类型：1是新增，2是查询，3是编辑
+  const pageType = ref<number>(route.query.operationType ? Number(route.query.operationType) : Default_Value);
+  // 报表类型：1是违规报警，2是平台访问，3是指定人员访问
+  const reportType = ref<number>(route.query.type ? Number(route.query.type) : Default_Value);
+  // 统计时间段类型：1-周报 2-月报 3-季报 4-年报 5-自定义
+  const statisticType = ref<number>(route.query.statisticType ? Number(route.query.statisticType) : Default_Value);
+  let queryType = { type: reportType.value, statisticType: statisticType.value };
 
-const form = reactive<reportMessage>({
-  configIdList: null,
-  type: Default_Value,
-  statisticType: Default_Value,
-  monthAndDayList: ['1', '1'],
-  dayOfWeek: 1,
-  monthList: [''],
-  dayOfMonthList: ['1'],
-  pushTimeList: ['09:00:00'],
-  pushChannel: [],
-  userGroupList: [],
-  designatedUserList: [],
-  recipientType: undefined,
-  customPushConfigList: [],
-  customUserList: [],
-});
-
-
-// 根据报表周期展示不同组件
-const ComponentEnum = {
-  [StatisticTypeEnum.WEEK_REPORT]: WeekReport,
-  [StatisticTypeEnum.MONTH_REPORT]: MonthReport,
-  [StatisticTypeEnum.YEAR_REPORT]: YearReport,
-}
+  const form = reactive<reportMessage>({
+    configIdList: null,
+    type: Default_Value,
+    statisticType: Default_Value,
+    monthAndDayList: ['1', '1'],
+    dayOfWeek: 1,
+    monthList: [''],
+    dayOfMonthList: ['1'],
+    pushTimeList: ['09:00:00'],
+    pushChannel: [],
+    userGroupList: [],
+    designatedUserList: [],
+    recipientType: undefined,
+    customPushConfigList: [],
+    customUserList: [],
+  });
 
-// 当前组件
-const currentComponent = computed(() => ComponentEnum[form.statisticType]);
+  // 根据报表周期展示不同组件
+  const ComponentEnum = {
+    [StatisticTypeEnum.WEEK_REPORT]: WeekReport,
+    [StatisticTypeEnum.MONTH_REPORT]: MonthReport,
+    [StatisticTypeEnum.YEAR_REPORT]: YearReport,
+  };
 
-form.customUserList.value = []; // 防止进入页面开始就显示校验错误
-form.designatedUserList = [];
+  // 当前组件
+  const currentComponent = computed(() => ComponentEnum[form.statisticType]);
 
-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' }],
-});
+  form.customUserList.value = []; // 防止进入页面开始就显示校验错误
+  form.designatedUserList = [];
 
-const addDebounce = debounce((form) => {
-  addMassage(form).then(() => {
-    ElMessage.success('新增成功');
-    clickBack();
+  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' }],
   });
-}, 500);
 
-const editDebounce = debounce((form) => {
-  editMassage(form).then(() => {
-    ElMessage.success('修改成功');
-    clickBack();
-  });
-}, 500);
+  const addDebounce = debounce((form) => {
+    addMassage(form).then(() => {
+      ElMessage.success('新增成功');
+      clickBack();
+    });
+  }, 500);
+
+  const editDebounce = debounce((form) => {
+    editMassage(form).then(() => {
+      ElMessage.success('修改成功');
+      clickBack();
+    });
+  }, 500);
 
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  await formEl.validate((valid) => {
-    if (valid) {
-      let submitForm = reportMessageToFinal(form);
-      if (pageType.value != OperationTypeEnum.EDIT) {
-        addDebounce(submitForm);
-      } else {
-        editDebounce(submitForm);
+  const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+      if (valid) {
+        let submitForm = reportMessageToFinal(form);
+        if (pageType.value != OperationTypeEnum.EDIT) {
+          addDebounce(submitForm);
+        } else {
+          editDebounce(submitForm);
+        }
       }
-    } 
-  });
-};
+    });
+  };
 
-const clickBack = () => {
-  type.value = reportType.value;
-  router.back();
-};
+  const clickBack = () => {
+    type.value = reportType.value;
+    router.back();
+  };
 
-const getDisableType = (pageType) => {
-  if (pageType === OperationTypeEnum.ADD) {
-    // 新增
-    disableType.value.statisticTypeDisable = false;
-    disableType.value.contentDisable = false;
-  } else if (pageType === OperationTypeEnum.SEARCH) {
-    // 查询
-    disableType.value.statisticTypeDisable = true;
-    disableType.value.contentDisable = true;
-  } else if (pageType === OperationTypeEnum.EDIT) {
-    // 编辑
-    disableType.value.statisticTypeDisable = true;
-    disableType.value.contentDisable = false;
-  }
-};
+  const getDisableType = (pageType) => {
+    if (pageType === OperationTypeEnum.ADD) {
+      // 新增
+      disableType.value.statisticTypeDisable = false;
+      disableType.value.contentDisable = false;
+    } else if (pageType === OperationTypeEnum.SEARCH) {
+      // 查询
+      disableType.value.statisticTypeDisable = true;
+      disableType.value.contentDisable = true;
+    } else if (pageType === OperationTypeEnum.EDIT) {
+      // 编辑
+      disableType.value.statisticTypeDisable = true;
+      disableType.value.contentDisable = false;
+    }
+  };
 
-onBeforeMount(() => {
-  getDisableType(pageType.value);
-  if (pageType.value === OperationTypeEnum.SEARCH || pageType.value === OperationTypeEnum.EDIT) {
-    searchMassage(queryType).then((res) => {
-      toReportMessage(form, res);
-      return res;
-    });
-  }
-  form.type = reportType.value;
-});
+  onBeforeMount(() => {
+    getDisableType(pageType.value);
+    if (pageType.value === OperationTypeEnum.SEARCH || pageType.value === OperationTypeEnum.EDIT) {
+      searchMassage(queryType).then((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);
+  .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 {
+    .top {
       display: flex;
-      align-items: center;
-      cursor: pointer;
+      padding: 16px 0 15px 20px;
+      border-bottom: 1px solid #e9e9e9;
 
-      a {
+      .topLeft {
         display: flex;
         align-items: center;
+        cursor: pointer;
+
+        a {
+          display: flex;
+          align-items: center;
+        }
       }
-    }
 
-    .topRight {
-      margin-left: 20px;
+      .topRight {
+        margin-left: 20px;
+      }
     }
-  }
 
-  .content {
-    display: flex;
-    height: calc(100vh - 130px);
-
-    .left {
+    .content {
       display: flex;
-      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;
+      height: calc(100vh - 130px);
 
-      .custom-report {
-        max-height: calc(100vh - 450px);
+      .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);
         overflow-y: auto;
-      }
 
-      .two-btns {
-        position: absolute;
-        right: 33px;
-        bottom: 32px;
+        .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;
+      .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

@@ -78,12 +78,8 @@ 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],
-    ),
+    customStartTime: computed(() => (newCustomReport.daterange === null ? null : newCustomReport.daterange[0])),
+    customEndTime: computed(() => (newCustomReport.daterange === null ? null : newCustomReport.daterange[1])),
     pushDay: null,
     pushTime: null,
     finalPushTime: computed(() => {
@@ -132,14 +128,11 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
   }
   if (receivedData.statisticType === 5) {
     let tempconfig = {};
-    let customPushConfigList: any[] = [];
-    for (let config of receivedData.customPushConfigList) {
+    const customPushConfigList: any[] = [];
+    for (const config of receivedData.customPushConfigList) {
       tempconfig['configId'] = config.configId;
       tempconfig['isDeleted'] = 0;
-      tempconfig['daterange'] = [
-        config.customStartTime.split(' ')[0],
-        config.customEndTime.split(' ')[0],
-      ];
+      tempconfig['daterange'] = [config.customStartTime.split(' ')[0], config.customEndTime.split(' ')[0]];
       tempconfig['pushDay'] = config.pushTime.split(' ')[0];
       tempconfig['pushTime'] = config.pushTime.split(' ')[1];
       tempconfig['recipientType'] = config.recipientType.toString();
@@ -148,7 +141,7 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
         return {
           id: user.userId,
           staffNo: user.staffNo,
-          nickname: user.realname,
+          realname: user.realname,
         };
       });
       tempconfig['userGroupList'] = config.userGroupList?.map((user: any) => user.id);
@@ -158,10 +151,8 @@ export const toReportMessage = (form: reportMessage, receivedData: finalReportMe
 
     form.customPushConfigList = customPushConfigList;
 
-    for (let customConfig of form.customPushConfigList) {
-      const finalPushTime = computed(
-        () => customConfig['pushDay'] + ' ' + customConfig['pushTime'],
-      );
+    for (const customConfig of form.customPushConfigList) {
+      const finalPushTime = computed(() => customConfig['pushDay'] + ' ' + customConfig['pushTime']);
       customConfig['finalPushTime'] = finalPushTime;
 
       const customStartTime = computed(() => customConfig['daterange'][0]);
@@ -176,14 +167,14 @@ export const reportMessageToFinal = (form) => {
   // 临时表单转为只存在后端需要字段的表单
 
   let tempCustom = {};
-  let customPushConfigList: any[] = [];
+  const customPushConfigList: any[] = [];
   if (form.customPushConfigList.length > 0) {
     if (!form.customPushConfigList[0].daterange) {
       // 如果有值则表示用户填了自定义的表单
       return;
     } else {
-      for (let config of form.customPushConfigList) {
-        for (let key in config) {
+      for (const config of form.customPushConfigList) {
+        for (const key in config) {
           if (key === 'daterange' || key === 'pushDay' || key === 'pushTime') {
             continue;
           } else if (key === 'finalPushTime') {

src/views/system/user/CreateAdminDrawer.vue

@@ -5,7 +5,6 @@
         <el-input placeholder="请输入工号" v-model="formParams.staffNo" v-if="staffNoHtmlType === 'INPUT'" />
         <el-tree-select
           v-model="formParams.staffNo"
-          v-debounce-tree-select="remoteMethod"
           check-strictly
           placeholder="请选择工号"
           class="protocal-select"
@@ -17,6 +16,7 @@
           :data="staffNoOptions"
           :render-after-expand="false"
           :default-expand-all="true"
+          :remote-method="debouncedRemoteMethod"
           @clear="handleClear"
           @change="handleChange"
           v-else
@@ -82,7 +82,8 @@
   import { EditType, OptionsProps, DisabledEnum, OrganizationUserTree } from './types';
   import { useTargetTenantIdSetting } from '@/utils/useTargetTenantIdSetting';
   import { ResultEnum } from '@/enums/httpEnum';
-  import vDebounceTreeSelect from '@/directives/debounceTreeSelect';
+  import { debounce } from 'lodash-es';
+
   import {
     findUserByWorkNo,
     findOrgCodeByWorkNo,
@@ -178,11 +179,16 @@
         }
         /* 保存原始数据，用于选中后将数据返显到表单 */
         OrganizationSourceData.value = res;
+        /* 选中数据后将部门设置为当前数据的部门 */
+        departmentArr.value = transformTreeData(OrganizationSourceData.value, false);
+        console.log('departmentArr.value:', departmentArr.value);
       });
     } else {
       staffNoOptions.value = [];
     }
   };
+  /* 防抖 */
+  const debouncedRemoteMethod = debounce(remoteMethod, 500);
 
   type STAFFNO_HTML_TYPE = 'INPUT' | 'SELECT';
   const staffNoHtmlType = ref<STAFFNO_HTML_TYPE>('SELECT');
@@ -204,10 +210,9 @@
       formParams.value.username = findUser.idtUserWorkNo;
       formParams.value.roleIdList = JSON.parse(findUser.useTypes);
 
-      /* 选中数据后将部门设置为当前数据的部门 */
-      departmentArr.value = transformTreeData(OrganizationSourceData.value, false);
+      // /* 选中数据后将部门设置为当前数据的部门 */
+      // departmentArr.value = transformTreeData(OrganizationSourceData.value, false);
       formParams.value.deptId = findOrgCodeByWorkNo(OrganizationSourceData.value, value);
-      console.log(departmentArr.value);
     }
   };
 
@@ -295,9 +300,12 @@
         formParams.value[key] = value;
       });
       formParams.value.roleIdList = res.roleIds;
+      formParams.value.deptId = res.deptId;
       formParams.value.passwordRe = res.password;
       formParams.value.isDisabled = res.isDisabled === DisabledEnum.NO ? true : false;
       isDrawer.value = true;
+      /* 确保编辑时，有请求远程的下拉数据 */
+      remoteMethod(res.staffNo);
     });
   }
 
@@ -314,6 +322,17 @@
     },
   );
 
+  watch(
+    () => props.departmentList,
+    (newVal) => {
+      departmentArr.value = newVal;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
+
   defineExpose({
     openDrawer,
     closeDrawer,