模型关联 展示反向关系

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