diff --git a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue index b655bc6..c2016be 100644 --- a/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue +++ b/cmdb-ui/src/modules/cmdb/views/ci_types/relationTable.vue @@ -18,18 +18,30 @@ keep-source :max-height="windowHeight - 180" class="ops-stripe-table" + :row-class-name="rowClass" > <vxe-column field="source_ci_type_name" title="源模型英文名"></vxe-column> - <vxe-column field="relation_type" title="关联类型"></vxe-column> + <vxe-column field="relation_type" title="关联类型"> + <template #default="{row}"> + <span style="color:#2f54eb" v-if="row.isParent">被</span> + {{ row.relation_type }} + </template> + </vxe-column> <vxe-column field="alias" title="目标模型名"></vxe-column> <vxe-column field="constraint" title="关系约束"> <template #default="{row}"> - <span>{{ constraintMap[row.constraint] }}</span> + <span v-if="row.isParent && constraintMap[row.constraint]">{{ + constraintMap[row.constraint] + .split('') + .reverse() + .join('') + }}</span> + <span v-else>{{ constraintMap[row.constraint] }}</span> </template> </vxe-column> <vxe-column field="operation" title="操作" width="100"> <template #default="{row}"> - <a-space> + <a-space v-if="!row.isParent && row.source_ci_type_id"> <a @click="handleOpenGrant(row)"><a-icon type="user-add"/></a> <a-popconfirm title="确认删除?" @confirm="handleDelete(row)"> <a style="color: red;"><a-icon type="delete"/></a> @@ -37,6 +49,12 @@ </a-space> </template> </vxe-column> + <template #empty> + <div> + <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" /> + <div>暂无数据</div> + </div> + </template> </vxe-table> <a-modal :closable="false" @@ -95,7 +113,13 @@ </template> <script> -import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation' +import { + createRelation, + deleteRelation, + getCITypeChildren, + getCITypeParent, + getRelationTypes, +} from '@/modules/cmdb/api/CITypeRelation' import { getCITypes } from '@/modules/cmdb/api/CIType' import CMDBGrant from '../../components/cmdbGrant' @@ -127,6 +151,7 @@ export default { '2': '多对多', }, tableData: [], + parentTableData: [], } }, computed: { @@ -137,12 +162,25 @@ export default { return this.$store.state.windowHeight }, }, - mounted() { + async mounted() { this.getCITypes() this.getRelationTypes() + await this.getCITypeParent() this.getData() }, methods: { + async getCITypeParent() { + await getCITypeParent(this.CITypeId).then((res) => { + this.parentTableData = res.parents.map((item) => { + return { + ...item, + source_ci_type_name: this.CITypeName, + source_ci_type_id: this.CITypeId, + isParent: true, + } + }) + }) + }, getData() { getCITypeChildren(this.CITypeId).then((res) => { const data = res.children.map((obj) => { @@ -152,7 +190,11 @@ export default { source_ci_type_id: this.CITypeId, } }) - this.tableData = data + if (this.parentTableData && this.parentTableData.length) { + this.tableData = [...data, { isDivider: true }, ...this.parentTableData] + } else { + this.tableData = data + } }) }, getCITypes() { @@ -217,8 +259,25 @@ export default { filterOption(input, option) { return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 }, + rowClass({ row }) { + if (row.isDivider) return 'relation-table-divider' + if (row.isParent) return 'relation-table-parent' + }, }, } </script> -<style lang="less" scoped></style> +<style lang="less"> +.ops-stripe-table .vxe-body--row.row--stripe.relation-table-divider { + background-color: #b1b8d3 !important; +} +.ops-stripe-table .vxe-body--row.relation-table-parent { + background-color: #f5f8ff !important; +} +.relation-table-divider { + td { + height: 1px !important; + line-height: 1px !important; + } +} +</style>