feat(ui): Resources and Preference support grouping

cmdb-ui/src/components/Menu/menu.js

@@ -182,8 +182,8 @@ export default {
           <tag {...{ props, attrs }}>
             {this.renderIcon({ icon: menu.meta.icon, customIcon: menu.meta.customIcon, name: menu.meta.name, typeId: menu.meta.typeId, routeName: menu.name, selectedIcon: menu.meta.selectedIcon, })}
             <span>
-              <span class={this.renderI18n(menu.meta.title).length > 10 ? 'scroll' : ''}>{this.renderI18n(menu.meta.title)}</span>
-              {isShowDot &&
+              <span style={menu.meta.style} class={this.renderI18n(menu.meta.title).length > 10 ? 'scroll' : ''}>{this.renderI18n(menu.meta.title)}</span>
+              {isShowDot && !menu.meta.disabled &&
                 <a-popover
                   overlayClassName="custom-menu-extra-submenu"
                   placement="rightTop"

cmdb-ui/src/components/tools/TopMenu.vue

@@ -81,7 +81,7 @@ export default {
         if (route.name === 'cmdb') {
           const preference = await getPreference()
           const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
-          if (lastTypeId && preference.some((item) => item.id === Number(lastTypeId))) {
+          if (lastTypeId && preference.type_ids.some((item) => item === Number(lastTypeId))) {
             this.$router.push(`/cmdb/instances/types/${lastTypeId}`)
           } else {
             this.$router.push('/cmdb/dashboard')

cmdb-ui/src/modules/cmdb/router/index.js

@@ -144,7 +144,15 @@ const genCmdbRoutes = async () => {
   // Dynamically add subscription items and business relationships
   const [preference, relation] = await Promise.all([getPreference(), getRelationView()])
 
-  preference.forEach(item => {
+  preference.group_types.forEach(group => {
+    if (preference.group_types.length > 1) {
+      routes.children[2].children.push({
+        path: `/cmdb/instances/types/group${group.id}`,
+        name: `cmdb_instances_group_${group.id}`,
+        meta: { title: group.name || 'other', disabled: true, style: 'margin-left: 12px' },
+      })
+    }
+    group.ci_types.forEach(item => {
       routes.children[2].children.push({
         path: `/cmdb/instances/types/${item.id}`,
         component: () => import(`../views/ci/index`),
@@ -153,8 +161,9 @@ const genCmdbRoutes = async () => {
         // hideChildrenInMenu: true // Force display of MenuItem instead of SubMenu
       })
     })
+  })
   const lastTypeId = window.localStorage.getItem('ops_ci_typeid') || undefined
-  if (lastTypeId && preference.some(item => item.id === Number(lastTypeId))) {
+  if (lastTypeId && preference.type_ids.some(item => item === Number(lastTypeId))) {
     routes.redirect = `/cmdb/instances/types/${lastTypeId}`
   } else if (routes.children[2]?.children?.length > 0) {
     routes.redirect = routes.children[2].children.find(item => !item.hidden)?.path

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

@@ -32,16 +32,29 @@
             }"
           /></span>
       </div>
-      <div class="cmdb-preference-group" v-for="(group, index) in myPreferences" :key="group.name">
+      <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="group.icon" />{{ group.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">
+            <div
+              :class="
+                `${group.id === undefined ? 'undraggable' : ''}`
+              "
+            >
+              <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>
+                <span :style="{ color: '#c3cdd7' }">({{ group.ci_types.length }})</span>
+              </div>
             </div>
             <draggable
               v-model="group.ci_types"
               :animation="300"
               @change="
                 (e) => {
-              orderChange(e, group)
+                  orderChange(e, group, index === 1)
                 }
               "
             >
@@ -91,6 +104,8 @@
               </div>
             </draggable>
           </div>
+        </draggable>
+      </div>
     </div>
     <div class="cmdb-preference-right">
       <a-input-search
@@ -261,7 +276,7 @@ export default {
       ciTypeGroup.forEach((group) => {
         if (group.ci_types && group.ci_types.length) {
           group.ci_types.forEach((type) => {
-            const idx = pref.findIndex((p) => p.id === type.id)
+            const idx = pref.type_ids.findIndex((p) => p === type.id)
             if (idx > -1) {
               type.is_subscribed = true
             }
@@ -283,19 +298,18 @@ export default {
       const _myPreferences = [
         {
           name: this.$t('cmdb.menu.ciTable'),
-          ci_types: self.instance.map((item) => {
-            const _find = pref.find((ci) => ci.id === item)
-            return _find
-          }),
+          groups: pref.group_types,
           icon: 'cmdb-ci',
           type: 'ci',
         },
         {
           name: this.$t('cmdb.menu.ciTree'),
-          ci_types: self.tree.map((item) => {
-            const _find = pref.find((ci) => ci.id === item)
-            return _find
-          }),
+          groups: [
+            {
+              ci_types: pref.tree_types,
+              name: null,
+            }
+          ],
           icon: 'cmdb-tree',
           type: 'tree',
         },
@@ -377,10 +391,41 @@ export default {
         this.expandKeys.push(group.id)
       }
     },
-    orderChange(e, group) {
-      preferenceCitypeOrder({ type_ids: group.ci_types.map((type) => type.id), is_tree: group.type !== 'ci' })
+    async handleChangeGroups() {
+      const typeIds = []
+      this.myPreferences[0].groups.forEach(groupTypes => {
+        groupTypes.ci_types.forEach(ciType => {
+          typeIds.push(ciType.id)
+        })
+      })
+      preferenceCitypeOrder({ type_ids: typeIds, is_tree: false })
         .then(() => {
-          if (group.type === 'ci') {
+          this.resetRoute()
+        })
+        .catch(() => {
+          this.getCITypes(false)
+        })
+    },
+    orderChange(e, group, isTree) {
+      let typeIds = []
+      if (!isTree) {
+        this.myPreferences[0].groups.forEach(groupTypes => {
+          if (group.id === groupTypes.id) {
+            group.ci_types.forEach(ciType => {
+              typeIds.push(ciType.id)
+            })
+          } else {
+            groupTypes.ci_types.forEach(ciType => {
+              typeIds.push(ciType.id)
+            })
+          }
+        })
+      } else {
+        typeIds = group.ci_types.map(item => item.id)
+      }
+      preferenceCitypeOrder({ type_ids: typeIds, is_tree: isTree })
+        .then(() => {
+          if (!isTree) {
             this.resetRoute()
           }
         })
@@ -442,6 +487,18 @@ export default {
       margin-bottom: 20px;
     }
     .cmdb-preference-group {
+      .ci-types-left-content {
+        max-height: calc(100% - 45px);
+        overflow: hidden;
+        &:hover {
+          overflow: auto;
+        }
+        .undraggable{
+          .cmdb-preference-group-content {
+            cursor: default;
+          }
+        }
+      }
       .cmdb-preference-group-title {
         text-align: center;
         margin-bottom: 5px;