feat: 联表数据集新建，关联关系联动 --story=120608092

TencentBlueKing · Jan 16, 2025 · fb7f2c2 · fb7f2c2
1 parent d4a3200
commit fb7f2c2
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 31 deletions.
diff --git a/.../views/link-data-manage/link-data-create/components/components/scheme-input/event-log.vue b/.../views/link-data-manage/link-data-create/components/components/scheme-input/event-log.vue
@@ -24,6 +24,8 @@
       <span>
         <bk-select
           v-model="modelValue.system_ids"
+          collapse-tags
+          :disabled="isDisabled"
           filterable
           :loading="isSystemListLoading"
           multiple
@@ -53,6 +55,7 @@
 
 <script setup lang='ts'>
   import {
+    computed,
     onMounted,
     ref,
   } from 'vue';
@@ -68,12 +71,33 @@
 
   type ModelValue = LinkDataDetailModel['config']['links'][0]['left_table'] | LinkDataDetailModel['config']['links'][0]['right_table']
 
+  interface Props {
+    links: LinkDataDetailModel['config']['links']
+  }
+
+  const props = defineProps<Props>();
   const modelValue = defineModel<ModelValue>({
     required: true,
   });
   const { t } = useI18n();
   const statusSystems = ref<Array<Record<string, any>>>([]);
 
+  const firstSystemIds = computed(() => {
+    if (props.links.length > 1) {
+      const leftSystemIds = props.links[0].left_table.system_ids;
+      const rightSystemIds = props.links[0].right_table.system_ids;
+      if (leftSystemIds && leftSystemIds.length) {
+        return leftSystemIds;
+      } if (rightSystemIds && rightSystemIds.length) {
+        return rightSystemIds;
+      }
+      return [];
+    }
+    return [];
+  });
+
+  const isDisabled = computed(() => firstSystemIds.value.length > 0);
+
   // 获取rt_id
   const {
     data: tableData,
@@ -116,6 +140,9 @@
         name: item.name,
         status: result[item.id].status,
       }));
+      if (isDisabled.value) {
+        modelValue.value.system_ids = firstSystemIds.value;
+      }
       statusSystems.value.sort((a, b) => {
         if (a.status !== 'unset') return -1;
         if (b.status !== 'unset') return 1;

diff --git a/.../src/views/link-data-manage/link-data-create/components/components/scheme-input/other.vue b/.../src/views/link-data-manage/link-data-create/components/components/scheme-input/other.vue
@@ -15,33 +15,33 @@
   to the current version of the project delivered to anyone in the future.
 -->
 <template>
-  <div class="strategy-customize-eventlog-wrap">
+  <div
+    v-if="Array.isArray(modelValue.rt_id)"
+    class="strategy-customize-eventlog-wrap">
     <bk-form-item
       class="no-label"
       label-width="0"
       property="configs.data_source.data_sheet_id"
       style="margin-bottom: 8px;">
-      <span>
-        <bk-select
-          v-model="modelValue.rt_id"
-          filterable
-          :loading="loading"
-          :no-match-text="t('无匹配数据')"
-          :placeholder="t('请选择')">
-          <bk-option
-            v-for="(dataSheet, dataSheetIndex) in tableData"
-            :key="dataSheetIndex"
-            :label="dataSheet.label"
-            :value="dataSheet.value" />
-        </bk-select>
-      </span>
+      <bk-cascader
+        v-slot="{node}"
+        v-model="modelValue.rt_id"
+        filterable
+        id-key="value"
+        :list="filterTableData"
+        :loading="loading"
+        name-key="label"
+        trigger="hover">
+        <p>
+          {{ node.name }}
+        </p>
+      </bk-cascader>
     </bk-form-item>
   </div>
 </template>
 
 <script setup lang='ts'>
-  import { onMounted } from 'vue';
-  import { useI18n } from 'vue-i18n';
+  import { computed, inject, onMounted, type Ref, ref } from 'vue';
 
   import StrategyManageService from '@service/strategy-manage';
 
@@ -51,10 +51,45 @@
 
   type ModelValue = LinkDataDetailModel['config']['links'][0]['left_table'] | LinkDataDetailModel['config']['links'][0]['right_table']
 
+  interface Props {
+    links: LinkDataDetailModel['config']['links']
+  }
+
+  const props = defineProps<Props>();
   const modelValue = defineModel<ModelValue>({
     required: true,
   });
-  const { t } = useI18n();
+  const isEditMode = inject<Ref<boolean>>('isEditMode', ref(false));
+
+  // 不能选择已选的资源数据
+  const filterTableData = computed(() => {
+    const disabledValues = new Set();
+
+    // 遍历 link 数据，找出需要禁用的 children.value
+    props.links.forEach((link) => {
+      const leftTable = link.left_table;
+      const rightTable = link.right_table;
+
+      if (Array.isArray(leftTable.rt_id)) {
+        const lastRtId = leftTable.rt_id[leftTable.rt_id.length - 1];
+        disabledValues.add(lastRtId);
+      }
+
+      if (Array.isArray(rightTable.rt_id)) {
+        const lastRtId = rightTable.rt_id[rightTable.rt_id.length - 1];
+        disabledValues.add(lastRtId);
+      }
+    });
+
+    return tableData.value.map(item => ({
+      ...item,
+      disabled: !(item.children && item.children.length),
+      children: item.children.map(child => ({
+        ...child,
+        disabled: disabledValues.has(child.value),
+      })),
+    }));
+  });
 
   // 获取rt_id
   const {
@@ -63,6 +98,30 @@
     loading,
   } = useRequest(StrategyManageService.fetchTable, {
     defaultValue: [],
+    onSuccess: (data) => {
+      if (!modelValue.value.rt_id) {
+        modelValue.value.rt_id = [];
+      }
+      if (data) {
+        data.sort((a, b) => {
+          if (a.children && a.children.length) return -1;
+          if (b.children && b.children.length) return 1;
+          return 0;
+        });
+      }
+      if (isEditMode.value) {
+        // 对tableid转换
+        data.forEach((item) => {
+          if (item.children && item.children.length) {
+            item.children.forEach((cItem) => {
+              if (cItem.value === modelValue.value.rt_id) {
+                modelValue.value.rt_id = [item.value, modelValue.value.rt_id];
+              }
+            });
+          }
+        });
+      }
+    },
   });
 
   onMounted(() => {

diff --git a/...ws/link-data-manage/link-data-create/components/components/scheme-input/resource-data.vue b/...ws/link-data-manage/link-data-create/components/components/scheme-input/resource-data.vue
@@ -67,17 +67,48 @@
 
   type ModelValue = LinkDataDetailModel['config']['links'][0]['left_table'] | LinkDataDetailModel['config']['links'][0]['right_table']
 
+  interface Props {
+    links: LinkDataDetailModel['config']['links']
+  }
+
+  const props = defineProps<Props>();
+
   const modelValue = defineModel<ModelValue>({
     required: true,
   });
   const { t } = useI18n();
   const isEditMode = inject<Ref<boolean>>('isEditMode', ref(false));
 
-  const filterTableData = computed(() => tableData.value.map(item => ({
-    ...item,
-    leaf: true,
-    disabled: !(item.children && item.children.length),
-  })));
+  // 不能选择已选的资源数据
+  const filterTableData = computed(() => {
+    const disabledValues = new Set();
+
+    // 遍历 link 数据，找出需要禁用的 children.value
+    props.links.forEach((link) => {
+      const leftTable = link.left_table;
+      const rightTable = link.right_table;
+
+      if (Array.isArray(leftTable.rt_id)) {
+        const lastRtId = leftTable.rt_id[leftTable.rt_id.length - 1];
+        disabledValues.add(lastRtId);
+      }
+
+      if (Array.isArray(rightTable.rt_id)) {
+        const lastRtId = rightTable.rt_id[rightTable.rt_id.length - 1];
+        disabledValues.add(lastRtId);
+      }
+    });
+
+    return tableData.value.map(item => ({
+      ...item,
+      leaf: true,
+      disabled: !(item.children && item.children.length),
+      children: item.children.map(child => ({
+        ...child,
+        disabled: disabledValues.has(child.value),
+      })),
+    }));
+  });
 
   // 获取rt_id
   const {

diff --git a/src/frontend/src/views/link-data-manage/link-data-create/components/links.vue b/src/frontend/src/views/link-data-manage/link-data-create/components/links.vue
@@ -65,6 +65,7 @@
               :is="configTypeMap[link.left_table.table_type]"
               ref="tableTypeRef"
               v-model="link.left_table"
+              :links="links"
               style="flex: 1;" />
           </select-verify>
         </div>
@@ -116,6 +117,7 @@
               :is="configTypeMap[link.right_table.table_type]"
               ref="tableTypeRef"
               v-model="link.right_table"
+              :links="links"
               style="flex: 1;" />
           </select-verify>
         </div>
@@ -174,14 +176,6 @@
   });
   const linkTableTableTypeList = ref<Array<Record<string, any>>>([]);
 
-  // 第二个关联开始，左表只能使用第一个关联选中的表
-  const leftTableTypeList = computed(() => linkTableTableTypeList.value.filter((item) => {
-    const firstLink = links.value[0];
-    if (item.value === firstLink.left_table.table_type || item.value === firstLink.right_table.table_type) {
-      return item;
-    }
-  }));
-
   // 第一个关联右表，如果左表选了EventLog，右表不能再选
   const firstRightTableTypeList = computed(() => {
     const firsLeftTableType = links.value[0].left_table.table_type;
@@ -191,6 +185,14 @@
     return linkTableTableTypeList.value;
   });
 
+  // 第二个关联开始，左表只能使用第一个关联选中的表
+  const leftTableTypeList = computed(() => linkTableTableTypeList.value.filter((item) => {
+    const firstLink = links.value[0];
+    if (item.value === firstLink.left_table.table_type || item.value === firstLink.right_table.table_type) {
+      return item;
+    }
+  }));
+
   const handleSelectLeftTableType = (index: number) => {
     // 如果重选了主表，全部重置
     if (index === 0) {