update: 优化分类分级交互

xukangle
Showing 6 changed files with 74 additions and 20 deletions
src/views/data_inventory/classStandardEdit.vue
src/views/data_inventory/classifyGradEdit.vue
src/views/data_inventory/classifyGradeCatalogue.vue
src/views/data_inventory/configureRules.vue
src/views/data_inventory/existingTableSelect.vue
src/views/data_inventory/templateConfig.vue
--- a/src/views/data_inventory/classStandardEdit.vue
View file @4fa7731
+++ b/src/views/data_inventory/classStandardEdit.vue
View file @4fa7731
@@ -53,6 +53,7 @@ const levelMap = {
  4: '四级',
 }
 const currTableInfo = ref<any>({});
+const drawerRef = ref<any>('');
 const tableInfo = ref({
  id: "data-class-standard-table",
@@ -92,7 +93,8 @@ const tableInfo = ref({
    btns: [
      {
        label: "编辑", value: "edit", click: (scope) => {
-          console.log(scope);
+          // console.log(drawerRef.value.drawerFormRef[0].ruleFormRef);
+          currentEditingGuid.value = scope.row.guid;
          selectParentEdit(scope.row.guid);
          currTableInfo.value = scope.row;
          drawerInfo.value.visible = true;
@@ -193,9 +195,38 @@ const classEditFormItems = ref([{
  block: true
 }]);
+// const validateUniqueClassifyName = (rule, value, callback) => {
+//   console.log('validateUniqueClassifyName', value);
+//   // 递归遍历treeListData，判断是否有重复的分类名称
+//   // 检查空值情况
+//   if (!value) {
+//     callback(new Error('请填写分类名称'));
+//     return;
+//   }
+//   // 递归检查函数
+//   const isExist = (data, value) => {
+//     return data.some(item => {
+//       if (item.classifyName === value) {
+//         return true;
+//       }
+//       return item.children && isExist(item.children, value);
+//     });
+//   };
+//   // 检查是否存在
+//   if (isExist(treeListData.value, value)) {
+//     callback(new Error('分类名称已存在，请填写其他名称'));
+//   } else {
+//     callback(); // 校验通过
+//   }
+// }
+let currentEditingGuid = ref<any>('');
 const validateUniqueClassifyName = (rule, value, callback) => {
-  console.log('validateUniqueClassifyName', value);
+  console.log('validateUniqueClassifyName', treeListData.value, value, currentEditingGuid);
-  // 递归遍历treeListData，判断是否有重复的分类名称
  // 检查空值情况
  if (!value) {
    callback(new Error('请填写分类名称'));
@@ -203,22 +234,26 @@ const validateUniqueClassifyName = (rule, value, callback) => {
  }
  // 递归检查函数
-  const isExist = (data, value) => {
+  const isExist = (data, value, guid) => {
    return data.some(item => {
+      // 如果是编辑模式，忽略当前分类的校验
+      if (item.guid === guid) {
+        return false;
+      }
      if (item.classifyName === value) {
        return true;
      }
-      return item.children && isExist(item.children, value);
+      return item.children && isExist(item.children, value, guid);
    });
  };
  // 检查是否存在
-  if (isExist(treeListData.value, value)) {
+  if (isExist(treeListData.value, value, currentEditingGuid.value)) {
    callback(new Error('分类名称已存在，请填写其他名称'));
  } else {
    callback(); // 校验通过
  }
-}
+};
 const classEditFormRules = ref({
@@ -254,6 +289,7 @@ const drawerInfo = ref({
    contents: [classEditFormInfo.value],
  },
  footer: {
+    visible: true,
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确定', value: 'save', loading: false },
@@ -266,6 +302,7 @@ const drawerBtnClick = async (btn, info) => {
    drawerInfo.value.visible = false;
  } else {
    if (drawerInfo.value.header.title == '添加分类') {
+      drawerInfo.value.footer.btns.map((item: any) => (item.disabled = true));
      const params = {
        ...info,
        classifyGradeGuid: router.currentRoute.value.query.guid,
@@ -275,11 +312,13 @@ const drawerBtnClick = async (btn, info) => {
        proxy.$ElMessage.success('添加成功!');
        drawerInfo.value.visible = false;
        getTreeListData();
+        drawerInfo.value.footer.btns.map((item: any) => delete item.disabled);
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    } else {
      // 编辑分类
+      drawerInfo.value.footer.btns.map((item: any) => (item.disabled = true));
      const params = {
        ...info,
        classifyGradeGuid: router.currentRoute.value.query.guid,
@@ -289,7 +328,10 @@ const drawerBtnClick = async (btn, info) => {
      if (res.code == proxy.$passCode) {
        proxy.$ElMessage.success('修改成功!');
        drawerInfo.value.visible = false;
+        drawerInfo.value.footer.btns.map((item: any) => delete item.disabled);
        getTreeListData();
+        // 清空当前编辑的guid
+        currentEditingGuid.value = '';
      } else {
        proxy.$ElMessage.error(res.msg);
      }
@@ -327,12 +369,14 @@ const treeListParams = ref({
 });
 const treeListData = ref([]);
 const getTreeListData = async () => {
+  tableInfo.value.loading = true;
  const res: any = await getClassifyTreeList(treeListParams.value);
  if (res.code == proxy.$passCode) {
    treeListData.value = res.data || [];
    tableInfo.value.data = treeListData.value;
    classEditFormItems.value[2].options = treeListData.value;
    shapeTreeListData.value = treeListData.value;
+    tableInfo.value.loading = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
@@ -388,6 +432,7 @@ const getGradeListData = async () => {
 }
 const newCreateClass = () => {
  drawerInfo.value.visible = true;
  classEditFormItems.value[2].options = treeListData.value;
  drawerInfo.value.header.title = '添加分类';
@@ -734,7 +779,7 @@ onMounted(() => {
    <div class="bottom_tool_wrap">
      <el-button @click="cancel">取消</el-button>
    </div>
-    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" />
+    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" ref="drawerRef" />
  </div>
 </template>
--- a/src/views/data_inventory/classifyGradEdit.vue
View file @4fa7731
+++ b/src/views/data_inventory/classifyGradEdit.vue
View file @4fa7731
@@ -8,13 +8,16 @@ import router from "@/router";
 import { ref } from "vue";
 import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';
-onMounted(() => {
+onBeforeMount(() => {
  getGradeListData();
-  Promise.all([getDataGrade(), getDataClassify()]);
+  getDataGrade();
+  getDataClassify();
 });
 // 获取分级列表
 const getGradeListData = async () => {
+  console.log('调用了吗~~~');
+  tableInfo.value.loading = true;
  const params = {
    pageIndex: 1,
    pageSize: -1,
@@ -23,6 +26,7 @@ const getGradeListData = async () => {
  const res: any = await getGradeList(params);
  if (res.code == proxy.$passCode) {
    tableInfo.value.data = res.data.records;
+    tableInfo.value.loading = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
@@ -94,9 +98,9 @@ const filterDataGradeEdit = (dataGrade: string) => {
  (newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
 };
-const tableRef = ref();
+const tableRef = ref<any>();
-const classDataRef = ref();
+const classDataRef = ref<any[]>([]);
-const gradeDataRef = ref();
+const gradeDataRef = ref<any>();
 const fullscreenLoading = ref(false);
 const editClassifyGradeGuid = ref('');
 const { proxy } = getCurrentInstance() as any;
@@ -120,7 +124,7 @@ const tableInfo = ref({
        return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
      }
    },
-    { label: "分级描述", field: "gradeDesc", align: "left", },
+    { label: "分级描述", field: "gradeDesc", align: "left", width: 480 },
  ],
  actionInfo: {
--- a/src/views/data_inventory/classifyGradeCatalogue.vue
View file @4fa7731
+++ b/src/views/data_inventory/classifyGradeCatalogue.vue
View file @4fa7731
@@ -408,8 +408,9 @@ const dataBaseTableInfo = ref({
              cgDirName: scope.row.cgDirName,
              tableName: scope.row.tableName,
              tableChName: scope.row.tableChName,
-              guid: scope.row.guid,
+              tableGuid: scope.row.tableGuid,
              description: scope.row.description,
+              execGuid: execGuidInfo.value.execGuid
            }
          });
        }
--- a/src/views/data_inventory/configureRules.vue
View file @4fa7731
+++ b/src/views/data_inventory/configureRules.vue
View file @4fa7731
@@ -11,7 +11,7 @@ const { proxy } = getCurrentInstance() as any;
 const bizRuleConfigData = ref<any>()
 const getBizRuleConfigDetailData = async () => {
  const params = {
-    tableGuid: router.currentRoute.value.query.guid,
+    tableGuid: router.currentRoute.value.query.tableGuid,
    execGuid: router.currentRoute.value.query.execGuid
  }
  const res: any = await getBizRuleConfigDetail(params)
@@ -268,7 +268,7 @@ const cancel = () => {
        }">
        <el-table-column type="selection" :width="32" align="center" />
        <!-- 排序列（不可编辑） -->
-        <el-table-column prop="index" label="排序" width="80" align="center" />
+        <el-table-column type="index" label="排序" width="80" align="center" />
        <!-- 字段中文名（不可编辑）fieldChName -->
        <el-table-column prop="fieldName" label="字段中文名" width="120">
          <template #default="scope">
--- a/src/views/data_inventory/existingTableSelect.vue
View file @4fa7731
+++ b/src/views/data_inventory/existingTableSelect.vue
View file @4fa7731
@@ -222,7 +222,7 @@ watch(() => databaseInfo.value, (val) => {
  getDsTableList({
    pageSize: dsPageInfo.value.limit,
    pageIndex: dsPageInfo.value.curr,
-    dataSourceGuid: val.guid,
+    databaseGuid: val.guid,
    execGuid: props.execGuid
  });
 })
@@ -232,7 +232,7 @@ const handleSearchInputChange = () => {
  getDsTableList({
    pageSize: dsPageInfo.value.limit,
    pageIndex: dsPageInfo.value.curr,
-    dataSourceGuid: databaseInfo.value.guid,
+    databaseGuid: databaseInfo.value.guid,
    execGuid: props.execGuid
  });
 };
@@ -244,7 +244,7 @@ const dsPageChange = (page) => {
  getDsTableList({
    pageSize: dsPageInfo.value.limit,
    pageIndex: dsPageInfo.value.curr,
-    dataSourceGuid: databaseInfo.value.guid,
+    databaseGuid: databaseInfo.value.guid,
    execGuid: props.execGuid
  });
 };
--- a/src/views/data_inventory/templateConfig.vue
View file @4fa7731
+++ b/src/views/data_inventory/templateConfig.vue
View file @4fa7731
@@ -45,10 +45,12 @@ const classListDataLoading = ref(false);
 // 获取分级列表
 const getClassifyGradListData = async () => {
+  classListDataLoading.value = true;
  const res: any = await getClassifyGradList(refGradePageParams.value);
  if (res.code == proxy.$passCode) {
    classifyGradListData.value = res.data.records || [];
    (classStandardFormItems.value[1].options as any) = classifyGradListData.value;
+    classListDataLoading.value = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }
@@ -56,9 +58,11 @@ const getClassifyGradListData = async () => {
 //获取分类列表
 const getClassListData = async () => {
+  classListDataLoading.value = true;
  const res: any = await getClassifyGradList(refClassifyPageParams.value);
  if (res.code == proxy.$passCode) {
    classListData.value = res.data.records || [];
+    classListDataLoading.value = false;
  } else {
    proxy.$ElMessage.error(res.msg);
  }