@@ -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 >
@@ -361,10 +419,11 @@
< / el-select >
< / el-input >
< / el-col >
< el-col :span = "6 " >
< el-input type = "textarea" : autosize= "{ minRows: 1, maxRows: 2}" v-model = "item.port" placeholder="多端口,号分隔" > < / el -input >
< el-col :span = "8 " >
<!-- type= "textarea" : autosize= "{ minRows: 1, maxRows: 2}" -- >
< el-input v-model = "item.port" placeholder="多端口,号分隔" > < / el -input >
< / el-col >
< el-col :span = "6 " >
< el-col :span = "4 " >
< el-input v-model = "item.note" placeholder="备注" > < / el -input >
< / el-col >
< el-col :span = "2" >
@@ -377,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 >
@@ -404,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 >
@@ -425,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 >
@@ -480,7 +546,8 @@ 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 : [ ] ,
@@ -624,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 ) => {
@@ -656,9 +724,11 @@ export default {
return false ;
}
this . authLoginLoading = true ;
axios . post ( '/group/auth_login' , { name : this . authLoginForm . name ,
axios . post ( '/group/auth_login' , {
name : this . authLoginForm . name ,
pwd : this . authLoginForm . pwd ,
auth : this . ruleForm . auth } ) . then ( resp => {
auth : this . ruleForm . auth
} ) . then ( resp => {
const rdata = resp . data ;
if ( rdata . code === 0 ) {
this . $message . success ( "登录成功" ) ;
@@ -824,6 +894,7 @@ export default {
max - height : calc ( 100 % - 30 px ) ;
max - width : calc ( 100 % - 30 px ) ;
}
: : v - deep . valgin - dialog . el - dialog _ _body {
flex : 1 ;
overflow : auto ;