From 71b9522a0f80ead8703991348dc84a9fe40323a4 Mon Sep 17 00:00:00 2001
From: pycook <pycook@126.com>
Date: Mon, 20 May 2024 14:06:49 +0800
Subject: [PATCH] feat(ui): Model configuration supports search models

---
 .../src/modules/cmdb/views/ci_types/index.vue | 41 +++++++++++++++++--
 .../modules/cmdb/views/preference/index.vue   | 14 +++++--
 2 files changed, 47 insertions(+), 8 deletions(-)

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;
+            }
           }
         }
       }