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

lxs
Showing 2 changed files with 108 additions and 84 deletions
src/views/data_inventory/taskDetail.vue
src/views/data_inventory/taskEdit.vue
--- a/src/views/data_inventory/taskDetail.vue
View file @19a713f
+++ b/src/views/data_inventory/taskDetail.vue
View file @19a713f
@@ -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();
+        promiseList(
-        getFieldTableData();
+          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) => {
+  return getTaskExeTreeList({ execGuid: taskDetail.value.execGuid }).then((res: any) => {
-    // treeInfo.value.loading = false;
    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 = [];
-    getFieldTableData()
+    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) => {
+  return execTaskFieldList(params).then((res: any) => {
-    loading.value = false;
    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) {
+      promiseList(
-      //   getFieldTableData();
+        getFieldCount(),
-      // } else {
+        getFieldTableData()
-      //   currTableData.value.changeStatus = 'Y';
+      )
-      // }
-      getFieldTableData();
-      getFieldCount();
    } 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 || ''
        }
-        getSheetFieldList(params)
+        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 || ''
        }
-        getSheetFieldList(params)
+        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" />
--- a/src/views/data_inventory/taskEdit.vue
View file @19a713f
+++ b/src/views/data_inventory/taskEdit.vue
View file @19a713f
@@ -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({});
+      promiseList(
-      getMetaTableData();
+        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;
+  const params = Object.assign({}, searchItemValue.value, {
-  getCgLabelPageList(
+    pageIndex: page.value.curr,
-    Object.assign({}, searchItemValue.value, {
+    pageSize: page.value.limit,
-      pageIndex: page.value.curr,
+  })
-      pageSize: page.value.limit,
+  return getCgLabelPageList(params).then((res: any) => {
-    })
-  ).then((res: any) => {
-    loading.value = false;
    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;
+  return getMetaTableCollectList({}).then((res: any) => {
-  getMetaTableCollectList({}).then((res: any) => {
-    loading.value = false;
    if (res.code == proxy.$passCode) {
      const data = res.data.records || [];
      metadataTableInfo.value.data = data;
@@ -241,8 +256,8 @@ const getMetaTableData = () => {
        })
      }
    }
-  }).catch(()=> {
+  }).catch(() => {
-    loading.value = false;
  })
 }
@@ -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;
+  return getClassifyGradList(params).then((res: any) => {
-  getClassifyGradList(params).then((res: any) => {
-    loading.value = false;
    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;
+  return getClassifyTreeList(params).then((res: any) => {
-  getClassifyTreeList(params).then((res: any) => {
-    loading.value = false;
    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({});
+    promiseList(
-    getMetaTableData();
+      getPermissionList(),
+      getMetaTableData()
+    )
  }
 })