diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
index ac46e80..e276967 100644
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -721,7 +721,9 @@ if __name__ == "__main__":
batchRollbacking: 'Deleting {total} items in total, {successNum} items successful, {errorNum} items failed',
baselineTips: 'Changes at this point in time will also be rollbacked, Unique ID, password and dynamic attributes do not support',
cover: 'Cover',
- detail: 'Detail'
+ detail: 'Detail',
+ upstream: 'Upstream',
+ downstream: 'Downstream'
},
serviceTree: {
remove: 'Remove',
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
index 114997d..e6df5a2 100644
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -720,7 +720,9 @@ if __name__ == "__main__":
batchRollbacking: '正在回滚，共{total}个，成功{successNum}个，失败{errorNum}个',
baselineTips: '该时间点的变更也会被回滚, 唯一标识、密码属性、动态属性不支持回滚',
cover: '覆盖',
- detail: '详情'
+ detail: '详情',
+ upstream: '上游',
+ downstream: '下游'
},
serviceTree: {
remove: '移除',
diff --git a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciRelationTable.vue b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciRelationTable.vue
index ef6015b..e12fdde 100644
--- a/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciRelationTable.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci/modules/ciDetailComponent/ciRelationTable.vue
@@ -5,29 +5,44 @@
-
-
- {{ item.name }}
-
-
- ({{ item.count }})
-
-
-
-
-
+ {{ group.name }}
+
+
+
+
+ {{ item.name }}
+
+
+ ({{ item.count }})
+
+
+
+
+
+
@@ -37,7 +52,7 @@
>
@@ -105,6 +120,9 @@ import { getSubscribeAttributes } from '@/modules/cmdb/api/preference'
import CIDetailTableTitle from './ciDetailTableTitle.vue'
import AddTableModal from '@/modules/cmdb/views/relation_views/modules/AddTableModal.vue'
+const PARENT_KEY = 'parents'
+const CHILDREN_KEY = 'children'
+
export default {
name: 'CIRelationTable',
components: {
@@ -151,24 +169,26 @@ export default {
},
computed: {
+ tabListFlat() {
+ return this.tabList.reduce((list, group) => list.concat(group.list), [])
+ },
tableIDList() {
- let baseIDs = []
+ const baseKeys = this.currentTab === 'all'
+ ? this.tabListFlat.filter(item => item.value !== 'all').map(item => item.key)
+ : [this.currentTab]
- switch (this.currentTab) {
- case 'all':
- baseIDs = this.tabList.filter((item) => item.value !== 'all').map((item) => item.value)
- break
- default:
- baseIDs = [this.currentTab]
- break
- }
+ return baseKeys.filter((key) => this.allCIList?.[key]?.length).map((key) => {
+ const findTab = this.tabListFlat.find((item) => item.key === key) || {}
- return baseIDs.filter((id) => this.allCIList?.[id]?.length).map((id) => {
- const findTab = this.tabList.find((item) => item.value === id) || {}
+ let name = findTab?.name || ''
+ if (name && findTab?.value === this.ci._type) {
+ name = `${findTab?.isParent ? this.$t('cmdb.ci.upstream') : this.$t('cmdb.ci.downstream')} - ${name}`
+ }
return {
- id,
- name: findTab?.name || '',
+ key,
+ value: findTab?.value || '',
+ name,
count: findTab?.count || ''
}
})
@@ -234,25 +254,48 @@ export default {
...childCIs
}
- const tabList = this.allCITypes.map((item) => {
- return {
- name: item?.alias ?? item?.name ?? '',
- value: item.id,
- count: this.allCIList?.[item.id]?.length || 0,
- showAdd: this.allCanEdit?.[item.id] ?? false
- }
- })
- tabList.unshift({
- name: this.$t('all'),
- value: 'all',
- count: Object.values(this.allCIList).reduce((acc, cur) => acc + (cur?.length || 0), 0),
- showAdd: false
- })
+ const tabList = []
+
+ tabList[0] = {
+ name: '',
+ key: 'all',
+ list: [{
+ name: this.$t('all'),
+ key: 'all',
+ value: 'all',
+ count: Object.values(this.allCIList).reduce((acc, cur) => acc + (cur?.length || 0), 0),
+ showAdd: false
+ }]
+ }
+ tabList[1] = {
+ name: this.$t('cmdb.ci.upstream'),
+ key: PARENT_KEY,
+ list: this.buildTabList(cloneRelationData.parentCITypeList, PARENT_KEY, true)
+ }
+ tabList[2] = {
+ name: this.$t('cmdb.ci.downstream'),
+ key: CHILDREN_KEY,
+ list: this.buildTabList(cloneRelationData.childCITypeList, CHILDREN_KEY, false)
+ }
this.tabList = tabList
this.handleReferenceCINameMap()
},
+ buildTabList(list, keyPrefix, isParent) {
+ return list.map((item) => {
+ const key = `${keyPrefix}-${item.id}`
+ return {
+ name: item?.alias ?? item?.name ?? '',
+ key,
+ isParent,
+ value: item.id,
+ count: this.allCIList?.[key]?.length || 0,
+ showAdd: this.allCanEdit?.[item.id] ?? false
+ }
+ })
+ },
+
handleCITypeList(list, isParent) {
const CIColumns = {}
const CIJSONAttr = {}
@@ -365,11 +408,12 @@ export default {
})
this.formatCI(item)
item.isParent = isParent
+ const CIKey = `${isParent ? PARENT_KEY : CHILDREN_KEY}-${item._type}`
- if (item._type in cis) {
- cis[item._type].push(item)
+ if (CIKey in cis) {
+ cis[CIKey].push(item)
} else {
- cis[item._type] = [item]
+ cis[CIKey] = [item]
}
})
@@ -398,9 +442,11 @@ export default {
async handleReferenceCINameMap() {
const referenceCINameMap = {}
this.allCITypes.forEach((CIType) => {
+ const CIKey = `${CIType.isParent ? PARENT_KEY : CHILDREN_KEY}-${CIType.id}`
+
CIType.attributes.forEach((attr) => {
if (attr?.is_reference && attr?.reference_type_id) {
- const currentCIList = this.allCIList[CIType.id]
+ const currentCIList = this.allCIList[CIKey]
if (currentCIList?.length) {
currentCIList.forEach((ci) => {
const ids = Array.isArray(ci[attr.name]) ? ci[attr.name] : ci[attr.name] ? [ci[attr.name]] : []
@@ -461,8 +507,8 @@ export default {
return this.referenceCINameMap?.[typeId]?.[id] || id
},
- clickTab(value) {
- this.currentTab = value
+ clickTab(key) {
+ this.currentTab = key
},
deleteRelation(row) {
@@ -486,7 +532,7 @@ export default {
},
this.ciId,
ciType,
- ciType?.isParent ? 'parents' : 'children'
+ tabData?.isParent ? 'parents' : 'children'
)
},
@@ -512,12 +558,26 @@ export default {
&-tab {
flex-shrink: 0;
width: 160px;
- max-height: 300px;
+ min-height: 300px;
+ max-height: 600px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0px;
border-right: solid 1px #E4E7ED;
+ .tab-group {
+ width: 100%;
+
+ &-name {
+ padding-left: 8px;
+ height: 32px;
+ line-height: 32px;
+ width: 100%;
+ font-weight: 600;
+ color: rgba(0, 0, 0, .45);
+ }
+ }
+
.tab-item {
height: 32px;
width: 100%;
@@ -586,6 +646,9 @@ export default {
padding: 15px 17px;
overflow: hidden;
min-height: 300px;
+ max-height: 600px;
+ overflow-y: auto;
+ overflow-x: hidden;
}
&-item {