fix: 提交表单添加提交按钮的loading状态

src/views/classification/hooks/useSubmitForm.js

@@ -12,6 +12,8 @@ const useSubmitForm = (getList) => {
   const title = ref("");
   // 表单的 loading 状态
   const formLoading = ref(false);
+  // 提交表单loading
+  const submitLoading = ref(false);
   const data = reactive({
     // 表单数据
     form: {
@@ -91,7 +93,9 @@ const useSubmitForm = (getList) => {
       proxy.$modal.msgSuccess("修改成功");
       open.value = false;
       getList();
-    });
+    }).finally(()=>{
+      submitLoading.value = false;
+    })
   };
 
   // 添加工具分类
@@ -104,16 +108,20 @@ const useSubmitForm = (getList) => {
     toolAdd(params).then((res) => {
       fileUpdate(res.data).then(() => {
         proxy.$modal.msgSuccess("新增成功");
+        submitLoading.value = false;
         open.value = false;
         getList();
       });
-    });
+    }).finally(()=>{
+      submitLoading.value = false;
+    })
   };
 
   // 提交按钮
   const submitForm = () => {
     proxy.$refs["toolTypesRef"].validate((valid) => {
       if (valid) {
+        submitLoading.value = true;
         if (form.value.id != undefined) {
           updateToolType();
         } else {
@@ -133,6 +141,7 @@ const useSubmitForm = (getList) => {
     form,
     rules,
     formLoading,
+    submitLoading,
     handleFormTypeChange,
     reset,
     submitForm,

src/views/classification/index.vue

@@ -139,7 +139,7 @@
       </el-form>
       <template #footer>
         <div style="text-align: center">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -178,6 +178,7 @@ const {
   form,
   rules,
   formLoading,
+  submitLoading,
   handleFormTypeChange,
   reset,
   submitForm,

src/views/material/hooks/useSubmitForm.js

@@ -8,6 +8,7 @@ import {
 const useSubmitForm = (getTableData) => {
   const { proxy } = getCurrentInstance();
   const formLoading = ref(false);
+  const submitLoading = ref(false);
   // 提交表单的数据
   const form = ref({
     toolName: "",
@@ -103,7 +104,9 @@ const useSubmitForm = (getTableData) => {
       proxy.$modal.msgSuccess("修改成功");
       open.value = false;
       getTableData();
-    });
+    }).finally(()=>{
+      submitLoading.value = false
+    })
   };
 
   // 添加工具
@@ -119,12 +122,15 @@ const useSubmitForm = (getTableData) => {
         open.value = false;
         getTableData();
       });
-    });
+    }).finally(()=>{
+      submitLoading.value = false
+    })
   };
   // 提交按钮 
   const submitForm = () => {
     proxy.$refs["toolRef"].validate((valid) => {
       if (valid) {
+        submitLoading.value = true;
         if (form.value.id != undefined) {
           updateTool();
         } else {
@@ -170,6 +176,7 @@ const useSubmitForm = (getTableData) => {
     open,
     title,
     formLoading,
+    submitLoading,
     submitFormLevelTwoDict,
     submitForm,
     cancel,

src/views/material/index.vue

@@ -244,7 +244,7 @@
       </el-form>
       <template #footer>
         <div style="text-align: center">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -332,6 +332,7 @@ const {
   open,
   title,
   formLoading,
+  submitLoading,
   submitFormLevelTwoDict,
   submitForm,
   cancel,

src/views/toolsMaterial/hooks/useSubmitForm.js

@@ -27,6 +27,8 @@ const useSubmitForm = (getTableData,toolId) => {
   const open = ref(false);
   // 弹窗标题
   const title = ref("");
+  // 提交表单得按钮loading
+  const submitLoading = ref(false);
   // 更新物料
   const submitUpdate = () => {
     const params = {
@@ -36,6 +38,8 @@ const useSubmitForm = (getTableData,toolId) => {
       proxy.$modal.msgSuccess("修改成功");
       open.value = false;
       getTableData();
+    }).finally(()=>{
+      submitLoading.value = false;
     })
   };
 
@@ -50,12 +54,15 @@ const useSubmitForm = (getTableData,toolId) => {
       proxy.$modal.msgSuccess("新增成功");
       open.value = false;
       getTableData();
+    }).finally(()=>{
+      submitLoading.value = false;
     })
   };
   // 提交按钮
   const submitForm = () => {
     proxy.$refs["submitFormRef"].validate((valid) => {
       if (valid) {
+        submitLoading.value = true;
         if (form.value.id != undefined) {
           submitUpdate();
         } else {
@@ -83,6 +90,7 @@ const useSubmitForm = (getTableData,toolId) => {
     rules,
     open,
     title,
+    submitLoading,
     submitForm,
     cancel,
     reset,

src/views/toolsMaterial/index.vue

@@ -200,7 +200,9 @@
       </el-form>
       <template #footer>
         <div style="text-align: center">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="submitForm"
+            >确 定</el-button
+          >
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -249,10 +251,8 @@ const { toolId, toolInfo, init } = useInit();
 // 搜索表单
 const { queryParams, handleQuery, resetQuery } = useSearchForm(getList);
 // 提交表单
-const { form, rules, open, title, submitForm, cancel, reset } = useSubmitForm(
-  handleQuery,
-  toolId
-);
+const { form, rules, open, title, submitLoading, submitForm, cancel, reset } =
+  useSubmitForm(handleQuery, toolId);
 // 数据列表
 const {
   tableList,
@@ -274,7 +274,7 @@ watch(
     });
   },
   {
-    immediate: true
+    immediate: true,
   }
 );
 </script>