mirror of
https://github.com/netcccyun/dnsmgr.git
synced 2026-02-21 15:31:12 +08:00
297 lines
13 KiB
HTML
297 lines
13 KiB
HTML
{extend name="common/layout" /}
|
||
{block name="title"}容灾切换策略{/block}
|
||
{block name="main"}
|
||
<style>
|
||
.dselect::before{
|
||
content: '.';
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
.control-label[is-required]:before {
|
||
content: "*";
|
||
color: #f56c6c;
|
||
margin-right: 4px;
|
||
}
|
||
.tips{color: #f6a838; padding-left: 5px;}
|
||
</style>
|
||
<div class="row" id="app">
|
||
<div class="col-xs-12 center-block" style="float: none;">
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading"><h3 class="panel-title"><a href="/dmonitor/task" class="btn btn-sm btn-default pull-right" style="margin-top:-6px"><i class="fa fa-reply fa-fw"></i> 返回</a>{if $action=='edit'}编辑{else}添加{/if}容灾切换策略</h3></div>
|
||
<div class="panel-body">
|
||
<form onsubmit="return false" method="post" class="form-horizontal" role="form" id="taskform">
|
||
<div class="form-group">
|
||
<label class="col-sm-3 col-xs-12 control-label no-padding-right" is-required>域名选择</label>
|
||
<div class="col-sm-6">
|
||
<div class="input-group">
|
||
<input type="text" name="rr" v-model="set.rr" placeholder="主机记录" class="form-control" required>
|
||
<span class="input-group-addon">.</span>
|
||
<select name="did" v-model="set.did" class="form-control" required>
|
||
<option value="">--主域名--</option>
|
||
<option v-for="option in domainList" :value="option.id">{{option.name}}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>解析记录</label>
|
||
<div class="col-sm-6"><div class="input-group">
|
||
<select name="recordid" v-model="set.recordid" id="recordid" class="form-control" required>
|
||
<option v-for="option in recordList" :value="option.RecordId">{{option.Value}} (线路:{{option.LineName}})</option>
|
||
</select>
|
||
<div class="input-group-btn">
|
||
<button type="button" @click="getRecordList" class="btn btn-info">点击获取</button>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>切换设置</label>
|
||
<div class="col-sm-6">
|
||
<label class="radio-inline" v-for="option in typeList">
|
||
<input type="radio" name="type" :value="option.value" v-model="set.type" :disabled="option.disabled"> {{option.label}}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type==2">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>备用解析记录</label>
|
||
<div class="col-sm-6">
|
||
<input type="text" name="backup_value" v-model="set.backup_value" placeholder="支持填写IPv4或CNAME地址" class="form-control" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type==2&&dnstype=='cloudflare'">
|
||
<div class="col-sm-offset-3 col-sm-7">
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" name="name" v-model="set.cdn"> 切换时同时开启Cloudflare代理模式
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>检测协议</label>
|
||
<div class="col-sm-6">
|
||
<label class="radio-inline" v-for="option in checktypeList">
|
||
<input type="radio" name="checktype" :value="option.value" v-model="set.checktype" :disabled="option.disabled"> {{option.label}}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2&&set.checktype<2">
|
||
<label class="col-sm-3 control-label no-padding-right">指定检测IP</label>
|
||
<div class="col-sm-6">
|
||
<input type="text" name="checkurl" v-model="set.checkurl" placeholder="留空默认为解析记录值IP" class="form-control" data-bv-uri="true" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2&&set.checktype==1">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>TCP检测端口</label>
|
||
<div class="col-sm-6">
|
||
<input type="text" name="tcpport" v-model="set.tcpport" placeholder="填写TCP端口号" class="form-control" data-bv-integer="true" min="1" max="65535" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2&&set.checktype==2">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>检测URL地址</label>
|
||
<div class="col-sm-6">
|
||
<input type="text" name="checkurl" v-model="set.checkurl" placeholder="填写以http(s)://开头的完整地址，http状态码须为2xx/3xx" class="form-control" data-bv-uri="true" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2&&set.checktype==2">
|
||
<label class="col-sm-3 control-label no-padding-right">使用代理请求</label>
|
||
<div class="col-sm-6">
|
||
<label class="radio-inline">
|
||
<input type="radio" name="proxy" value="0" v-model="set.proxy"> 否
|
||
</label>
|
||
<label class="radio-inline">
|
||
<input type="radio" name="proxy" value="1" v-model="set.proxy"> 是
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2&&set.checktype>0">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>最大超时时间</label>
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<input type="text" name="timeout" v-model="set.timeout" placeholder="填写请求最大超时时间" class="form-control" data-bv-integer="true" min="1" required>
|
||
<span class="input-group-addon">秒</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type==3">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>同域名正常数量<span class="tips" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="与暂停解析配合使用，当同域名正常记录数量<=几条时开启解析"><i class="fa fa-question-circle"></i></span></label>
|
||
<div class="col-sm-3">
|
||
<input type="text" name="cycle" v-model="set.cycle" placeholder="同域名正常记录数量<=几条时开启解析" class="form-control" data-bv-integer="true" min="0" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>检测间隔</label>
|
||
<div class="col-sm-3">
|
||
<div class="input-group">
|
||
<input type="text" name="frequency" v-model="set.frequency" placeholder="每次检测的间隔时间" class="form-control" data-bv-integer="true" min="1" required>
|
||
<span class="input-group-addon">秒</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-show="set.type<=2">
|
||
<label class="col-sm-3 control-label no-padding-right" is-required>确认次数</label>
|
||
<div class="col-sm-3">
|
||
<input type="text" name="cycle" v-model="set.cycle" placeholder="连续失败几次后进行切换" class="form-control" data-bv-integer="true" min="1" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label no-padding-right">备注</label>
|
||
<div class="col-sm-6">
|
||
<input type="text" name="remark" v-model="set.remark" placeholder="可留空" class="form-control">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-sm-offset-3 col-sm-6"><button type="button" class="btn btn-primary" @click="submit">提交</button></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script src="{$cdnpublic}vue/2.6.14/vue.min.js"></script>
|
||
<script src="{$cdnpublic}layer/3.1.1/layer.js"></script>
|
||
<script src="/static/js/bootstrapValidator.min.js"></script>
|
||
<script>
|
||
var action = '{$action}';
|
||
var info = {$info|json_encode|raw};
|
||
var domainList = {$domains|json_encode|raw};
|
||
var support_ping = '{$support_ping}';
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
action: '{$action}',
|
||
set: {
|
||
id: '',
|
||
remark: '',
|
||
rr: '',
|
||
did: '',
|
||
recordid: '',
|
||
recordinfo: '',
|
||
main_value: '',
|
||
type: 1,
|
||
backup_value: '',
|
||
checktype: 1,
|
||
tcpport: 80,
|
||
checkurl: '',
|
||
frequency: 5,
|
||
timeout: 2,
|
||
cycle: 3,
|
||
proxy: 0,
|
||
cdn: 0,
|
||
},
|
||
dnstype: null,
|
||
domainList: domainList,
|
||
recordList: [],
|
||
typeList: [
|
||
{value:0, label:'无操作'},
|
||
{value:1, label:'暂停解析'},
|
||
{value:2, label:'切换备用解析'},
|
||
{value:3, label:'条件开启解析'},
|
||
],
|
||
checktypeList: [
|
||
{value:0, label:'PING', disabled: support_ping=='0'},
|
||
{value:1, label:'TCP'},
|
||
{value:2, label:'HTTP(S)'},
|
||
]
|
||
},
|
||
watch: {
|
||
'set.recordid': function(val){
|
||
if(val == '') return;
|
||
var record = this.recordList.find(item => item.RecordId == val);
|
||
if(record){
|
||
this.set.recordinfo = JSON.stringify({Line:record.Line, LineName:record.LineName, TTL:record.TTL});
|
||
if(typeof record.Value == 'object') this.set.main_value = record.Value[0];
|
||
else this.set.main_value = record.Value;
|
||
}
|
||
},
|
||
'set.did': function(val){
|
||
if(val == '') return;
|
||
this.dnstype = this.domainList.find(item => item.id == val).type;
|
||
}
|
||
},
|
||
mounted() {
|
||
if(this.action == 'edit'){
|
||
Object.keys(info).forEach((key) => {
|
||
this.$set(this.set, key, info[key])
|
||
})
|
||
var recordinfo = JSON.parse(this.set.recordinfo);
|
||
this.recordList = [{RecordId:this.set.recordid, Value:this.set.main_value, Line:recordinfo.Line, LineName:recordinfo.LineName, TTL:recordinfo.TTL}];
|
||
}
|
||
$("#taskform").bootstrapValidator({
|
||
live: 'submitted',
|
||
});
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
},
|
||
methods: {
|
||
getRecordList(){
|
||
var that = this;
|
||
if(this.set.did == ''){
|
||
layer.msg('请先选择域名', {time: 800});return;
|
||
}
|
||
if(this.set.rr == ''){
|
||
layer.msg('主机记录不能为空', {time: 800});return;
|
||
}
|
||
var ii = layer.load(2, {shade:[0.1,'#fff']});
|
||
$.ajax({
|
||
type : 'POST',
|
||
url : '/record/list',
|
||
data : {id:this.set.did, rr:this.set.rr},
|
||
dataType : 'json',
|
||
success : function(data) {
|
||
layer.close(ii);
|
||
if(data.code == 0){
|
||
layer.msg('成功获取到'+data.data.length+'条解析记录', {icon:1, time:800});
|
||
that.recordList = data.data;
|
||
if(that.set.recordid){
|
||
var record = that.recordList.find(item => item.RecordId == that.set.recordid);
|
||
if(record){
|
||
that.set.recordinfo = JSON.stringify({Line:record.Line, LineName:record.LineName, TTL:record.TTL});
|
||
if(typeof record.Value == 'object') that.set.main_value = record.Value[0];
|
||
else that.set.main_value = record.Value;
|
||
}
|
||
}
|
||
}else{
|
||
layer.alert(data.msg, {icon:2});
|
||
}
|
||
},
|
||
error:function(data){
|
||
layer.close(ii);
|
||
layer.msg('服务器错误');
|
||
}
|
||
});
|
||
},
|
||
submit(){
|
||
var that=this;
|
||
$("#taskform").data("bootstrapValidator").validate();
|
||
if(!$("#taskform").data("bootstrapValidator").isValid()){
|
||
return false;
|
||
}
|
||
var ii = layer.load(2, {shade:[0.1,'#fff']});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "",
|
||
data: this.set,
|
||
dataType: 'json',
|
||
success: function(data) {
|
||
layer.close(ii);
|
||
if(data.code == 0){
|
||
layer.alert(data.msg, {icon: 1}, function(){
|
||
if(document.referrer.indexOf('task?') > 0)
|
||
window.location.href = document.referrer;
|
||
else
|
||
window.location.href = '/dmonitor/task';
|
||
});
|
||
}else{
|
||
layer.alert(data.msg, {icon: 2});
|
||
}
|
||
},
|
||
error: function(data){
|
||
layer.close(ii);
|
||
layer.msg('服务器错误');
|
||
}
|
||
});
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
{/block} |