feat(ui): add CMDBTypeSelectAntd component

2025-08-26 01:29:31 +08:00 · 2025-07-07 12:17:30 +08:00
parent 1947af5693
commit 40a53a0213
5 changed files with 163 additions and 74 deletions
--- a/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd.vue
+++ b/cmdb-ui/src/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd.vue
@@ -0,0 +1,108 @@
+<template>
+  <a-select
+    v-bind="$attrs"
+    v-model="currenCIType"
+    style="width: 100%"
+    :showSearch="true"
+    :filterOption="filterOption"
+    :placeholder="placeholder || $t('placeholder2')"
+  >
+    <a-select-opt-group
+      v-for="group in selectOptions"
+      :key="group.id"
+      :label="group.name || $t('other')"
+    >
+      <a-select-option
+        v-for="type in group.ci_types"
+        :key="type.id"
+        :value="type.id"
+        :data-alias="type.alias"
+        :data-name="type.name"
+      >
+        {{ type.alias || type.name || $t('other') }}
+        <span v-if="type.name" class="select-option-name">({{ type.name }})</span>
+      </a-select-option>
+    </a-select-opt-group>
+  </a-select>
+</template>
+
+<script>
+import _ from 'lodash'
+import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
+
+export default {
+  name: 'CMDBTypeSelectAntd',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: undefined,
+    },
+    CITypeGroup: {
+      type: Array,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    }
+  },
+  data() {
+    return {
+      selectOptions: []
+    }
+  },
+  computed: {
+    currenCIType: {
+      get() {
+        return this.value
+      },
+      set(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.$emit('change', newVal)
+        }
+        return newVal
+      },
+    },
+  },
+  watch: {
+    CITypeGroup: {
+      deep: true,
+      handler(newValue) {
+        this.handleSelectOptions()
+      }
+    }
+  },
+  async mounted() {
+    this.handleSelectOptions()
+  },
+  methods: {
+    async handleSelectOptions() {
+      let rawCITypeGroup = []
+      if (this.CITypeGroup) {
+        rawCITypeGroup = this.CITypeGroup
+      } else {
+        rawCITypeGroup = await getCITypeGroupsConfig({ need_other: true })
+      }
+
+      this.selectOptions = _.cloneDeep(rawCITypeGroup).filter((group) => group?.ci_types?.length)
+    },
+    filterOption(input, option) {
+      const attrs = option?.data?.attrs || {}
+      const alias = attrs?.['data-alias']?.toLowerCase?.() || ''
+      const name = attrs?.['data-name']?.toLowerCase?.() || ''
+      return alias.indexOf(input.toLowerCase()) >= 0 || name.indexOf(input.toLowerCase()) >= 0
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.select-option-name {
+  font-size: 12px;
+  color: #A5A9BC;
+}
+</style>
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue
@@ -171,23 +171,12 @@
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('cmdb.ciType.dstCIType')">
-          <a-select
-            showSearch
+          <CMDBTypeSelectAntd
+            v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
            name="ci_type_id"
            :placeholder="$t('cmdb.ciType.dstCITypeTips')"
-            v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
-            :filterOption="filterOption"
            @change="changeChild"
-          >
-            <a-select-option
-              :value="CIType.id"
-              :key="CIType.id"
-              v-for="CIType in CITypes"
-            >
-              {{ CIType.alias || CIType.name }}
-              <span class="model-select-name">({{ CIType.name }})</span>
-            </a-select-option>
-          </a-select>
+          />
        </a-form-item>

        <a-form-item :label="$t('cmdb.ciType.relationType')">
@@ -285,12 +274,14 @@ 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'
+import CMDBGrant from '@/modules/cmdb/components/cmdbGrant'
+import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'

 export default {
  name: 'RelationTable',
  components: {
    CMDBGrant,
+    CMDBTypeSelectAntd
  },
  props: {
    CITypeId: {
@@ -513,13 +504,6 @@ export default {
        cmdbGrantType: 'type_relation',
      })
    },
-    filterOption(input, option) {
-      const inputValue = input.toLowerCase()
-      const alias = option.componentOptions.children[0].text.toLowerCase()
-      const name = option.componentOptions.children[1]?.elm?.innerHTML?.toLowerCase?.() ?? ''
-
-      return alias.indexOf(inputValue) >= 0 || name.indexOf(inputValue) >= 0
-    },
    rowClass({ row }) {
      if (row.isDivider) return 'relation-table-divider'
      if (row.isParent) return 'relation-table-parent'
@@ -604,9 +588,11 @@ export default {
      this.modalAttrList.forEach((item) => {
        item.childAttrId = undefined
      })
+      if (value) {
        getCITypeAttributesById(value).then((res) => {
          this.modalChildAttributes = res?.attributes ?? []
        })
+      }
    },
    filterAttributes(attributes) {
      // filter password/json/is_list/longText/bool/reference
--- a/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
+++ b/cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
@@ -51,31 +51,21 @@
            :label="$t('cmdb.ciType.ciType')"
            prop="type_ids"
          >
-            <a-select
-              show-search
-              optionFilterProp="children"
-              @change="changeCIType"
+            <CMDBTypeSelectAntd
              v-model="form.type_ids"
-              :placeholder="$t('cmdb.ciType.selectCIType')"
              mode="multiple"
-            >
-              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
-                ci_type.alias || ci_type.name
-              }}</a-select-option>
-            </a-select>
+              :CITypeGroup="CITypeGroup"
+              :placeholder="$t('cmdb.ciType.selectCIType')"
+              @change="changeCIType"
+            />
          </a-form-model-item>
          <a-form-model-item v-else :label="$t('cmdb.ciType.ciType')" prop="type_id">
-            <a-select
-              show-search
-              optionFilterProp="children"
-              @change="changeCIType"
+            <CMDBTypeSelectAntd
              v-model="form.type_id"
+              :CITypeGroup="CITypeGroup"
              :placeholder="$t('cmdb.ciType.selectCIType')"
-            >
-              <a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
-                ci_type.alias || ci_type.name
-              }}</a-select-option>
-            </a-select>
+              @change="changeCIType"
+            />
          </a-form-model-item>
          <a-form-model-item
            :label="$t('cmdb.custom_dashboard.dimensions')"
@@ -309,17 +299,26 @@
 <script>
 import Chart from './chart.vue'
 import { dashboardCategory } from './constant'
-import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '../../api/customDashboard'
-import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
-import { getRecursive_level2children } from '../../api/CITypeRelation'
-import { getLastLayout } from '../../utils/helper'
+import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '@/modules/cmdb/api/customDashboard'
+import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '@/modules/cmdb/api/CITypeAttr'
+import { getRecursive_level2children } from '@/modules/cmdb/api/CITypeRelation'
+import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
+import { getLastLayout } from '@/modules/cmdb/utils/helper'
+
 import FilterComp from '@/components/CMDBFilterComp'
 import ColorPicker from './colorPicker.vue'
 import ColorListPicker from './colorListPicker.vue'
+import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'

 export default {
  name: 'ChartForm',
-  components: { Chart, FilterComp, ColorPicker, ColorListPicker },
+  components: {
+    Chart,
+    FilterComp,
+    ColorPicker,
+    ColorListPicker,
+    CMDBTypeSelectAntd
+  },
  props: {
    ci_types: {
      type: Array,
@@ -365,6 +364,7 @@ export default {
      level2children: {},
      isShadow: false,
      changeCITypeRequestValue: null,
+      CITypeGroup: []
    }
  },
  computed: {
@@ -484,6 +484,7 @@ export default {
        showIcon,
        tableCategory: ret === 'cis' ? 2 : 1,
      }
+      this.getCITypeGroup()
    },
    handleclose() {
      this.attributes = []
@@ -491,6 +492,9 @@ export default {
      this.isShowPreview = false
      this.visible = false
    },
+    async getCITypeGroup() {
+      this.CITypeGroup = await getCITypeGroupsConfig({ need_other: true })
+    },
    changeCIType(value) {
      this.form.attr_ids = []
      this.commonAttributes = []
--- a/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
@@ -14,35 +14,26 @@
    >
      <a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item :label="$t('cmdb.ciType.sourceCIType')">
-          <a-select
-            showSearch
-            name="source_ci_type_id"
+          <CMDBTypeSelectAntd
            v-decorator="[
              'source_ci_type_id',
              { rules: [{ required: true, message: $t('cmdb.ciType.sourceCITypeTips') }] },
            ]"
+            name="source_ci_type_id"
+            :CITypeGroup="CITypeGroups"
            @change="handleSourceTypeChange"
-            :filterOption="filterOption"
-          >
-            <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayCITypes">
-              {{ CIType.alias || CIType.name }}
-              <span class="model-select-name">({{ CIType.name }})</span>
-            </a-select-option>
-          </a-select>
+          />
        </a-form-item>
        <a-form-item :label="$t('cmdb.ciType.dstCIType')">
-          <a-select
-            showSearch
+          <CMDBTypeSelectAntd
+            v-decorator="[
+              'ci_type_id',
+              { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] },
+            ]"
            name="ci_type_id"
-            v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
+            :CITypeGroup="CITypeGroups"
            @change="handleTargetTypeChange"
-            :filterOption="filterOption"
-          >
-            <a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayTargetCITypes">
-              {{ CIType.alias || CIType.name }}
-              <span class="model-select-name">({{ CIType.name }})</span>
-            </a-select-option>
-          </a-select>
+          />
        </a-form-item>

        <a-form-item :label="$t('cmdb.ciType.relationType')">
@@ -127,7 +118,6 @@
 </template>

 <script>
-import ModelRelationTable from './modules/modelRelationTable.vue'
 import { searchResourceType } from '@/modules/acl/api/resource'
 import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
 import { getCITypes } from '@/modules/cmdb/api/CIType'
@@ -135,10 +125,14 @@ import { createRelation, deleteRelation, getRelationTypes } from '@/modules/cmdb
 import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
 import { v4 as uuidv4 } from 'uuid'

+import ModelRelationTable from './modules/modelRelationTable.vue'
+import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
+
 export default {
  name: 'Index',
  components: {
    ModelRelationTable,
+    CMDBTypeSelectAntd
  },
  data() {
    return {
@@ -362,9 +356,6 @@ export default {
        this.modalChildAttributes = res?.attributes ?? []
      })
    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
    filterAttributes(attributes) {
      // filter password/json/is_list/longText/bool/reference
      return attributes.filter((attr) => {
--- a/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/model_relation/modules/modelRelationTable.vue
@@ -15,7 +15,7 @@
      @edit-closed="handleEditClose"
      @edit-actived="handleEditActived"
    >
-      <vxe-column field="created_at" :title="$t('created_at')" sortable width="159px"></vxe-column>
+      <vxe-column field="created_at" :title="$t('created_at')" sortable width="170"></vxe-column>
      <vxe-column field="parent.alias" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column>
      <vxe-column
        field="relation_type_id"