From 081f35816f4d68ddb5d6c436a6204f08c7f9a628 Mon Sep 17 00:00:00 2001 From: LH_R Date: Fri, 20 Jun 2025 16:27:51 +0800 Subject: [PATCH] feat(ui): ci relation table - add upstream and downstream grouping --- cmdb-ui/src/modules/cmdb/lang/en.js | 4 +- cmdb-ui/src/modules/cmdb/lang/zh.js | 4 +- .../ciDetailComponent/ciRelationTable.vue | 185 ++++++++++++------ 3 files changed, 130 insertions(+), 63 deletions(-) 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 {