From 27affe02a8b7392be10d894fb5a7899a55f3a1b4 Mon Sep 17 00:00:00 2001
From: dagongren <53748875+wang-liang0615@users.noreply.github.com>
Date: Fri, 1 Mar 2024 13:39:20 +0800
Subject: [PATCH] feat(cmdb-ui):ci type inherit (#404)

---
 cmdb-ui/src/modules/cmdb/api/CIType.js        |  18 +++
 .../cmdbTypeSelect/cmdbTypeSelect.vue         | 148 ++++++++++++++++++
 .../cmdb/components/cmdbTypeSelect/index.js   |   2 +
 cmdb-ui/src/modules/cmdb/lang/en.js           |   7 +-
 cmdb-ui/src/modules/cmdb/lang/zh.js           |   7 +-
 cmdb-ui/src/modules/cmdb/utils/helper.js      |  12 +-
 .../modules/cmdb/views/ci/ciDetailPage.vue    |   2 +-
 .../cmdb/views/ci_types/attributeCard.vue     |  57 ++++---
 .../cmdb/views/ci_types/attributesTable.vue   |  70 +++++----
 .../src/modules/cmdb/views/ci_types/index.vue | 140 ++++++++++++++---
 .../views/ci_types/newCiTypeAttrModal.vue     |  14 +-
 11 files changed, 390 insertions(+), 87 deletions(-)
 create mode 100644 cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
 create mode 100644 cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/index.js

diff --git a/cmdb-ui/src/modules/cmdb/api/CIType.js b/cmdb-ui/src/modules/cmdb/api/CIType.js
index 6bbe18e..6a323a7 100644
--- a/cmdb-ui/src/modules/cmdb/api/CIType.js
+++ b/cmdb-ui/src/modules/cmdb/api/CIType.js
@@ -205,3 +205,21 @@ export function ciTypeFilterPermissions(type_id) {
     method: 'get',
   })
 }
+
+// parent_ids, child_id
+export function postCiTypeInheritance(data) {
+  return axios({
+    url: `/v0.1/ci_types/inheritance`,
+    method: 'post',
+    data
+  })
+}
+
+// parent_id, child_id
+export function deleteCiTypeInheritance(data) {
+  return axios({
+    url: `/v0.1/ci_types/inheritance`,
+    method: 'delete',
+    data
+  })
+}
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
new file mode 100644
index 0000000..fc98eb9
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelect.vue
@@ -0,0 +1,148 @@
+<template>
+  <treeselect
+    :disabled="disabled"
+    ref="cmdb_type_select"
+    :disable-branch-nodes="true"
+    class="custom-treeselect custom-treeselect-bgcAndBorder"
+    :style="{
+      '--custom-height': '30px',
+      lineHeight: '30px',
+      '--custom-bg-color': '#fff',
+      '--custom-border': '1px solid #d9d9d9',
+    }"
+    v-model="currenCiType"
+    :multiple="multiple"
+    :clearable="true"
+    searchable
+    :options="ciTypeGroup"
+    value-consists-of="LEAF_PRIORITY"
+    :placeholder="placeholder || `${$t(`placeholder2`)}`"
+    :load-options="loadOptions"
+    @select="
+      (node, instanceId) => {
+        $emit('select', node, instanceId)
+      }
+    "
+    @deselect="
+      (node, instanceId) => {
+        $emit('deselect', node, instanceId)
+      }
+    "
+    :normalizer="
+      (node) => {
+        return {
+          id: node.id || -1,
+          label: node.alias || node.name || '其他',
+          title: node.alias || node.name || '其他',
+        }
+      }
+    "
+  >
+    <div
+      :title="node.label"
+      slot="option-label"
+      slot-scope="{ node }"
+      :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+    >
+      {{ node.label }}
+    </div>
+    <div slot="value-label" slot-scope="{ node }">{{ getTreeSelectLabel(node) }}</div>
+  </treeselect>
+</template>
+
+<script>
+import _ from 'lodash'
+import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
+import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { getTreeSelectLabel } from '../../utils/helper'
+export default {
+  name: 'CMDBTypeSelect',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: null,
+    },
+    selectType: {
+      type: String,
+      default: 'attributes',
+    },
+    attrIdkey: {
+      type: String,
+      default: 'id',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      ciTypeGroup: [],
+      childrenOptions: [],
+    }
+  },
+  computed: {
+    currenCiType: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('change', val)
+        return val
+      },
+    },
+  },
+  async mounted() {
+    if (this.value) {
+      const typeId = this.value.split('-')[0]
+      await getCITypeAttributesById(this.value.split('-')[0]).then((res) => {
+        this.childrenOptions = res.attributes.map((item) => ({ ...item, id: `${typeId}-${item[this.attrIdkey]}` }))
+      })
+    }
+    this.getCITypeGroups()
+  },
+  methods: {
+    getTreeSelectLabel,
+    getCITypeGroups() {
+      getCITypeGroupsConfig({ need_other: true }).then((res) => {
+        this.ciTypeGroup = res
+          .filter((item) => item.ci_types && item.ci_types.length)
+          .map((item) => {
+            item.id = `type_${item.id || -1}`
+            item.children = item.ci_types.map((type) => {
+              const obj = { ...type }
+              if (this.selectType === 'attributes') {
+                obj.children = this.value && type.id === Number(this.value.split('-')[0]) ? this.childrenOptions : null
+              }
+              return obj
+            })
+            return { ..._.cloneDeep(item) }
+          })
+      })
+    },
+    loadOptions({ action, parentNode, callback }) {
+      getCITypeAttributesById(parentNode.id).then((res) => {
+        parentNode.children = res.attributes.map((item) => ({
+          ...item,
+          id: `${parentNode.id}-${item[this.attrIdkey]}`,
+        }))
+        callback()
+      })
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/index.js b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/index.js
new file mode 100644
index 0000000..886b2de
--- /dev/null
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/index.js
@@ -0,0 +1,2 @@
+import CMDBTypeSelect from './cmdbTypeSelect.vue'
+export default CMDBTypeSelect
diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
index 2fe8db6..56e099a 100644
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -176,7 +176,12 @@ const cmdb_en = {
         time: 'Time',
         json: 'JSON',
         event: 'Event',
-        reg: 'Regex'
+        reg: 'Regex',
+        isInherit: 'Inherit',
+        inheritType: 'Inherit Type',
+        inheritTypePlaceholder: 'Please select inherit types',
+        inheritFrom: 'inherit from {name}',
+        groupInheritFrom: 'Please go to the {name} for modification'
     },
     components: {
         unselectAttributes: 'Unselected',
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
index 461d199..41f9bcc 100644
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -176,7 +176,12 @@ const cmdb_zh = {
         time: '时间',
         json: 'JSON',
         event: '事件',
-        reg: '正则校验'
+        reg: '正则校验',
+        isInherit: '是否继承',
+        inheritType: '继承模型',
+        inheritTypePlaceholder: '请选择继承模型（多选）',
+        inheritFrom: '属性继承自{name}',
+        groupInheritFrom: '请至{name}进行修改'
     },
     components: {
         unselectAttributes: '未选属性',
diff --git a/cmdb-ui/src/modules/cmdb/utils/helper.js b/cmdb-ui/src/modules/cmdb/utils/helper.js
index 6fa4387..f81fa2b 100644
--- a/cmdb-ui/src/modules/cmdb/utils/helper.js
+++ b/cmdb-ui/src/modules/cmdb/utils/helper.js
@@ -178,4 +178,14 @@ export const downloadExcel = (data, fileName = `${moment().format('YYYY-MM-DD HH
     // ws['!rows'] = [{ 'hpt': 80 }]
     // STEP 4: Write Excel file to browser  #导出
     XLSXS.writeFile(wb, fileName + '.xlsx')
-}
\ No newline at end of file
+}
+
+export const getAllParentNodesLabel = (node, label) => {
+    if (node.parentNode) {
+        return getAllParentNodesLabel(node.parentNode, `${node.parentNode.label}-${label}`)
+    }
+    return label
+  }
+  export const getTreeSelectLabel = (node) => {
+    return `${getAllParentNodesLabel(node, node.label)}`
+  }
\ No newline at end of file
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue b/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
index 6a18620..8079a16 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/ciDetailPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="ci-detail-header">{{ this.type.name }}</div>
+    <div class="ci-detail-header">{{ this.type.alias }}</div>
     <div class="ci-detail-page">
       <CiDetailTab ref="ciDetailTab" :typeId="typeId" />
     </div>
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
index 3d2d425..8a390be 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributeCard.vue
@@ -1,24 +1,30 @@
 <template>
-  <div class="attribute-card">
-    <div class="attribute-card-content">
-      <div class="attribute-card-value-type-icon handle" :style="{ ...getPropertyStyle(property) }">
-        <ValueTypeIcon :attr="property" />
-      </div>
-      <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
-        <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
-          {{ property.alias || property.name }}
+  <div :class="{ 'attribute-card': true, 'attribute-card-inherited': inherited }">
+    <a-tooltip :title="inherited ? $t('cmdb.ciType.inheritFrom', { name: property.inherited_from }) : ''">
+      <div class="attribute-card-content">
+        <div
+          :class="{ 'attribute-card-value-type-icon': true, handle: !inherited }"
+          :style="{ ...getPropertyStyle(property) }"
+        >
+          <ValueTypeIcon :attr="property" />
+        </div>
+        <div :class="{ 'attribute-card-content-inner': true, 'attribute-card-name-required': property.is_required }">
+          <div :class="{ 'attribute-card-name': true, 'attribute-card-name-default-show': property.default_show }">
+            {{ property.alias || property.name }}
+          </div>
+          <div v-if="property.is_password" class="attribute-card_value-type">{{ $t('cmdb.ciType.password') }}</div>
+          <div v-else-if="property.is_link" class="attribute-card_value-type">{{ $t('cmdb.ciType.link') }}</div>
+          <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
+        </div>
+        <div
+          class="attribute-card-trigger"
+          v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
+        >
+          <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
         </div>
-        <div v-if="property.is_password" class="attribute-card_value-type">{{ $t('cmdb.ciType.password') }}</div>
-        <div v-else-if="property.is_link" class="attribute-card_value-type">{{ $t('cmdb.ciType.link') }}</div>
-        <div v-else class="attribute-card_value-type">{{ valueTypeMap[property.value_type] }}</div>
       </div>
-      <div
-        class="attribute-card-trigger"
-        v-if="(property.value_type === '3' || property.value_type === '4') && !isStore"
-      >
-        <a @click="openTrigger"><ops-icon type="ops-trigger"/></a>
-      </div>
-    </div>
+    </a-tooltip>
+
     <div class="attribute-card-footer">
       <a-popover
         trigger="click"
@@ -51,7 +57,7 @@
         </a-space>
       </a-popover>
 
-      <a-space class="attribute-card-operation">
+      <a-space class="attribute-card-operation" v-if="!inherited">
         <a v-if="!isStore"><a-icon type="edit" @click="handleEdit"/></a>
         <a-tooltip :title="$t('cmdb.ciType.computeForAllCITips')">
           <a v-if="!isStore && property.is_computed"><a-icon type="redo" @click="handleCalcComputed"/></a>
@@ -140,6 +146,9 @@ export default {
         },
       ]
     },
+    inherited() {
+      return this.property.inherited || false
+    },
   },
   methods: {
     getPropertyStyle,
@@ -211,13 +220,15 @@ export default {
       width: 32px;
       height: 32px;
       font-size: 12px;
-      cursor: move;
       background: #ffffff !important;
       box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
       border-radius: 2px;
       text-align: center;
       line-height: 32px;
     }
+    .handle {
+      cursor: move;
+    }
     .attribute-card-content-inner {
       padding-left: 12px;
       font-weight: 400;
@@ -269,6 +280,12 @@ export default {
     }
   }
 }
+.attribute-card-inherited {
+  background: #f3f4f7;
+  .attribute-card-footer {
+    background: #eaedf3;
+  }
+}
 </style>
 <style lang="less">
 .attribute-card-footer-popover {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
index e8c2f01..4c55133 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <a-modal v-model="addGroupModal" :title="$t('cmdb.ciType.addGroup')" @cancel="handleCancelCreateGroup" @ok="handleCreateGroup">
+    <a-modal
+      v-model="addGroupModal"
+      :title="$t('cmdb.ciType.addGroup')"
+      @cancel="handleCancelCreateGroup"
+      @ok="handleCreateGroup"
+    >
       <span>
         <a-form-item :label="$t('name')" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
           <a-input type="text" v-model.trim="newGroupName" />
@@ -9,21 +14,12 @@
     </a-modal>
     <div class="ci-types-attributes" :style="{ maxHeight: `${windowHeight - 104}px` }">
       <a-space style="margin-bottom: 10px">
-        <a-button
-          type="primary"
-          @click="handleAddGroup"
-          size="small"
-          class="ops-button-primary"
-          icon="plus"
-        >{{ $t('cmdb.ciType.group') }}</a-button
-        >
-        <a-button
-          type="primary"
-          @click="handleOpenUniqueConstraint"
-          size="small"
-          class="ops-button-primary"
-        >{{ $t('cmdb.ciType.uniqueConstraint') }}</a-button
-        >
+        <a-button type="primary" @click="handleAddGroup" size="small" class="ops-button-primary" icon="plus">{{
+          $t('cmdb.ciType.group')
+        }}</a-button>
+        <a-button type="primary" @click="handleOpenUniqueConstraint" size="small" class="ops-button-primary">{{
+          $t('cmdb.ciType.uniqueConstraint')
+        }}</a-button>
       </a-space>
       <div :key="CITypeGroup.id" v-for="(CITypeGroup, index) in CITypeGroups">
         <div>
@@ -33,7 +29,11 @@
           >
             <span style="font-weight:700">{{ CITypeGroup.name }}</span>
             <span style="color: #c3cdd7;margin:0 5px;">({{ CITypeGroup.attributes.length }})</span>
-            <a @click="handleEditGroupName(index, CITypeGroup)">
+
+            <a v-if="!CITypeGroup.inherited" @click="handleEditGroupName(index, CITypeGroup)">
+              <a-icon type="edit" />
+            </a>
+            <a v-else :style="{ cursor: 'not-allowed', color: 'gray' }">
               <a-icon type="edit" />
             </a>
           </div>
@@ -71,7 +71,13 @@
             </a-tooltip>
             <a-tooltip>
               <template slot="title">{{ $t('cmdb.ciType.deleteGroup') }}</template>
-              <a style="color:red;"><a-icon type="delete" @click="handleDeleteGroup(CITypeGroup)"/></a>
+              <a
+                :style="{ color: CITypeGroup.inherited ? 'gray' : 'red' }"
+                :disabled="CITypeGroup.inherited"
+              ><a-icon
+                type="delete"
+                @click="handleDeleteGroup(CITypeGroup)"
+              /></a>
             </a-tooltip>
           </a-space>
         </div>
@@ -82,7 +88,7 @@
             @start="drag = true"
             @change="
               (e) => {
-                handleChange(e, CITypeGroup.id)
+                handleChange(e, CITypeGroup.name)
               }
             "
             :filter="'.filter-empty'"
@@ -124,7 +130,7 @@
           @start="drag = true"
           @change="
             (e) => {
-              handleChange(e, -1)
+              handleChange(e, null)
             }
           "
           :animation="300"
@@ -144,18 +150,18 @@
         </draggable>
       </div>
     </div>
-    <attribute-edit-form
+    <AttributeEditForm
       ref="attributeEditForm"
       :CITypeId="CITypeId"
       :CITypeName="CITypeName"
       @ok="handleOk"
-    ></attribute-edit-form>
-    <new-ci-type-attr-modal
+    ></AttributeEditForm>
+    <NewCiTypeAttrModal
       ref="newCiTypeAttrModal"
       :CITypeId="CITypeId"
       :linked-ids="linkedIds"
       @ok="handleOk"
-    ></new-ci-type-attr-modal>
+    ></NewCiTypeAttrModal>
     <UniqueConstraint ref="uniqueConstraint" :CITypeId="CITypeId" />
   </div>
 </template>
@@ -347,8 +353,8 @@ export default {
     },
 
     handleMoveGroup(beforeIndex, afterIndex) {
-      const fromGroupId = this.CITypeGroups[beforeIndex].id
-      const toGroupId = this.CITypeGroups[afterIndex].id
+      const fromGroupId = this.CITypeGroups[beforeIndex].name
+      const toGroupId = this.CITypeGroups[afterIndex].name
       transferCITypeGroupIndex(this.CITypeId, { from: fromGroupId, to: toGroupId }).then((res) => {
         this.$message.success(this.$t('operateSuccess'))
         const beforeGroup = this.CITypeGroups[beforeIndex]
@@ -414,14 +420,14 @@ export default {
       })
     },
     handleChange(e, group) {
-      console.log('changess')
+      console.log('changess', group)
       if (e.hasOwnProperty('moved') && e.moved.oldIndex !== e.moved.newIndex) {
         if (group === -1) {
           this.$message.error(this.$t('cmdb.ciType.attributeSortedTips'))
         } else {
           transferCITypeAttrIndex(this.CITypeId, {
-            from: { attr_id: e.moved.element.id, group_id: group > -1 ? group : null },
-            to: { order: e.moved.newIndex, group_id: group > -1 ? group : null },
+            from: { attr_id: e.moved.element.id, group_name: group },
+            to: { order: e.moved.newIndex, group_name: group },
           })
             .then((res) => this.$message.success(this.$t('updateSuccess')))
             .catch(() => {
@@ -431,14 +437,14 @@ export default {
       }
 
       if (e.hasOwnProperty('added')) {
-        this.addRemoveGroupFlag = { to: { group_id: group > -1 ? group : null, order: e.added.newIndex }, inited: true }
+        this.addRemoveGroupFlag = { to: { group_name: group, order: e.added.newIndex }, inited: true }
       }
 
       if (e.hasOwnProperty('removed')) {
         this.$nextTick(() => {
           transferCITypeAttrIndex(this.CITypeId, {
-            from: { attr_id: e.removed.element.id, group_id: group > -1 ? group : null },
-            to: { group_id: this.addRemoveGroupFlag.to.group_id, order: this.addRemoveGroupFlag.to.order },
+            from: { attr_id: e.removed.element.id, group_name: group },
+            to: { group_name: this.addRemoveGroupFlag.to.group_name, order: this.addRemoveGroupFlag.to.order },
           })
             .then((res) => this.$message.success(this.$t('saveSuccess')))
             .catch(() => {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
index f95c98a..b44b360 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue
@@ -139,6 +139,7 @@
                     <a><a-icon type="edit" @click="(e) => handleEdit(e, ci)"/></a>
                     <a
                       v-if="permissions.includes('admin') || permissions.includes('cmdb_admin')"
+                      :disabled="ci.inherited"
                       @click="(e) => handleDownloadCiType(e, ci)"
                     >
                       <a-icon type="download" />
@@ -176,6 +177,7 @@
       placement="right"
       width="900px"
       :destroyOnClose="true"
+      :bodyStyle="{ height: 'calc(100vh - 108px)' }"
     >
       <a-form
         :form="form"
@@ -204,6 +206,35 @@
         <a-form-item :label="$t('alias')">
           <a-input name="alias" v-decorator="['alias', { rules: [] }]" />
         </a-form-item>
+        <a-form-item :label="$t('cmdb.ciType.isInherit')">
+          <a-radio-group v-model="isInherit">
+            <a-radio :value="true">
+              是
+            </a-radio>
+            <a-radio :value="false">
+              否
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item v-if="isInherit" :label="$t('cmdb.ciType.inheritType')">
+          <CMDBTypeSelect
+            multiple
+            :placeholder="$t('cmdb.ciType.inheritTypePlaceholder')"
+            v-decorator="[
+              'parent_ids',
+              { rules: [{ required: true, message: $t('cmdb.ciType.inheritTypePlaceholder') }] },
+            ]"
+            selectType="ci_type"
+            :class="{
+              'custom-treeselect': true,
+            }"
+            :style="{
+              '--custom-height': '32px',
+              lineHeight: '32px',
+              '--custom-multiple-lineHeight': '14px',
+            }"
+          />
+        </a-form-item>
         <a-form-item :label="$t('icon')">
           <IconArea class="ci_types-icon-area" ref="iconArea" />
         </a-form-item>
@@ -296,7 +327,14 @@ import router, { resetRouter } from '@/router'
 import store from '@/store'
 import draggable from 'vuedraggable'
 import { Select, Option } from 'element-ui'
-import { createCIType, updateCIType, deleteCIType } from '@/modules/cmdb/api/CIType'
+import {
+  createCIType,
+  updateCIType,
+  deleteCIType,
+  getCIType,
+  postCiTypeInheritance,
+  deleteCiTypeInheritance,
+} from '@/modules/cmdb/api/CIType'
 import {
   getCITypeGroupsConfig,
   postCITypeGroup,
@@ -316,6 +354,7 @@ import CMDBGrant from '../../components/cmdbGrant'
 import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
 import AttributeStore from './attributeStore.vue'
 import { getAllDepAndEmployee } from '@/api/company'
+import CMDBTypeSelect from '../../components/CMDBTypeSelect'
 
 export default {
   name: 'CITypes',
@@ -330,6 +369,7 @@ export default {
     SplitPane,
     OpsMoveIcon,
     AttributeStore,
+    CMDBTypeSelect,
   },
   inject: ['reload'],
   data() {
@@ -368,6 +408,9 @@ export default {
       default_order_asc: '1',
 
       allTreeDepAndEmp: [],
+
+      editCiType: null,
+      isInherit: false,
     }
   },
   computed: {
@@ -563,6 +606,7 @@ export default {
       this.filterInput = ''
       this.form.resetFields()
       this.drawerVisible = false
+      this.isInherit = false
     },
     handleCreateNewAttrDone() {
       this.getAttributes()
@@ -583,6 +627,22 @@ export default {
           const icon =
             _icon && _icon.name ? `${_icon.name}$$${_icon.color || ''}$$${_icon.id || ''}$$${_icon.url || ''}` : ''
           if (values.id) {
+            const { parent_ids: oldP = [] } = this.editCiType
+            const { parent_ids: newP = [] } = values
+            const { remove, add } = this.compareArrays(newP, oldP)
+            if (add && add.length) {
+              await postCiTypeInheritance({ parent_ids: add, child_id: values.id }).catch(() => {
+                this.loading = false
+              })
+            }
+            if (remove && remove.length) {
+              for (let i = 0; i < remove.length; i++) {
+                await deleteCiTypeInheritance({ parent_id: remove[i], child_id: values.id }).catch(() => {
+                  this.loading = false
+                })
+              }
+            }
+            delete values.parent_ids
             await this.updateCIType(values.id, {
               ...values,
               icon,
@@ -593,6 +653,23 @@ export default {
         }
       })
     },
+    compareArrays(newArr, oldArr) {
+      const remove = []
+      const add = []
+      for (let i = 0; i < oldArr.length; i++) {
+        const item = oldArr[i]
+        if (newArr.indexOf(item) === -1) {
+          remove.push(item)
+        }
+      }
+      for (let i = 0; i < newArr.length; i++) {
+        const item = newArr[i]
+        if (oldArr.indexOf(item) === -1) {
+          add.push(item)
+        }
+      }
+      return { remove, add }
+    },
     start(g) {
       console.log('start', g)
       this.startId = g.id
@@ -767,37 +844,50 @@ export default {
         router.addRoutes(store.getters.appRoutes)
       })
     },
-    handleEdit(e, record) {
+    async handleEdit(e, record) {
       e.preventDefault()
       e.stopPropagation()
       this.drawerTitle = this.$t('cmdb.ciType.editCIType')
       this.drawerVisible = true
-      getCITypeAttributesById(record.id).then((res) => {
+      await getCITypeAttributesById(record.id).then((res) => {
         this.orderSelectionOptions = res.attributes.filter((item) => item.is_required)
-        this.$nextTick(() => {
-          this.default_order_asc = record.default_order_attr && record.default_order_attr.startsWith('-') ? '2' : '1'
-
-          this.form.setFieldsValue({
-            id: record.id,
-            alias: record.alias,
-            name: record.name,
-            unique_key: record.unique_id,
-            default_order_attr:
-              record.default_order_attr && record.default_order_attr.startsWith('-')
-                ? record.default_order_attr.slice(1)
-                : record.default_order_attr,
+      })
+      await getCIType(record.id).then((res) => {
+        const ci_type = res.ci_types[0]
+        this.editCiType = ci_type ?? null
+        if (ci_type.parent_ids && ci_type.parent_ids.length) {
+          this.isInherit = true
+          this.$nextTick(() => {
+            this.form.setFieldsValue({
+              parent_ids: ci_type.parent_ids,
+            })
           })
-          this.$refs.iconArea.setIcon(
-            record.icon
-              ? {
-                  name: record.icon.split('$$')[0] || '',
-                  color: record.icon.split('$$')[1] || '',
-                  id: record.icon.split('$$')[2] ? Number(record.icon.split('$$')[2]) : null,
-                  url: record.icon.split('$$')[3] || '',
-                }
-              : {}
-          )
+        }
+      })
+      this.$nextTick(() => {
+        this.default_order_asc = record.default_order_attr && record.default_order_attr.startsWith('-') ? '2' : '1'
+
+        this.form.setFieldsValue({
+          id: record.id,
+          alias: record.alias,
+          name: record.name,
+          unique_key: record.unique_id,
+          default_order_attr:
+            record.default_order_attr && record.default_order_attr.startsWith('-')
+              ? record.default_order_attr.slice(1)
+              : record.default_order_attr,
         })
+
+        this.$refs.iconArea.setIcon(
+          record.icon
+            ? {
+                name: record.icon.split('$$')[0] || '',
+                color: record.icon.split('$$')[1] || '',
+                id: record.icon.split('$$')[2] ? Number(record.icon.split('$$')[2]) : null,
+                url: record.icon.split('$$')[3] || '',
+              }
+            : {}
+        )
       })
     },
     handleCreatNewAttr() {
diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
index b578db7..efa6c66 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
@@ -20,7 +20,9 @@
         "
       >{{ $t('cancel') }}</a-button
       >
-      <a-button :loading="confirmLoading" @click="handleSubmit(false)" type="primary">{{ $t('cmdb.ciType.continueAdd') }}</a-button>
+      <a-button :loading="confirmLoading" @click="handleSubmit(false)" type="primary">{{
+        $t('cmdb.ciType.continueAdd')
+      }}</a-button>
       <a-button :loading="confirmLoading" type="primary" @click="handleSubmit">{{ $t('confirm') }}</a-button>
     </template>
     <a-tabs v-model="activeKey">
@@ -47,7 +49,7 @@
 <script>
 import _ from 'lodash'
 import { searchAttributes, createCITypeAttributes, updateCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
-import { updateCITypeGroupById, getCITypeGroupById } from '@/modules/cmdb/api/CIType'
+import { createCITypeGroupById, getCITypeGroupById } from '@/modules/cmdb/api/CIType'
 import CreateNewAttribute from './ceateNewAttribute.vue'
 import { valueTypeMap } from '../../utils/const'
 import AttributesTransfer from '../../components/attributesTransfer'
@@ -102,11 +104,11 @@ export default {
           if (this.currentGroup) {
             await this.updateCurrentGroup()
             const { id, name, order, attributes } = this.currentGroup
-            const attrIds = attributes.map((i) => i.id)
+            const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id)
             this.targetKeys.forEach((key) => {
               attrIds.push(Number(key))
             })
-            await updateCITypeGroupById(id, { name, order, attributes: [...new Set(attrIds)] })
+            await createCITypeGroupById(this.CITypeId, { name, order, attributes: [...new Set(attrIds)] })
           }
           this.confirmLoading = false
           this.handleClose(isCloseModal)
@@ -140,9 +142,9 @@ export default {
       if (this.currentGroup) {
         await this.updateCurrentGroup()
         const { id, name, order, attributes } = this.currentGroup
-        const attrIds = attributes.map((i) => i.id)
+        const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id)
         attrIds.push(newAttrId)
-        await updateCITypeGroupById(id, { name, order, attributes: attrIds })
+        await createCITypeGroupById(this.CITypeId, { name, order, attributes: attrIds })
       }
       this.confirmLoading = false
       this.loadTotalAttrs()