@@ -50,7 +50,8 @@
label = "带宽限制"
width = "90" >
< template slot -scope = " scope " >
< el-row v-if = "scope.row.bandwidth > 0" > {{ convertBandwidth ( scope.row.bandwidth , ' BYTE ' , ' Mbps ' ) }} Mbps < / el -row >
< el-row v-if = "scope.row.bandwidth > 0" > {{ convertBandwidth ( scope.row.bandwidth , ' BYTE ' , ' Mbps ' ) }} Mbps
< / el -row >
< el-row v-else > 不限 < / el -row >
< / template >
< / el-table-column >
@@ -69,12 +70,20 @@
label = "路由包含"
width = "180" >
< template slot -scope = " scope " >
< el-row v-for = "(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx" > {{ item.val }} < / el -row >
< el-row v-for = "(item,inx) in scope.row.route_include.slice(0, readMinRows)" :key="inx" > {{
item.val
}}
< / el -row >
< div v-if = "scope.row.route_include.length > readMinRows" >
< div v-if = "readMore[`ri_${ scope.row.id }`]" >
< el -row v-for = "(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx" > {{ item.val }} < / el -row >
< el -row v-for = "(item,inx) in scope.row.route_include.slice(readMinRows)" :key="inx" > {{
item.val
}}
< / el -row >
< / div >
< el-button size = "mini" type = "text" @click ="toggleMore(`ri_${ scope.row.id }`)" > {{ readMore [ ` ri_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }} < / el -button >
< el-button size = "mini" type = "text" @click ="toggleMore(`ri_${ scope.row.id }`)" >
{{ readMore [ ` ri_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }}
< / el -button >
< / div >
< / template >
< / el-table-column >
@@ -84,12 +93,20 @@
label = "路由排除"
width = "180" >
< template slot -scope = " scope " >
< el-row v-for = "(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx" > {{ item.val }} < / el -row >
< el-row v-for = "(item,inx) in scope.row.route_exclude.slice(0, readMinRows)" :key="inx" > {{
item.val
}}
< / el -row >
< div v-if = "scope.row.route_exclude.length > readMinRows" >
< div v-if = "readMore[`re_${ scope.row.id }`]" >
< el -row v-for = "(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx" > {{ item.val }} < / el -row >
< el -row v-for = "(item,inx) in scope.row.route_exclude.slice(readMinRows)" :key="inx" > {{
item.val
}}
< / el -row >
< / div >
< el-button size = "mini" type = "text" @click ="toggleMore(`re_${ scope.row.id }`)" > {{ readMore [ ` re_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }} < / el -button >
< el-button size = "mini" type = "text" @click ="toggleMore(`re_${ scope.row.id }`)" >
{{ readMore [ ` re_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }}
< / el -button >
< / div >
< / template >
< / el-table-column >
@@ -108,7 +125,9 @@
{{ item.action }} = > { { item . val } } : { { item . port } }
< / el-row >
< / div >
< el-button size = "mini" type = "text" @click ="toggleMore(`la_${ scope.row.id }`)" > {{ readMore [ ` la_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }} < / el -button >
< el-button size = "mini" type = "text" @click ="toggleMore(`la_${ scope.row.id }`)" >
{{ readMore [ ` la_ $ { scope.row.id } ` ] ? " ▲ 收起 " : " ▼ 更多 " }}
< / el -button >
< / div >
< / template >
< / el-table-column >
@@ -192,7 +211,8 @@
< / el-form-item >
< el-form-item label = "带宽限制" prop = "bandwidth_format" style = "width:260px;" >
< el-input v-model = "ruleForm.bandwidth_format" oninput="value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" >
< el-input v-model = "ruleForm.bandwidth_format"
oninput = "value= value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''" >
< template slot = "append" > Mbps < / template >
< / el-input >
< / el-form-item >
@@ -229,6 +249,30 @@
< / el-col >
< / el-row >
< / el-form-item >
< el-form-item label = "分割DNS" prop = "split_dns" >
< el-row class = "msg-info" >
< el-col :span = "20" > 一般留空 。 如果输入域名 , 只有配置的域名 ( 包含子域名 ) 走配置的dns < / el-col >
< el-col :span = "4" >
< el-button size = "mini" type = "success" icon = "el-icon-plus" circle
@click.prevent ="addDomain(ruleForm.split_dns)" > < / el -button >
< / el-col >
< / el-row >
< el-row v-for = "(item,index) in ruleForm.split_dns"
:key = "index" style = "margin-bottom: 5px" :gutter = "10" >
< el-col :span = "10" >
< el-input v-model = "item.val" > < / el -input >
< / el-col >
< el-col :span = "12" >
< el-input v-model = "item.note" placeholder="备注" > < / el -input >
< / el-col >
< el-col :span = "2" >
< el-button size = "mini" type = "danger" icon = "el-icon-minus" circle
@click.prevent ="removeDomain(ruleForm.split_dns,index)" > < / el -button >
< / el-col >
< / el-row >
< / el-form-item >
< el-form-item label = "状态" prop = "status" >
< el-radio-group v-model = "ruleForm.status" >
< el -radio :label = "1" border > 启用 < / el-radio >
@@ -246,38 +290,50 @@
< / el-radio-group >
< / el-form-item >
< template v-if = "ruleForm.auth.type == 'radius'" >
< el -form -item label = "服务器地址" prop = "auth.radius.addr" : rules = "this.ruleForm.auth.type== 'radius' ? this.rules['auth.radius.addr'] : [{ required: false }]" >
< el -form -item label = "服务器地址" prop = "auth.radius.addr"
: rules = "this.ruleForm.auth.type== 'radius' ? this.rules['auth.radius.addr'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.radius.addr" placeholder="例如 ip:1812" > < / el -input >
< / el-form-item >
< el-form-item label = "密钥" prop = "auth.radius.secret" : rules = "this.ruleForm.auth.type== 'radius' ? this.rules['auth.radius.secret'] : [{ required: false }]" >
< el-form-item label = "密钥" prop = "auth.radius.secret"
: rules = "this.ruleForm.auth.type== 'radius' ? this.rules['auth.radius.secret'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.radius.secret" placeholder="" > < / el -input >
< / el-form-item >
< / template >
< template v-if = "ruleForm.auth.type == 'ldap'" >
< el -form -item label = "服务器地址" prop = "auth.ldap.addr" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.addr'] : [{ required: false }]" >
< el -form -item label = "服务器地址" prop = "auth.ldap.addr"
: rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.addr'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.addr" placeholder="例如 ip:389 / 域名:389" > < / el -input >
< / el-form-item >
< el-form-item label = "开启TLS" prop = "auth.ldap.tls" >
< el-switch v-model = "ruleForm.auth.ldap.tls" > < / el -switch >
< / el-form-item >
< el-form-item label = "管理员 DN" prop = "auth.ldap.bind_name" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.bind_name'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.bind_name" placeholder="例如 CN=bindadmin,DC=abc,DC=COM" > < / el -input >
< el-form-item label = "管理员 DN" prop = "auth.ldap.bind_name"
: rules = "this. ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.bind_name'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.bind_name"
placeholder = "例如 CN=bindadmin,DC=abc,DC=COM" > < / el-input >
< / el-form-item >
< el-form-item label = "管理员密码" prop = "auth.ldap.bind_pwd" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.bind_pwd'] : [{ required: false }]" >
< el-form-item label = "管理员密码" prop = "auth.ldap.bind_pwd"
: rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.bind_pwd'] : [{ required: false }]" >
< el-input type = "password" v-model = "ruleForm.auth.ldap.bind_pwd" placeholder="" > < / el -input >
< / el-form-item >
< el-form-item label = "Base DN" prop = "auth.ldap.base_dn" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.base_dn'] : [{ required: false }]" >
< el-form-item label = "Base DN" prop = "auth.ldap.base_dn"
: rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.base_dn'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.base_dn" placeholder="例如 DC=abc,DC=com" > < / el -input >
< / el-form-item >
< el-form-item label = "用户对象类" prop = "auth.ldap.object_class" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.object_class'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.object_class" placeholder="例如 person / user / posixAccount" > < / el -input >
< el-form-item label = "用户对象类" prop = "auth.ldap.object_class"
: rules = "this. ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.object_class'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.object_class"
placeholder = "例如 person / user / posixAccount" > < / el-input >
< / el-form-item >
< el-form-item label = "用户唯一ID" prop = "auth.ldap.search_attr" : rules = "this.ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.search_attr'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.search_attr" placeholder="例如 sAMAccountName / uid / cn" > < / el -input >
< el-form-item label = "用户唯一ID" prop = "auth.ldap.search_attr"
: rules = "this. ruleForm.auth.type== 'ldap' ? this.rules['auth.ldap.search_attr'] : [{ required: false }]" >
< el-input v-model = "ruleForm.auth.ldap.search_attr"
placeholder = "例如 sAMAccountName / uid / cn" > < / el-input >
< / el-form-item >
< el-form-item label = "受限用户组" prop = "auth.ldap.member_of" >
< el-input v-model = "ruleForm.auth.ldap.member_of" placeholder="选填, 只允许指定组登入, 例如 CN=HomeWork,DC=abc,DC=com" > < / el -input >
< el-input v-model = "ruleForm.auth.ldap.member_of"
placeholder = "选填, 只允许指定组登入, 例如 CN=HomeWork,DC=abc,DC=com" > < / el-input >
< / el-form-item >
< / template >
< / el-tab-pane >
@@ -344,7 +400,9 @@
< el-tab-pane label = "权限控制" name = "link_acl" >
< el-form-item label = "权限控制" prop = "link_acl" >
< el-row class = "msg-info" >
< el-col :span = "22" > 输入CIDR格式如 : 192.168 .3 .0 / 24 端口0表示所有端口 , 多个端口用 ',' 号分隔 , 连续端口 : 1234 - 5678 < / el-col >
< el-col :span = "22" > 输入CIDR格式如 : 192.168 .3 .0 / 24
端口0表示所有端口 , 多个端口用 ',' 号分隔 , 连续端口 : 1234 - 5678
< / el-col >
< el-col :span = "2" >
< el-button size = "mini" type = "success" icon = "el-icon-plus" circle
@click.prevent ="addDomain(ruleForm.link_acl)" > < / el -button >
@@ -378,10 +436,12 @@
< el-tab-pane label = "域名拆分隧道" name = "ds_domains" >
< el-form-item label = "包含域名" prop = "ds_include_domains" >
< el-input type = "textarea" :rows = "5" v-model = "ruleForm.ds_include_domains" placeholder="输入域名用,号分隔,默认匹配所有子域名, 如baidu.com,163.com" > < / el -input >
< el-input type = "textarea" :rows = "5" v-model = "ruleForm.ds_include_domains"
placeholder = "输入域名用,号分隔,默认匹配所有子域名, 如baidu.com,163.com" > < / el-input >
< / el-form-item >
< el-form-item label = "排除域名" prop = "ds_exclude_domains" >
< el-input type = "textarea" :rows = "5" v-model = "ruleForm.ds_exclude_domains" placeholder="输入域名用,号分隔,默认匹配所有子域名, 如baidu.com,163.com" > < / el -input >
< el-input type = "textarea" :rows = "5" v-model = "ruleForm.ds_exclude_domains"
placeholder = "输入域名用,号分隔,默认匹配所有子域名, 如baidu.com,163.com" > < / el-input >
< div class = "msg-info" > 注 : 域名拆分隧道 , 仅支持AnyConnect的windows和MacOS桌面客户端 , 不支持移动端 . < / div >
< / el-form-item >
< / el-tab-pane >
@@ -405,7 +465,8 @@
center >
< el-form :model = "authLoginForm" :rules = "authLoginRules" ref = "authLoginForm" label -width = " 100px " >
< el-form-item label = "账号" prop = "name" >
< el-input v-model = "authLoginForm.name" ref="authLoginFormName" @keydown.enter.native="testAuthLogin" > < / el -input >
< el-input v-model = "authLoginForm.name" ref="authLoginFormName"
@keydown.enter.native ="testAuthLogin" > < / el -input >
< / el-form-item >
< el-form-item label = "密码" prop = "pwd" >
< el-input type = "password" v-model = "authLoginForm.pwd" @keydown.enter.native="testAuthLogin" > < / el -input >
@@ -426,8 +487,12 @@
center >
< el-form ref = "ipEditForm" label -width = " 80px " >
< el-form-item label = "路由表" prop = "ip_list" >
< el-input type = "textarea" :rows = "10" v-model = "ipEditForm.ip_list" placeholder="每行一条路由, 例: 192.168.1.0/24,备注 或 192.168.1.0/24" > < / el -input >
< div class = "msg-info" > 当前共 { { ipEditForm . ip _list . trim ( ) === '' ? 0 : ipEditForm . ip _list . trim ( ) . split ( "\n ") . length } } 条 ( 注 : AnyConnect客户端最多支持 { { this . maxRouteRows } } 条路由 ) < / div >
< el-input type = "textarea" :rows = "10" v-model = "ipEditForm.ip_list"
placeholder = "每行一条路由, 例: 192.168.1.0/24,备注 或 192.168.1.0/24 " > < / el-input >
< div class = "msg-info" > 当前共
{ { ipEditForm . ip _list . trim ( ) === '' ? 0 : ipEditForm . ip _list . trim ( ) . split ( "\n" ) . length } }
条 ( 注 : AnyConnect客户端最多支持 { { this . maxRouteRows } } 条路由 )
< / div >
< / el-form-item >
< el-form-item >
< el-button type = "primary" @click ="ipEdit()" :loading = "ipEditLoading" > 更新 < / el-button >
@@ -458,22 +523,22 @@ export default {
page : 1 ,
tableData : [ ] ,
count : 10 ,
activeTab : "general" ,
activeTab : "general" ,
readMore : { } ,
readMinRows : 5 ,
maxRouteRows : 2500 ,
defAuth : {
type : 'local' ,
radius : { addr : "" , secret : "" } ,
ldap : {
addr : "" ,
tls : false ,
base _dn : "" ,
object _class : "person" ,
search _attr : "sAMAccountName" ,
member _of : "" ,
bind _name : "" ,
bind _pwd : "" ,
readMinRows : 5 ,
maxRouteRows : 2500 ,
defAuth : {
type : 'local' ,
radius : { addr : "" , secret : "" } ,
ldap : {
addr : "" ,
tls : false ,
base _dn : "" ,
object _class : "person" ,
search _attr : "sAMAccountName" ,
member _of : "" ,
bind _name : "" ,
bind _pwd : "" ,
} ,
} ,
ruleForm : {
@@ -481,24 +546,25 @@ export default {
bandwidth _format : '0' ,
status : 1 ,
allow _lan : true ,
client _dns : [ { val : '114.114.114.114' } ] ,
client _dns : [ { val : '114.114.114.114' , note : '默认dns' }] ,
split _dns : [ ] ,
route _include : [ { val : 'all' , note : '默认全局代理' } ] ,
route _exclude : [ ] ,
link _acl : [ ] ,
auth : { } ,
auth : { } ,
} ,
authLoginDialog : false ,
ipListDialog : false ,
authLoginLoading : false ,
authLoginForm : {
name : "" ,
pwd : "" ,
authLoginDialog : false ,
ipListDialog : false ,
authLoginLoading : false ,
authLoginForm : {
name : "" ,
pwd : "" ,
} ,
ipEditForm : {
ip _list : "" ,
type : "" ,
type : "" ,
} ,
ipEditLoading : false ,
ipEditLoading : false ,
authLoginRules : {
name : [
{ required : true , message : '请输入账号' , trigger : 'blur' } ,
@@ -549,11 +615,11 @@ export default {
} ,
methods : {
setAuthData ( row ) {
if ( ! row ) {
if ( ! row ) {
this . ruleForm . auth = JSON . parse ( JSON . stringify ( this . defAuth ) ) ;
return ;
return ;
}
if ( row . auth . type == "ldap" && ! row . auth . ldap . object _class ) {
if ( row . auth . type == "ldap" && ! row . auth . ldap . object _class ) {
row . auth . ldap . object _class = this . defAuth . ldap . object _class ;
}
this . ruleForm . auth = Object . assign ( JSON . parse ( JSON . stringify ( this . defAuth ) ) , row . auth ) ;
@@ -625,7 +691,8 @@ export default {
// arr.pop()
} ,
addDomain ( arr ) {
arr . push ( { val : "" , action : "allow" , port : "0" } ) ;
console . log ( "arr" , arr )
arr . push ( { val : "" , action : "allow" , port : "0" , note : "" } ) ;
} ,
submitForm ( formName ) {
this . $refs [ formName ] . validate ( ( valid ) => {
@@ -657,9 +724,11 @@ export default {
return false ;
}
this . authLoginLoading = true ;
axios . post ( '/group/auth_login' , { name : this . authLoginForm . name ,
pwd : this . authLoginForm . pwd ,
auth : this . ruleForm . auth } ) . then ( resp => {
axios . post ( '/group/auth_login' , {
name : this . authLoginForm . name ,
pwd : this . authLoginForm . pwd ,
auth : this . ruleForm . auth
} ) . then ( resp => {
const rdata = resp . data ;
if ( rdata . code === 0 ) {
this . $message . success ( "登录成功" ) ;
@@ -732,7 +801,7 @@ export default {
isValidCIDR ( input ) {
const cidrRegex = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)\/([12]?\d|3[0-2])$/ ;
if ( ! cidrRegex . test ( input ) ) {
return { valid : false , suggestion : null } ;
return { valid : false , suggestion : null } ;
}
const [ ip , mask ] = input . split ( '/' ) ;
const maskNum = parseInt ( mask ) ;
@@ -747,10 +816,10 @@ export default {
networkIPParts . push ( parseInt ( octet , 2 ) ) ;
}
const suggestedIP = networkIPParts . join ( '.' ) ;
return { valid : false , suggestion : ` ${ suggestedIP } / ${ mask } ` } ;
return { valid : false , suggestion : ` ${ suggestedIP } / ${ mask } ` } ;
}
}
return { valid : true , suggestion : null } ;
return { valid : true , suggestion : null } ;
} ,
resetForm ( formName ) {
this . $refs [ formName ] . resetFields ( ) ;
@@ -767,7 +836,7 @@ export default {
} ,
beforeTabLeave ( ) {
var isSwitch = true
if ( ! this . user _edit _dialog ) {
if ( ! this . user _edit _dialog ) {
return isSwitch ;
}
this . $refs [ 'ruleForm' ] . validate ( ( valid ) => {
@@ -814,19 +883,20 @@ export default {
width : 80 px ;
}
: : v - deep . valgin - dialog {
: : v - deep . valgin - dialog {
display : flex ;
flex - direction : column ;
margin : 0 ! important ;
position : absolute ;
top : 50 % ;
left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
max - height : calc ( 100 % - 30 px ) ;
max - width : calc ( 100 % - 30 px ) ;
margin : 0 ! important ;
position : absolute ;
top : 50 % ;
left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
max - height : calc ( 100 % - 30 px ) ;
max - width : calc ( 100 % - 30 px ) ;
}
: : v - deep . valgin - dialog . el - dialog _ _body {
flex : 1 ;
: : v - deep . valgin - dialog . el - dialog _ _body {
flex : 1 ;
overflow : auto ;
}
< / style >