fix:alert account promSever 添加修改页面调整

This commit is contained in:
wangwenrui
2020-01-02 18:10:24 +08:00
parent 4e6845b30e
commit a536f53f64
4 changed files with 370 additions and 563 deletions

View File

@@ -41,6 +41,7 @@ const en = {
validate: { //校验规则 validate: { //校验规则
required: 'Required', required: 'Required',
number: 'Must be a number', number: 'Must be a number',
email:'E-mail is invalide',
config: { config: {
account: { account: {

View File

@@ -3,26 +3,19 @@
<div class="right-box right-box-alert-config" v-if="rightBox.show"> <div class="right-box right-box-alert-config" v-if="rightBox.show">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc"> <button type="button" v-if="alertRule.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<div class="right-box-btn-icon"> <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
<i class="el-icon-close"></i> </button>
</div> <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span>{{$t('overall.esc')}}</span> <span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</div> <span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit"> </button>
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i> <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
</div> <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> </button>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
<!-- begin--标题--> <!-- begin--标题-->
@@ -30,152 +23,68 @@
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <el-scrollbar class="right-box-form-box">
<!--name--> <el-form class="right-box-form" :model="alertRule" label-position="top" :rules="rules" ref="alertRuleForm">
<div class="right-box-form-row"> <!--alertName-->
<div class="right-box-form-label">{{$t('alert.config.name')}}</div> <el-form-item :label='$t("alert.config.name")' prop="alertName">
<div class="right-box-form-content"> <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="alertRule.alertName" size="small"></el-input>
<el-input
v-if="rightBox.isEdit"
type="text"
placeholder=""
v-model="alertRule.alertName"
maxlength="64"
show-word-limit
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
</div> </el-form-item>
</div>
<!--type--> <!--type-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.list.type')" prop="type">
<div class="right-box-form-label">{{$t('alert.list.type')}}</div> <el-select v-if="rightBox.isEdit" @change="(val) => {changeType(val);}" popper-class="config-dropdown" v-model="alertRule.type" placeholder="" size="small" >
<div class="right-box-form-content"> <el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key"></el-option>
<el-select @change="(val) => {changeType(val);}" popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small" >
<el-option
v-for="item in typeData"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select> </el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div> <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
</div> </el-form-item>
</div>
<!--linkedId--> <!--linkedId-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.config.link')" prop="linkId">
<div class="right-box-form-label">{{$t('alert.config.link')}}</div> <el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small">
<div class="right-box-form-content"> <el-option v-for="item in linkObjList" :key="item.id" :label="alertRule.type == 3 ? item.host : item.name" :value="item.id"></el-option>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
<el-select v-model="alertRule.linkId" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in linkObjList"
:key="item.id"
:label="alertRule.type == 3 ? item.host : item.name"
:value="item.id">
</el-option>
</el-select> </el-select>
</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
</div> </el-form-item>
<!--expr--> <!--expr-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.config.expr')" prop="expr">
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div> <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
<div class="right-box-form-content">
<el-input
type="textarea"
v-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.expr"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
</div> </el-form-item>
</div> <!--last-->
<!--for--> <el-form-item :label="$t('alert.config.for')" prop="last">
<div class="right-box-form-row"> <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.last"
size="small"
>
<template slot="append">second</template> <template slot="append">second</template>
</el-input> </el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
</div> </el-form-item>
</div>
<!--severity--> <!--severity-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.severity')" prop="severity">
<div class="right-box-form-label">{{$t('alert.severity')}}</div> <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" size="small">
<div class="right-box-form-content"> <el-option v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span> <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop> <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input type="text" v-model="item.name" size="mini"></el-input>
type="text"
v-model="item.name"
size="mini"
></el-input>
</span> </span>
</el-option> </el-option>
</el-select> </el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
</div> </el-form-item>
</div>
<!--summary--> <!--summary-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.summary')" prop="summary">
<div class="right-box-form-label">{{$t('alert.summary')}}</div> <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model="alertRule.summary" size="small"></el-input>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.summary"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
</div> </el-form-item>
</div>
<!--description--> <!--description-->
<div class="right-box-form-row"> <el-form-item :label="$t('alert.description')" prop="description">
<div class="right-box-form-label">{{$t('alert.description')}}</div> <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.description" size="small"></el-input>
<div class="right-box-form-content">
<el-input
type="textarea"
v-if="rightBox.isEdit"
placeholder=""
v-model="alertRule.description"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
</div> </el-form-item>
</div>
<!--receiver--> <!--receiver-->
<!--<div class="right-box-form-row"> <!--<el-form-item :label="$t('config.account.receiver')" prop="receiver">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option <el-option @click.native="blurEditReceiver()" v-for="item in receiverData" :key="item.id" :label="item.name" :value="item">
@click.native="blurEditReceiver()"
v-for="item in receiverData"
:key="item.id"
:label="item.name"
:value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span> <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop> <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input <el-input type="text" v-model="item.name" size="mini"></el-input>
type="text"
v-model="item.name"
size="mini"
></el-input>
</span> </span>
<span class="config-dropdown-error-message">{{item.errorMessage}}</span> <span class="config-dropdown-error-message">{{item.errorMessage}}</span>
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)"> <span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
@@ -185,21 +94,11 @@
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span> <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
</el-option> </el-option>
</el-select> </el-select>
<div class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div> <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
</div> </el-form-item>-->
</div>--> </el-form>
</div> </el-scrollbar>
<!-- end--表单--> <!-- end--表单-->
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div> </div>
</transition> </transition>
</template> </template>
@@ -214,6 +113,36 @@
return { return {
alertRule: {id: ''}, alertRule: {id: ''},
rightBox: {show: false, isEdit: false, title: ''}, rightBox: {show: false, isEdit: false, title: ''},
rules:{
alertName:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
type:[
{required:true,message:this.$t('validate.required'),trigger:'change'}
],
linkId:[
{required:true,message:this.$t('validate.required'),trigger:"change"}
],
expr:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
last:[
{required:true,message:this.$t('validate.required'),trigger:'blur'},
{type:'number',message:this.$t('validate.number')}
],
severity:[
{required:true,message:this.$t('validate.required'),trigger:'change'},
],
summary:[
{required:true,message:this.$t('validate.required'),trigger:'blur'},
],
// description:[
// {required:true,message:this.$t('validate.required'),trigger:'blur'},
// ],
// receiver:[
// {required:true,message:this.$t('validate.required'),trigger:'change'},
// ]
},
severityData: [ severityData: [
{ {
key: 'medium', key: 'medium',
@@ -276,6 +205,8 @@
this.rightBox.isEdit = isEdit; this.rightBox.isEdit = isEdit;
}, },
save: function() { save: function() {
this.$refs.alertRuleForm.validate((valid) => {
if (valid) {
if (this.alertRule.id) { if (this.alertRule.id) {
this.$put('alert/rule', this.alertRule).then(response => { this.$put('alert/rule', this.alertRule).then(response => {
if (response.code === 200) { if (response.code === 200) {
@@ -297,6 +228,10 @@
} }
}); });
} }
} else {
return false;
}
})
}, },
changeType(type) { changeType(type) {
this.alertRule.linkId = ''; this.alertRule.linkId = '';

View File

@@ -100,25 +100,17 @@
<div class="right-box right-box-account" v-if="rightBox.show"> <div class="right-box right-box-account" v-if="rightBox.show">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()"> <button type="button" v-if="user.userId != ''" @click="del(user)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<div class="right-box-btn-icon"> <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
<i class="el-icon-close"></i> </button>
</div> <button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span>{{$t('overall.esc')}}</span> <span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</div> <span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit"> </button>
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i> <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
</div> <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> </button>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div class="right-box-top-btn" v-if="rightBox.isEdit && user.userId != ''" @click="del(user)">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
@@ -127,116 +119,39 @@
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <el-scrollbar class="right-box-form-box">
<div class="right-box-form-row"> <el-form class="right-box-form" :model="user" label-position="top" :rules="rules" ref="accountForm">
<div class="right-box-form-label">{{$t('config.account.account')}}</div> <!--username-->
<div class="right-box-form-content"> <el-form-item :label="$t('config.account.account')" prop="username">
<el-input <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
v-if="rightBox.isEdit"
type="text"
placeholder=""
v-model="user.username"
maxlength="64"
show-word-limit
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
</div> </el-form-item>
</div> <!--password-->
<div class="right-box-form-row" v-if="rightBox.isEdit && !user.userId"> <el-form-item :label="$t('config.account.password')" prop="password" v-if="rightBox.isEdit &&!user.userId">
<div class="right-box-form-label">{{$t('config.account.password')}}</div> <el-input type="password" placeholder="" v-model="user.password" maxlength="16" show-word-limit size="small"></el-input>
<div class="right-box-form-content"> </el-form-item>
<el-input <!--email-->
type="text" <el-form-item label="E-mail" prop="email">
placeholder="" <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.email" size="small"></el-input>
v-model="user.password"
maxlength="16"
show-word-limit
size="small"
></el-input>
</div>
</div>
<div class="right-box-form-row">
<div class="right-box-form-label">E-mail</div>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="user.email"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
</div> </el-form-item>
</div> <!--language-->
<!--<div class="right-box-form-row"> <!--<el-form-item :label="$t('config.account.language')" prop="language">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div> <el-radio v-model="user.lang" label="en" :disabled="user.lang != 'en'">English</el-radio>
<div class="right-box-form-content"> <el-radio v-model="user.lang" label="zh" :disabled="user.lang != 'zh'">中文</el-radio>
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditReceiver()"
v-for="item in receiverData"
:key="item.id"
:label="item.name"
:value="item">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">
<template v-for="rec in user.receiver">{{rec.name}}</template>
</div>
</div>
</div>-->
<!--<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.language')}}</div>
<div class="right-box-form-content">
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
<el-radio v-model="user.lang" label="ru" disabled>русский{{$t('config.account.notCurrentlySupport')}}</el-radio> <el-radio v-model="user.lang" label="ru" disabled>русский{{$t('config.account.notCurrentlySupport')}}</el-radio>
</div> </el-form-item>-->
</div>--> <!--enable-->
<div class="right-box-form-row"> <el-form-item :label="$t('config.account.enable')">
<div class="right-box-form-label">{{$t('config.account.enable')}}</div> <el-switch v-model="user.status" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
<div class="right-box-form-content">
<el-switch
v-model="user.status"
:disabled="!rightBox.isEdit"
active-value="1"
inactive-value="0">
</el-switch> </el-switch>
</div> </el-form-item>
</div> <el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
<div class="right-box-form-row" v-if="!rightBox.isEdit">
<div class="right-box-form-label">{{$t('config.account.createTime')}}</div>
<div class="right-box-form-content">
<div class="right-box-form-content-txt">{{user.createTime}}</div> <div class="right-box-form-content-txt">{{user.createTime}}</div>
</div> </el-form-item>
</div> </el-form>
</div> </el-scrollbar>
<!-- end--表单--> <!-- end--表单-->
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div> </div>
</transition> </transition>
</div> </div>
@@ -305,6 +220,18 @@ export default {
width: 100 width: 100
} }
], ],
rules:{
username:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
password:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
email:[
{required:true,message:this.$t('validate.required'),trigger:'blur'},
{type:'email',message:this.$t('validate.email')}
]
},
tableData: [], tableData: [],
receiverData: [{ receiverData: [{
id: '1', id: '1',
@@ -395,6 +322,8 @@ export default {
this.rightBox.show = true; this.rightBox.show = true;
}, },
save: function() { save: function() {
this.$refs.accountForm.validate((valid) => {
if(valid){
if (this.user.userId) { if (this.user.userId) {
this.$put('sys/user/update', this.user).then(response => { this.$put('sys/user/update', this.user).then(response => {
if (response.code === 200) { if (response.code === 200) {
@@ -416,6 +345,10 @@ export default {
} }
}); });
} }
}else{
return false;
}
})
}, },
saveOrToEdit: function() { saveOrToEdit: function() {
if (!this.rightBox.isEdit) { if (!this.rightBox.isEdit) {

View File

@@ -115,25 +115,17 @@
<div class="right-box right-box-prom" v-if="rightBox.show"> <div class="right-box right-box-prom" v-if="rightBox.show">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()"> <button type="button" v-if="rightBox.isEdit && promServer.id != ''" @click="del(promServer)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<div class="right-box-btn-icon"> <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
<i class="el-icon-close"></i> </button>
</div> <button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span>{{$t('overall.esc')}}</span> <span v-if="rightBox.isEdit" class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</div> <span v-else class="top-tool-btn-txt">{{$t('overall.edit')}}</span>
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit"> </button>
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i> <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
</div> <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span> </button>
<span v-else>{{$t('overall.edit')}}</span>
</div>
<div @click="del(promServer)" class="right-box-top-btn" v-if="rightBox.isEdit && promServer.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
@@ -142,82 +134,55 @@
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <el-scrollbar class="right-box-form-box">
<div class="right-box-form-row"> <el-form class="right-box-form" :model="promServer" label-position="top" :rules="rules" ref="promServerForm">
<div class="right-box-form-label">DC</div> <!--DC start-->
<el-form-item label="DC" prop="idc.name">
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option <el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name" :value="item">
@click.native="blurEditIdc()"
v-for="item in idcData"
:key="item.id"
:label="item.name"
:value="item">
<span class="config-dropdown-label-txt">{{item.name}}</span> <span class="config-dropdown-label-txt">{{item.name}}</span>
<el-popover <el-popover placement="left" v-model="item[item.name]">
placement="left"
v-model="item[item.name]"
>
<div class="pop-window-assetType-content"> <div class="pop-window-assetType-content">
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" <div class="right-box-top-btn right-box-top-btn-full" @click="item[item.name] = false">
@click="item[item.name] = false"> <div class="right-box-btn-icon"><i class="el-icon-close"></i></div>
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span> <span>{{$t('overall.esc')}}</span>
</div> </div>
</div> </div>
<div class="pop-window"> <div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span> <span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
<el-input v-model="popIdcData.name"/> <el-input v-model="popIdcData.name"/>
<el-input v-model="popIdcData.location"/> <el-input v-model="popIdcData.location"/>
<el-select v-model="popIdcData.principal" clearable> <el-select v-model="popIdcData.principal" clearable>
<el-option <el-option v-for="item in idcUserData" :key="item.key" :label="item.username" :value="item.userId"></el-option>
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select> </el-select>
<el-input v-model="popIdcData.tel"/> <el-input v-model="popIdcData.tel"/>
</div> </div>
</div> </div>
<div class="right-box-bottom-btns"> <div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel" <div class="right-box-bottom-btn right-box-bottom-btn-cancel" @click.stop="item[item.name]= false">{{$t('overall.cancel')}}
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div> </div>
<div class="right-box-bottom-btn right-box-bottom-btn-50" <div class="right-box-bottom-btn right-box-bottom-btn-50" @click="editData('idc', item.id, popIdcData)">{{$t('overall.save')}}</div>
@click="editData('idc', item.id, popIdcData)">
{{$t('overall.save')}}
</div> </div>
</div> <span class="config-dropdown-btn" slot="reference" @click.stop="getSingleIDCData(item.id,'edit')"><i class="el-icon-edit-outline"></i></span>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleIDCData(item.id,'edit')"><i
class="el-icon-edit-outline"></i></span>
</el-popover> </el-popover>
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span> <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
</el-option> </el-option>
</el-select> </el-select>
<div class="right-box-row-btn" v-if="rightBox.isEdit"> <div class="right-box-row-btn" v-if="rightBox.isEdit">
<el-popover <el-popover placement="left" v-model="visible">
placement="left"
v-model="visible"
>
<div class="pop-window-assetType-content"> <div class="pop-window-assetType-content">
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" <div class="right-box-top-btn right-box-top-btn-full" @click="visible = false">
@click="visible = false"> <div class="right-box-btn-icon"><i class="el-icon-close"></i></div>
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span> <span>{{$t('overall.esc')}}</span>
</div> </div>
</div> </div>
<div class="pop-window"> <div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span> <span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.AddIdcTab.title')}}</span>
<div style="padding-top: 10px;padding-left: 20px"> <div style="padding-top: 10px;padding-left: 20px">
<div> <div>
<label style="font-size: 12px">DN name</label> <label style="font-size: 12px">DN name</label>
@@ -229,17 +194,8 @@
</div> </div>
<div style="padding-top: 40px"> <div style="padding-top: 40px">
<label style="font-size: 12px;padding-right: 20px">负责人</label> <label style="font-size: 12px;padding-right: 20px">负责人</label>
<select class='sidebar-pop-input-select' <select class='sidebar-pop-input-select' style="margin-left:-40px " v-model="addIdcData.principal" clearable>
style="margin-left:-40px " <option v-for="item in idcUserData" :key="item.key" :label="item.username" :value="item.userId"></option>
v-model="addIdcData.principal"
clearable>
<option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</option>
</select> </select>
</div> </div>
<div style="padding-top: 40px"> <div style="padding-top: 40px">
@@ -249,73 +205,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right-box-bottom-btns"> <span slot="reference" @click.prevent=''><i class="el-icon-plus"></i></span>
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="visible= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('IDC')">
{{$t('overall.save')}}
</div>
</div>
<span slot="reference"
@click.prevent=''><i
class="el-icon-plus"></i></span>
</el-popover> </el-popover>
</div> </div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div> <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
</div> </div>
</div> </el-form-item>
<div class="right-box-form-row"> <!--DC end-->
<div class="right-box-form-label">Host</div>
<div class="right-box-form-content"> <!--host-->
<el-input <el-form-item label="Host" prop="host">
type="text" <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model="promServer.host" size="small"></el-input>
v-if="rightBox.isEdit"
placeholder=""
v-model="promServer.host"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.host}}</div>
</div> </el-form-item>
</div> <!--Port-->
<div class="right-box-form-row"> <el-form-item label="Port" prop="port">
<div class="right-box-form-label">Port</div> <el-input type="text" v-if="rightBox.isEdit" placeholder="" v-model.number="promServer.port" size="small"></el-input>
<div class="right-box-form-content">
<el-input
type="text"
v-if="rightBox.isEdit"
placeholder=""
v-model="promServer.port"
size="small"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div> <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.port}}</div>
</div> </el-form-item>
</div> <!--type-->
<div class="right-box-form-row"> <el-form-item :label="$t('config.promServer.type')" prop="type">
<div class="right-box-form-label">{{$t('config.promServer.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit" size="small"> <el-select popper-class="config-dropdown" v-model="promServer.type" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option <el-option v-for="item in typeData" :key="item.key" :label="item.value" :value="item.key"></el-option>
v-for="item in typeData"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select> </el-select>
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type" class="right-box-form-content-txt">{{item.value}}</div> <div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == promServer.type" class="right-box-form-content-txt">{{item.value}}</div>
</div> </el-form-item>
</div> </el-form>
</div> </el-scrollbar>
<!-- end--表单--> <!-- end--表单-->
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{promServer.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div> </div>
</transition> </transition>
</div> </div>
@@ -337,6 +254,21 @@ export default {
host: '', host: '',
idc: {id: '', name: '', location: ''} idc: {id: '', name: '', location: ''}
}, },
rules:{
'idc.name':[
{required:true,message:this.$t('validate.required'),trigger:'change'}
],
host:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
port:[
{required:true,message:this.$t('validate.required'),trigger:'blur'},
{type:'number',message: this.$t('validate.number')}
],
type:[
{required:true,message:this.$t('validate.required'),trigger:'change'},
]
},
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 20, pageSize: 20,
@@ -473,6 +405,8 @@ export default {
this.rightBox.show = true; this.rightBox.show = true;
}, },
save: function() { save: function() {
this.$refs.promServerForm.validate((valid => {
if(valid){
if (this.promServer.id) { if (this.promServer.id) {
this.$put('promServer', this.promServer).then(response => { this.$put('promServer', this.promServer).then(response => {
if (response.code === 200) { if (response.code === 200) {
@@ -496,6 +430,10 @@ export default {
} }
}); });
} }
}else{
return false;
}
}))
}, },
saveOrToEdit: function() { saveOrToEdit: function() {
if (!this.rightBox.isEdit) { if (!this.rightBox.isEdit) {