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

NEZ-586 asset Type页面新增

Browse Source
This commit is contained in:
@changcode
2021-04-27 20:59:37 +08:00
parent ccdaea38ef
commit d364d8f76f
12 changed files with 499 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/components/common/js/constants.js
View File

@@ -79,6 +79,18 @@ export const asset = {
{ value: 2, label: i18n.t('asset.notInStock') },
{ value: 3, label: i18n.t('asset.suspended') }
],
assetType: {
authProtocolOptions: [
{ value: 0, label: '无' },
{ value: 1, label: 'SSH' },
{ value: 2, label: 'TELNET' }
],
authProtocolData: {
non: 0,
ssh: 1,
telnet: 2
},
},
authProtocolOptions: [
{ value: 1, label: 'SSH' },
{ value: 2, label: 'TELNET' }

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -950,6 +950,7 @@ const cn = {
}
},
assetType: {
name:'名称',
assetType: '资产类型',
parent: '父级',
pname: '父级',

7
nezha-fronted/src/components/common/language/en.js
View File

@@ -972,6 +972,12 @@ const en = {
},
assetType: {
assetType: 'Asset Type',
name:'Name',
vm:'VM',
vmh:'VMH',
authProtocol:'AuthProtocol',
snmpEnable: 'SnmpEnable',
createModel:'CreateModel',
parent: 'Parent',
pname: 'Parent name',
editAssetType: 'Edit asset type',
@@ -986,6 +992,7 @@ const en = {
editAssetState: 'Edit asset state'
},
assetLabel: {
addMeta:'addMeta',
example: 'Example',
assetLabel: 'Asset labels',
all: 'All',

198
nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div v-clickoutside="{obj: editAssetType, func: esc}" class="right-box right-box-asset">
<div class="right-box__header">
<div class="header__title">{{editAssetType.id ? $t('config.assetType.editAssetType') : $t('config.assetType.createModel')}}</div>
<div class="header__operation">
<span v-cancel="{obj: editAssetType, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="assetTypeForm" :model="editAssetType" :rules="rules" label-position="top" label-width="120px">
<!--name-->
<el-form-item :label="$t('config.assetType.name')" prop="name">
<el-input v-model="editAssetType.name" size="small" type="text"></el-input>
</el-form-item>
<!--vm-->
<el-form-item :label='$t("config.assetType.vm")' prop="vm">
<el-switch
v-model="editAssetType.vm"
active-color="#ee9d3f"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!--vmh-->
<el-form-item :label='$t("config.assetType.vmh")' prop="vmh">
<el-switch
v-model="editAssetType.vmh"
active-color="#ee9d3f"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!--authProtocol-->
<el-form-item :label='$t("config.assetType.authProtocol")' prop="authProtocol">
<el-select class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="请选择">
<el-option :key="option.value" v-for="option in assetConstants.assetType.authProtocolOptions" :value="option.value" :label="option.label"></el-option>
</el-select>
</el-form-item>
<!--snmpEnable-->
<el-form-item :label='$t("config.assetType.snmpEnable")' prop="snmpEnable">
<el-switch
v-model="editAssetType.snmpEnable"
active-color="#ee9d3f"
:active-value="1"
:inactive-value="0">
</el-switch>
</el-form-item>
<!-- ChartTemplate -->
<!-- <el-form-item :label="$t('config.type.ChartTemplate')" prop="ChartTemplate">
<v-selectpage
:data="chartlList"
:tb-columns="ChartSearchShowFields"
:max-select-limit="3"
:multiple="true"
title="ChartSearch"
placeholder="Please select item"
key-field="id"
v-model="editAssetType.chartIds"
show-field="name"
class="form-control"
@values="(data) => {editAssetType.chartIds = data.map(d => d.id).join(',')}"
></v-selectpage>
</el-form-item> -->
</el-form>
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{obj: editAssetType, func: esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import { asset as assetConstants} from '@/components/common/js/constants'
import selectWalk from '../../popBox/selectWalk'
export default {
name: 'assetTypeBox',
components: {
'select-walk': selectWalk,
},
props: {
obj: {
type: Object
}
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') == username
}
}
},
data () {
return {
assetConstants,
editAssetType: {},
editModule: {},
assetTypeList:[
{
id:'',
authProtocol:''
}
],
value:'',
url: 'asset/typeConf',
// brandUrl: 'asset/brand',
rightBox: { model: { show: false } },
roles: [],
rules: {
name: [
{ required: true, message: '必填', trigger: 'blur' }
],
brandId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
},
watch: {
obj: {
deep: true,
immediate: true,
handler (n) {
this.editAssetType = JSON.parse(JSON.stringify(n))
}
}
},
created () {
// this.getBrandList()
// this.ChartTemplateList()
this.assetType()
},
methods: {
clickOutside () {
this.esc(false)
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
save () {
this.$refs.assetTypeForm.validate((valid) => {
if (valid) {
if (this.editAssetType.id) {
console.log(this.editAssetType);
this.$put(this.url, this.editAssetType).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
} else {
this.$post(this.url, this.editAssetType).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
}
} else {
this.prevent_opt.save = false
return false
}
})
},
selectWalk (walk) {
console.log(walk);
if (this.editModule.walk.indexOf(walk) != -1) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1)
} else {
this.editModule.walk.push(walk)
}
},
assetType(){
this.$get('asset/typeConf').then(res => {
this.assetTypeList = res.data.list
console.log(this.assetTypeList);
})
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/rightBoxCommon.scss';
</style>

4
nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
View File

@@ -8,14 +8,14 @@
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="modelForm" :model="editModel" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
<el-form ref="modelForm" :model="editModel" :rules="rules" label-position="top" label-width="120px">
<!--name-->
<el-form-item :label="$t('config.model.name')" prop="name">
<el-input v-model="editModel.name" size="small" type="text"></el-input>
</el-form-item>
<!--brand-->
<el-form-item :label='$t("config.model.brand")' prop="brandId">
<el-select value-key="id" allow-create popper-class="config-dropdown" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
<el-select value-key="id" allow-create class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
<el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>

123
nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box-580">
<div class="right-box right-box-panel z-top" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
<div class="right-box right-box-asset" v-clickoutside="{obj:editAssetMeta,func:clickOutside}">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button"
@@ -12,33 +12,35 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editAssetMeta.id ? $t("config.assetMeta.editMeta") + " ID：" + editAssetMeta.id :
$t("config.assetMeta.addMeta")}}
<div class="right-box__header">
<div class="header__title">{{editAssetMeta.id ? $t("config.assetLabel.editMeta") + " ID：" + editAssetMeta.id :
$t("config.assetLabel.addMeta")}}</div>
</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form-box">
<div class="right-box__container">
<el-form class="right-box-form right-box-form-left" label-width="120px" :model="editAssetMeta" label-position = "top" ref="editAssetMetaForm" :rules="rules">
<el-form-item :label='$t("config.assetMeta.name")' prop="name">
<el-form-item :label='$t("config.assetLabel.name")' prop="name">
<el-input placeholder="" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.key")' prop="metaKey">
<el-form-item :label='$t("config.assetLabel.key")' prop="metaKey">
<el-input placeholder="" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.group")' prop="groupId">
<el-form-item :label='$t("config.assetLabel.group")' prop="groupId">
<!-- <el-input placeholder="" show-word-limit v-model="editAssetMeta.group" size="small" id="editAssetMeta-box-input-group"></el-input>-->
<el-select v-model="editAssetMeta.groupId" size="small" :popper-class="'nz-meta-group-box'" :popper-append-to-body="false">
<el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.search")' prop="search">
<el-form-item :label='$t("config.assetLabel.search")' prop="search">
<!-- <el-input placeholder="" show-word-limit v-model="editAssetMeta.search" size="small" id="editAssetMeta-box-input-search"></el-input>-->
<el-switch
@change="switchSearch"
v-model="editAssetMeta.search"
active-color="#ee9d3f"
:active-value="1"
@@ -46,7 +48,7 @@
</el-switch>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.display")' prop="display">
<el-form-item :label='$t("config.assetLabel.display")' prop="display">
<!-- <el-input placeholder="" show-word-limit v-model="editAssetMeta.display" size="small" id="editAssetMeta-box-input-display"></el-input>-->
<el-switch
v-model="editAssetMeta.display"
@@ -56,14 +58,16 @@
</el-switch>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.type")' prop="type">
<el-select v-model="editAssetMeta.type" size="small" :popper-class="'nz-meta-group-box'" :popper-append-to-body="false" @change="selectType">
<el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :label="item.name"></el-option>
<el-form-item :label='$t("config.assetLabel.type")' prop="type">
<el-select v-model="editAssetMeta.type" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @change="selectType">
<el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
<div><i :class="item.icon"></i>&nbsp;&nbsp;<span >{{item.name}}</span></div>
</el-option>
</el-select>
</el-form-item>
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="showParam">
<span>{{$t('config.assetMeta.params')}}</span>
<span>{{$t('config.assetLabel.params')}}</span>
<span @click="addParam" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="editAssetMeta.type!=='datetime'">
<span class="create-square-box">
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
@@ -75,13 +79,13 @@
<div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box">
<el-row class="asset-meta-param-row asset-meta-param-header">
<el-col :span="12">
{{$t('config.assetMeta.option')}}
{{$t('config.assetLabel.option')}}
</el-col>
<el-col :span="6">
{{$t('config.assetMeta.isCheck')}}
{{$t('config.assetLabel.isCheck')}}
</el-col>
<el-col :span="6">
{{$t('config.assetMeta.operate')}}
{{$t('config.assetLabel.operate')}}
</el-col>
</el-row>
<el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
@@ -89,9 +93,9 @@
<el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
</el-col>
<el-col :span="6">
<el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetMeta.default')}}</el-radio>
<el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetLabel.default')}}</el-radio>
<el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetMeta.default')}}</el-checkbox>
<el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetLabel.default')}}</el-checkbox>
</el-col>
<el-col :span="6">
@@ -109,15 +113,15 @@
<div v-if="editAssetMeta.type==='datetime'">
<el-row style="margin-bottom: 10px">
<span class="datetime-header">{{$t('config.assetMeta.dateType')}}: </span>
<span class="datetime-header">{{$t('config.assetLabel.dateType')}}: </span>
<el-radio-group v-model="editAssetMeta.param.subType">
<el-radio :label="'date'">{{$t('config.assetMeta.date')}}</el-radio>
<el-radio :label="'time'">{{$t('config.assetMeta.time')}}</el-radio>
<el-radio :label="'datetime'">{{$t('config.assetMeta.datetimes')}}</el-radio>
<el-radio :label="'date'">{{$t('config.assetLabel.date')}}</el-radio>
<el-radio :label="'time'">{{$t('config.assetLabel.time')}}</el-radio>
<el-radio :label="'datetime'">{{$t('config.assetLabel.datetimes')}}</el-radio>
</el-radio-group>
</el-row>
<el-row>
<span class="datetime-header">{{$t('config.assetMeta.interval')}}: </span>
<span class="datetime-header">{{$t('config.assetLabel.interval')}}: </span>
<el-switch
v-model="editAssetMeta.param.interval"
@change="$forceUpdate"
@@ -128,7 +132,7 @@
<div v-if="editAssetMeta.type==='double'">
<el-row>
<span class="datetime-header">{{$t('config.assetMeta.decimals')}}: </span>
<span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
<el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
</el-row>
</div>
@@ -138,7 +142,7 @@
<el-input placeholder="" maxlength="512" type="textarea" show-word-limit v-model="editAssetMeta.remark" size="small" id="editAssetMeta-box-input-remark"></el-input>
</el-form-item>
<el-form-item :label='$t("config.assetMeta.example")'>
<el-form-item :label='$t("config.assetLabel.example")'>
<assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
</el-form-item>
@@ -164,9 +168,9 @@
<script>
import assetTagEx from '../../page/asset/components/assetTagEx'
export default {
name: 'assetMetaBox',
name: 'assetLabelBox',
props: {
assetMeta: {}
assetLabel: {}
},
components: { assetTagEx },
data () {
@@ -195,53 +199,74 @@ export default {
groupId: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
type: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
},
value:'',
typeData: [
{
icon: 'nz-icon nz-icon-text',
disabled:true,
value: 'text',
name: this.$t('config.assetMeta.text')
name: this.$t('config.assetLabel.text')
},
{
icon: 'nz-icon nz-icon-multitext',
disabled:true,
value: 'multitext',
name: this.$t('config.assetMeta.multitext')
name: this.$t('config.assetLabel.multitext')
},
{
icon: 'nz-icon nz-icon-textarea',
disabled:true,
value: 'textarea',
name: this.$t('config.assetMeta.textarea')
name: this.$t('config.assetLabel.textarea')
},
{
icon: 'nz-icon nz-icon-radio',
disabled:true,
value: 'radio',
name: this.$t('config.assetMeta.radio')
name: this.$t('config.assetLabel.radio')
},
{
icon: 'nz-icon nz-icon-checkbox',
disabled:true,
value: 'checkbox',
name: this.$t('config.assetMeta.checkbox')
name: this.$t('config.assetLabel.checkbox')
},
{
icon: 'nz-icon nz-icon-xialaxuanze',
disabled:true,
value: 'select',
name: this.$t('config.assetMeta.select')
name: this.$t('config.assetLabel.select')
},
{
icon: 'nz-icon nz-icon-integer',
disabled:true,
value: 'integer',
name: this.$t('config.assetMeta.integer')
name: this.$t('config.assetLabel.integer')
},
{
icon: 'nz-icon nz-icon-double',
disabled:true,
value: 'double',
name: this.$t('config.assetMeta.double')
name: this.$t('config.assetLabel.double')
},
{
icon: 'nz-icon nz-icon-double',
disabled:true,
value: 'datetime',
name: this.$t('config.assetMeta.datetime')
name: this.$t('config.assetLabel.datetime')
},
{
icon: 'nz-icon nz-icon-double',
disabled:true,
value: 'email',
name: this.$t('config.assetMeta.email')
name: this.$t('config.assetLabel.email')
}
],
showParam: false
}
},
watch: {
assetMeta: {
assetLabel: {
immediate: true,
handler (n) {
this.editAssetMeta = { ...n }
@@ -251,8 +276,24 @@ export default {
},
mounted () {
this.getGroupData()
this.switchSearch()
},
methods: {
switchSearch(value){
this.typeData.forEach(element => {
if( value === 0 ) {
element.disabled = false
}else {
if(element.value == 'radio'){
element.disabled = false
}else if(element.value == 'checkbox'){
element.disabled = false
}else if(element.value == 'select'){
element.disabled = false
}
}
})
},
clickOutside () {
this.esc(false)
},
@@ -273,7 +314,7 @@ export default {
for (let i = 0; i < param.param.items.length; i++) {
if (!param.param.items[i].name) {
this.$refs['metaNameOption' + i][0].focus()
this.$message.error(this.$t('config.assetMeta.metaOptionNull'))
this.$message.error(this.$t('config.assetLabel.metaOptionNull'))
this.prevent_opt.save = false
return
}
@@ -398,7 +439,7 @@ export default {
},
addParam () {
if (this.editAssetMeta.param.items.length >= 20) {
this.$message.error(this.$t('config.assetMeta.moreOptionsError'))
this.$message.error(this.$t('config.assetLabel.moreOptionsError'))
return
}
this.editAssetMeta.param.items.push({
@@ -409,7 +450,7 @@ export default {
},
deleteParam (index) {
if (this.editAssetMeta.param.items.length === 1) {
this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
this.$message.error(this.$t('config.assetLabel.onlyOptionError'))
return
}
this.editAssetMeta.param.items.splice(index, 1)

234
nezha-fronted/src/components/common/rightBox/assetTypeBox.vue
View File

@@ -1,234 +0,0 @@
<template>
<div class="right-box right-box-asset-type" v-clickoutside="{obj: editAssetType, func: clickOutside}">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="asset-type-edit-del"
type="button" v-has="'assetType_delete'"
v-if="editAssetType.buildIn !== 1 && editAssetType.id">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editAssetType.id ? ($t("config.assetType.editAssetType") + " ID：" + editAssetType.id) : $t("config.assetType.createAssetType")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form-box">
<el-form :model="editAssetType" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px" ref="assetTypeForm">
<!--name-->
<el-form-item :label="$t('overall.name')" prop="name">
<el-input id="asset-type-input-name" placeholder="" size="small" type="text" v-model="editAssetType.name"></el-input>
</el-form-item>
<!--parent-->
<el-form-item :label="$t('config.assetType.parent')" prop="pid">
<select-asset-type id="asset-type-parent" :asset-type-data="assetTypeData2" :show-type="showParentAssetType" @selectAssetType="selectParent"
size="small">
<template v-slot:trigger>
<el-input :clearable="true" :readonly="true" placeholder="" size="small" v-model="showParentAssetType.name">
<i @click.stop="clearParent" class="el-icon-circle-close" slot="suffix" style="padding-right: 5px; cursor: pointer;"></i>
</el-input>
</template>
</select-asset-type>
</el-form-item>
<!--vm-->
<el-form-item label="VM">
<el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vm-status"
v-model="editAssetType.vm">
</el-switch>
</el-form-item>
<!--vm host-->
<el-form-item label="VM host">
<el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-vmh-status"
v-model="editAssetType.vmh">
</el-switch>
</el-form-item>
<!--ssh-->
<el-form-item label="SSH">
<el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-ssh-status"
v-model="editAssetType.ssh">
</el-switch>
</el-form-item>
<!--telnet-->
<el-form-item label="Telnet">
<el-switch :active-value="1" :disabled="editAssetType.buildIn == 1" :inactive-value="0" active-color="#ee9d3f" id="asset-type-telnet-status"
v-model="editAssetType.telnet">
</el-switch>
</el-form-item>
<!--descrption-->
<el-form-item :label="$t('overall.remark')" prop="remark">
<el-input id="asset-type-input-description" placeholder="" size="small" type="textarea" v-model="editAssetType.remark"></el-input>
</el-form-item>
</el-form>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-type-esc"
v-cancel="{obj:editAssetType, func:esc}">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
id="asset-type-save"
>
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import selectAssetType from '@/components/common/popBox/selectAssetType'
export default {
name: 'asset-type-right-box',
props: {
assetType: Object,
assetTypeData: Array // 所有数据，用于选择下拉框显示内容
},
components: {
selectAssetType
},
mounted () {
this.assetTypeData2 = [...this.assetTypeData]
this.setDisabled(this.assetTypeData2)
},
data () {
return {
rules: { // 表单校验规则
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
},
assetTypeData2: [],
editAssetType: {},
showParentAssetType: {}
}
},
methods: {
/* 关闭弹框 */
esc (refresh) {
this.$emit('close', refresh)
},
clickOutside () {
this.esc(false)
},
setDisabled (data, flag) {
data.forEach(t => {
if (t.id == this.assetType.id || flag) {
this.$set(t, 'disabled', true)
this.setDisabled(t.children, true)
} else {
this.$set(t, 'disabled', false)
this.setDisabled(t.children)
}
})
},
clearParent () {
this.showParentAssetType = { name: '', id: '' }
},
/* 保存 */
save () {
this.$refs.assetTypeForm.validate((valid) => {
if (valid) {
this.showParentAssetType.id && (this.editAssetType.pid = this.showParentAssetType.id)
if (this.assetType.id) {
this.$put('/asset/typeConf', this.editAssetType).then(response => {
if (response.code === 200) {
this.esc(true)
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
})
} else {
this.$post('/asset/typeConf', this.editAssetType).then(response => {
if (response.code === 200) {
this.esc(true)
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
})
}
} else {
return false
}
})
},
selectParent (val) {
if (!val) {
return false
}
this.showParentAssetType = val
},
/* 删除 */
del () {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('/asset/typeConf?ids=' + this.editAssetType.id).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.esc(true)
} else {
this.$message.error(response.msg)
}
})
}).catch(() => {
})
},
findParent (data, pid) {
// eslint-disable-next-line no-unreachable-loop
for (let i = 0; i < data.length; i++) {
return data[i].id == pid ? { ...data[i] } : this.findParent(data[i].children, pid)
}
}
},
watch: {
assetType: {
immediate: true,
deep: true,
handler (n) {
if (n) {
this.editAssetType = JSON.parse(JSON.stringify(n))
if (this.editAssetType.pid != 0) {
this.showParentAssetType = this.findParent(this.assetTypeData, this.editAssetType.pid)
}
}
}
}
}
}
</script>
<style lang="scss">
.right-box-asset-type {
.right-box-sub-title {
#add-notification {
border: none;
outline: none;
cursor: pointer;
i {
font-size: 17px;
background-color: #f6f6f6;
}
}
}
}
.notification-item {
.el-select {
width: 100px;
}
}
</style>
<style scoped>
.form-item-title{
position: absolute;
left: -120px;
}
</style>

60
nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-table
id="assetMetaTable"
id="assetLabelTable"
ref="dataTable"
:data="tableData"
:height="height"
@@ -37,22 +37,22 @@
{{scope.row[item.prop] ? scope.row[item.prop].name : '-'}}
</div>
<div v-else-if=" item.prop === 'display' ">
<el-switch
v-model="scope.row[item.prop]"
:active-value="1"
:inactive-value="0"
active-color="#ee9d3f"
@change="putMeta(scope.row)">
</el-switch>
<div v-if="scope.row[item.prop] === 1">Enabled</div>
<div v-else-if="scope.row[item.prop] === 0">Disabled</div>
</div>
<div v-else-if=" item.prop === 'search' ">
<el-switch
v-model="scope.row[item.prop]"
:active-value="1"
:inactive-value="0"
active-color="#ee9d3f"
@change="putMeta(scope.row)">
</el-switch>
<div v-if="scope.row[item.prop] === 1">Enabled</div>
<div v-else-if="scope.row[item.prop] === 0">Disabled</div>
</div>
<div v-else-if=" item.prop === 'type' ">
<div v-if="scope.row[item.prop] == 'TEXT'&&'text'"><i class="nz-icon nz-icon-text"></i>TEXT</div>
<div v-else-if="scope.row[item.prop] == 'multitext'"><i class="nz-icon nz-icon-multitext"></i>MULTITEXT</div>
<div v-else-if="scope.row[item.prop] == 'textarea'"><i class="nz-icon nz-icon-textarea"></i>TEXTAREA</div>
<div v-else-if="scope.row[item.prop] == 'radio'"><i class="nz-icon nz-icon-radio"></i>RADI0</div>
<div v-else-if="scope.row[item.prop] == 'checkbox'"><i class="nz-icon nz-icon-checkbox"></i>CHECKBOX</div>
<div v-else-if="scope.row[item.prop] == 'xialaxuanze'"><i class="nz-icon nz-icon-xialaxuanze"></i>SELECT</div>
<div v-else-if="scope.row[item.prop] == 'integer'"><i class="nz-icon nz-icon-integer"></i>INTEGER</div>
<div v-else-if="scope.row[item.prop] == 'double'"><i class="nz-icon nz-icon-double"></i>DOUBLE</div>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template>
@@ -93,31 +93,32 @@ export default {
show: true,
width: 80
}, {
label: this.$t('config.assetMeta.name'),
label: this.$t('config.assetLabel.name'),
prop: 'name',
show: true
show: true,
width: 100
}, {
label: this.$t('config.assetMeta.key'),
label: this.$t('config.assetLabel.key'),
prop: 'metaKey',
show: true
}, {
label: this.$t('config.assetMeta.group'),
label: this.$t('config.assetLabel.group'),
prop: 'group',
show: true
}, {
label: this.$t('config.assetMeta.search'),
label: this.$t('config.assetLabel.search'),
prop: 'search',
show: true
}, {
label: this.$t('config.assetMeta.display'),
label: this.$t('config.assetLabel.display'),
prop: 'display',
show: true
}, {
label: this.$t('config.assetMeta.type'),
label: this.$t('config.assetLabel.type'),
prop: 'type',
show: true
}, {
label: this.$t('config.assetMeta.params'),
label: this.$t('config.assetLabel.params'),
prop: 'param',
show: false
}
@@ -125,18 +126,7 @@ export default {
}
},
methods: {
putMeta (row) {
this.tools.loading = true
this.$put('asset/field/meta', row).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
this.getTableData()
})
}
}
}
</script>

123
nezha-fronted/src/components/common/table/settings/assetTypeTable.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<el-table
id="assetTypeTable"
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']"
:width="`${item.width}`"
>
<template slot="header">
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template slot-scope="scope" :column="item">
<div v-if=" item.prop === 'vm' ">
<div v-if="scope.row[item.prop] === 1">YES</div>
<div v-else-if="scope.row[item.prop] === 0">NO</div>
</div>
<div v-else-if=" item.prop === 'vmh' ">
<div v-if="scope.row[item.prop] === 1">YES</div>
<div v-else-if="scope.row[item.prop] === 0">NO</div>
</div>
<div v-else-if=" item.prop === 'authProtocol' ">
<div v-if="scope.row[item.prop] === 1">SSH</div>
<div v-else-if="scope.row[item.prop] === 0">无</div>
<div v-else-if="scope.row[item.prop] === 2">telnet</div>
</div>
<div v-else-if=" item.prop === 'snmpEnable' ">
<div v-if="scope.row[item.prop] === 1">Enabled</div>
<div v-else-if="scope.row[item.prop] === 0">Disabled</div>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template>
</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" @click="showBottomBox('operationLogTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :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 :command="['delete', scope.row]" :disabled="scope.row.id === 1"><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>
</el-table>
</template>
<script>
import table from '@/components/common/mixin/table'
export default {
name: 'asstTypeTable',
mixins: [table],
data () {
return {
tableTitle: [ // 原始table列
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t('config.assetType.name'),
prop: 'name',
show: true,
width: 120
}, {
label: this.$t('config.assetType.vm'),
prop: 'vm',
show: true,
}, {
label: this.$t('config.assetType.vmh'),
prop: 'vmh',
show: true
},{
label: this.$t('config.assetType.authProtocol'),
prop: 'authProtocol',
show: true,
},{
label: this.$t('config.assetType.snmpEnable'),
prop: 'snmpEnable',
show: true,
}
]
}
},
methods: {
},
computed: {
}
}
</script>

32
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -43,16 +43,6 @@
<template v-else-if="item.prop === 'brand'">
{{scope.row.brand.name}}
</template>
<template v-else-if="item.prop === 'status'">
<el-switch
v-model="scope.row.status"
:active-color="theme.themeColor"
:disabled="isCurrentUser(scope.row.username) || !hasButton('user_edit') || (scope.row.username === 'admin' && scope.row.id === 1)"
active-value="1"
inactive-value="0"
@change="val => {statusChange(scope.row)}">
</el-switch>
</template>
<span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
@@ -115,27 +105,11 @@ export default {
}
},
methods: {
statusChange (user) {
if (user.roles) {
user.roleIds = user.roles.map(t => t.id)
}
this.$put(this.url, user).then(response => {
if (response.code === 200) {
this.rightBox.show = false
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
this.$emit('reload')
})
}
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') === username
}
}
}
}
</script>

5
nezha-fronted/src/components/page/config/assetMeta.vue
View File

@@ -94,7 +94,7 @@ export default {
groupShow: false
},
groupData: [{
name: this.$t('config.assetMeta.all'),
name: this.$t('config.assetLabel.all'),
id: -1,
children: []
}],
@@ -114,7 +114,7 @@ export default {
disabled: false
}, {
id: 12,
name: this.$t('config.assetMeta.name'),
name: this.$t('config.assetLabel.name'),
type: 'input',
label: 'name',
disabled: false
@@ -226,6 +226,7 @@ export default {
},
add () {
this.object = JSON.parse(JSON.stringify(this.blankObject))
console.log(this.object);
this.rightBox.metaShow = true
},
edit (row) {

242
nezha-fronted/src/components/page/config/assetType.vue
View File

@@ -1,192 +1,78 @@
<template>
<div style="height: 100%">
<div>
<nz-data-list
ref="dataList"
:components="['searchInput', 'elementSet']"
:api="url"
:custom-table-title.sync="tools.customTableTitle"
:from="fromRoute.assetType"
:from="fromRoute.model"
:layout="['searchInput', 'elementSet']"
:search-msg="searchMsg"
:table-id="tableId"
:table-title="tableTitle">
@search="search"
>
<template v-slot:top-tool-right>
<button id="assetType-add" v-has="'assetType_toAdd'" :title="$t('overall.createAssetType')" class="top-tool-btn margin-l-20"
<button id="account-add" v-has="'user_add'" :title="$t('overall.createUser')" class="top-tool-btn margin-r-10"
type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button id="asset-type-list-batch-delete" v-has="'assetType_delete'" :delete-objs="batchDeleteObjs" api="asset/typeConf" @after="getTableData" @before="delFlag=true"></delete-button>
<delete-button id="account-list-batch-delete" v-has="'user_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default="slotProps">
<el-table
id="role-list-table"
<template v-slot="slotProps">
<asset-type-table
ref="dataTable"
v-loading="tools.loading"
:data="tableData"
v-loading="slotProps.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection)=>{batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span>
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</span>
:table-data="tableData"
@del="del"
@edit="edit"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-type-table>
</template>
<template slot-scope="scope" :column="item">
<el-switch
v-if="item.prop === 'vm'"
v-model="scope.row.vm"
:active-value="1"
:disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<el-switch
v-else-if="item.prop === 'vmh'"
v-model="scope.row.vmh"
:active-value="1"
:disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<el-switch
v-else-if="item.prop === 'ssh'"
v-model="scope.row.ssh"
:active-value="1"
:disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<el-switch
v-else-if="item.prop === 'telnet'"
v-model="scope.row.telnet"
:active-value="1"
:disabled="scope.row.buildIn === 1 || !hasButton('assetType_toEdit')"
:inactive-value="0"
active-color="#ee9d3f"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
<span v-else>{{scope.row[item.prop]}}</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" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['edit', scope.row]" :disabled="isBuildIn(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 :command="['delete', scope.row, `asset/typeConf?ids=${scope.row.id}`]" :disabled="isBuildIn(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>
</el-table>
<!-- 回到table顶部的按钮 -->
<button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="role-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
<Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<asset-type-box v-if="rightBox.show" :asset-type="object" :asset-type-data="assetTypeData" @close="closeRightBox"></asset-type-box>
<asset-type-box v-if="rightBox.show" :obj="object" @close="closeRightBox"></asset-type-box>
</transition>
</div>
</template>
<script>
import assetTypeBox from '@/components/common/rightBox/assetTypeBox'
import deleteButton from '@/components/common/deleteButton'
import assetTypeBox from '@/components/common/rightBox/administration/assetTypeBox'
import nzDataList from '@/components/common/table/nzDataList'
import tableMixin from '@/components/common/mixin/table'
import dataListMixin from '@/components/common/mixin/dataList'
import assetTypeTable from '@/components/common/table/settings/assetTypeTable'
export default {
name: 'asset-type-list',
name: 'assetType',
components: {
deleteButton,
nzDataList,
assetTypeBox,
nzDataList
deleteButton,
assetTypeTable
},
mixins: [tableMixin],
mixins: [dataListMixin],
data () {
return {
assetTypeData: [],
tableId: 'assetTypeTable', // 需要分页的table的id，用于记录每页数量
url: 'asset/typeConf',
blankObject: { // 空白对象
id: '', pid: '', pname: '', name: '', vm: 0, vmh: 0, ssh: 0, telnet: 0, buildIn: 0, remark: ''
id: '',
name: '',
vm: '',
vmh:'',
authProtocol:'',
snmpEnable:''
},
tableTitle: [ // 原table列
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t('overall.name'),
prop: 'name',
show: true
}, {
label: this.$t('config.assetType.parent'),
prop: 'pname',
show: true
}, {
label: 'VM',
prop: 'vm',
show: true
}, {
label: 'VM host',
prop: 'vmh',
show: true
}, {
label: 'SSH',
prop: 'ssh',
show: true
}, {
label: 'Telnet',
prop: 'telnet',
show: true
}, {
label: this.$t('overall.remark'),
prop: 'remark',
show: true
}
],
tableData: [],
tableId: 'typeConfTable',
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 10,
name: this.$t('overall.name'),
name: this.$t('config.assetType.type'),
type: 'input',
label: 'name',
disabled: false
@@ -195,56 +81,8 @@ export default {
}
},
methods: {
getAssetTypeTreeData () {
this.$get('/asset/typeConf/tree').then(response => {
if (response.code === 200) {
this.assetTypeData = response.data.list
}
})
},
getTableData () {
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
this.tools.loading = true
this.$get('/asset/typeConf', 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.$nextTick(() => {
this.scrollbarWrap = this.$refs.assetTypeTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
}
})
},
statusChange (obj) {
this.$nextTick(() => {
this.$put('/asset/typeConf', obj).then(response => {
if (response.code === 200) {
this.rightBox.show = false
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
this.getTableData()
})
})
}
},
mounted () {
this.getAssetTypeTreeData()
computed: {
}
}
</script>