feat:ipam 二级菜单列表页面

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -60,6 +60,8 @@
         <asset-tab v-if="(from === fromRoute.model) && targetTab === 'asset'" :tabs="tabs.model" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList" :targetTab.sync="targetTab"></asset-tab>
         <!-- agent 下滑-->
         <scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'agent'" :from="from" :obj="obj" :tabs="tabs.agent" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
+        <!-- ipam -->
+        <ip-details v-if="from === fromRoute.ipam && targetTab === 'ipam'" :from="from" :obj="obj" :tabs="tabs.ipam" @changeTab="changeTab" :targetTab.sync="targetTab"></ip-details>
       </div>
     </div>
   </div>
@@ -84,6 +86,7 @@ import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
+import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 
 export default {
   name: 'bottomBox',
@@ -104,7 +107,8 @@ export default {
     panelTabNew,
     assetTab,
     assetSubTab,
-    alertRuleEvalLog
+    alertRuleEvalLog,
+    IpDetails
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -246,6 +250,9 @@ export default {
         },
         agent: [
           { prop: 'agent', name: this.$t('config.agent.scrapeEndpoint'), active: true }
+        ],
+        ipam: [
+          { prop: 'ipam', name: this.$t('config.ipam.ipDetails'), active: true }
         ]
       }
     }

nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="scrape-endpoint">
+    <nz-bottom-data-list
+      :showTitle='showTitle'
+      :obj='obj'
+      :targetTab.sync="targetTab"
+      :api="url"
+      style="height: 100%"
+      :custom-table-title.sync="tools.customTableTitle"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg"
+      :tabs="tabs"
+      @search="search"
+      @changeTab="changeTab"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+        <ip-details-table
+          ref="dataTable"
+          :api="url"
+          :orderByFa="'id'"
+          v-loading="tools.loading"
+          :loading="tools.loading"
+          :custom-table-title="tools.customTableTitle"
+          :height="subTableHeight"
+          :table-data="tableData"
+          :assetTab="true"
+          @del="del"
+          @edit="edit"
+          @addSilence="addSilence"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></ip-details-table>
+      </template>
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-bottom-data-list>
+  </div>
+</template>
+
+<script>
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
+import ipDetailsTable from '@/components/common/table/settings/ipDetailsTable'
+export default {
+  name: 'IpDetails',
+  mixins: [dataListMixin, subDataListMixin, detailViewRightMixin],
+  components: {
+    nzBottomDataList,
+    ipDetailsTable
+  },
+  data () {
+    return {
+      url: '/ipam/ip',
+      tableId: 'IpDetails', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          name: 'ID',
+          type: 'input',
+          label: 'ids',
+          disabled: false
+        }, {
+          name: this.$t('overall.name'),
+          type: 'input',
+          label: 'name',
+          disabled: false
+        }, {
+          name: 'IP',
+          type: 'input',
+          label: 'manageIp',
+          disabled: false
+        }, {
+          name: this.$t('asset.state'),
+          type: 'assetState',
+          label: 'stateIds',
+          id: 'stateIds',
+          readonly: true,
+          disabled: false
+        }]
+      }
+    }
+  },
+  methods: {
+    // 数据请求
+    getTableData (params) {
+      if (params && Object.keys(params).length > 0) {
+        for (const key in params) {
+          this.$set(this.searchLabel, key, params[key])
+        }
+      }
+      if (this.orderBy) {
+        this.$set(this.searchLabel, 'orderBy', this.orderBy)
+      } else {
+        delete this.searchLabel.orderBy
+      }
+      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
+      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
+      this.tools.loading = true
+      this.$get(this.url, { ...this.searchLabel }).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          this.tableData = response.data.list
+          this.pageObj.total = response.data.total
+          if (!this.scrollbarWrap && this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+            this.$nextTick(() => {
+              this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
+              this.toTopBtnHandler(this.scrollbarWrap)
+            })
+          }
+        }
+      })
+    }
+  },
+  obj: {
+    immediate: true,
+    deep: true,
+    handler (n, o) {
+      if (n) {
+        console.log(n)
+        this.getTableData()
+      }
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-table
+    id="modelTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+<!--        <span v-if="item.prop === 'dc'">{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>-->
+<!--        <span v-else-if="item.prop === 'CIDR'">-->
+<!--          <template>{{ scope.row.addr }} / {{scope.row.mask}}</template>-->
+<!--        </span>-->
+<!--        <span v-else-if="item.prop === 'type'">-->
+<!--          <template v-if="scope.row.type === 4">IPV4</template>-->
+<!--          <template v-else-if="scope.row.type === 6">IPV6</template>-->
+<!--        </span>-->
+        <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else>-</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" v-has="'ipam_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
+        <el-dropdown size="medium" trigger="click" v-has="['ipam_delete']" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <i class="nz-icon nz-icon-more3"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+    <template slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'ipDetailsTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: 'IP',
+          prop: 'ip',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        }, {
+          label: 'MAC',
+          prop: 'MAC',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.asset'),
+          prop: 'asset',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          minWidth: 200,
+          show: true
+        }
+      ]
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/ipamTable.vue

@@ -51,12 +51,13 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" v-has="'ipam_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
+        <button class="table-operation-item"  @click="showBottomBox('ipam', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" trigger="click" v-has="['ipam_edit', 'ipam_delete']" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'ipam_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'ipam_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'ipam_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>