feat(ui): topology view & batch import - update CI Type select component

cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd.vue

@@ -71,7 +71,7 @@ export default {
   watch: {
     CITypeGroup: {
       deep: true,
-      handler(newValue) {
+      handler() {
         this.handleSelectOptions()
       }
     }

cmdb-ui/src/modules/cmdb/views/batch/modules/CiTypeChoice.vue

@@ -1,19 +1,14 @@
 <template>
   <div>
     <p class="cmdb-batch-upload-label"><span>*</span>1. {{ $t('cmdb.batch.selectCIType') }}</p>
-    <a-select
-      showSearch
-      :placeholder="$t('cmdb.batch.selectCITypeTips')"
-      @change="selectCiType"
-      :style="{ width: '50%', marginBottom: '1em' }"
-      class="ops-select"
-      :filter-option="filterOption"
+    <CMDBTypeSelectAntd
       v-model="selectNum"
-    >
-      <a-select-option v-for="ciType in ciTypeList" :key="ciType.name" :value="ciType.id">{{
-        ciType.alias
-      }}</a-select-option>
-    </a-select>
+      ref="CMDBTypeSelectAntd"
+      :placeholder="$t('cmdb.batch.selectCITypeTips')"
+      :style="{ width: '50%', marginBottom: '1em' }"
+      :CITypeGroup="CITypeGroup"
+      @change="selectCiType"
+    />
     <p class="cmdb-batch-upload-label">&nbsp;&nbsp;2. {{ $t('cmdb.batch.downloadTemplate') }}</p>
     <a-button
       :style="{ marginBottom: '1em' }"
@@ -99,16 +94,21 @@ import _ from 'lodash'
 import { mapState } from 'vuex'
 import ExcelJS from 'exceljs'
 import FileSaver from 'file-saver'
-import { getCITypes } from '@/modules/cmdb/api/CIType'
+import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
 import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
 import { getCITypeParent, getCanEditByParentIdChildId } from '@/modules/cmdb/api/CITypeRelation'
 import { searchPermResourceByRoleId } from '@/modules/acl/api/permission'
 
+import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
+
 export default {
   name: 'CiTypeChoice',
+  components: {
+    CMDBTypeSelectAntd
+  },
   data() {
     return {
-      ciTypeList: [],
+      CITypeGroup: [],
       ciTypeName: '',
       selectNum: undefined,
       selectCiTypeAttrList: [],
@@ -132,11 +132,16 @@ export default {
       resource_type_id: 'CIType',
       app_id: 'cmdb',
     })
-    getCITypes().then((res) => {
-      this.ciTypeList = res.ci_types.filter((type) => {
-        const _findRe = resources.find((re) => re.name === type.name)
-        return _findRe?.permissions.includes('create') ?? false
+
+    getCITypeGroupsConfig({ need_other: true }).then((res) => {
+      const CITypeGroup = res || []
+      CITypeGroup.forEach((group) => {
+        group.ci_types = (group.ci_types || []).filter((type) => {
+          const _find = resources.find((resource) => resource.name === type.name)
+          return _find?.permissions?.includes?.('create') ?? false
+        })
       })
+      this.CITypeGroup = CITypeGroup.filter((group) => group?.ci_types?.length)
     })
   },
   watch: {
@@ -152,18 +157,27 @@ export default {
     },
   },
   methods: {
-    selectCiType(el) {
+    selectCiType(id) {
       // Callback function when a template type is selected
-      getCITypeAttributesById(el).then((res) => {
+      getCITypeAttributesById(id).then((res) => {
         this.$emit('getCiTypeAttr', res)
         this.selectCiTypeAttrList = res
       })
 
-      this.ciTypeList.forEach((item) => {
-        if (this.selectNum === item.id) {
-          this.ciTypeName = item.alias || item.name
-        }
-      })
+      const selectOptions = this.$refs?.CMDBTypeSelectAntd?.selectOptions
+      let ciTypeName = ''
+      if (selectOptions?.length) {
+        selectOptions.forEach((option) => {
+          if (option?.ci_types?.length) {
+            option.ci_types.forEach((type) => {
+              if (type?.id === id) {
+                ciTypeName = type.alias || type.name
+              }
+            })
+          }
+        })
+      }
+      this.ciTypeName = ciTypeName
     },
 
     openModal() {
@@ -188,9 +202,6 @@ export default {
         this.checkedAttrs = this.selectCiTypeAttrList.attributes.map((item) => item.alias || item.name)
       })
     },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
     handleCancel() {
       this.visible = false
     },

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

@@ -238,9 +238,11 @@
           />
         </a-form-item>
         <a-form-item :label="$t('cmdb.topo.centralNodeType')" prop="central_node_type">
-          <a-select @change="CITypeChange" v-decorator="['central_node_type', { rules: [{ required: true, message: $t('cmdb.topo.typeRequired') }]}]" :showSearch="true" optionFilterProp="label">
-            <a-select-option v-for="t in ciTypes" :key="t.id" :value="t.id" :label="t.alias">{{ t.alias }}</a-select-option>
-          </a-select>
+          <CMDBTypeSelectAntd
+            v-decorator="['central_node_type', { rules: [{ required: true, message: $t('cmdb.topo.typeRequired') }]}]"
+            :placeholder="$t('cmdb.ciType.selectModel')"
+            @change="CITypeChange"
+          />
         </a-form-item>
         <a-form-item :label="$t('cmdb.topo.filterInstances')" prop="central_node_instances">
           <a-input
@@ -325,7 +327,6 @@ import draggable from 'vuedraggable'
 import emptyImage from '@/assets/data_empty.png'
 import SplitPane from '@/components/SplitPane'
 import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
-import { getCITypeGroups } from '@/modules/cmdb/api/ciTypeGroup'
 import { roleHasPermissionToGrant } from '@/modules/acl/api/permission'
 import { searchResourceType } from '@/modules/acl/api/resource'
 import SeeksRelationGraph from '@/modules/cmdb/3rd/relation-graph'
@@ -336,6 +337,7 @@ import { searchCI } from '@/modules/cmdb/api/ci'
 import { getTopoGroups, postTopoGroup, putTopoGroupByGId, putTopoGroupsOrder, deleteTopoGroup, getTopoView, addTopoView, updateTopoView, deleteTopoView, getRelationsByTypeId, previewTopoView, showTopoView } from '@/modules/cmdb/api/topology'
 import CMDBExprDrawer from '@/components/CMDBExprDrawer'
 import { v4 as uuidv4 } from 'uuid'
+import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
 
 const currentTopoKey = 'ops_cmdb_topo_currentId'
 export default {
@@ -348,6 +350,7 @@ export default {
     SeeksRelationGraph,
     RelationGraph,
     CMDBGrant,
+    CMDBTypeSelectAntd
   },
   data() {
     const defaultOptions = {
@@ -421,7 +424,6 @@ export default {
       currentId: null,
       topoGroups: [],
       CITypeId: null,
-      ciTypes: [],
 
       startId: null,
       endId: null,
@@ -500,15 +502,6 @@ export default {
       this.currentId = _currentId
     }
     this.loadTopoViews(!_currentId)
-    let ciTypes = []
-    getCITypeGroups({ need_other: true }).then((res) => {
-      res.forEach((item) => {
-        if (item.ci_types && item.ci_types.length) {
-          ciTypes = ciTypes.concat(item.ci_types)
-        }
-      })
-      this.ciTypes = ciTypes
-    })
     this.showTopoView(this.currentId.split('%')[1])
   },
   computed: {