表单提交延时loading

杨泽宇
1 parent 1a233184
Showing 12 changed files with 125 additions and 43 deletions
src/api/request.ts
src/layout/header.vue
src/layout/menu.vue
src/pinia/modules/login.ts
src/views/notify/edit.vue
src/views/permission/edit.vue
src/views/property/edit.vue
src/views/role/edit.vue
src/views/role/permission.vue
src/views/system/info.vue
src/views/user/edit.vue
src/views/user/login.vue
@@ -2,7 +2,6 @@ import axios from &#39;axios&#39;
 import * as store from "@/pinia/index";
 import router from '@/router'
 import { ElMessage } from 'element-plus'
-import { Stream } from 'stream';
 // 不这样写报ts类型错误，import...有一个多余的boolean类型
 let url: any = import.meta.env
@@ -35,7 +34,7 @@ instance.interceptors.response.use(
         switch (~~response?.data?.errorCode) {
           case 10002:
             ElMessage.error(response?.data?.errorMessage || '登录失效');
-            store.family.loginStore.removeToken()
+            store.family.loginStore().removeToken()
             router.replace({
               path: '/login'
             })
@@ -5,7 +5,7 @@
  */
 import { getCurrentInstance, onMounted, reactive, computed } from "vue";
 import * as store from "@/pinia/index";
-import { ElMessageBox } from "element-plus";
+import { ElMessageBox, ElMessage } from "element-plus";
 import { Fold, Expand } from "@element-plus/icons-vue";
 import styles from "@/style/global.module.scss";
 // TIP 获取全局变量，暂时只有坏图片占位图
@@ -31,6 +31,7 @@ const handleLogout = () =&gt; {
   })
     .then(() => {
       store.family.loginStore().removeToken();
+      ElMessage.success('已退出登录')
     })
     .catch((error) => {
       console.log(error);
@@ -7,6 +7,7 @@ import { ref, computed, onMounted, reactive } from &quot;vue&quot;;
 import * as store from "@/pinia/index";
 import styles from "@/style/global.module.scss";
 import MenuIcon from "./icon.vue";
+import { useRoute } from "vue-router";
 // TIP 获取scss样式变量
 let styleData = computed(() => {
   return styles;
@@ -26,12 +27,13 @@ onMounted(() =&gt; {
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      default-active="2"
+      :default-active="useRoute().path"
       :background-color="styleData.menuBg"
       :text-color="styleData.menuText"
       :active-text-color="styleData.menuActiveText"
       class="el-menu-vertical-demo"
       :router="true"
+      :unique-opened="true"
       :collapse-transition="false"
       :collapse="asyncData.isCollapse"
     >
@@ -77,7 +77,6 @@ const actions = {
     logout()
     this.token = ''
     window.localStorage.clear()
-    ElMessage.success(msg || '已退出登录');
     setTimeout(() => {
       router.replace('/login')
     }, 500)
@@ -21,6 +21,7 @@ let form = reactive({
   },
   dataType: "",
   neighborhoods: [],
+  loading: false,
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 let instance: ComponentInternalInstance | null = getCurrentInstance();
@@ -57,6 +58,7 @@ const submitForm = (
   formEl: InstanceType<typeof ElForm> | undefined,
   type: number
 ) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (valid) {
@@ -82,6 +84,7 @@ const submitForm = (
       }
     } else {
       instance?.proxy?.$message.error("请检查表单格式");
+      form.loading = false;
       return false;
     }
   });
@@ -100,6 +103,9 @@ const postApi = async (type: number) =&gt; {
     })
     .catch((error) => {
       console.log(error);
+    })
+    .finally(() => {
+      form.loading = false;
     });
 };
 /**
@@ -189,10 +195,16 @@ onMounted(() =&gt; {
           <!-- <Tinymce></Tinymce> -->
         </el-form-item>
         <el-form-item style="width: 100%" v-show="form.dataType !== 'detail'">
-          <el-button type="primary" @click="submitForm(ruleFormRef, 1)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef, 1)"
+            :loading="form.loading"
             >发布</el-button
           >
-          <el-button type="primary" @click="submitForm(ruleFormRef, 0)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef, 0)"
+            :loading="form.loading"
             >存为草稿</el-button
           >
           <el-button
@@ -17,6 +17,7 @@ let form = reactive({
     id: null,
   },
   dataType: "",
+  loading: false,
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 /**
@@ -65,6 +66,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
@@ -77,9 +79,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
         })
         .catch((error) => {
           console.log(error);
+        })
+        .finally(() => {
+          form.loading = false;
         });
     } else {
       instance?.proxy?.$message.error("请检查表单格式");
+      form.loading = false;
       return false;
     }
   });
@@ -173,7 +179,10 @@ onMounted(() =&gt; {
           </el-radio-group>
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
             >提交</el-button
           >
           <el-button type="info" @click="back">返回</el-button>
@@ -13,6 +13,7 @@ const {
 } = getCurrentInstance();
 let form = reactive({
   dataType: "",
+  loading: false,
   data: {
     name: "",
     userName: "",
@@ -114,6 +115,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
 };
 // 表单提交
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
@@ -126,9 +128,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
         })
         .catch((error) => {
           console.log(error);
+        })
+        .finally(() => {
+          form.loading = false;
         });
     } else {
       globalProperties.$message.error("请检查表单格式");
+      form.loading = false;
       return false;
     }
   });
@@ -243,7 +249,10 @@ onMounted(() =&gt; {
           </el-select>
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
             >提交</el-button
           >
           <el-button type="info" @click="resetForm(ruleFormRef)"
@@ -14,6 +14,7 @@ let form = reactive({
     roleName: "",
     roleDesc: "",
   },
+  loading: false,
   dataType: "",
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
@@ -40,6 +41,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
@@ -52,9 +54,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
         })
         .catch((error) => {
           console.log(error);
+        })
+        .finally(() => {
+          form.loading = false;
         });
     } else {
       globalProperties.$message.error("请检查表单格式");
+      form.loading = false;
       return false;
     }
   });
@@ -97,7 +103,10 @@ onMounted(() =&gt; {
           />
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
             >提交</el-button
           >
           <el-button
@@ -106,9 +115,7 @@ onMounted(() =&gt; {
             v-show="form.dataType === 'add'"
             >取消</el-button
           >
-          <el-button type="info" @click="back"
-            >返回</el-button
-          >
+          <el-button type="info" @click="back">返回</el-button>
         </el-form-item>
       </el-form>
     </el-card>
@@ -16,6 +16,7 @@ let form = reactive({
     roleId: useRoute().query.roleId,
     permissionIds: [],
   },
+  loading: false,
   permissions: [],
   defaultPermissions: [],
   collections: [],
@@ -35,6 +36,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
@@ -47,9 +49,12 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
         })
         .catch((error) => {
           console.log(error);
-        });
+        }).finally (() => {
+          form.loading = false
+        })
     } else {
       globalProperties.$message.error("请检查表单格式");
+      form.loading = false
       return false;
     }
   });
@@ -149,7 +154,7 @@ onMounted(() =&gt; {
           />
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="form.loading"
             >提交</el-button
           >
           <el-button type="info" @click="resetForm(ruleFormRef)"
@@ -13,6 +13,7 @@ let form = reactive({
     newPassword: "",
     surePwd: "",
   },
+  loading: false,
 });
 /**
  * 验证两次输入密码一致
@@ -65,21 +66,26 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
       userPwdChange(form.data)
         .then((res) => {
           if (res) {
-            instance?.proxy?.$message.success("修改成功");
-            store.family.loginStore().removeToken("请重新登录");
+            instance?.proxy?.$message.success("修改成功,请重新登录");
+            store.family.loginStore().removeToken();
           }
         })
         .catch((error) => {
           console.log(error);
+        })
+        .finally(() => {
+          form.loading = false;
         });
     } else {
       instance?.proxy?.$message.error("请检查表单内容");
+      form.loading = false;
       return false;
     }
   });
@@ -120,7 +126,10 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
           />
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
             >提交</el-button
           >
           <el-button type="info" @click="resetForm(ruleFormRef)"
@@ -5,7 +5,7 @@ import { roleList } from &quot;@/api/user/role&quot;;
 import { getTableList } from "@/api/community/residence";
 import { useRoute } from "vue-router";
 import { validMobile } from "@/utils/validate";
-import * as store from '@/pinia';
+import * as store from "@/pinia";
 import type { ElForm } from "element-plus";
 const {
   appContext: {
@@ -21,6 +21,7 @@ let form = reactive({
     neighborhoodIds: "",
     userId: "",
   },
+  loading: false,
   dataType: "",
   roles: [],
   communities: [],
@@ -29,8 +30,8 @@ let form = reactive({
 });
 let asyncData = reactive({
   userInfo: null,
-  userType: null
-})
+  userType: null,
+});
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 /**
  * 校验手机号格式
@@ -93,6 +94,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (valid) {
@@ -108,7 +110,7 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
             roleIds: form.data.roleIds,
             userId: form.data.id,
             userName: form.data.userName,
-            neighborhoodIds: form.data.neighborhoodIds
+            neighborhoodIds: form.data.neighborhoodIds,
           });
         }
       } catch (e) {
@@ -118,9 +120,11 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
           globalProperties.$message.success("操作成功");
           history.go(-1);
         }
+        form.loading = false;
       }
     } else {
       globalProperties.$message.error("请检查表单格式");
+      form.loading = false;
       return false;
     }
   });
@@ -163,10 +167,10 @@ const getCommunityList = async (pageSize: number = 20) =&gt; {
   }
 };
 onMounted(() => {
-  asyncData.userInfo = store.family.loginStore().id
-  asyncData.userType = store.family.loginStore().organizationType
+  asyncData.userInfo = store.family.loginStore().id;
+  asyncData.userType = store.family.loginStore().organizationType;
   getRoleList();
-  if(~~asyncData.userType === 1) {
+  if (~~asyncData.userType === 1) {
     getCommunityList();
   }
   form.data = useRoute().query;
@@ -174,8 +178,12 @@ onMounted(() =&gt; {
     form.dataType = "add";
   } else {
     form.dataType = "edit";
-    form.checkList = form.data.roleIds? form.data.roleIds?.split(",").map((v) => v / 1): []
-    form.communityList = form.data.neighborhoodIds? form.data.neighborhoodIds.split(",").map((v) => v / 1): []
+    form.checkList = form.data.roleIds
+      ? form.data.roleIds?.split(",").map((v) => v / 1)
+      : [];
+    form.communityList = form.data.neighborhoodIds
+      ? form.data.neighborhoodIds.split(",").map((v) => v / 1)
+      : [];
   }
 });
 </script>
@@ -230,13 +238,20 @@ onMounted(() =&gt; {
               v-for="(item, index) in form.roles"
               :key="index"
               :label="item.id"
-              :disabled="~~item.status === 0 || (asyncData.userInfo === 1 && item.code !== 'BUSINESS_ADMIN')"
+              :disabled="
+                ~~item.status === 0 ||
+                (asyncData.userInfo === 1 && item.code !== 'BUSINESS_ADMIN')
+              "
               >{{ item.roleName }}</el-checkbox
             >
           </el-checkbox-group>
         </el-form-item>
         <!-- 当前登录的用户是物业管理员，表单里才有关联小区 -->
-        <el-form-item label="小区" style="width: 100%" v-show="asyncData.userType === 1">
+        <el-form-item
+          label="小区"
+          style="width: 100%"
+          v-show="asyncData.userType === 1"
+        >
           <el-checkbox-group
             v-model="form.communityList"
             @change="(data) => (form.data.neighborhoodIds = data.join(','))"
@@ -250,7 +265,10 @@ onMounted(() =&gt; {
           </el-checkbox-group>
         </el-form-item>
         <el-form-item style="width: 100%">
-          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
             >提交</el-button
           >
           <el-button
@@ -21,6 +21,8 @@ const loginForm: Login = reactive({
   userName: "",
   password: "",
 });
+
+let loading = ref(false);
 /**
  * 登录框上面标题
  */
@@ -30,22 +32,31 @@ const ruleFormRef = ref&lt;InstanceType&lt;typeof ElForm&gt;&gt;();
  * 表单提交
  */
 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  loading.value = true;
   if (!formEl) return;
   formEl.validate((valid) => {
     if (valid) {
-      login(loginForm).then((res) => {
-        if (res?.data) {
-          globalProperties.$message.success("登录成功");
-          // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
-          store.family.loginStore().setUserInfo(res?.data?.data);
-          getMenu().then((res) => {
-            setTimeout(() => {
-              router.push({ path: "/" });
-            }, 1000);
-          });
-        }
-      });
+      login(loginForm)
+        .then((res) => {
+          if (res?.data) {
+            globalProperties.$message.success("登录成功");
+            // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
+            store.family.loginStore().setUserInfo(res?.data?.data);
+            getMenu().then((res) => {
+              setTimeout(() => {
+                router.push({ path: "/" });
+              }, 1000);
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
     } else {
+      loading.value = false;
       console.log("error");
     }
   });
@@ -90,7 +101,7 @@ const getMenu = async () =&gt; {
             auto-complete="off"
             clearable
             :prefix-icon="UserFilled"
-            style="width: 448px;"
+            style="width: 448px"
           />
         </el-form-item>
       </el-row>
@@ -115,6 +126,7 @@ const getMenu = async () =&gt; {
           type="primary"
           @click="submitForm(ruleFormRef)"
           style="width: 100%"
+          :loading="loading"
           >登录</el-button
         >
       </el-form-item>