Merge pull request #568 from veops/dev_ui_240628

dev_ui_240628

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)
       })

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

@@ -33,7 +33,7 @@
         >
           <template
             slot="children"
-            slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
+            slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect, itemSelectAll } }"
           >
             <a-tree
               v-if="direction === 'left'"
@@ -41,15 +41,15 @@
               checkable
               :checkedKeys="[...selectedKeys, ...targetKeys]"
               :treeData="treeData"
-              :checkStrictly="true"
+              :checkStrictly="false"
               @check="
                 (_, props) => {
-                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
+                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect, itemSelectAll);
                 }
               "
               @select="
                 (_, props) => {
-                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);
+                  onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect, itemSelectAll);
                 }
               "
             />
@@ -108,7 +108,6 @@ export default {
             key,
             title: child?.alias || child?.name || this.$t('other'),
             disabled,
-            checkable: true,
             children: []
           }
         })
@@ -118,8 +117,6 @@ export default {
           children,
           childrenKeys,
           disabled: children.every((item) => item.disabled),
-          checkable: false,
-          selectable: false
         }
       })
       console.log('treeData', newTreeData)
@@ -130,13 +127,40 @@ export default {
   },
   methods: {
     onChange(targetKeys, direction, moveKeys) {
-      this.targetKeys = targetKeys
+      const childKeys = []
+      const newTargetKeys = [...targetKeys]
+
+      if (direction === 'right') {
+        // 如果是选中父节点，添加时去除父节点，添加其子节点
+        this.treeData.forEach((item) => {
+          const parentIndex = newTargetKeys.findIndex((key) => item.key === key)
+          if (parentIndex !== -1) {
+            newTargetKeys.splice(parentIndex, 1)
+            childKeys.push(...item.childrenKeys)
+          }
+        })
+      }
+
+      const uniqTargetKeys = _.uniq([...newTargetKeys, ...childKeys])
+      this.targetKeys = uniqTargetKeys
     },
-    onChecked(_, e, checkedKeys, itemSelect) {
+    onChecked(_, e, checkedKeys, itemSelect, itemSelectAll) {
       const { eventKey } = e.node
       const selected = checkedKeys.indexOf(eventKey) === -1
+      const childrenKeys = this.treeData.find((item) => item.key === eventKey)?.childrenKeys || []
 
-      itemSelect(eventKey, selected)
+      // 如果当前点击是子节点，处理其联动父节点
+      this.treeData.forEach((item) => {
+        if (item.childrenKeys.includes(eventKey)) {
+          if (selected && item.childrenKeys.every((childKey) => [eventKey, ...checkedKeys].includes(childKey))) {
+            itemSelect(item.key, true)
+          } else if (!selected) {
+            itemSelect(item.key, false)
+          }
+        }
+      })
+
+      itemSelectAll([eventKey, ...childrenKeys], selected)
     },
     handleCancel() {
       this.$emit('cancel')
@@ -187,14 +211,26 @@ export default {
 
 <style lang="less" scoped>
 .model-export-transfer {
-  /deep/ .ant-transfer-list-body {
+  /deep/ .ant-transfer-list {
+    .ant-transfer-list-body {
       overflow: auto;
     }
 
-  /deep/ .ant-transfer-list-header-title {
+    &:first-child {
+      .ant-transfer-list-header {
+        .ant-transfer-list-header-selected {
+          span:first-child {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .ant-transfer-list-header-title {
       color: @primary-color;
       font-weight: 400;
       font-size: 12px;
     }
+  }
 }
 </style>