fix: 新增/修改报表按钮防抖，且提交后返回原来的tab

src/views/message/reportmessage/ReportOperation.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="page">
     <div class="top">
@@ -15,7 +14,7 @@
       <div class="left">
         <el-form
           ref="ruleFormRef"
-          style="max-width: 1000px;"
+          style="max-width: 1000px"
           :model="form"
           :rules="rules"
           label-width="auto"
@@ -28,7 +27,7 @@
             label="指定人员:"
             required
             prop="designatedUserList.value"
-            style="width: 660px;"
+            style="width: 660px"
             :rules="{ required: true, message: '请选择推送人员', trigger: ['change'] }"
           >
             <el-col :span="18">
@@ -43,7 +42,9 @@
             >
               <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"
@@ -55,7 +56,9 @@
 
               <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"
@@ -136,8 +139,8 @@
             </el-checkbox-group>
           </el-form-item>
 
-          <el-form-item label="操作人：" style="margin-left: 10px;">
-            <el-input style="width: 425px; margin-left: -10px ;" disabled :placeholder="operater" />
+          <el-form-item label="操作人：" style="margin-left: 10px">
+            <el-input style="width: 425px; margin-left: -10px" disabled :placeholder="operater" />
           </el-form-item>
         </el-form>
         <div class="two-btns">
@@ -159,236 +162,223 @@
 </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/sendMessage/sendMessage';
-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 DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
-import type { FormProps } from 'element-plus';
-const labelPosition = ref<FormProps['labelPosition']>('left');
+  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/sendMessage/sendMessage';
+  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 DesignatedUserList from '@/views/message/designatedUserSelectTree.vue';
+  import type { FormProps } from 'element-plus';
+  import { debounce } from 'lodash-es';
 
-const useUser = useUserStore();
-const FormList = useFormList();
-const { info } = storeToRefs(useUser);
-const { type } = storeToRefs(FormList);
-let operater = info.value.nickname;
+  const labelPosition = ref<FormProps['labelPosition']>('left');
 
-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 useUser = useUserStore();
+  const FormList = useFormList();
+  const { info } = storeToRefs(useUser);
+  const { type } = storeToRefs(FormList);
+  let operater = info.value.nickname;
 
-let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
+  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 formSize = ref('default'); // 校验表单
-const ruleFormRef = ref();
+  let disableType = ref({ statisticTypeDisable: false, contentDisable: false }); // 控制是否可编辑
 
-// 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 formSize = ref('default'); // 校验表单
+  const ruleFormRef = ref();
 
-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: [],
-});
+  // 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 };
 
-form.customUserList.value = []; // 防止进入页面开始就显示校验错误
-form.designatedUserList.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: [],
+  });
 
-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' }],
-  // customUserList: [{ required: true, message: '请选择推送人员', trigger: 'change, blur' }],
-});
+  form.customUserList.value = []; // 防止进入页面开始就显示校验错误
+  form.designatedUserList.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: []
-// });
-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) {
-        addMassage(submitForm).then((res) => {
-          console.log('新增res', res);
-          ElMessage.success('新增成功');
-          router.back();
-          return res;
-        });
-      } else {
-        editMassage(submitForm).then((res) => {
-          console.log('修改res', res);
+  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 editDebounce = debounce((form) => {
+    editMassage(form).then(() => {
+      ElMessage.success('修改成功');
+      clickBack();
+    });
+  }, 500);
 
-          ElMessage.success('修改成功');
-          router.back();
-          return res;
-        });
+  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);
       }
-    } else {
-      console.log('error submit!', fields);
-    }
-  });
-};
+    });
+  };
 
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-};
+  const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    formEl.resetFields();
+  };
 
-const clickBack = () => {
-  type.value = reportType.value;
-  router.back();
-};
+  const clickBack = () => {
+    type.value = reportType.value;
+    router.back();
+  };
 
-watch(form, () => {
-  console.log(`form newvalue:`, form);
-});
+  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;
-  }
-};
+  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('res', res);
-      toReportMessage(form, res);
-      return res;
-    });
-  }
-  form.type = reportType.value;
-});
+  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;
+      });
+    }
+    form.type = reportType.value;
+  });
 </script>
 
 <style lang="scss" scoped>
-.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 {
+  .page {
+    height: calc(100vh - 64px - 18px);
+    background-color: rgba(255, 255, 255, 1);
+    .top {
       display: flex;
-      align-items: center;
-      cursor: pointer;
-      a {
+      padding: 16px 0 15px 20px;
+      border-bottom: 1px solid #e9e9e9;
+      .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;
-      .custom-report{
-        max-height: calc(100vh - 450px);
+      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);
         overflow-y: auto;
+        .custom-report {
+          max-height: calc(100vh - 450px);
+          overflow-y: auto;
+        }
+        .two-btns {
+          position: absolute;
+          right: 33px;
+          bottom: 32px;
+        }
       }
-      .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>