feat: 补充 IPAM 页面

nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss

@@ -0,0 +1,26 @@
+.right-box-ipam {
+  .cidr {
+    display: flex;
+  }
+  .cidr-title {
+    float: none;
+    text-align: left;
+    color: $--color-text-regular;
+    padding: 0 0 6px 0;
+    font-size: 14px;
+  }
+  .cidr-title::before {
+    content: '*';
+    color: #EC7F66;
+    margin-right: 4px;
+  }
+  .cidr-addr.el-form-item.is-required {
+    flex: 3;
+    margin-right: 5px;
+  }
+}
+.el-select-dropdown.right-box__select-width .el-select-dropdown__item {
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  width: 199px;
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -44,6 +44,7 @@
 @import './common/rightBox/locationCascader.scss';
 @import './common/rightBox/menuBox.scss';
 @import './common/rightBox/moduleBox.scss';
+@import './common/rightBox/ipam.scss';
 @import './common/rightBox/chartRightBox/chartRightBox.scss';
 @import './common/rightBox/mibBox.scss';
 @import './common/rightBox/assetBactchEditBox.scss';

nezha-fronted/src/components/common/mixin/dataList.js

@@ -948,15 +948,17 @@ export default {
           target: this.searchLabel,
           isSearchInput: true,
           propertyName: 'dc',
-          type: 'string',
+          type: 'number',
           defaultJson: {
+            name: 'Date center',
+            type: 'dc',
+            label: 'dcIds',
             disabled: false,
-            label: 'dcId',
+            val: '',
-            name: 'Data center',
+            valnum: '',
-            type: 'input',
+            listStr: 'dcSelect'
-            val: ''
           },
-          jsonKey: 'val'
+          jsonKey: 'valnum'
         }
       }
     }

nezha-fronted/src/components/common/rightBox/ipamBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-mib" v-clickoutside="{obj:editipam,func:clickOutside}" >
+  <div class="right-box right-box-ipam" v-clickoutside="{obj:editipam,func:clickOutside}" >
     <!-- begin--标题-->
     <div class="right-box__header">
       <div class="header__title">{{editipam.id ? ($t("overall.ipam.edit")) : $t("overall.ipam.create")}}</div>
@@ -21,24 +21,41 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       @change="validValueType"
+                       :disabled="!!editipam.id"
+                       popper-class="right-box-select-top prevent-clickoutside"
                        size="small">
               <template v-for="item in typeList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
               </template>
             </el-select>
           </el-form-item>
-          <div class="form__sub-title">CIDR</div>
+          <div class="cidr-title">CIDR</div>
-          <el-form-item :label="$t('overall.addr')" prop="addr">
+          <div class="cidr">
-            <el-input maxlength="256" rows="4" show-word-limit placeholder="" v-model="editipam.addr" size="small"></el-input>
+            <el-form-item class="cidr-addr" prop="addr">
+              <el-input maxlength="256" rows="4" show-word-limit placeholder="address" v-model="editipam.addr" size="small"></el-input>
             </el-form-item>
-          <el-form-item :label="$t('overall.mask')" prop="mask">
+            <el-form-item prop="mask">
-            <el-input maxlength="256" rows="4" show-word-limit placeholder="" v-model="editipam.mask" size="small"></el-input>
+              <el-select id="account-input-language"
+                         class="right-box__select"
+                         v-model="editipam.mask"
+                         clearable
+                         collapse-tags
+                         placeholder="mask"
+                         popper-class="right-box-select-top right-box__select-width prevent-clickoutside"
+                         size="small">
+                <template v-for="(item, index) in maskList">
+                  <el-option :key="item" :label="item" :value="item" :title="'/'+item+'\('+2 ** index+'\)'">
+                    <span>/{{item}}({{2 ** index}})</span>
+                  </el-option>
+                </template>
+              </el-select>
             </el-form-item>
+          </div>
           <el-form-item :label="$t('overall.vlan')" prop="vlan">
             <el-input maxlength="256" rows="4" show-word-limit placeholder="" v-model="editipam.vlan" size="small"></el-input>
           </el-form-item>
-          <el-form-item :label="$t('overall.dc')" prop="dc">
+          <el-form-item :label="$t('overall.dc')" prop="dc.name">
             <div class="right-box-form-content">
               <el-select id="prom-box-input-dc" v-model="editipam.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
                 <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
@@ -83,6 +100,7 @@ export default {
         { label: 'IPV4', value: 4 },
         { label: 'IPV6', value: 6 }
       ],
+      maskList: [],
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -96,7 +114,7 @@ export default {
         mask: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-        dc: [
+        'dc.name': [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       },
@@ -149,6 +167,24 @@ export default {
           this.dcData = response.data.list
         }
       })
+    },
+    validValueType (e) {
+      const mask = []
+      let maskArray = []
+      if (e === 4) {
+        for (let i = 1; i <= 32; i++) {
+          mask.push(i)
+        }
+        maskArray = Array.from(new Set(mask))
+        maskArray.sort(function (a, b) { return b - a })
+      } else if (e === 6) {
+        for (let i = 1; i <= 128; i++) {
+          mask.push(i)
+        }
+        maskArray = Array.from(new Set(mask))
+        maskArray.sort(function (a, b) { return b - a })
+      }
+      this.maskList = maskArray
     }
   },
   mounted () {
@@ -161,6 +197,23 @@ export default {
       handler (n, o) {
         this.isEdit = true
         this.editipam = JSON.parse(JSON.stringify(n))
+        const mask = []
+        let maskArray = []
+        if (this.editipam.type === 4) {
+          for (let i = 1; i <= 32; i++) {
+            mask.push(i)
+          }
+          maskArray = Array.from(new Set(mask))
+          maskArray.sort(function (a, b) { return b - a })
+          this.maskList = maskArray
+        } else if (this.editipam.type === 6) {
+          for (let i = 1; i <= 128; i++) {
+            mask.push(i)
+          }
+          maskArray = Array.from(new Set(mask))
+          maskArray.sort(function (a, b) { return b - a })
+        }
+        this.maskList = maskArray
       }
     },
     'editipam.dc': function (n, o) {

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

@@ -1466,7 +1466,7 @@ export default {
       if (this.$route.path === '/asset' || this.targetTab === 'asset') {
         this.getAssetStateData()
       }
-      if (this.$route.path === '/agent') {
+      if (this.$route.path === '/agent' || this.$route.path === '/ipam') {
         this.getDcData()
       }
       if (this.$route.path === '/model') {

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

@@ -51,15 +51,15 @@
       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"  @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
+        <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" @command="tableOperation">
+        <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 :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_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 :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_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 :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</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>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -134,10 +134,14 @@ export default {
   methods: {
     tableDataSort (item) {
       let orderBy = ''
-      const str = item.prop
+      let str = item.prop
       if (str === 'dc') {
         orderBy = str
       }
+      if (str === 'CIDR') {
+        str = 'addr'
+        orderBy = str
+      }
       if (item.order === 'ascending') {
         orderBy = str
       }

nezha-fronted/src/components/page/config/ipam.vue

@@ -10,7 +10,7 @@
       @search="search"
     >
       <template v-slot:top-tool-right>
-        <button id="account-add" :title="$t('overall.createipam')" class="top-tool-btn margin-r-10"
+        <button id="account-add" v-has="'ipam_add'" :title="$t('overall.createipam')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -20,8 +20,8 @@
           id="ipam"
           :params="searchLabel"
           :permissions="{
-                  import: 'asset_add',
+                  import: 'ipam_add',
-                  export: 'asset_edit'
+                  export: 'ipam_edit'
                 }"
           class="top-tool-export margin-r-10"
           export-file-name="ipam"
@@ -32,7 +32,7 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button :type="'link'" :title="$t('overall.batchDel')" v-has="'ipam_delete'" id="account-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
               </el-dropdown-item>
             </div>
           </template>
@@ -90,7 +90,7 @@ export default {
         name: '',
         type: 4,
         addr: '',
-        mask: '',
+        mask: '24',
         vlan: '',
         remark: '',
         dc: { id: '', name: '' }
@@ -119,11 +119,6 @@ export default {
             type: 'input',
             label: 'addr',
             disabled: false
-          }, {
-            name: this.$t('overall.mask'),
-            type: 'input',
-            label: 'mask',
-            disabled: false
           }, {
             name: this.$t('overall.vlan'),
             type: 'input',
@@ -131,8 +126,8 @@ export default {
             disabled: false
           }, {
             name: this.$t('overall.dc'),
-            type: 'input',
+            type: 'dc',
-            label: 'dcId',
+            label: 'dcIds',
             disabled: false
           }
         ]