多个异步请求结束后再关闭加载动画

@@ -408,16 +408,17 @@ const promiseList = async (...promises: Promise<void>[]) => {
 const getTaskDetail = (param) => {
   loading.value = true;
   getCgTaskDetail(param).then((res: any) => {
-    // loading.value = false;
     if (res.code == proxy.$passCode) {
       taskDetail.value = res.data || {};
-      getFieldCount()
-      getSheetFieldList({ type: 1 });
-      getFieldTree()
-      getGradeData();
       nextTick(() => {
-        getSheetTableData();
-        getFieldTableData();
+        promiseList(
+          getSheetFieldList({ type: 1 }),
+          getFieldCount(),
+          getFieldTree(),
+          getGradeData(),
+          getSheetTableData(),
+          getFieldTableData()
+        )
       })
     } else {
       ElMessage.error(res.msg);
@@ -429,7 +430,7 @@ const getTaskDetail = (param) => {
 
 // 获取字段统计
 const getFieldCount = () => {
-  getTaskFieldCount({ execGuid: taskDetail.value.execGuid }).then((res: any) => {
+  return getTaskFieldCount({ execGuid: taskDetail.value.execGuid }).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data = res.data || {};
       fieldCounts.value = data;
@@ -444,7 +445,7 @@ const getFieldCount = () => {
 
 // 获取分级数据
 const getGradeData = () => {
-  getGradeList({ classifyGradeGuid: taskDetail.value.gradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
+  return getGradeList({ classifyGradeGuid: taskDetail.value.gradeGuid, pageIndex: 1, pageSize: -1 }).then((res: any) => {
     if (res.code == proxy.$passCode) {
       let data = res.data.records || [];
       data.map(d => d.gradeName = d.dataGrade + '级');
@@ -454,17 +455,14 @@ const getGradeData = () => {
       fieldTableInfo.value.fields[5].options = JSON.parse(JSON.stringify(data));
     } else {
       ElMessage.error(res.msg);
-      loading.value = false;
     }
   }).catch(() => {
-    loading.value = false;
   })
 }
 
 // 获取分类树形数据
 const getFieldTree = () => {
-  getTaskExeTreeList({ execGuid: taskDetail.value.execGuid }).then((res: any) => {
-    // treeInfo.value.loading = false;
+  return getTaskExeTreeList({ execGuid: taskDetail.value.execGuid }).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data: any = res.data || [];
       treeData.value[0].children.push(...data);
@@ -476,16 +474,14 @@ const getFieldTree = () => {
       fieldTableInfo.value.fields[4].options = JSON.parse(JSON.stringify(data));
     } else {
       ElMessage.error(res.msg);
-      loading.value = false;
     }
   }).catch(() => {
-    loading.value = false;
   })
 }
 
 // 获取库、表、字段信息
 const getSheetFieldList = (params, tId = null) => {
-  getDbFieldList({ execGuid: taskDetail.value.execGuid, ...params }).then((res: any) => {
+  return getDbFieldList({ execGuid: taskDetail.value.execGuid, ...params }).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data = res.data || [];
       if (params.type == 1) {
@@ -507,10 +503,8 @@ const getSheetFieldList = (params, tId = null) => {
       }
     } else {
       ElMessage.error(res.msg);
-      loading.value = false;
     }
   }).catch(() => {
-    loading.value = false;
   })
 }
 
@@ -523,28 +517,30 @@ const nodeClick = (data, node) => {
   if (data.classifyDetailGuid == 'all') {
     fieldItemList.value[4].default = '';
     fieldItemList.value[5].default = [];
+    promiseList(
       getFieldTableData()
+    )
   } else {
     const parentGuids = data.parentGuids || [];
     parentGuids.push(data.classifyDetailGuid)
     fieldItemList.value[4].default = 'Y';
     fieldItemList.value[5].default = parentGuids;
-    getFieldTableData();
+    promiseList(
+      getFieldTableData()
+    )
   }
 }
 
 // 获取库表数据
 const getSheetTableData = () => {
-  loading.value = true;
   const sheetParams = sheetSearchRef.value.toolSearch.formInline || {};
-  execTaskSheetList(
+  return execTaskSheetList(
     Object.assign({}, { ...sheetParams }, {
       execGuid: taskDetail.value.execGuid,
       pageIndex: sheetTableInfo.value.page.curr,
       pageSize: sheetTableInfo.value.page.limit,
     })
   ).then((res: any) => {
-    loading.value = false;
     if (res.code == proxy.$passCode) {
       sheetTableInfo.value.data = res.data.records || [];
       sheetTableInfo.value.page.curr = res.data.pageIndex;
@@ -555,13 +551,11 @@ const getSheetTableData = () => {
     }
   })
     .catch((res) => {
-      loading.value = false;
     });
 };
 
 // 获取字段表格数据
 const getFieldTableData = () => {
-  loading.value = true;
   const fieldParams = fieldSearchRef.value.toolSearch.formInline || {};
   let params: any = {
     ...fieldParams,
@@ -575,8 +569,7 @@ const getFieldTableData = () => {
     params.classifyDetail = classifyName;
   }
   delete params.classifyName
-  execTaskFieldList(params).then((res: any) => {
-    loading.value = false;
+  return execTaskFieldList(params).then((res: any) => {
     if (res.code == proxy.$passCode) {
       let data = res.data.records || [];
       data.map(item => item.STATE = '');
@@ -589,7 +582,6 @@ const getFieldTableData = () => {
     }
   })
     .catch((res) => {
-      loading.value = false;
     });
 };
 
@@ -648,9 +640,9 @@ const tableBtnClick = (scope, btn) => {
       saveFields(params)
       row.STATE = '';
     } else {
-      if (row.classifyDetailGuid && row.gradeDetailGuid == '') {
+      if (row.classifyDetailGuid && !row.gradeDetailGuid) {
         ElMessage.error('分级不能为空');
-      } else if (row.classifyDetailGuid == '' && row.gradeDetailGuid) {
+      } else if (!row.classifyDetailGuid && row.gradeDetailGuid) {
         ElMessage.error('分类不能为空');
       } else {
         ElMessage.error('分类和分级均不能为空');
@@ -663,11 +655,15 @@ const tablePageChange = (info) => {
   if (tabsInfo.value.activeName == 'sheet') {
     sheetTableInfo.value.page.limit = Number(info.limit);
     sheetTableInfo.value.page.curr = Number(info.curr);
-    getSheetTableData();
+    promiseList(
+      getSheetTableData()
+    )
   } else {
     fieldTableInfo.value.page.limit = Number(info.limit);
     fieldTableInfo.value.page.curr = Number(info.curr);
-    getFieldTableData();
+    promiseList(
+      getFieldTableData()
+    )
   }
 };
 
@@ -712,16 +708,12 @@ const btnClick = async (btn, bType = null) => {
 const saveFields = (params, isBatch = false) => {
   loading.value = true;
   execFieldConfirm(params).then((res: any) => {
-    loading.value = false;
     if (res.code == proxy.$passCode) {
       ElMessage.success('保存成功');
-      // if (isBatch) {
-      //   getFieldTableData();
-      // } else {
-      //   currTableData.value.changeStatus = 'Y';
-      // }
-      getFieldTableData();
-      getFieldCount();
+      promiseList(
+        getFieldCount(),
+        getFieldTableData()
+      )
     } else {
       ElMessage.error(res.msg);
     }
@@ -757,7 +749,9 @@ const saveStatus = (params) => {
     loading.value = false;
     if (res.code == proxy.$passCode) {
       ElMessage.success('确认成功');
-      getFieldTableData();
+      promiseList(
+        getFieldTableData()
+      )
     }
   })
 }
@@ -768,7 +762,9 @@ const searchSheet = (val: any, clear: boolean = false) => {
     sheetItemList.value.map(item => item.default = '')
   }
   sheetParams.value = Object.assign({}, { ...sheetParams.value }, { ...val });
-  getSheetTableData();
+  promiseList(
+    getSheetTableData()
+  )
 };
 
 const searchField = (val: any, clear: boolean = false) => {
@@ -778,7 +774,9 @@ const searchField = (val: any, clear: boolean = false) => {
     treeInfoRef.value.setCurrentKey('all');
   }
   fieldParams.value = Object.assign({}, { ...fieldParams.value }, { ...val });
-  getFieldTableData();
+  promiseList(
+    getFieldTableData()
+  )
 };
 
 const cascaderChange = (val, info) => {
@@ -790,15 +788,22 @@ const cascaderChange = (val, info) => {
     if (info && info.row) {
       const cascaderData = getCascaderCheckedData();
       info.row.gradeDetailGuid = cascaderData.length ? cascaderData[0].data.gradeGuid : '';
-
     } else {
       treeInfoRef.value.expandedKey = val || ['all'];
       treeInfoRef.value.setCurrentKey(val?.at(-1) || 'all');
-      getFieldTableData();
+      promiseList(
+        getFieldTableData()
+      )
     }
   }
 };
 
+const checkboxChange = (val) => {
+  promiseList(
+    getFieldTableData()
+  )
+};
+
 const selectChange = (val, item, scope = null) => {
   if (scope && item.field == 'gradeDetailName') {
     let row = scope.row;
@@ -822,7 +827,9 @@ const selectChange = (val, item, scope = null) => {
           type: 2,
           dbGuid: val || ''
         }
+        promiseList(
           getSheetFieldList(params)
+        )
       }
     } else {
       if (item.field == "databaseGuid") {
@@ -853,7 +860,9 @@ const selectChange = (val, item, scope = null) => {
           type: item.field == "databaseGuid" ? 2 : 3,
           dbGuid: val || ''
         }
+        promiseList(
           getSheetFieldList(params)
+        )
       }
     }
   } else if (item.field == 'isClassify') {
@@ -862,7 +871,9 @@ const selectChange = (val, item, scope = null) => {
     treeInfo.value.expandedKey = ['all'];
     treeInfoRef.value.setCurrentKey('all');
     fieldItemList.value[4].default = val || '';
-    getFieldTableData();
+    promiseList(
+      getFieldTableData()
+    )
   }
 }
 
@@ -883,7 +894,7 @@ const dialogBtnClick = (btn, info) => {
       }
       params.push(param)
     })
-    saveFields(params, true);
+    saveFields(params, true)
     dialogInfo.value.visible = false;
   } else if (btn.value == 'cancel') {
     dialogInfo.value.visible = false;
@@ -1000,7 +1011,7 @@ onMounted(() => {
                     <!-- <el-button plain @click="btnClick({ value: 'export' })">导出</el-button> -->
                   </div>
                   <div class="checkboxs">
-                    <el-checkbox v-model="checked1" @change="getFieldTableData()">仅看多分类</el-checkbox>
+                    <el-checkbox v-model="checked1" @change="checkboxChange">仅看多分类</el-checkbox>
                     <el-tooltip effect="light" placement="top" content="一个字段只能有一个分类，多分类的字段需要人工确定分类">
                       <el-icon style="margin-left: 8px;">
                         <svg-icon name="icon-tip" />

@@ -154,10 +154,25 @@ const metadataTableInfo = ref({
   },
 })
 
+/**
+ * 传入多个promise对象，当全部结束时取消Loading
+ * @param promises 传入多个promise对象，当全部结束时取消Loading
+ */
+const promiseList = async (...promises: Promise<void>[]) => {
+  // loading方法全局封装成一个组件
+  loading.value = true;
+  try {
+    await Promise.all(promises);
+  } catch (e) {
+    loading.value = false;
+  } finally {
+    loading.value = false;
+  }
+};
+
 const getTaskDetail = (data) => {
   loading.value = true;
   getCgTaskDetail(data).then((res: any) => {
-    loading.value = false;
     if (res.code == proxy.$passCode) {
       const data = res.data || {};
       taskDetail.value = data;
@@ -165,8 +180,10 @@ const getTaskDetail = (data) => {
         item.default = data[item.field] || '';
       })
       selectRowData.value = data.metaGuids || [];
-      getPermissionList({});
-      getMetaTableData();
+      promiseList(
+        getPermissionList(),
+        getMetaTableData()
+      )
     }
   }).catch(() => {
     loading.value = false;
@@ -176,19 +193,18 @@ const getTaskDetail = (data) => {
 const nodeClick = (data) => {
   searchItemValue.value.classifyGuid = templateInfo.value.guid;
   searchItemValue.value.detailGuid = data.guid;
-  getTableData();
+  promiseList(
+    getTableData()
+  )
 }
 
 // 获取标签数据
 const getTableData = () => {
-  loading.value = true;
-  getCgLabelPageList(
-    Object.assign({}, searchItemValue.value, {
+  const params = Object.assign({}, searchItemValue.value, {
     pageIndex: page.value.curr,
     pageSize: page.value.limit,
   })
-  ).then((res: any) => {
-    loading.value = false;
+  return getCgLabelPageList(params).then((res: any) => {
     if (res.code == proxy.$passCode) {
       tableInfo.value.data = res.data.records || [];
       tableInfo.value.page.curr = res.data.pageIndex;
@@ -197,7 +213,6 @@ const getTableData = () => {
     }
   })
     .catch((res) => {
-      loading.value = false;
     });
 };
 
@@ -219,7 +234,9 @@ const tablePageChange = (info) => {
     page.value.limit = Number(info.limit);
     tableInfo.value.page.limit = page.value.limit;
     tableInfo.value.page.curr = page.value.curr;
-    getTableData();
+    promiseList(
+      getTableData()
+    )
   } else {
 
   }
@@ -227,9 +244,7 @@ const tablePageChange = (info) => {
 
 // 获取元数据表格
 const getMetaTableData = () => {
-  loading.value = true;
-  getMetaTableCollectList({}).then((res: any) => {
-    loading.value = false;
+  return getMetaTableCollectList({}).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data = res.data.records || [];
       metadataTableInfo.value.data = data;
@@ -241,8 +256,8 @@ const getMetaTableData = () => {
         })
       }
     }
-  }).catch(()=> {
-    loading.value = false;
+  }).catch(() => {
+
   })
 }
 
@@ -339,7 +354,7 @@ const submitForm = (formEl, info) => {
 const handleScroll = () => {
   if (listPage.value.curr < listPage.value.totalPages) {
     listPage.value.curr++
-    getPermissionList({})
+    getPermissionList()
   }
 }
 
@@ -347,22 +362,21 @@ const handleScroll = () => {
 const listClick = (row) => {
   selectIndex.value = row.guid;
   templateInfo.value = row;
-  loading.value = true;
-  getClassifyTree();
   searchItemValue.value.classifyGuid = row.guid;
   searchItemValue.value.detailGuid = '';
-  getTableData();
+  promiseList(
+    getClassifyTree(),
+    getTableData()
+  )
 };
 
 // 获取分类列表
-const getPermissionList = (val, init = true) => {
+const getPermissionList = (val = {}, init = true) => {
   let params: any = val ? { ...val } : {}
   params.pageIndex = listPage.value.curr;
   params.pageSize = listPage.value.limit;
   params.type = 'C';
-  loading.value = true;
-  getClassifyGradList(params).then((res: any) => {
-    loading.value = false;
+  return getClassifyGradList(params).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data = res.data?.records || []
       if (init) {
@@ -385,7 +399,7 @@ const getPermissionList = (val, init = true) => {
       }
     }
   }).catch(() => {
-    loading.value = false;
+
   })
 }
 
@@ -394,16 +408,13 @@ const getClassifyTree = () => {
   const params = {
     classifyGradeGuid: templateInfo.value.guid
   }
-  loading.value = true;
-  getClassifyTreeList(params).then((res: any) => {
-    loading.value = false;
+  return getClassifyTreeList(params).then((res: any) => {
     if (res.code == proxy.$passCode) {
       const data = res.data || [];
       treeInfo.value.data = data;
       treeInfoRef.value.setCurrentKey('');
     }
   }).catch(() => {
-    loading.value = false;
   })
 }
 
@@ -420,8 +431,10 @@ onBeforeMount(() => {
   if (route.query.type == 'edit') {
     getTaskDetail({ guid: route.query.guid })
   } else {
-    getPermissionList({});
-    getMetaTableData();
+    promiseList(
+      getPermissionList(),
+      getMetaTableData()
+    )
   }
 })