mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-05 06:10:26 +08:00
103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
|
Vue.component("ns-route-ranges-box", {
|
|||
|
|
props: ["v-ranges"],
|
|||
|
|
data: function () {
|
|||
|
|
let ranges = this.vRanges
|
|||
|
|
if (ranges == null) {
|
|||
|
|
ranges = []
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
ranges: ranges,
|
|||
|
|
isAdding: false,
|
|||
|
|
|
|||
|
|
// IP范围
|
|||
|
|
ipRangeFrom: "",
|
|||
|
|
ipRangeTo: ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
add: function () {
|
|||
|
|
this.isAdding = true
|
|||
|
|
let that = this
|
|||
|
|
setTimeout(function () {
|
|||
|
|
that.$refs.ipRangeFrom.focus()
|
|||
|
|
}, 100)
|
|||
|
|
},
|
|||
|
|
remove: function (index) {
|
|||
|
|
this.ranges.$remove(index)
|
|||
|
|
},
|
|||
|
|
cancelIPRange: function () {
|
|||
|
|
this.isAdding = false
|
|||
|
|
this.ipRangeFrom = ""
|
|||
|
|
this.ipRangeTo = ""
|
|||
|
|
},
|
|||
|
|
confirmIPRange: function () {
|
|||
|
|
// 校验IP
|
|||
|
|
let that = this
|
|||
|
|
this.ipRangeFrom = this.ipRangeFrom.trim()
|
|||
|
|
if (!this.validateIP(this.ipRangeFrom)) {
|
|||
|
|
teaweb.warn("开始IP填写错误", function () {
|
|||
|
|
that.$refs.ipRangeFrom.focus()
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.ipRangeTo = this.ipRangeTo.trim()
|
|||
|
|
if (!this.validateIP(this.ipRangeTo)) {
|
|||
|
|
teaweb.warn("结束IP填写错误", function () {
|
|||
|
|
that.$refs.ipRangeTo.focus()
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.ranges.push({
|
|||
|
|
type: "ipRange",
|
|||
|
|
ipFrom: this.ipRangeFrom,
|
|||
|
|
ipTo: this.ipRangeTo
|
|||
|
|
})
|
|||
|
|
this.cancelIPRange()
|
|||
|
|
},
|
|||
|
|
validateIP: function (ip) {
|
|||
|
|
if (!ip.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/)) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
let pieces = ip.split(".")
|
|||
|
|
let isOk = true
|
|||
|
|
pieces.forEach(function (v) {
|
|||
|
|
let v1 = parseInt(v)
|
|||
|
|
if (v1 > 255) {
|
|||
|
|
isOk = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return isOk
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
template: `<div>
|
|||
|
|
<input type="hidden" name="rangesJSON" :value="JSON.stringify(ranges)"/>
|
|||
|
|
<div v-if="ranges.length > 0">
|
|||
|
|
<div class="ui label tiny basic" v-for="(range, index) in ranges">
|
|||
|
|
<span v-if="range.type == 'ipRange'">IP范围：</span>
|
|||
|
|
{{range.ipFrom}} - {{range.ipTo}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui divider"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- IP 范围 -->
|
|||
|
|
<div style="margin-bottom: 1em" v-show="isAdding">
|
|||
|
|
<div class="ui fields inline">
|
|||
|
|
<div class="ui field">
|
|||
|
|
<input type="text" placeholder="开始IP" maxlength="15" size="15" v-model="ipRangeFrom" ref="ipRangeFrom" @keyup.enter="confirmIPRange" @keypress.enter.prevent="1"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui field">-</div>
|
|||
|
|
<div class="ui field">
|
|||
|
|
<input type="text" placeholder="结束IP" maxlength="15" size="15" v-model="ipRangeTo" ref="ipRangeTo" @keyup.enter="confirmIPRange" @keypress.enter.prevent="1"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="ui field">
|
|||
|
|
<button class="ui button tiny" type="button" @click.prevent="confirmIPRange">确定</button>
|
|||
|
|
<a href="" @click.prevent="cancelIPRange" title="取消"><i class="icon remove small"></i></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
|
|||
|
|
</div>`
|
|||
|
|
})
|