cnlive_project / cnlive-community-web-vue · Commits

Commit 9e508c953fc443c9c0c08c6d16f9c58bae57a4db

Authored by 杨泽宇
1 parent 1a233184

表单提交延时loading

Inline Side-by-side
Showing 12 changed files with 125 additions and 43 deletions
src/api/request.ts
  View file @9e508c9
... ... @@ -2,7 +2,6 @@ import axios from 'axios'
2 2 import * as store from "@/pinia/index";
3 3 import router from '@/router'
4 4 import { ElMessage } from 'element-plus'
5   -import { Stream } from 'stream';
6 5  
7 6 // 不这样写报ts类型错误，import...有一个多余的boolean类型
8 7 let url: any = import.meta.env
... ... @@ -35,7 +34,7 @@ instance.interceptors.response.use(
35 34 switch (~~response?.data?.errorCode) {
36 35 case 10002:
37 36 ElMessage.error(response?.data?.errorMessage || '登录失效');
38   - store.family.loginStore.removeToken()
  37 + store.family.loginStore().removeToken()
39 38 router.replace({
40 39 path: '/login'
41 40 })
... ...
src/layout/header.vue
  View file @9e508c9
... ... @@ -5,7 +5,7 @@
5 5 */
6 6 import { getCurrentInstance, onMounted, reactive, computed } from "vue";
7 7 import * as store from "@/pinia/index";
8   -import { ElMessageBox } from "element-plus";
  8 +import { ElMessageBox, ElMessage } from "element-plus";
9 9 import { Fold, Expand } from "@element-plus/icons-vue";
10 10 import styles from "@/style/global.module.scss";
11 11 // TIP 获取全局变量，暂时只有坏图片占位图
... ... @@ -31,6 +31,7 @@ const handleLogout = () => {
31 31 })
32 32 .then(() => {
33 33 store.family.loginStore().removeToken();
  34 + ElMessage.success('已退出登录')
34 35 })
35 36 .catch((error) => {
36 37 console.log(error);
... ...
src/layout/menu.vue
  View file @9e508c9
... ... @@ -7,6 +7,7 @@ import { ref, computed, onMounted, reactive } from "vue";
7 7 import * as store from "@/pinia/index";
8 8 import styles from "@/style/global.module.scss";
9 9 import MenuIcon from "./icon.vue";
  10 +import { useRoute } from "vue-router";
10 11 // TIP 获取scss样式变量
11 12 let styleData = computed(() => {
12 13 return styles;
... ... @@ -26,12 +27,13 @@ onMounted(() => {
26 27 <template>
27 28 <el-scrollbar wrap-class="scrollbar-wrapper">
28 29 <el-menu
29   - default-active="2"
  30 + :default-active="useRoute().path"
30 31 :background-color="styleData.menuBg"
31 32 :text-color="styleData.menuText"
32 33 :active-text-color="styleData.menuActiveText"
33 34 class="el-menu-vertical-demo"
34 35 :router="true"
  36 + :unique-opened="true"
35 37 :collapse-transition="false"
36 38 :collapse="asyncData.isCollapse"
37 39 >
... ...
src/pinia/modules/login.ts
  View file @9e508c9
... ... @@ -77,7 +77,6 @@ const actions = {
77 77 logout()
78 78 this.token = ''
79 79 window.localStorage.clear()
80   - ElMessage.success(msg || '已退出登录');
81 80 setTimeout(() => {
82 81 router.replace('/login')
83 82 }, 500)
... ...
src/views/notify/edit.vue
  View file @9e508c9
... ... @@ -21,6 +21,7 @@ let form = reactive({
21 21 },
22 22 dataType: "",
23 23 neighborhoods: [],
  24 + loading: false,
24 25 });
25 26 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
26 27 let instance: ComponentInternalInstance | null = getCurrentInstance();
... ... @@ -57,6 +58,7 @@ const submitForm = (
57 58 formEl: InstanceType<typeof ElForm> | undefined,
58 59 type: number
59 60 ) => {
  61 + form.loading = true;
60 62 if (!formEl) return;
61 63 formEl.validate(async (valid) => {
62 64 if (valid) {
... ... @@ -82,6 +84,7 @@ const submitForm = (
82 84 }
83 85 } else {
84 86 instance?.proxy?.$message.error("请检查表单格式");
  87 + form.loading = false;
85 88 return false;
86 89 }
87 90 });
... ... @@ -100,6 +103,9 @@ const postApi = async (type: number) =&gt; {
100 103 })
101 104 .catch((error) => {
102 105 console.log(error);
  106 + })
  107 + .finally(() => {
  108 + form.loading = false;
103 109 });
104 110 };
105 111 /**
... ... @@ -189,10 +195,16 @@ onMounted(() =&gt; {
189 195 <!-- <Tinymce></Tinymce> -->
190 196 </el-form-item>
191 197 <el-form-item style="width: 100%" v-show="form.dataType !== 'detail'">
192   - <el-button type="primary" @click="submitForm(ruleFormRef, 1)"
  198 + <el-button
  199 + type="primary"
  200 + @click="submitForm(ruleFormRef, 1)"
  201 + :loading="form.loading"
193 202 >发布</el-button
194 203 >
195   - <el-button type="primary" @click="submitForm(ruleFormRef, 0)"
  204 + <el-button
  205 + type="primary"
  206 + @click="submitForm(ruleFormRef, 0)"
  207 + :loading="form.loading"
196 208 >存为草稿</el-button
197 209 >
198 210 <el-button
... ...
src/views/permission/edit.vue
  View file @9e508c9
... ... @@ -17,6 +17,7 @@ let form = reactive({
17 17 id: null,
18 18 },
19 19 dataType: "",
  20 + loading: false,
20 21 });
21 22 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
22 23 /**
... ... @@ -65,6 +66,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
65 66 * 表单提交
66 67 */
67 68 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  69 + form.loading = true;
68 70 if (!formEl) return;
69 71 formEl.validate((valid) => {
70 72 if (valid) {
... ... @@ -77,9 +79,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
77 79 })
78 80 .catch((error) => {
79 81 console.log(error);
  82 + })
  83 + .finally(() => {
  84 + form.loading = false;
80 85 });
81 86 } else {
82 87 instance?.proxy?.$message.error("请检查表单格式");
  88 + form.loading = false;
83 89 return false;
84 90 }
85 91 });
... ... @@ -173,7 +179,10 @@ onMounted(() =&gt; {
173 179 </el-radio-group>
174 180 </el-form-item>
175 181 <el-form-item style="width: 100%">
176   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  182 + <el-button
  183 + type="primary"
  184 + @click="submitForm(ruleFormRef)"
  185 + :loading="form.loading"
177 186 >提交</el-button
178 187 >
179 188 <el-button type="info" @click="back">返回</el-button>
... ...
src/views/property/edit.vue
  View file @9e508c9
... ... @@ -13,6 +13,7 @@ const {
13 13 } = getCurrentInstance();
14 14 let form = reactive({
15 15 dataType: "",
  16 + loading: false,
16 17 data: {
17 18 name: "",
18 19 userName: "",
... ... @@ -114,6 +115,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
114 115 };
115 116 // 表单提交
116 117 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  118 + form.loading = true;
117 119 if (!formEl) return;
118 120 formEl.validate((valid) => {
119 121 if (valid) {
... ... @@ -126,9 +128,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
126 128 })
127 129 .catch((error) => {
128 130 console.log(error);
  131 + })
  132 + .finally(() => {
  133 + form.loading = false;
129 134 });
130 135 } else {
131 136 globalProperties.$message.error("请检查表单格式");
  137 + form.loading = false;
132 138 return false;
133 139 }
134 140 });
... ... @@ -243,7 +249,10 @@ onMounted(() =&gt; {
243 249 </el-select>
244 250 </el-form-item>
245 251 <el-form-item style="width: 100%">
246   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  252 + <el-button
  253 + type="primary"
  254 + @click="submitForm(ruleFormRef)"
  255 + :loading="form.loading"
247 256 >提交</el-button
248 257 >
249 258 <el-button type="info" @click="resetForm(ruleFormRef)"
... ...
src/views/role/edit.vue
  View file @9e508c9
... ... @@ -14,6 +14,7 @@ let form = reactive({
14 14 roleName: "",
15 15 roleDesc: "",
16 16 },
  17 + loading: false,
17 18 dataType: "",
18 19 });
19 20 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
... ... @@ -40,6 +41,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
40 41 * 表单提交
41 42 */
42 43 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  44 + form.loading = true;
43 45 if (!formEl) return;
44 46 formEl.validate((valid) => {
45 47 if (valid) {
... ... @@ -52,9 +54,13 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
52 54 })
53 55 .catch((error) => {
54 56 console.log(error);
  57 + })
  58 + .finally(() => {
  59 + form.loading = false;
55 60 });
56 61 } else {
57 62 globalProperties.$message.error("请检查表单格式");
  63 + form.loading = false;
58 64 return false;
59 65 }
60 66 });
... ... @@ -97,7 +103,10 @@ onMounted(() =&gt; {
97 103 />
98 104 </el-form-item>
99 105 <el-form-item style="width: 100%">
100   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  106 + <el-button
  107 + type="primary"
  108 + @click="submitForm(ruleFormRef)"
  109 + :loading="form.loading"
101 110 >提交</el-button
102 111 >
103 112 <el-button
... ... @@ -106,9 +115,7 @@ onMounted(() =&gt; {
106 115 v-show="form.dataType === 'add'"
107 116 >取消</el-button
108 117 >
109   - <el-button type="info" @click="back"
110   - >返回</el-button
111   - >
  118 + <el-button type="info" @click="back">返回</el-button>
112 119 </el-form-item>
113 120 </el-form>
114 121 </el-card>
... ...
src/views/role/permission.vue
  View file @9e508c9
... ... @@ -16,6 +16,7 @@ let form = reactive({
16 16 roleId: useRoute().query.roleId,
17 17 permissionIds: [],
18 18 },
  19 + loading: false,
19 20 permissions: [],
20 21 defaultPermissions: [],
21 22 collections: [],
... ... @@ -35,6 +36,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
35 36 * 表单提交
36 37 */
37 38 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  39 + form.loading = true
38 40 if (!formEl) return;
39 41 formEl.validate((valid) => {
40 42 if (valid) {
... ... @@ -47,9 +49,12 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
47 49 })
48 50 .catch((error) => {
49 51 console.log(error);
50   - });
  52 + }).finally (() => {
  53 + form.loading = false
  54 + })
51 55 } else {
52 56 globalProperties.$message.error("请检查表单格式");
  57 + form.loading = false
53 58 return false;
54 59 }
55 60 });
... ... @@ -149,7 +154,7 @@ onMounted(() =&gt; {
149 154 />
150 155 </el-form-item>
151 156 <el-form-item style="width: 100%">
152   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  157 + <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="form.loading"
153 158 >提交</el-button
154 159 >
155 160 <el-button type="info" @click="resetForm(ruleFormRef)"
... ...
src/views/system/info.vue
  View file @9e508c9
... ... @@ -13,6 +13,7 @@ let form = reactive({
13 13 newPassword: "",
14 14 surePwd: "",
15 15 },
  16 + loading: false,
16 17 });
17 18 /**
18 19 * 验证两次输入密码一致
... ... @@ -65,21 +66,26 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
65 66 * 表单提交
66 67 */
67 68 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  69 + form.loading = true;
68 70 if (!formEl) return;
69 71 formEl.validate((valid) => {
70 72 if (valid) {
71 73 userPwdChange(form.data)
72 74 .then((res) => {
73 75 if (res) {
74   - instance?.proxy?.$message.success("修改成功");
75   - store.family.loginStore().removeToken("请重新登录");
  76 + instance?.proxy?.$message.success("修改成功,请重新登录");
  77 + store.family.loginStore().removeToken();
76 78 }
77 79 })
78 80 .catch((error) => {
79 81 console.log(error);
  82 + })
  83 + .finally(() => {
  84 + form.loading = false;
80 85 });
81 86 } else {
82 87 instance?.proxy?.$message.error("请检查表单内容");
  88 + form.loading = false;
83 89 return false;
84 90 }
85 91 });
... ... @@ -120,7 +126,10 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
120 126 />
121 127 </el-form-item>
122 128 <el-form-item style="width: 100%">
123   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  129 + <el-button
  130 + type="primary"
  131 + @click="submitForm(ruleFormRef)"
  132 + :loading="form.loading"
124 133 >提交</el-button
125 134 >
126 135 <el-button type="info" @click="resetForm(ruleFormRef)"
... ...
src/views/user/edit.vue
  View file @9e508c9
... ... @@ -5,7 +5,7 @@ import { roleList } from &quot;@/api/user/role&quot;;
5 5 import { getTableList } from "@/api/community/residence";
6 6 import { useRoute } from "vue-router";
7 7 import { validMobile } from "@/utils/validate";
8   -import * as store from '@/pinia';
  8 +import * as store from "@/pinia";
9 9 import type { ElForm } from "element-plus";
10 10 const {
11 11 appContext: {
... ... @@ -21,6 +21,7 @@ let form = reactive({
21 21 neighborhoodIds: "",
22 22 userId: "",
23 23 },
  24 + loading: false,
24 25 dataType: "",
25 26 roles: [],
26 27 communities: [],
... ... @@ -29,8 +30,8 @@ let form = reactive({
29 30 });
30 31 let asyncData = reactive({
31 32 userInfo: null,
32   - userType: null
33   -})
  33 + userType: null,
  34 +});
34 35 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
35 36 /**
36 37 * 校验手机号格式
... ... @@ -93,6 +94,7 @@ const resetForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
93 94 * 表单提交
94 95 */
95 96 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  97 + form.loading = true;
96 98 if (!formEl) return;
97 99 formEl.validate(async (valid) => {
98 100 if (valid) {
... ... @@ -108,7 +110,7 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
108 110 roleIds: form.data.roleIds,
109 111 userId: form.data.id,
110 112 userName: form.data.userName,
111   - neighborhoodIds: form.data.neighborhoodIds
  113 + neighborhoodIds: form.data.neighborhoodIds,
112 114 });
113 115 }
114 116 } catch (e) {
... ... @@ -118,9 +120,11 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
118 120 globalProperties.$message.success("操作成功");
119 121 history.go(-1);
120 122 }
  123 + form.loading = false;
121 124 }
122 125 } else {
123 126 globalProperties.$message.error("请检查表单格式");
  127 + form.loading = false;
124 128 return false;
125 129 }
126 130 });
... ... @@ -163,10 +167,10 @@ const getCommunityList = async (pageSize: number = 20) =&gt; {
163 167 }
164 168 };
165 169 onMounted(() => {
166   - asyncData.userInfo = store.family.loginStore().id
167   - asyncData.userType = store.family.loginStore().organizationType
  170 + asyncData.userInfo = store.family.loginStore().id;
  171 + asyncData.userType = store.family.loginStore().organizationType;
168 172 getRoleList();
169   - if(~~asyncData.userType === 1) {
  173 + if (~~asyncData.userType === 1) {
170 174 getCommunityList();
171 175 }
172 176 form.data = useRoute().query;
... ... @@ -174,8 +178,12 @@ onMounted(() =&gt; {
174 178 form.dataType = "add";
175 179 } else {
176 180 form.dataType = "edit";
177   - form.checkList = form.data.roleIds? form.data.roleIds?.split(",").map((v) => v / 1): []
178   - form.communityList = form.data.neighborhoodIds? form.data.neighborhoodIds.split(",").map((v) => v / 1): []
  181 + form.checkList = form.data.roleIds
  182 + ? form.data.roleIds?.split(",").map((v) => v / 1)
  183 + : [];
  184 + form.communityList = form.data.neighborhoodIds
  185 + ? form.data.neighborhoodIds.split(",").map((v) => v / 1)
  186 + : [];
179 187 }
180 188 });
181 189 </script>
... ... @@ -230,13 +238,20 @@ onMounted(() =&gt; {
230 238 v-for="(item, index) in form.roles"
231 239 :key="index"
232 240 :label="item.id"
233   - :disabled="~~item.status === 0 || (asyncData.userInfo === 1 && item.code !== 'BUSINESS_ADMIN')"
  241 + :disabled="
  242 + ~~item.status === 0 ||
  243 + (asyncData.userInfo === 1 && item.code !== 'BUSINESS_ADMIN')
  244 + "
234 245 >{{ item.roleName }}</el-checkbox
235 246 >
236 247 </el-checkbox-group>
237 248 </el-form-item>
238 249 <!-- 当前登录的用户是物业管理员，表单里才有关联小区 -->
239   - <el-form-item label="小区" style="width: 100%" v-show="asyncData.userType === 1">
  250 + <el-form-item
  251 + label="小区"
  252 + style="width: 100%"
  253 + v-show="asyncData.userType === 1"
  254 + >
240 255 <el-checkbox-group
241 256 v-model="form.communityList"
242 257 @change="(data) => (form.data.neighborhoodIds = data.join(','))"
... ... @@ -250,7 +265,10 @@ onMounted(() =&gt; {
250 265 </el-checkbox-group>
251 266 </el-form-item>
252 267 <el-form-item style="width: 100%">
253   - <el-button type="primary" @click="submitForm(ruleFormRef)"
  268 + <el-button
  269 + type="primary"
  270 + @click="submitForm(ruleFormRef)"
  271 + :loading="form.loading"
254 272 >提交</el-button
255 273 >
256 274 <el-button
... ...
src/views/user/login.vue
  View file @9e508c9
... ... @@ -21,6 +21,8 @@ const loginForm: Login = reactive({
21 21 userName: "",
22 22 password: "",
23 23 });
  24 +
  25 +let loading = ref(false);
24 26 /**
25 27 * 登录框上面标题
26 28 */
... ... @@ -30,22 +32,31 @@ const ruleFormRef = ref&lt;InstanceType&lt;typeof ElForm&gt;&gt;();
30 32 * 表单提交
31 33 */
32 34 const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  35 + loading.value = true;
33 36 if (!formEl) return;
34 37 formEl.validate((valid) => {
35 38 if (valid) {
36   - login(loginForm).then((res) => {
37   - if (res?.data) {
38   - globalProperties.$message.success("登录成功");
39   - // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
40   - store.family.loginStore().setUserInfo(res?.data?.data);
41   - getMenu().then((res) => {
42   - setTimeout(() => {
43   - router.push({ path: "/" });
44   - }, 1000);
45   - });
46   - }
47   - });
  39 + login(loginForm)
  40 + .then((res) => {
  41 + if (res?.data) {
  42 + globalProperties.$message.success("登录成功");
  43 + // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
  44 + store.family.loginStore().setUserInfo(res?.data?.data);
  45 + getMenu().then((res) => {
  46 + setTimeout(() => {
  47 + router.push({ path: "/" });
  48 + }, 1000);
  49 + });
  50 + }
  51 + })
  52 + .catch((error) => {
  53 + console.log(error);
  54 + })
  55 + .finally(() => {
  56 + loading.value = false;
  57 + });
48 58 } else {
  59 + loading.value = false;
49 60 console.log("error");
50 61 }
51 62 });
... ... @@ -90,7 +101,7 @@ const getMenu = async () =&gt; {
90 101 auto-complete="off"
91 102 clearable
92 103 :prefix-icon="UserFilled"
93   - style="width: 448px;"
  104 + style="width: 448px"
94 105 />
95 106 </el-form-item>
96 107 </el-row>
... ... @@ -115,6 +126,7 @@ const getMenu = async () =&gt; {
115 126 type="primary"
116 127 @click="submitForm(ruleFormRef)"
117 128 style="width: 100%"
  129 + :loading="loading"
118 130 >登录</el-button
119 131 >
120 132 </el-form-item>
... ...