feat(ui): ipam - address table add view relation

cmdb-ui/src/modules/cmdb/views/ipam/modules/address/index.vue

@@ -115,6 +115,7 @@
           :referenceShowAttrNameMap="referenceShowAttrNameMap"
           :referenceCIIdMap="referenceCIIdMap"
           :columnWidth="columnWidth"
+          :addressCITypeId="addressCITypeId"
           @openAssign="openAssign"
           @recycle="handleRecycle"
           @selectChange="handleTableSelectChange"
@@ -182,6 +183,7 @@ export default {
       currentSelectScope: '',
       columns: [],
       attrList: [],
+      attributes: {},
       subnetData: {},
       referenceShowAttrNameMap: {},
       referenceCIIdMap: {},
@@ -212,6 +214,17 @@ export default {
       ],
     }
   },
+  provide() {
+    return {
+      handleSearch: this.getIPList,
+      attrList: () => {
+        return this.attrList
+      },
+      attributes: () => {
+        return this.attributes
+      }
+    }
+  },
   computed: {
     addressNullTip() {
       if (
@@ -314,8 +327,10 @@ export default {
 
     async getColumns() {
       const getAttrRes = await getCITypeAttributesById(this.addressCITypeId)
+      this.attributes = _.cloneDeep(getAttrRes)
+      this.attrList = _.cloneDeep(getAttrRes.attributes)
+
       const attrList = getAttrRes.attributes
-      this.attrList = _.cloneDeep(attrList)
 
       const filterAttrList = _.remove(attrList, (item) => {
         return ['ip', 'subnet_mask', 'assign_status', 'is_used', '_updated_by', '_updated_at'].includes(item.name)
@@ -489,9 +504,14 @@ export default {
       const totalWidth = Object.values(columnWidth).reduce((acc, cur) => acc + cur, 0)
 
       if (totalWidth < wrapWidth) {
-        this.columnWidth = {}
+        this.columnWidth = {
+          ip: 130
+        }
       } else {
-        this.columnWidth = columnWidth
+        this.columnWidth = {
+          ...columnWidth,
+          ip: 130
+        }
       }
     },
 

cmdb-ui/src/modules/cmdb/views/ipam/modules/address/tableIP.vue

@@ -111,6 +111,12 @@
             <a-tooltip v-else :title="$t('cmdb.ipam.assign')">
               <a @click="assignAddress(row)"><ops-icon type="monitor-add2" /></a>
             </a-tooltip>
+
+            <a-tooltip v-if="row._ip_status !== ADDRESS_STATUS.OFFLINE_UNASSIGNED" :title="$t('cmdb.ci.viewRelation')">
+              <a @click="openRelation(row)">
+                <a-icon type="retweet" />
+              </a>
+            </a-tooltip>
           </div>
         </template>
       </vxe-table-column>
@@ -141,6 +147,8 @@
         </template>
       </a-pagination>
     </div>
+
+    <CIDetailDrawer ref="detail" :typeId="addressCITypeId" />
   </div>
 </template>
 
@@ -149,8 +157,13 @@ import _ from 'lodash'
 import { mapState } from 'vuex'
 import { STATUS_COLOR, STATUS_LABEL, ADDRESS_STATUS } from './constants.js'
 
+import CIDetailDrawer from '@/modules/cmdb/views/ci/modules/ciDetailDrawer.vue'
+
 export default {
   name: 'TableIP',
+  components: {
+    CIDetailDrawer
+  },
   props: {
     columns: {
       type: Array,
@@ -171,6 +184,10 @@ export default {
     columnWidth: {
       type: Object,
       default: () => {}
+    },
+    addressCITypeId: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -284,6 +301,12 @@ export default {
       const ips = records?.map?.((item) => item.ip) || []
       this.$emit('selectChange', ips)
     },
+
+    openRelation(row) {
+      if (row._id) {
+        this.$refs.detail.create(row._id, 'tab_2', '2')
+      }
+    }
   }
 }
 </script>