fix(ui): load ci type error

cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue

@@ -252,6 +252,8 @@ export default {
 
           cursor: pointer;
           position: relative;
+          min-width: 100px;
+          text-align: center;
 
           &:hover {
             background-color: @layout-sidebar-selected-color;

cmdb-ui/src/modules/cmdb/views/ci_types/attributesTable.vue

@@ -645,7 +645,7 @@ export default {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: flex-start;
     min-height: 20px;
     > i {
       width: 182px;

cmdb-ui/src/modules/cmdb/views/ci_types/ciTypedetail.vue

@@ -14,17 +14,18 @@
         <TriggerTable ref="triggerTable" :CITypeId="CITypeId"></TriggerTable>
       </a-tab-pane>
       <a-tab-pane key="6" :tab="$t('cmdb.ciType.grant')">
-        <template v-if="activeKey === '6'">
+        <div class="grant-config-wrap" :style="{ maxHeight: `${windowHeight - 150}px` }" v-if="activeKey === '6'">
           <GrantComp :CITypeId="CITypeId" resourceType="CIType" :resourceTypeName="CITypeName"></GrantComp>
           <div class="citype-detail-title">{{ $t('cmdb.components.relationGrant') }}</div>
           <RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
-        </template>
+        </div>
       </a-tab-pane>
     </a-tabs>
   </a-card>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import AttributesTable from './attributesTable'
 import RelationTable from './relationTable'
 import TriggerTable from './triggerTable.vue'
@@ -57,6 +58,11 @@ export default {
   },
   beforeCreate() {},
   mounted() {},
+  computed: {
+    ...mapState({
+      windowHeight: (state) => state.windowHeight,
+    }),
+  },
   methods: {
     changeTab(activeKey) {
       this.activeKey = activeKey
@@ -81,4 +87,7 @@ export default {
   margin-left: 20px;
   margin-bottom: 10px;
 }
+.grant-config-wrap {
+  overflow: auto;
+}
 </style>

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

@@ -586,7 +586,7 @@ export default {
     searchResourceType({ page_size: 9999, app_id: 'cmdb' }).then((res) => {
       this.resource_type = { groups: res.groups, id2perms: res.id2perms }
     })
-    this.loadCITypes(!_currentId)
+    this.loadCITypes(!_currentId, true)
     this.getAttributes()
   },
   methods: {
@@ -598,7 +598,7 @@ export default {
     handleSearch(e) {
       this.searchValue = e.target.value
     },
-    async loadCITypes(isResetCurrentId = false) {
+    async loadCITypes(isResetCurrentId = false, isInit = false) {
       const groups = await getCITypeGroupsConfig({ need_other: true })
       let alreadyReset = false
       if (isResetCurrentId) {
@@ -618,6 +618,21 @@ export default {
             g.ci_types = []
           }
         })
+
+        if (isInit) {
+          const isMatch = groups.some((g) => {
+            const matchGroup = `${g?.id}%null%null` === this.currentId
+            const matchCITypes = g?.ci_types?.some((item) => `${g?.id}%${item?.id}%${item?.name}` === this.currentId)
+            return matchGroup || matchCITypes
+          })
+
+          if (!isMatch) {
+            if (groups?.[0]?.ci_types?.[0]?.id) {
+              this.currentId = `${groups[0].id}%${groups[0].ci_types[0].id}%${groups[0].ci_types[0].name}`
+            }
+          }
+        }
+
         this.CITypeGroups = groups
         localStorage.setItem('ops_cityps_currentId', this.currentId)
       })