分类分级任务bug修改

lxs
Showing 6 changed files with 144 additions and 43 deletions
src/components/Dialog/index.vue
src/components/Tools/table_search.vue
src/components/Tools/table_tools.vue
src/views/data_inventory/taskConfig.vue
src/views/data_inventory/taskDetail.vue
src/views/data_inventory/taskEdit.vue
--- a/src/components/Dialog/index.vue
View file @c89e416
+++ b/src/components/Dialog/index.vue
View file @c89e416
@@ -684,7 +684,7 @@ defineExpose({
              @radioGroupChange="radioGroupChange" @selectChange="formSelectChange" @toolBtnClick="formToolBtnClick"
              @checkboxChange="checkboxChange" @switchChange="switchChange" @btnClick="btnClick"
              @treeSelectLoad="treeSelectLoad" @treeSelectNodeChange="treeSelectNodeChange"
-              @scheduleChange="scheduleChange" @inputChange="formInputChange" />
+              @scheduleChange="scheduleChange" @inputChange="formInputChange" @cascaderChange="cascaderChange" />
            <template v-if="con.note">
              <div class="sql-note">{{ con.note }}</div>
            </template>
--- a/src/components/Tools/table_search.vue
View file @c89e416
+++ b/src/components/Tools/table_search.vue
View file @c89e416
@@ -84,10 +84,15 @@ const handleTreeSelectNodeClick = (node, item) => {
 }
 const cascaderChange = (val, item) => {
  emits("cascaderChange", val, item);
+  if(item.blur){
+    const formCascader = formCascaderRef.value[0] || formCascaderRef.value;
+    formCascader.togglePopperVisible(false)
+  }
 }
 const inputChange = (val) => {
  onSubmit()
 }
+const formCascaderRef = ref()
 onMounted(() => {
  props.init && onSubmit()
 })
@@ -197,7 +202,7 @@ onMounted(() => {
            :show-all-levels="item.showAllLevels ?? true" :clearable="item.clearable"
            :filterable="item.filterable ?? false" :collapse-tags="item.collapse ?? false"
            :collapse-tags-tooltip="item.tagsTooltip ?? false" :max-collapse-tags="item.maxTags ?? 1"
-            :disabled="item.disabled ?? false" @change="(val) => cascaderChange(val, item)" />
+            :disabled="item.disabled ?? false" :popper-class="item.popperClass ?? ''" @change="(val) => cascaderChange(val, item)" />
        </template>
        <template v-else>
          <el-input v-model.trim="formInline[item.field]" :placeholder="item.placeholder" :clearable="item.clearable"
--- a/src/components/Tools/table_tools.vue
View file @c89e416
+++ b/src/components/Tools/table_tools.vue
View file @c89e416
@@ -44,8 +44,8 @@ const loadMore = () => {
 const treeSelectLoad = (node, resolve, item) => {
  emits("treeSelectLoad", node, resolve, item);
 };
-const selectChange = (val, row) => {
+const selectChange = (val, row, info) => {
-  emits("selectChange", val, row);
+  emits("selectChange", val, row, info);
 };
 const handleTreeSelectNodeChange = (node, item) => {
  emits("treeSelectNodeChange", node, item);
--- a/src/views/data_inventory/taskConfig.vue
View file @c89e416
+++ b/src/views/data_inventory/taskConfig.vue
View file @c89e416
@@ -35,7 +35,7 @@ const tableInfo = ref({
      label: "目录名称", field: "cgDirName", width: 120, type: "text_btn", columClass: 'text_btn', click: (scope) => {
        router.push({
          name: "classifyGradeCatalogue",
-          // query: { guid: scope.row.damGuid },
+          query: { name: scope.row.cgDirName },
        });
      }
    },
--- a/src/views/data_inventory/taskDetail.vue
View file @c89e416
+++ b/src/views/data_inventory/taskDetail.vue
View file @c89e416
@@ -6,7 +6,7 @@
 import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Search, Warning } from "@element-plus/icons-vue";
+import { Search, Warning, ArrowUp } from "@element-plus/icons-vue";
 import { tagMethod, tagType, changeNum } from "@/utils/common";
 import TableTools from '@/components/Tools/table_tools.vue';
 import {
@@ -41,7 +41,7 @@ const treeInfo: any = ref({
  id: "data-pickup-tree",
  filter: true,
  queryValue: "",
-  queryPlaceholder: "输入组织名称搜索",
+  queryPlaceholder: "输入分类名称搜索",
  props: {
    label: "classifyName",
    value: "classifyDetailGuid",
@@ -51,7 +51,7 @@ const treeInfo: any = ref({
  expandOnNodeClick: false,
  data: [],
 });
+const titleClose = ref(false)
 const taskDetail: any = ref({})
 const fieldCounts = ref({})
 const tabsInfo = ref({
@@ -163,8 +163,10 @@ const fieldItemList = ref([
      label: "classifyName",
      value: "classifyDetailGuid",
    },
+    // popperClass: 'strictiy_cascader',
    filterable: true,
    clearable: true,
+    blur: true
  },
  {
    type: "select",
@@ -180,7 +182,8 @@ const fieldItemList = ref([
    clearable: true,
  },
 ]);
+const tableToolRef = ref();
+const toolH = ref(49);
 const page = ref({
  limit: 50,
  curr: 1,
@@ -192,7 +195,6 @@ const page = ref({
    { label: "200", value: 200 },
  ],
 });
 const currTableData: any = ref({});
 const sheetTableInfo = ref({
  id: "mapping-table",
@@ -241,7 +243,7 @@ const fieldTableInfo = ref({
      label: "分类", field: "classifyDetailGuid", width: 280,
      type: "cascader",
      options: [],
-      showAllLevels: false,
+      showAllLevels: true,
      props: {
        checkStrictly: false,
        expandTrigger: "hover",
@@ -261,9 +263,12 @@ const fieldTableInfo = ref({
      }
    },
    {
-      label: "分级", field: "gradeDetailName", width: 120, type: 'select', options: [], props: { label: 'gradeName', value: 'guid' },
+      label: "分级", field: "gradeDetailGuid", width: 80, type: 'select', options: [], props: { label: 'gradeName', value: 'guid' },
+      getName: (scope) => {
+        return scope.row.gradeDetailName || '--'
+      }
    },
-    { label: "标签", field: "label", width: 96 },
+    { label: "标签", field: "label", width: 120 },
    { label: "规则", field: "ruleDetail", width: 200 },
    { label: "表英文名", field: "tableName", width: 200 },
    { label: "表中文名", field: "tableChName", width: 120 },
@@ -292,7 +297,7 @@ const formItems = ref([
    field: "classifyName",
    default: [],
    options: [],
-    showAllLevels: false,
+    showAllLevels: true,
    props: {
      checkStrictly: false,
      expandTrigger: "hover",
@@ -612,6 +617,9 @@ const btnClick = async (btn, bType = null) => {
  if (type == 'path') {
    router.push({
      name: "classifyGradeCatalogue",
+      query: {
+        name: taskDetail.value.cgDirName
+      }
    });
  } else if (type == 'batch') {
    if (selectRowData.value.length == 0) {
@@ -679,19 +687,30 @@ const searchField = (val: any, clear: boolean = false) => {
  getFieldTableData();
 };
-const cascaderChange = (val, row) => {
+const cascaderChange = (val, info) => {
+  if (dialogInfo.value.visible) {
+    const cascaderData = dialogRef.value.getCascaderCheckedData();
+    formItems.value[1].default = cascaderData.length ? cascaderData[0].data.gradeGuid : '';
+  } else {
+    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');
-  console.log('cascader', val)
      getFieldTableData();
+    }
+  }
 };
 const selectChange = (val, item, scope = null) => {
-  if (scope) {
+  if (scope && item.field == 'gradeDetailName') {
    let row = scope.row;
    row.gradeGuid = val || '';
    row.gradeDetailName = val ? item.options.find(i => i.guid == val)?.gradeName : '';
  } else {
+    const params: any = scope;
    if (tabsInfo.value.activeName == 'sheet') {
      if (!val) {
        sheetItemList.value[1].default = '';
@@ -699,6 +718,7 @@ const selectChange = (val, item, scope = null) => {
      } else {
        sheetItemList.value[1].disabled = false;
      }
+      params.tableGuid = '';
    } else {
      if (item.field == "databaseGuid") {
        if (!val) {
@@ -708,7 +728,10 @@ const selectChange = (val, item, scope = null) => {
          fieldItemList.value[3].disabled = true;
        } else {
          fieldItemList.value[2].disabled = false;
+          params.tableGuid && (fieldItemList.value[3].disabled = false);
        }
+        params.tableGuid = '';
+        params.fieldGuid = '';
      } else {
        if (!val) {
          fieldItemList.value[3].default = '';
@@ -716,6 +739,7 @@ const selectChange = (val, item, scope = null) => {
        } else {
          fieldItemList.value[3].disabled = false;
        }
+        params.fieldGuid = '';
      }
    }
    if (val) {
@@ -763,7 +787,10 @@ onBeforeMount(() => {
 })
 onMounted(() => {
+  toolH.value = tableToolRef.value.offsetHeight;
+  window.addEventListener('resize', function () {
+    toolH.value = tableToolRef.value.offsetHeight;
+  })
 })
 </script>
@@ -772,7 +799,7 @@ onMounted(() => {
  <div class="container_wrap full flex" v-loading="loading">
    <div class="main_wrap full">
      <div class="content_main panel">
-        <div class="template_panel">
+        <div class="template_panel" :class="{ active: !titleClose }">
          <div class="panel_title">
            <div class="title_wrap">
              <span class="title_text">{{ taskDetail.taskName }}</span>
@@ -780,6 +807,12 @@ onMounted(() => {
                {{ filterVal(taskDetail.confirmStatus, 'confirmStatus') }}
              </el-tag>
            </div>
+            <div class="title_btn" @click="titleClose = !titleClose">
+              <el-icon :class="{ active: !titleClose }">
+                <ArrowUp />
+              </el-icon>
+              <span class="title_btn_item">{{ titleClose ? '展开' : '收起' }}</span>
+            </div>
          </div>
          <div class="title_desc">
            <div class="desc_group">
@@ -804,7 +837,8 @@ onMounted(() => {
              </div>
              <div class="desc_item">
                <span class="desc_label">元数据名称：</span>
-                <span class="desc_value">{{ (taskDetail.metaNames || []).length ? taskDetail.metaNames.join(',') : '--'
+                <span class="desc_value">{{ (taskDetail.metaNames || []).length ? taskDetail.metaNames.join(',') :
+                  '--'
                  }}</span>
              </div>
            </div>
@@ -824,7 +858,7 @@ onMounted(() => {
            <span>个字段</span>
          </p>
        </div>
-        <div class="panel_content">
+        <div class="panel_content" :class="{ full: titleClose }">
          <Tabs class="panel_tabs" :tabs-info="tabsInfo" @tab-change="tabChange" />
          <div class="panel" v-show="tabsInfo.activeName == 'sheet'">
            <div class="table_tool_wrap">
@@ -840,7 +874,7 @@ onMounted(() => {
              <Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
            </div>
            <div class="box_right">
-              <div class="table_tool_wrap">
+              <div class="table_tool_wrap" ref="tableToolRef">
                <TableTools ref="fieldSearchRef" :searchItems="fieldItemList" :searchId="'field-search'" :init="false"
                  @selectChange="selectChange" @cascaderChange="cascaderChange" @search="searchField" />
                <div class="tools_btns">
@@ -851,7 +885,7 @@ onMounted(() => {
                  </div>
                </div>
              </div>
-              <div class="table_panel_wrap panel">
+              <div class="table_panel_wrap panel" :style="{ height: 'calc(100% - ' + toolH + 'px)' }">
                <div class="table_panel" v-loading="fieldTableInfo.loading">
                  <el-table ref="costTableRef" :data="fieldTableInfo.data" border :height="'100%'"
                    style="width: 100%; display: inline-block" :style="{ 'max-height': 'calc(100% - 44px)' }"
@@ -884,7 +918,8 @@ onMounted(() => {
                        <el-cascader v-else-if="item.type == 'cascader' && scope.row['STATE'] === 'Running'"
                          ref="cascaderRef" v-model="scope.row[item.field]" :options="item.options" :props="item.props"
                          :show-all-levels="item.showAllLevels ?? true" :disabled="item.disabled ?? false"
-                          :clearable="item.clearable ?? true" size="small" />
+                          :clearable="item.clearable ?? true" size="small"
+                          @change="val => cascaderChange(val, scope)" />
                        <span v-else>
                          {{ item.getName ? item.getName(scope) : scope.row[item.field] !== 0 && !scope.row[item.field]
                            ?
@@ -915,7 +950,7 @@ onMounted(() => {
        </div>
      </div>
    </div>
-    <Dialog ref="dialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" />
+    <Dialog ref="dialogRef" :dialogInfo="dialogInfo" @cascaderChange="cascaderChange" @btnClick="dialogBtnClick" />
  </div>
 </template>
@@ -986,6 +1021,9 @@ onMounted(() => {
      .template_panel {
        padding: 0 16px;
+        height: 40px;
+        overflow: hidden;
+        transition: height .3s;
        .panel_title {
          display: flex;
@@ -1006,6 +1044,25 @@ onMounted(() => {
              margin-right: 12px;
            }
          }
+          .title_btn {
+            padding: 2px 4px;
+            cursor: pointer;
+            .el-icon {
+              margin-right: 4px;
+              transform: rotateX(180deg);
+              transition: transform .3s;
+              &.active {
+                transform: rotateX(0deg);
+              }
+            }
+            &:hover {
+              background: #f2f2f2;
+            }
+          }
        }
        .title_desc {
@@ -1047,10 +1104,15 @@ onMounted(() => {
            margin-left: 8px;
          }
        }
+        &.active {
+          height: 144px;
+        }
      }
      .panel_content {
        height: calc(100% - 145px);
+        flex: 1;
        .panel {
          height: calc(100% - 35px);
@@ -1104,6 +1166,9 @@ onMounted(() => {
        }
        :deep(.table_tool_wrap) {
+          height: auto;
+          min-height: unset;
          .table-tools {
            .tools_search {
              padding-top: 8px;
--- a/src/views/data_inventory/taskEdit.vue
View file @c89e416
+++ b/src/views/data_inventory/taskEdit.vue
View file @c89e416
@@ -32,7 +32,7 @@ const treeInfo = ref({
  filter: true,
  queryValue: "",
  loading: false,
-  queryPlaceholder: "请输入分类名称搜索",
+  queryPlaceholder: "请输入规则名称搜索",
  props: {
    label: "classifyName",
    value: "guid",
@@ -42,7 +42,8 @@ const treeInfo = ref({
  expandOnNodeClick: false,
  data: [],
 });
+const toolH = ref(82)
+const toolRef = ref();
 const expand1 = ref(true)
 const expand2 = ref(true)
@@ -322,7 +323,10 @@ const handleScroll = () => {
 // 点击分类列表
 const listClick = (row) => {
  templateInfo.value = row;
-  getClassifyTree()
+  getClassifyTree();
+  searchItemValue.value.classifyGuid = row.guid;
+  searchItemValue.value.detailGuid = '';
+  getTableData();
 };
 // 获取分类列表
@@ -340,12 +344,14 @@ const getPermissionList = (val, init = true) => {
        currpermissionList.value = JSON.parse(JSON.stringify(data))
        listPage.value.totalPages = res.data.totalPages
        if (data.length) {
+          let tempInfo = data[0];
          if (route.query.type == 'edit') {
-            templateInfo.value = data.filter(item => item.guid == taskDetail.value.classifyGuid)[0]
+            tempInfo = data.filter(item => item.guid == taskDetail.value.classifyGuid)[0]
-          } else {
-            templateInfo.value = data[0];
          }
-          getClassifyTree()
+          listClick(tempInfo);
+          nextTick(() => {
+            toolH.value = toolRef.value.offsetHeight
+          })
        }
      } else {
        permissionList.value.push(...JSON.parse(JSON.stringify(data)))
@@ -370,7 +376,6 @@ const getClassifyTree = () => {
      const data = res.data || [];
      treeInfo.value.data = data;
      treeInfoRef.value.setCurrentKey('');
-      tableInfo.value.data = [];
    }
  }).catch(() => {
    treeInfo.value.loading = false;
@@ -395,16 +400,22 @@ onBeforeMount(() => {
  }
 })
+onMounted(() => {
+  window.addEventListener('resize', function () {
+    toolH.value = toolRef.value.offsetHeight
+  })
+})
 </script>
 <template>
  <div class="container_wrap full flex">
    <div class="aside_wrap" v-show="step == 0">
      <div class="aside_title">选择分类</div>
-      <div class="aside_search">
+      <!-- <div class="aside_search">
        <el-input v-model.trim="asideSearchInput" placeholder="请输入关键字" :prefix-icon="Search" clearable
          @change="querySearch" />
-      </div>
+      </div> -->
      <div class="aside_list" v-loading="listLoading" v-infinite-scroll="handleScroll">
        <div class="list_item" v-for="(item, i) in currpermissionList" :class="{ active: selectIndex == i }"
          @click="selectIndex = i; listClick(item);" v-preReClick>{{ item.name }}</div>
@@ -412,7 +423,7 @@ onBeforeMount(() => {
    </div>
    <div class="main_wrap" :class="{ full: step == 1 }">
      <div class="content_main" v-show="step == 0">
-        <div class="template_panel">
+        <div class="template_panel" ref="toolRef">
          <div class="title_item">
            <span class="title_label">分类标准：</span>
            <span class="title_text">{{ templateInfo.name || '--' }}</span>
@@ -426,7 +437,7 @@ onBeforeMount(() => {
            <span class="title_text">{{ templateInfo.description || '--' }}</span>
          </div>
        </div>
-        <div class="panel_content">
+        <div class="panel_content" :style="{ height: 'calc(100% - ' + toolH + 'px)' }">
          <div class="box_left">
            <Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
          </div>
@@ -445,8 +456,8 @@ onBeforeMount(() => {
              col="col3" />
          </div>
        </ContentWrap>
-        <ContentWrap id="id-approveInfo" title="选择元数据" expandSwicth style="margin-top: 15px" :isExpand="expand2"
+        <ContentWrap id="id-approveInfo" :class="{ full: expand2 }" title="选择元数据" expandSwicth style="margin-top: 15px"
-          @expand="(v) => expand2 = v">
+          :isExpand="expand2" @expand="(v) => expand2 = v">
          <div class="table_panel_wrap full">
            <Table ref="metadataTableRef" :tableInfo="metadataTableInfo" @tableSelectionChange="tableSelectionChange" />
          </div>
@@ -476,6 +487,10 @@ onBeforeMount(() => {
      display: inline-block;
    }
+    .aside_list {
+      height: calc(100% - 36px);
+    }
    .icon-add.el-icon {
      width: 24px;
      height: 24px;
@@ -522,7 +537,6 @@ onBeforeMount(() => {
      flex-direction: column;
      height: calc(100% - 45px);
      overflow: hidden auto;
-      flex: 1;
      &.panel {
        padding: 0 16px;
@@ -571,7 +585,7 @@ onBeforeMount(() => {
        border-top: 1px solid #d9d9d9;
        .box_left {
-          width: 240px;
+          width: 200px;
          height: 100%;
          border-right: 1px solid #d9d9d9;
@@ -590,7 +604,7 @@ onBeforeMount(() => {
        }
        .box_right {
-          width: calc(100% - 240px);
+          width: calc(100% - 200px);
          padding-top: 8px;
          .el-breadcrumb {
@@ -601,7 +615,21 @@ onBeforeMount(() => {
      }
      :deep(#id-approveInfo) {
-        height: calc(100% - 192px);
+        height: auto;
+        transition: height 0.3s;
+        .el-card__body {
+          height: 0 !important;
+          transition: none;
+          .card-body-content {
+            height: 100%;
+          }
+        }
+        &.full {
+          flex: 1;
+          margin-bottom: 16px;
          .el-card__body {
            height: calc(100% - 50px) !important;
@@ -612,6 +640,9 @@ onBeforeMount(() => {
          }
        }
+      }
      .table_panel_wrap {
        width: 100%;
        height: 100%;