gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 补充 IPAM 页面

Browse Source
This commit is contained in:
@changcode
2022-03-03 18:06:45 +08:00
parent cc4f5698ec
commit 82b3ee216c
7 changed files with 117 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss Normal file
View File

@@ -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;
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -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';

14
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -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',
name: 'Data center',
type: 'input',
val: ''
val: '',
valnum: '',
listStr: 'dcSelect'
},
jsonKey: 'val'
jsonKey: 'valnum'
}
}
}

75
nezha-fronted/src/components/common/rightBox/ipamBox.vue
View File

@@ -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>
<el-form-item :label="$t('overall.addr')" prop="addr">
<el-input maxlength="256" rows="4" show-word-limit placeholder="" v-model="editipam.addr" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('overall.mask')" prop="mask">
<el-input maxlength="256" rows="4" show-word-limit placeholder="" v-model="editipam.mask" size="small"></el-input>
</el-form-item>
<div class="cidr-title">CIDR</div>
<div class="cidr">
<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 prop="mask">
<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) {

2
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -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') {

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

@@ -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>
<el-dropdown size="medium" trigger="click" @command="tableOperation">
<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_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 :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="['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>
</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
}

19
nezha-fronted/src/components/page/config/ipam.vue
View File

@@ -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',
export: 'asset_edit'
import: 'ipam_add',
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',
label: 'dcId',
type: 'dc',
label: 'dcIds',
disabled: false
}
]