Merge pull request #528 from veops/feat/dev_ui_240604

feat(ui): update model relation

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -196,6 +196,7 @@ const cmdb_en = {
         attributeAssociationTip3: 'Two Attributes must be selected',
         attributeAssociationTip4: 'Please select a attribute from Source CIType',
         attributeAssociationTip5: 'Please select a attribute from Target CIType',
+        attributeAssociationTip6: 'Cannot be deleted again.',
         show: 'show attribute',
         setAsShow: 'Set as show attribute',
         cancelSetAsShow: 'Cancel show attribute',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -196,6 +196,7 @@ const cmdb_zh = {
         attributeAssociationTip3: '属性关联必须选择两个属性',
         attributeAssociationTip4: '请选择原模型属性',
         attributeAssociationTip5: '请选择目标模型属性',
+        attributeAssociationTip6: '不可再删除',
         show: '展示属性',
         setAsShow: '设置为展示属性',
         cancelSetAsShow: '取消设置为展示属性',

cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ padding: '0 20px 20px' }">
+  <div class="relation-table" :style="{ padding: '0 20px 20px' }">
     <a-button
       v-if="!isInGrantComp"
       style="margin-bottom: 10px"
@@ -18,6 +18,7 @@
       highlight-hover-row
       keep-source
       class="ops-stripe-table"
+      min-height="500"
       :row-class-name="rowClass"
       :edit-config="{ trigger: 'dblclick', mode: 'cell', showIcon: false }"
       resizable
@@ -43,7 +44,7 @@
           <span v-else>{{ constraintMap[row.constraint] }}</span>
         </template>
       </vxe-column>
-      <vxe-column :width="250" field="attributeAssociation" :edit-render="{}">
+      <vxe-column :width="300" field="attributeAssociation" :edit-render="{}">
         <template #header>
           <span>
             <a-tooltip :title="$t('cmdb.ciType.attributeAssociationTip1')">
@@ -56,43 +57,73 @@
           </span>
         </template>
         <template #default="{row}">
-          <span
+          <template
-            v-if="row.parent_attr_id && row.child_attr_id"
+            v-for="item in row.parentAndChildAttrList"
-          >{{ getAttrNameById(row.isParent ? row.attributes : attributes, row.parent_attr_id) }}=>
-            {{ getAttrNameById(row.isParent ? attributes : row.attributes, row.child_attr_id) }}</span
           >
+            <div
+              :key="item.id"
+              v-if="item.parentAttrId && item.childAttrId"
+            >
+              {{ getAttrNameById(row.isParent ? row.attributes : attributes, item.parentAttrId) }}=>
+              {{ getAttrNameById(row.isParent ? attributes : row.attributes, item.childAttrId) }}
+            </div>
+          </template>
         </template>
         <template #edit="{ row }">
-          <div style="display:inline-flex;align-items:center;">
+          <div
+            v-for="item in tableAttrList"
+            :key="item.id"
+            class="table-attribute-row"
+          >
             <a-select
               allowClear
               size="small"
-              v-model="parent_attr_id"
+              v-model="item.parentAttrId"
               :getPopupContainer="(trigger) => trigger.parentNode"
               :style="{ width: '100px' }"
+              show-search
+              optionFilterProp="title"
             >
-              <a-select-option
+            <a-select-option
                 v-for="attr in filterAttributes(row.isParent ? row.attributes : attributes)"
                 :key="attr.id"
+                :value="attr.id"
+                :title="attr.alias || attr.name"
               >
                 {{ attr.alias || attr.name }}
               </a-select-option>
             </a-select>
-            =>
+            <span class="table-attribute-row-link">=></span>
             <a-select
               allowClear
               size="small"
-              v-model="child_attr_id"
+              v-model="item.childAttrId"
               :getPopupContainer="(trigger) => trigger.parentNode"
               :style="{ width: '100px' }"
+              show-search
+              optionFilterProp="title"
             >
               <a-select-option
                 v-for="attr in filterAttributes(row.isParent ? attributes : row.attributes)"
                 :key="attr.id"
+                :value="attr.id"
+                :title="attr.alias || attr.name"
               >
                 {{ attr.alias || attr.name }}
               </a-select-option>
             </a-select>
+            <a
+              class="table-attribute-row-action"
+              @click="removeTableAttr(item.id)"
+            >
+              <a-icon type="minus-circle" />
+            </a>
+            <a
+              class="table-attribute-row-action"
+              @click="addTableAttr"
+            >
+              <a-icon type="plus-circle" />
+            </a>
           </div>
         </template>
       </vxe-column>
@@ -179,13 +210,16 @@
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('cmdb.ciType.attributeAssociation')">
-          <a-row>
+          <a-row
-            <a-col :span="11">
+            v-for="item in modalAttrList"
+            :key="item.id"
+          >
+            <a-col :span="10">
               <a-form-item>
                 <a-select
                   :placeholder="$t('cmdb.ciType.attributeAssociationTip4')"
                   allowClear
-                  v-decorator="['parent_attr_id', { rules: [{ required: false }] }]"
+                  v-model="item.parentAttrId"
                 >
                   <a-select-option v-for="attr in filterAttributes(attributes)" :key="attr.id">
                     {{ attr.alias || attr.name }}
@@ -196,12 +230,12 @@
             <a-col :span="2" :style="{ textAlign: 'center' }">
               =>
             </a-col>
-            <a-col :span="11">
+            <a-col :span="9">
               <a-form-item>
                 <a-select
                   :placeholder="$t('cmdb.ciType.attributeAssociationTip5')"
                   allowClear
-                  v-decorator="['child_attr_id', { rules: [{ required: false }] }]"
+                  v-model="item.childAttrId"
                 >
                   <a-select-option v-for="attr in filterAttributes(modalChildAttributes)" :key="attr.id">
                     {{ attr.alias || attr.name }}
@@ -209,6 +243,20 @@
                 </a-select>
               </a-form-item>
             </a-col>
+            <a-col :span="3">
+              <a
+                class="modal-attribute-action"
+                @click="removeModalAttr(item.id)"
+              >
+                <a-icon type="minus-circle" />
+              </a>
+              <a
+                class="modal-attribute-action"
+                @click="addModalAttr"
+              >
+                <a-icon type="plus-circle" />
+              </a>
+            </a-col>
           </a-row>
         </a-form-item>
       </a-form>
@@ -227,6 +275,7 @@ import {
 } from '@/modules/cmdb/api/CITypeRelation'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
 import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { v4 as uuidv4 } from 'uuid'
 
 import CMDBGrant from '../../components/cmdbGrant'
 
@@ -259,8 +308,8 @@ export default {
       tableData: [],
       parentTableData: [],
       attributes: [],
-      parent_attr_id: undefined,
+      tableAttrList: [],
-      child_attr_id: undefined,
+      modalAttrList: [],
       modalChildAttributes: [],
     }
   },
@@ -297,8 +346,11 @@ export default {
     async getCITypeParent() {
       await getCITypeParent(this.CITypeId).then((res) => {
         this.parentTableData = res.parents.map((item) => {
+          const parentAndChildAttrList = this.handleAttrList(item)
+
           return {
             ...item,
+            parentAndChildAttrList,
             source_ci_type_name: this.CITypeName,
             source_ci_type_id: this.CITypeId,
             isParent: true,
@@ -309,8 +361,11 @@ export default {
     getCITypeChildren() {
       getCITypeChildren(this.CITypeId).then((res) => {
         const data = res.children.map((obj) => {
+          const parentAndChildAttrList = this.handleAttrList(obj)
+
           return {
             ...obj,
+            parentAndChildAttrList,
             source_ci_type_name: this.CITypeName,
             source_ci_type_id: this.CITypeId,
           }
@@ -322,6 +377,20 @@ export default {
         }
       })
     },
+
+    handleAttrList(data) {
+      const length = Math.min(data?.parent_attr_ids?.length || 0, data.child_attr_ids?.length || 0)
+      const parentAndChildAttrList = []
+      for (let i = 0; i < length; i++) {
+        parentAndChildAttrList.push({
+          id: uuidv4(),
+          parentAttrId: data?.parent_attr_ids?.[i] ?? '',
+          childAttrId: data?.child_attr_ids?.[i] ?? ''
+        })
+      }
+      return parentAndChildAttrList
+    },
+
     getCITypes() {
       getCITypes().then((res) => {
         this.CITypes = res.ci_types
@@ -342,6 +411,13 @@ export default {
     handleCreate() {
       this.drawerTitle = this.$t('cmdb.ciType.addRelation')
       this.visible = true
+      this.$set(this, 'modalAttrList', [
+        {
+          id: uuidv4(),
+          parentAttrId: undefined,
+          childAttrId: undefined
+        }
+      ])
       this.$nextTick(() => {
         this.form.setFieldsValue({
           source_ci_type_id: this.CITypeId,
@@ -365,19 +441,22 @@ export default {
             ci_type_id,
             relation_type_id,
             constraint,
-            parent_attr_id = undefined,
-            child_attr_id = undefined,
           } = values
 
-          if ((!parent_attr_id && child_attr_id) || (parent_attr_id && !child_attr_id)) {
+          const {
-            this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+            parent_attr_ids,
+            child_attr_ids,
+            validate
+          } = this.handleValidateAttrList(this.modalAttrList)
+          if (!validate) {
             return
           }
+
           createRelation(source_ci_type_id, ci_type_id, {
             relation_type_id,
             constraint,
-            parent_attr_id,
+            parent_attr_ids,
-            child_attr_id,
+            child_attr_ids,
           }).then((res) => {
             this.$message.success(this.$t('addSuccess'))
             this.onClose()
@@ -386,6 +465,37 @@ export default {
         }
       })
     },
+
+    /**
+     * 校验属性列表
+     * @param {*} attrList
+     */
+     handleValidateAttrList(attrList) {
+      const parent_attr_ids = []
+      const child_attr_ids = []
+      attrList.map((attr) => {
+        if (attr.parentAttrId) {
+          parent_attr_ids.push(attr.parentAttrId)
+        }
+        if (attr.childAttrId) {
+          child_attr_ids.push(attr.childAttrId)
+        }
+      })
+
+      if (parent_attr_ids.length !== child_attr_ids.length) {
+        this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+        return {
+          validate: false
+        }
+      }
+
+      return {
+        validate: true,
+        parent_attr_ids,
+        child_attr_ids
+      }
+    },
+
     handleOpenGrant(record) {
       this.$refs.cmdbGrant.open({
         name: `${record.source_ci_type_name} -> ${record.name}`,
@@ -401,23 +511,45 @@ export default {
       if (row.isParent) return 'relation-table-parent'
     },
     handleEditActived({ row }) {
-      this.parent_attr_id = row?.parent_attr_id ?? undefined
+      const tableAttrList = []
-      this.child_attr_id = row?.child_attr_id ?? undefined
+
+      const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
+      if (length) {
+        for (let i = 0; i < length; i++) {
+          tableAttrList.push({
+            id: uuidv4(),
+            parentAttrId: row?.parent_attr_ids?.[i] ?? undefined,
+            childAttrId: row?.child_attr_ids?.[i] ?? undefined
+          })
+        }
+      } else {
+        tableAttrList.push({
+          id: uuidv4(),
+          parentAttrId: undefined,
+          childAttrId: undefined
+        })
+      }
+      this.$set(this, 'tableAttrList', tableAttrList)
     },
     async handleEditClose({ row }) {
       const { source_ci_type_id: parentId, id: childrenId, constraint, relation_type } = row
-      const { parent_attr_id, child_attr_id } = this
       const _find = this.relationTypes.find((item) => item.name === relation_type)
       const relation_type_id = _find?.id
-      if ((!parent_attr_id && child_attr_id) || (parent_attr_id && !child_attr_id)) {
+      
-        this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+      const {
+        parent_attr_ids,
+        child_attr_ids,
+        validate
+      } = this.handleValidateAttrList(this.tableAttrList)
+      if (!validate) {
         return
       }
+
       await createRelation(row.isParent ? childrenId : parentId, row.isParent ? parentId : childrenId, {
         relation_type_id,
         constraint,
-        parent_attr_id,
+        parent_attr_ids,
-        child_attr_id,
+        child_attr_ids,
       }).finally(() => {
         this.getData()
       })
@@ -427,7 +559,9 @@ export default {
       return _find?.alias ?? _find?.name ?? id
     },
     changeChild(value) {
-      this.form.setFieldsValue({ child_attr_id: undefined })
+      this.modalAttrList.forEach((item) => {
+        item.childAttrId = undefined
+      })
       getCITypeAttributesById(value).then((res) => {
         this.modalChildAttributes = res?.attributes ?? []
       })
@@ -436,10 +570,75 @@ export default {
       // filter password/json/is_list
       return attributes.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
     },
+    addTableAttr() {
+      this.tableAttrList.push({
+        id: uuidv4(),
+        parentAttrId: undefined,
+        childAttrId: undefined
+      })
+    },
+    removeTableAttr(id) {
+      if (this.tableAttrList.length <= 1) {
+        this.$message.error(this.$t('cmdb.ciType.attributeAssociationTip6'))
+        return
+      }
+      const index = this.tableAttrList.findIndex((item) => item.id === id)
+      if (index !== -1) {
+        this.tableAttrList.splice(index, 1)
+      }
+    },
+
+    addModalAttr() {
+      this.modalAttrList.push({
+        id: uuidv4(),
+        parentAttrId: undefined,
+        childAttrId: undefined
+      })
+    },
+
+    removeModalAttr(id) {
+      if (this.modalAttrList.length <= 1) {
+        this.$message.error(this.$t('cmdb.ciType.attributeAssociationTip6'))
+        return
+      }
+      const index = this.modalAttrList.findIndex((item) => item.id === id)
+      if (index !== -1) {
+        this.modalAttrList.splice(index, 1)
+      }
+    }
   },
 }
 </script>
 
+<style lang="less" scoped>
+.relation-table {
+  /deep/ .vxe-cell {
+    max-height: max-content !important;
+  }
+}
+.table-attribute-row {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 5px;
+
+  &:last-child {
+    margin-bottom: 5px;
+  }
+
+  &-link {
+    margin: 0 5px;
+  }
+
+  &-action {
+    margin-left: 5px;
+  }
+}
+
+.modal-attribute-action {
+  margin-left: 5px;
+}
+</style>
+
 <style lang="less">
 .ops-stripe-table .vxe-body--row.row--stripe.relation-table-divider {
   background-color: #b1b8d3 !important;

cmdb-ui/src/modules/cmdb/views/model_relation/index.vue

@@ -70,13 +70,16 @@
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('cmdb.ciType.attributeAssociation')">
-          <a-row>
+          <a-row
-            <a-col :span="11">
+            v-for="item in modalAttrList"
+            :key="item.id"
+          >
+            <a-col :span="10">
               <a-form-item>
                 <a-select
                   :placeholder="$t('cmdb.ciType.attributeAssociationTip4')"
                   allowClear
-                  v-decorator="['parent_attr_id', { rules: [{ required: false }] }]"
+                  v-model="item.parentAttrId"
                 >
                   <a-select-option v-for="attr in filterAttributes(modalParentAttributes)" :key="attr.id">
                     {{ attr.alias || attr.name }}
@@ -87,12 +90,12 @@
             <a-col :span="2" :style="{ textAlign: 'center' }">
               =>
             </a-col>
-            <a-col :span="11">
+            <a-col :span="9">
               <a-form-item>
                 <a-select
                   :placeholder="$t('cmdb.ciType.attributeAssociationTip5')"
                   allowClear
-                  v-decorator="['child_attr_id', { rules: [{ required: false }] }]"
+                  v-model="item.childAttrId"
                 >
                   <a-select-option v-for="attr in filterAttributes(modalChildAttributes)" :key="attr.id">
                     {{ attr.alias || attr.name }}
@@ -100,6 +103,20 @@
                 </a-select>
               </a-form-item>
             </a-col>
+            <a-col :span="3">
+              <a
+                class="modal-attribute-action"
+                @click="removeModalAttr(item.id)"
+              >
+                <a-icon type="minus-circle" />
+              </a>
+              <a
+                class="modal-attribute-action"
+                @click="addModalAttr"
+              >
+                <a-icon type="plus-circle" />
+              </a>
+            </a-col>
           </a-row>
         </a-form-item>
       </a-form>
@@ -114,6 +131,7 @@ import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
 import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
 import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { v4 as uuidv4 } from 'uuid'
 
 export default {
   name: 'Index',
@@ -139,6 +157,7 @@ export default {
 
       modalParentAttributes: [],
       modalChildAttributes: [],
+      modalAttrList: [],
     }
   },
   computed: {
@@ -228,6 +247,13 @@ export default {
     handleCreate() {
       this.drawerTitle = this.$t('cmdb.ciType.addRelation')
       this.visible = true
+      this.$set(this, 'modalAttrList', [
+        {
+          id: uuidv4(),
+          parentAttrId: undefined,
+          childAttrId: undefined
+        }
+      ])
       this.$nextTick(() => {
         this.form.setFieldsValue({
           source_ci_type_id: this.sourceCITypeId,
@@ -249,19 +275,22 @@ export default {
             ci_type_id,
             relation_type_id,
             constraint,
-            parent_attr_id = undefined,
-            child_attr_id = undefined,
           } = values
 
-          if ((!parent_attr_id && child_attr_id) || (parent_attr_id && !child_attr_id)) {
+          const {
-            this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+            parent_attr_ids,
+            child_attr_ids,
+            validate
+          } = this.handleValidateAttrList(this.modalAttrList)
+          if (!validate) {
             return
           }
+
           createRelation(source_ci_type_id, ci_type_id, {
             relation_type_id,
             constraint,
-            parent_attr_id,
+            parent_attr_ids,
-            child_attr_id,
+            child_attr_ids,
           }).then((res) => {
             this.$message.success(this.$t('addSuccess'))
             this.onClose()
@@ -272,6 +301,37 @@ export default {
       this.sourceCITypeId = undefined
       this.targetCITypeId = undefined
     },
+
+    /**
+     * 校验属性列表
+     * @param {*} attrList
+     */
+     handleValidateAttrList(attrList) {
+      const parent_attr_ids = []
+      const child_attr_ids = []
+      attrList.map((attr) => {
+        if (attr.parentAttrId) {
+          parent_attr_ids.push(attr.parentAttrId)
+        }
+        if (attr.childAttrId) {
+          child_attr_ids.push(attr.childAttrId)
+        }
+      })
+
+      if (parent_attr_ids.length !== child_attr_ids.length) {
+        this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+        return {
+          validate: false
+        }
+      }
+
+      return {
+        validate: true,
+        parent_attr_ids,
+        child_attr_ids
+      }
+    },
+
     handleOk() {
       this.$refs.table.refresh()
     },
@@ -284,14 +344,18 @@ export default {
     },
     handleSourceTypeChange(value) {
       this.sourceCITypeId = value
-      this.form.setFieldsValue({ parent_attr_id: undefined })
+      this.modalAttrList.forEach((item) => {
+        item.parentAttrId = undefined
+      })
       getCITypeAttributesById(value).then((res) => {
         this.modalParentAttributes = res?.attributes ?? []
       })
     },
     handleTargetTypeChange(value) {
       this.targetCITypeId = value
-      this.form.setFieldsValue({ child_attr_id: undefined })
+      this.modalAttrList.forEach((item) => {
+        item.childAttrId = undefined
+      })
       getCITypeAttributesById(value).then((res) => {
         this.modalChildAttributes = res?.attributes ?? []
       })
@@ -303,12 +367,30 @@ export default {
       // filter password/json/is_list
       return attributes.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
     },
+
+    addModalAttr() {
+      this.modalAttrList.push({
+        id: uuidv4(),
+        parentAttrId: undefined,
+        childAttrId: undefined
+      })
+    },
+
+    removeModalAttr(id) {
+      if (this.modalAttrList.length <= 1) {
+        this.$message.error(this.$t('cmdb.ciType.attributeAssociationTip6'))
+        return
+      }
+      const index = this.modalAttrList.findIndex((item) => item.id === id)
+      if (index !== -1) {
+        this.modalAttrList.splice(index, 1)
+      }
+    }
   },
 }
 </script>
 
 <style lang="less" scoped>
-
 .model-relation {
   background-color: #fff;
   border-radius: @border-radius-box;
@@ -316,4 +398,8 @@ export default {
   height: calc(100vh - 64px);
   margin-bottom: -24px;
 }
+
+.modal-attribute-action {
+  margin-left: 5px;
+}
 </style>

cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="model-relation-table">
     <vxe-table
       ref="xTable"
       stripe
@@ -7,6 +7,7 @@
       show-header-overflow
       show-overflow
       resizable
+      :scroll-y="{enabled: false}"
       :height="`${windowHeight - 160}px`"
       :data="tableData"
       :sort-config="{ defaultSort: { field: 'created_at', order: 'desc' } }"
@@ -34,7 +35,7 @@
           {{ handleConstraint(row.constraint) }}
         </template>
       </vxe-column>
-      <vxe-column :width="250" field="attributeAssociation" :edit-render="{}">
+      <vxe-column :width="300" field="attributeAssociation" :edit-render="{}">
         <template #header>
           <span>
             <a-tooltip :title="$t('cmdb.ciType.attributeAssociationTip1')">
@@ -47,37 +48,73 @@
           </span>
         </template>
         <template #default="{row}">
-          <span
+          <template
-            v-if="row.parent_attr_id && row.child_attr_id"
+            v-for="item in row.parentAndChildAttrList"
-          >{{ getAttrNameById(type2attributes[row.parent_id], row.parent_attr_id) }}=>
-            {{ getAttrNameById(type2attributes[row.child_id], row.child_attr_id) }}</span
           >
+            <div
+              :key="item.id"
+              v-if="item.parentAttrId && item.childAttrId"
+            >
+              {{ getAttrNameById(type2attributes[row.parent_id], item.parentAttrId) }}=>
+              {{ getAttrNameById(type2attributes[row.child_id], item.childAttrId) }}
+            </div>
+          </template>
         </template>
         <template #edit="{ row }">
-          <div style="display:inline-flex;align-items:center;">
+          <div
+            v-for="item in tableAttrList"
+            :key="item.id"
+            class="table-attribute-row"
+          >
             <a-select
               allowClear
               size="small"
-              v-model="parent_attr_id"
+              v-model="item.parentAttrId"
               :getPopupContainer="(trigger) => trigger.parentNode"
               :style="{ width: '100px' }"
+              show-search
+              optionFilterProp="title"
             >
-              <a-select-option v-for="attr in filterAttributes(type2attributes[row.parent_id])" :key="attr.id">
+              <a-select-option
+                v-for="attr in filterAttributes(type2attributes[row.parent_id])"
+                :key="attr.id"
+                :value="attr.id"
+                :title="attr.alias || attr.name"
+              >
                 {{ attr.alias || attr.name }}
               </a-select-option>
             </a-select>
-            =>
+            <span class="table-attribute-row-link">=></span>
             <a-select
               allowClear
               size="small"
-              v-model="child_attr_id"
+              v-model="item.childAttrId"
               :getPopupContainer="(trigger) => trigger.parentNode"
               :style="{ width: '100px' }"
+              show-search
+              optionFilterProp="title"
             >
-              <a-select-option v-for="attr in filterAttributes(type2attributes[row.child_id])" :key="attr.id">
+              <a-select-option
+                v-for="attr in filterAttributes(type2attributes[row.child_id])"
+                :key="attr.id"
+                :value="attr.id"
+                :title="attr.alias || attr.name"
+              >
                 {{ attr.alias || attr.name }}
               </a-select-option>
             </a-select>
+            <a
+              class="table-attribute-row-action"
+              @click="removeTableAttr(item.id)"
+            >
+              <a-icon type="minus-circle" />
+            </a>
+            <a
+              class="table-attribute-row-action"
+              @click="addTableAttr"
+            >
+              <a-icon type="plus-circle" />
+            </a>
           </div>
         </template>
       </vxe-column>
@@ -97,6 +134,7 @@
 </template>
 
 <script>
+import { v4 as uuidv4 } from 'uuid'
 import { getCITypeRelations, deleteRelation, createRelation } from '@/modules/cmdb/api/CITypeRelation'
 import { getRelationTypes } from '@/modules/cmdb/api/relationType'
 import CMDBGrant from '../../../components/cmdbGrant'
@@ -108,8 +146,7 @@ export default {
       tableData: [],
       relationTypeList: null,
       type2attributes: {},
-      parent_attr_id: undefined,
+      tableAttrList: [],
-      child_attr_id: undefined,
     }
   },
   components: {
@@ -137,9 +174,29 @@ export default {
     },
     async getMainData() {
       const { relations, type2attributes } = await getCITypeRelations()
-      this.tableData = relations
+      this.tableData = relations.map((item) => {
+        const parentAndChildAttrList = this.handleAttrList(item)
+        return {
+          ...item,
+          parentAndChildAttrList
+        }
+      })
       this.type2attributes = type2attributes
     },
+
+    handleAttrList(data) {
+      const length = Math.min(data?.parent_attr_ids?.length || 0, data.child_attr_ids?.length || 0)
+      const parentAndChildAttrList = []
+      for (let i = 0; i < length; i++) {
+        parentAndChildAttrList.push({
+          id: uuidv4(),
+          parentAttrId: data?.parent_attr_ids?.[i] ?? '',
+          childAttrId: data?.child_attr_ids?.[i] ?? ''
+        })
+      }
+      return parentAndChildAttrList
+    },
+
     // 获取关系
     async getRelationTypes() {
       const res = await getRelationTypes()
@@ -171,21 +228,75 @@ export default {
       })
     },
     handleEditActived({ row }) {
-      this.parent_attr_id = row?.parent_attr_id ?? undefined
+      const tableAttrList = []
-      this.child_attr_id = row?.child_attr_id ?? undefined
+
+      const length = Math.min(row?.parent_attr_ids?.length || 0, row.child_attr_ids?.length || 0)
+      if (length) {
+        for (let i = 0; i < length; i++) {
+          tableAttrList.push({
+            id: uuidv4(),
+            parentAttrId: row?.parent_attr_ids?.[i] ?? undefined,
+            childAttrId: row?.child_attr_ids?.[i] ?? undefined
+          })
+        }
+      } else {
+        tableAttrList.push({
+          id: uuidv4(),
+          parentAttrId: undefined,
+          childAttrId: undefined
+        })
+      }
+      console.log('handleEditActived', tableAttrList)
+      this.$set(this, 'tableAttrList', tableAttrList)
     },
+
+    /**
+     * 校验属性列表
+     * @param {*} attrList
+     */
+     handleValidateAttrList(attrList) {
+      const parent_attr_ids = []
+      const child_attr_ids = []
+      attrList.map((attr) => {
+        if (attr.parentAttrId) {
+          parent_attr_ids.push(attr.parentAttrId)
+        }
+        if (attr.childAttrId) {
+          child_attr_ids.push(attr.childAttrId)
+        }
+      })
+
+      if (parent_attr_ids.length !== child_attr_ids.length) {
+        this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+        return {
+          validate: false
+        }
+      }
+
+      return {
+        validate: true,
+        parent_attr_ids,
+        child_attr_ids
+      }
+    },
+
     async handleEditClose({ row }) {
       const { parent_id, child_id, constraint, relation_type_id } = row
-      const { parent_attr_id = undefined, child_attr_id = undefined } = this
+
-      if ((!parent_attr_id && child_attr_id) || (parent_attr_id && !child_attr_id)) {
+      const {
-        this.$message.warning(this.$t('cmdb.ciType.attributeAssociationTip3'))
+        parent_attr_ids,
+        child_attr_ids,
+        validate
+      } = this.handleValidateAttrList(this.tableAttrList)
+      if (!validate) {
         return
       }
+
       await createRelation(parent_id, child_id, {
         relation_type_id,
         constraint,
-        parent_attr_id,
+        parent_attr_ids,
-        child_attr_id,
+        child_attr_ids,
       }).finally(() => {
         this.getMainData()
       })
@@ -198,8 +309,49 @@ export default {
       // filter password/json/is_list
       return attributes.filter((attr) => !attr.is_password && !attr.is_list && attr.value_type !== '6')
     },
+
+    addTableAttr() {
+      this.tableAttrList.push({
+        id: uuidv4(),
+        parentAttrId: undefined,
+        childAttrId: undefined
+      })
+    },
+    removeTableAttr(id) {
+      if (this.tableAttrList.length <= 1) {
+        this.$message.error(this.$t('cmdb.ciType.attributeAssociationTip6'))
+        return
+      }
+      const index = this.tableAttrList.findIndex((item) => item.id === id)
+      if (index !== -1) {
+        this.tableAttrList.splice(index, 1)
+      }
+    },
   },
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.relation-table {
+  /deep/ .vxe-cell {
+    max-height: max-content !important;
+  }
+}
+.table-attribute-row {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 5px;
+
+  &:last-child {
+    margin-bottom: 5px;
+  }
+
+  &-link {
+    margin: 0 5px;
+  }
+
+  &-action {
+    margin-left: 5px;
+  }
+}
+</style>