Skip to content

Commit 40a53a0

Browse files
LHRUNLHRUN
committed
feat(ui): add CMDBTypeSelectAntd component
1 parent 1947af5 commit 40a53a0

5 files changed

Lines changed: 163 additions & 74 deletions

File tree

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<a-select
3+
v-bind="$attrs"
4+
v-model="currenCIType"
5+
style="width: 100%"
6+
:showSearch="true"
7+
:filterOption="filterOption"
8+
:placeholder="placeholder || $t('placeholder2')"
9+
>
10+
<a-select-opt-group
11+
v-for="group in selectOptions"
12+
:key="group.id"
13+
:label="group.name || $t('other')"
14+
>
15+
<a-select-option
16+
v-for="type in group.ci_types"
17+
:key="type.id"
18+
:value="type.id"
19+
:data-alias="type.alias"
20+
:data-name="type.name"
21+
>
22+
{{ type.alias || type.name || $t('other') }}
23+
<span v-if="type.name" class="select-option-name">({{ type.name }})</span>
24+
</a-select-option>
25+
</a-select-opt-group>
26+
</a-select>
27+
</template>
28+
29+
<script>
30+
import _ from 'lodash'
31+
import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
32+
33+
export default {
34+
name: 'CMDBTypeSelectAntd',
35+
model: {
36+
prop: 'value',
37+
event: 'change',
38+
},
39+
props: {
40+
value: {
41+
type: [String, Number, Array],
42+
default: undefined,
43+
},
44+
CITypeGroup: {
45+
type: Array,
46+
default: undefined
47+
},
48+
placeholder: {
49+
type: String,
50+
default: '',
51+
}
52+
},
53+
data() {
54+
return {
55+
selectOptions: []
56+
}
57+
},
58+
computed: {
59+
currenCIType: {
60+
get() {
61+
return this.value
62+
},
63+
set(newVal, oldVal) {
64+
if (newVal !== oldVal) {
65+
this.$emit('change', newVal)
66+
}
67+
return newVal
68+
},
69+
},
70+
},
71+
watch: {
72+
CITypeGroup: {
73+
deep: true,
74+
handler(newValue) {
75+
this.handleSelectOptions()
76+
}
77+
}
78+
},
79+
async mounted() {
80+
this.handleSelectOptions()
81+
},
82+
methods: {
83+
async handleSelectOptions() {
84+
let rawCITypeGroup = []
85+
if (this.CITypeGroup) {
86+
rawCITypeGroup = this.CITypeGroup
87+
} else {
88+
rawCITypeGroup = await getCITypeGroupsConfig({ need_other: true })
89+
}
90+
91+
this.selectOptions = _.cloneDeep(rawCITypeGroup).filter((group) => group?.ci_types?.length)
92+
},
93+
filterOption(input, option) {
94+
const attrs = option?.data?.attrs || {}
95+
const alias = attrs?.['data-alias']?.toLowerCase?.() || ''
96+
const name = attrs?.['data-name']?.toLowerCase?.() || ''
97+
return alias.indexOf(input.toLowerCase()) >= 0 || name.indexOf(input.toLowerCase()) >= 0
98+
}
99+
},
100+
}
101+
</script>
102+
103+
<style lang="less" scoped>
104+
.select-option-name {
105+
font-size: 12px;
106+
color: #A5A9BC;
107+
}
108+
</style>

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

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -171,23 +171,12 @@
171171
</a-select>
172172
</a-form-item>
173173
<a-form-item :label="$t('cmdb.ciType.dstCIType')">
174-
<a-select
175-
showSearch
174+
<CMDBTypeSelectAntd
175+
v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
176176
name="ci_type_id"
177177
:placeholder="$t('cmdb.ciType.dstCITypeTips')"
178-
v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
179-
:filterOption="filterOption"
180178
@change="changeChild"
181-
>
182-
<a-select-option
183-
:value="CIType.id"
184-
:key="CIType.id"
185-
v-for="CIType in CITypes"
186-
>
187-
{{ CIType.alias || CIType.name }}
188-
<span class="model-select-name">({{ CIType.name }})</span>
189-
</a-select-option>
190-
</a-select>
179+
/>
191180
</a-form-item>
192181

193182
<a-form-item :label="$t('cmdb.ciType.relationType')">
@@ -285,12 +274,14 @@ import { getCITypes } from '@/modules/cmdb/api/CIType'
285274
import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
286275
import { v4 as uuidv4 } from 'uuid'
287276
288-
import CMDBGrant from '../../components/cmdbGrant'
277+
import CMDBGrant from '@/modules/cmdb/components/cmdbGrant'
278+
import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
289279
290280
export default {
291281
name: 'RelationTable',
292282
components: {
293283
CMDBGrant,
284+
CMDBTypeSelectAntd
294285
},
295286
props: {
296287
CITypeId: {
@@ -513,13 +504,6 @@ export default {
513504
cmdbGrantType: 'type_relation',
514505
})
515506
},
516-
filterOption(input, option) {
517-
const inputValue = input.toLowerCase()
518-
const alias = option.componentOptions.children[0].text.toLowerCase()
519-
const name = option.componentOptions.children[1]?.elm?.innerHTML?.toLowerCase?.() ?? ''
520-
521-
return alias.indexOf(inputValue) >= 0 || name.indexOf(inputValue) >= 0
522-
},
523507
rowClass({ row }) {
524508
if (row.isDivider) return 'relation-table-divider'
525509
if (row.isParent) return 'relation-table-parent'
@@ -604,9 +588,11 @@ export default {
604588
this.modalAttrList.forEach((item) => {
605589
item.childAttrId = undefined
606590
})
607-
getCITypeAttributesById(value).then((res) => {
608-
this.modalChildAttributes = res?.attributes ?? []
609-
})
591+
if (value) {
592+
getCITypeAttributesById(value).then((res) => {
593+
this.modalChildAttributes = res?.attributes ?? []
594+
})
595+
}
610596
},
611597
filterAttributes(attributes) {
612598
// filter password/json/is_list/longText/bool/reference

‎cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -51,31 +51,21 @@
5151
:label="$t('cmdb.ciType.ciType')"
5252
prop="type_ids"
5353
>
54-
<a-select
55-
show-search
56-
optionFilterProp="children"
57-
@change="changeCIType"
54+
<CMDBTypeSelectAntd
5855
v-model="form.type_ids"
59-
:placeholder="$t('cmdb.ciType.selectCIType')"
6056
mode="multiple"
61-
>
62-
<a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
63-
ci_type.alias || ci_type.name
64-
}}</a-select-option>
65-
</a-select>
57+
:CITypeGroup="CITypeGroup"
58+
:placeholder="$t('cmdb.ciType.selectCIType')"
59+
@change="changeCIType"
60+
/>
6661
</a-form-model-item>
6762
<a-form-model-item v-else :label="$t('cmdb.ciType.ciType')" prop="type_id">
68-
<a-select
69-
show-search
70-
optionFilterProp="children"
71-
@change="changeCIType"
63+
<CMDBTypeSelectAntd
7264
v-model="form.type_id"
65+
:CITypeGroup="CITypeGroup"
7366
:placeholder="$t('cmdb.ciType.selectCIType')"
74-
>
75-
<a-select-option v-for="ci_type in ci_types" :key="ci_type.id" :value="ci_type.id">{{
76-
ci_type.alias || ci_type.name
77-
}}</a-select-option>
78-
</a-select>
67+
@change="changeCIType"
68+
/>
7969
</a-form-model-item>
8070
<a-form-model-item
8171
:label="$t('cmdb.custom_dashboard.dimensions')"
@@ -309,17 +299,26 @@
309299
<script>
310300
import Chart from './chart.vue'
311301
import { dashboardCategory } from './constant'
312-
import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '../../api/customDashboard'
313-
import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '../../api/CITypeAttr'
314-
import { getRecursive_level2children } from '../../api/CITypeRelation'
315-
import { getLastLayout } from '../../utils/helper'
302+
import { postCustomDashboard, putCustomDashboard, postCustomDashboardPreview } from '@/modules/cmdb/api/customDashboard'
303+
import { getCITypeAttributesByTypeIds, getCITypeCommonAttributesByTypeIds } from '@/modules/cmdb/api/CITypeAttr'
304+
import { getRecursive_level2children } from '@/modules/cmdb/api/CITypeRelation'
305+
import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
306+
import { getLastLayout } from '@/modules/cmdb/utils/helper'
307+
316308
import FilterComp from '@/components/CMDBFilterComp'
317309
import ColorPicker from './colorPicker.vue'
318310
import ColorListPicker from './colorListPicker.vue'
311+
import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
319312
320313
export default {
321314
name: 'ChartForm',
322-
components: { Chart, FilterComp, ColorPicker, ColorListPicker },
315+
components: {
316+
Chart,
317+
FilterComp,
318+
ColorPicker,
319+
ColorListPicker,
320+
CMDBTypeSelectAntd
321+
},
323322
props: {
324323
ci_types: {
325324
type: Array,
@@ -365,6 +364,7 @@ export default {
365364
level2children: {},
366365
isShadow: false,
367366
changeCITypeRequestValue: null,
367+
CITypeGroup: []
368368
}
369369
},
370370
computed: {
@@ -484,13 +484,17 @@ export default {
484484
showIcon,
485485
tableCategory: ret === 'cis' ? 2 : 1,
486486
}
487+
this.getCITypeGroup()
487488
},
488489
handleclose() {
489490
this.attributes = []
490491
this.$refs.chartForm.clearValidate()
491492
this.isShowPreview = false
492493
this.visible = false
493494
},
495+
async getCITypeGroup() {
496+
this.CITypeGroup = await getCITypeGroupsConfig({ need_other: true })
497+
},
494498
changeCIType(value) {
495499
this.form.attr_ids = []
496500
this.commonAttributes = []

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

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,26 @@
1414
>
1515
<a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
1616
<a-form-item :label="$t('cmdb.ciType.sourceCIType')">
17-
<a-select
18-
showSearch
19-
name="source_ci_type_id"
17+
<CMDBTypeSelectAntd
2018
v-decorator="[
2119
'source_ci_type_id',
2220
{ rules: [{ required: true, message: $t('cmdb.ciType.sourceCITypeTips') }] },
2321
]"
22+
name="source_ci_type_id"
23+
:CITypeGroup="CITypeGroups"
2424
@change="handleSourceTypeChange"
25-
:filterOption="filterOption"
26-
>
27-
<a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayCITypes">
28-
{{ CIType.alias || CIType.name }}
29-
<span class="model-select-name">({{ CIType.name }})</span>
30-
</a-select-option>
31-
</a-select>
25+
/>
3226
</a-form-item>
3327
<a-form-item :label="$t('cmdb.ciType.dstCIType')">
34-
<a-select
35-
showSearch
28+
<CMDBTypeSelectAntd
29+
v-decorator="[
30+
'ci_type_id',
31+
{ rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] },
32+
]"
3633
name="ci_type_id"
37-
v-decorator="['ci_type_id', { rules: [{ required: true, message: $t('cmdb.ciType.dstCITypeTips') }] }]"
34+
:CITypeGroup="CITypeGroups"
3835
@change="handleTargetTypeChange"
39-
:filterOption="filterOption"
40-
>
41-
<a-select-option :value="CIType.id" :key="CIType.id" v-for="CIType in displayTargetCITypes">
42-
{{ CIType.alias || CIType.name }}
43-
<span class="model-select-name">({{ CIType.name }})</span>
44-
</a-select-option>
45-
</a-select>
36+
/>
4637
</a-form-item>
4738

4839
<a-form-item :label="$t('cmdb.ciType.relationType')">
@@ -127,18 +118,21 @@
127118
</template>
128119

129120
<script>
130-
import ModelRelationTable from './modules/modelRelationTable.vue'
131121
import { searchResourceType } from '@/modules/acl/api/resource'
132122
import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
133123
import { getCITypes } from '@/modules/cmdb/api/CIType'
134124
import { createRelation, deleteRelation, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
135125
import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
136126
import { v4 as uuidv4 } from 'uuid'
137127
128+
import ModelRelationTable from './modules/modelRelationTable.vue'
129+
import CMDBTypeSelectAntd from '@/modules/cmdb/components/cmdbTypeSelect/cmdbTypeSelectAntd'
130+
138131
export default {
139132
name: 'Index',
140133
components: {
141134
ModelRelationTable,
135+
CMDBTypeSelectAntd
142136
},
143137
data() {
144138
return {
@@ -362,9 +356,6 @@ export default {
362356
this.modalChildAttributes = res?.attributes ?? []
363357
})
364358
},
365-
filterOption(input, option) {
366-
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
367-
},
368359
filterAttributes(attributes) {
369360
// filter password/json/is_list/longText/bool/reference
370361
return attributes.filter((attr) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
@edit-closed="handleEditClose"
1616
@edit-actived="handleEditActived"
1717
>
18-
<vxe-column field="created_at" :title="$t('created_at')" sortable width="159px"></vxe-column>
18+
<vxe-column field="created_at" :title="$t('created_at')" sortable width="170"></vxe-column>
1919
<vxe-column field="parent.alias" :title="$t('cmdb.ciType.sourceCIType')"></vxe-column>
2020
<vxe-column
2121
field="relation_type_id"

0 commit comments

Comments
 (0)