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 9e330f1..c680e1f 100644 --- a/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue +++ b/cmdb-ui/src/modules/cmdb/views/ci_types/index.vue @@ -1,5 +1,5 @@ <template> - <div class="ci-types-wrap" :style="{ height: `${windowHeight - 66}px` }"> + <div class="ci-types-wrap" :style="{ height: `${windowHeight - 96}px` }"> <div v-if="!CITypeGroups.length" class="ci-types-empty"> <a-empty :image="emptyImage" description=""></a-empty> <a-button icon="plus" size="small" type="primary" @click="handleClickAddGroup">{{ @@ -15,6 +15,13 @@ :triggerLength="18" > <template #one> + <a-input + :placeholder="$t('cmdb.preference.searchPlaceholder')" + class="cmdb-ci-types-left-input" + @pressEnter="handleSearch" + > + <a-icon slot="prefix" type="search" /> + </a-input> <div class="ci-types-left"> <div class="ci-types-left-title"> <a-button @@ -62,8 +69,8 @@ </a-dropdown> </a-space> </div> - <draggable class="ci-types-left-content" :list="CITypeGroups" @end="handleChangeGroups" filter=".undraggable"> - <div v-for="g in CITypeGroups" :key="g.id || g.name"> + <draggable class="ci-types-left-content" :list="computedCITypeGroups" @end="handleChangeGroups" filter=".undraggable"> + <div v-for="g in computedCITypeGroups" :key="g.id || g.name"> <div :class=" `${currentGId === g.id && !currentCId ? 'selected' : ''} ci-types-left-group ${ @@ -74,6 +81,7 @@ > <div> <OpsMoveIcon + v-if="g.id !== -1" style="width: 17px; height: 17px; display: none; position: absolute; left: -3px; top: 10px" /> <span style="font-weight: 700">{{ g.name || $t('other') }}</span> @@ -103,6 +111,7 @@ @start="start(g)" @end="end(g)" @add="add(g)" + filter=".undraggable" > <div v-for="ci in g.ci_types" @@ -110,8 +119,9 @@ :class="`${currentCId === ci.id ? 'selected' : ''} ci-types-left-detail`" @click="handleClickCIType(g.id, ci.id, ci.name)" > - <div> + <div :class="`${ g.id === -1 ? 'undraggable' : '' }`"> <OpsMoveIcon + v-if="g.id !== -1" style="width: 17px; height: 17px; display: none; position: absolute; left: -1px; top: 8px" /> <span class="ci-types-left-detail-icon"> @@ -464,6 +474,8 @@ export default { isInherit: false, unique_id: null, + + searchValue: '', } }, computed: { @@ -536,6 +548,16 @@ export default { } return _showIdSelectOptions }, + computedCITypeGroups() { + if (this.searchValue) { + const ciTypes = _.cloneDeep(this.CITypeGroups) + ciTypes.forEach((item) => { + item.ci_types = item.ci_types.filter((_item) => _item.alias.toLowerCase().includes(this.searchValue.toLowerCase())) + }) + return ciTypes + } + return this.CITypeGroups + }, }, provide() { return { @@ -565,6 +587,9 @@ export default { this.allTreeDepAndEmp = res }) }, + handleSearch(e) { + this.searchValue = e.target.value + }, async loadCITypes(isResetCurrentId = false) { const groups = await getCITypeGroupsConfig({ need_other: true }) let alreadyReset = false @@ -1021,6 +1046,14 @@ export default { top: 40%; transform: translate(-50%, -50%); } + /deep/.cmdb-ci-types-left-input { + input { + background-color: transparent; + } + .ant-input:focus { + box-shadow: none; + } + } .ci-types-left { width: 100%; overflow: auto; diff --git a/cmdb-ui/src/modules/cmdb/views/preference/index.vue b/cmdb-ui/src/modules/cmdb/views/preference/index.vue index 65e68d6..11b24ff 100644 --- a/cmdb-ui/src/modules/cmdb/views/preference/index.vue +++ b/cmdb-ui/src/modules/cmdb/views/preference/index.vue @@ -34,7 +34,7 @@ </div> <div class="cmdb-preference-group" v-for="(subType, index) in myPreferences" :key="subType.name"> <div class="cmdb-preference-group-title"> - <span> <ops-icon :style="{ marginRight: '10px' }" :type="subType.icon" />{{ subType.name }} </span> + <span> <ops-icon :style="{ marginRight: '10px' }" :type="subType.icon" />{{ subType.name }}</span> </div> <draggable class="ci-types-left-content" :list="subType.groups" @end="handleChangeGroups" filter=".undraggable"> <div v-for="group in subType.groups" :key="group.id || group.name"> @@ -44,8 +44,8 @@ " > <div v-if="index === 0 && subType.groups.length > 1" class="cmdb-preference-group-content"> - <OpsMoveIcon class="cmdb-preference-move-icon" v-if="group.name || index === 1"/> - <span style="font-weight: 500; color: #a5a9bc">{{ group.name || $t('other') }}</span> + <OpsMoveIcon class="cmdb-preference-move-icon" v-if="group.name"/> + <span style="font-weight: 500; color: #a5a9bc"><ellipsis :length="25" tooltip>{{ group.name || $t('other') }}</ellipsis></span> <span :style="{ color: '#c3cdd7' }">({{ group.ci_types.length }})</span> </div> </div> @@ -212,6 +212,7 @@ import store from '@/store' import { mapState } from 'vuex' import moment from 'moment' import draggable from 'vuedraggable' +import { Ellipsis } from '@/components' import { getCITypeGroups } from '../../api/ciTypeGroup' import { getPreference, @@ -227,7 +228,7 @@ import { ops_move_icon as OpsMoveIcon } from '@/core/icons' export default { name: 'Preference', - components: { CollapseTransition, SubscribeSetting, draggable, OpsMoveIcon }, + components: { CollapseTransition, SubscribeSetting, draggable, OpsMoveIcon, Ellipsis }, data() { return { citypeData: [], @@ -496,6 +497,11 @@ export default { .undraggable{ .cmdb-preference-group-content { cursor: default; + margin-left: 20px; + &:hover { + background: transparent; + box-shadow: none; + } } } }