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

feat:asset-account配置增加telnet协议

Browse Source 
1.asset-account配置增加telnet协议
2.dashboard chart面板删除按钮删除逻辑调整
This commit is contained in:
wangwenrui
2020-03-09 08:41:21 +08:00
parent 45b2d580f5
commit de4bf4b9a0
7 changed files with 225 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-show="isEdit">
<button type="button" @click="changeLoginType(1)" id="account-logintype-1"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -13,32 +13,55 @@
<span>{{$t('asset.createAssetTab.ssh')}}</span>
</button>
</div>-->
<div class="nz-tab" v-if="isEdit">
<div class="nz-tab-item-box" @click="changeLoginType(1)" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('asset.createAssetTab.password')}}</div>
<div class="nz-tab" v-show="isEdit">
<div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH','unclickable':!isAllowedChangeProtocol&&account.protocol == 'TELNET'}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
</div>
<div @click="changeLoginType(2)" class="nz-tab-item-box">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('asset.createAssetTab.ssh')}}</div>
<div @click="changeProtocolType('TELNET')" class="nz-tab-item-box">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET','unclickable':!isAllowedChangeProtocol&&account.protocol == 'SSH'}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
</div>
</div>
<el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-if="!isEdit">
<div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>
<el-form-item :label="$t('asset.createAssetTab.protocol')" size="mini" v-show="!isEdit">
<div class="right-box-form-content-txt" >{{account.protocol=='SSH'?$t('asset.createAssetTab.sshProtocol'):$t('asset.createAssetTab.telnetProtocol')}}</div>
</el-form-item>
<!-- <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-show="!isEdit">-->
<!-- <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="small" v-model="account.user" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
<el-input autocomplete="new-password" size="small" v-model="account.user" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.user}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
<el-radio-group v-model="account.authType" size="small">
<el-radio-button label="1">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="isEdit&&(account.authType==1 || account.protocol == 'TELNET')" >
<el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.port}}</div>
<el-input size="small" v-model.number="account.port" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.port}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="isEdit&&(account.authType==2 && account.protocol == 'SSH')" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
</el-form-item>
</el-form>
<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
<div class="telnet-option_title clickable" @click="isShowTelnetOption">login option<i style="font-size: 12px;" :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div>
<el-form-item :label="$t('asset.createAssetTab.userTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.userTip" />
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.passwordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.passwordTip" />
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.reloginPasswordTip" />
</el-form-item>
</div>
</div>
</template>
@@ -48,7 +71,8 @@ export default {
name: "accountConfig",
props:{
account:{type:Object},
isEdit:{type:Boolean,default:true}
isEdit:{type:Boolean,default:true},
isAllowedChangeProtocol:{type:Boolean,default:true}
},
created() {
},
@@ -63,7 +87,7 @@ export default {
{ validator: port, trigger: 'blur'}
],
},
uploadTip:''
showTelnetOption:false
}
},
methods:{
@@ -72,25 +96,43 @@ export default {
id:null,
user:"",
authType:1,
protocol:'SSH',
pwd:"",
port:null,
privateKey:null,
uploadFile:null
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}
},
changeLoginType:function(loginType){
this.account.authType=loginType;
if(loginType == 1){//密码登录
this.clearPrivateKey();
isShowTelnetOption:function(){
this.showTelnetOption=!this.showTelnetOption;
if(!this.showTelnetOption){
this.account.userTip="";
this.account.passwordTip="";
this.account.reloginPasswordTip="";
}
if(loginType == 2){//公钥登录
this.account.pwd='';
},
telnetOptionState:function(){
if(this.account.userTip != ''|| this.account.passwordTip != '' || this.account.reloginPasswordTip != ''){
this.showTelnetOption=true;
}
},
changeProtocolType:function(protocolType){
if(this.isAllowedChangeProtocol){
this.account.protocol=protocolType;
}else{
return ;
}
},
clearPrivateKey:function(){
this.account.privateKey=null;
},
clearTelnetOptions:function(){
this.account.userTip='';
this.account.passwordTip='';
this.account.reloginPasswordTip='';
},
handleChange(file,fileList) {
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]
@@ -111,11 +153,19 @@ export default {
immediate:true,
deep:true,
handler(n,o){
// if (n && n.id) {
// this.account=n;
// } else {
// this.resetData();
// }
if(n.authType == 1){//密码登录
this.clearPrivateKey();
}
if(n.authType == 2){//公钥登录
this.account.pwd='';
}
if(n.protocol == 'SSH'){
this.showTelnetOption=false;
this.clearTelnetOptions();
}else{
this.clearPrivateKey();
}
this.telnetOptionState();
}
}
}
@@ -143,4 +193,21 @@ export default {
height: 40px;
}
/*去除上传文件动画end*/
.telnet-option{
position: relative;
}
.telnet-option:before{
content: "";
display: inline-block;
width: 79.9%;
height: 1px;
background-color: lightgrey;
vertical-align: middle;
margin-bottom: 18px;
}
.telnet-option .telnet-option_title{
display: inline-block;
vertical-align: middle;
margin-bottom: 18px;
}
</style>