增加封禁省份管理

This commit is contained in:
刘祥超
2020-11-06 11:30:35 +08:00
parent d8cb7e15d4
commit f3e3bffa2b
8 changed files with 172 additions and 5 deletions

View File

@@ -20,7 +20,9 @@
<tr>
<td>选择封禁区域</td>
<td>
<div class="ui menu tabular tiny region-letter-group">
<more-options-indicator>选择区域</more-options-indicator>
<div class="ui menu tabular tiny region-letter-group" v-show="moreOptionsVisible">
<a href="" v-for="group in letterGroups" class="item" :class="{active: group == selectedGroup}" @click.prevent="selectGroup(group)">{{group}}</a>
<div class="item right">
<div class="ui checkbox" @click.prevent="checkAll">
@@ -29,7 +31,7 @@
</div>
</div>
</div>
<div v-for="group in letterGroups">
<div v-for="group in letterGroups" v-show="moreOptionsVisible">
<div v-for="letter in group" v-if="letterCountries[letter] != null && group == selectedGroup" class="country-group">
<h4>{{letter}}</h4>
<div class="country-list">

View File

@@ -3,7 +3,6 @@ Tea.context(function () {
"ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZ"
];
this.selectedGroup = "ABC"
this.selectedCountries = []
this.letterCountries = {}
let that = this
this.countries.forEach(function (country) {

View File

@@ -0,0 +1,9 @@
.province-list .item {
float: left;
width: 12em;
margin-bottom: 0.5em;
}
.province-list .item .checkbox label {
font-size: 12px !important;
}
/*# sourceMappingURL=provinces.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["provinces.less"],"names":[],"mappings":"AAAA,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AAJF,cACC,MAKC,UAAU;EACT,0BAAA","file":"provinces.css"}

View File

@@ -4,4 +4,36 @@
<div class="right-box">
{$template "../waf_menu"}
{$template "menu"}
<form class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
<table class="ui table selectable definition">
<tr>
<td class="title">已封禁</td>
<td>
<div class="ui label tiny" v-for="province in provinces" v-if="province.isChecked" style="margin-bottom: 0.5em">
<input type="hidden" name="provinceIds" :value="province.id"/>
{{province.name}} <a href="" @click.prevent="deselectProvince(province)" title="取消封禁"><i class="icon remove"></i></a>
</div>
</td>
</tr>
<tr>
<td>选择封禁区域</td>
<td>
<more-options-indicator>选择省份/自治区</more-options-indicator>
<div class="province-list" v-show="moreOptionsVisible">
<div class="item" v-for="province in provinces">
<div class="ui checkbox" @click.prevent="selectProvince(province)">
<input type="checkbox" v-model="province.isChecked"/>
<label>{{province.name}}</label>
</div>
</div>
</div>
<div class="clear"></div>
</td>
</tr>
</table>
<submit-btn></submit-btn>
</form>
</div>

View File

@@ -0,0 +1,23 @@
Tea.context(function () {
this.isCheckingAll = false
this.selectProvince = function (province) {
province.isChecked = !province.isChecked
}
this.deselectProvince = function (province) {
province.isChecked = false
}
this.checkAll = function () {
this.isCheckingAll = !this.isCheckingAll
this.provinces.forEach(function (province) {
province.isChecked = that.isCheckingAll
})
}
this.success = function () {
teaweb.successToast("保存成功")
}
})

View File

@@ -0,0 +1,11 @@
.province-list {
.item {
float: left;
width: 12em;
margin-bottom: 0.5em;
.checkbox label {
font-size: 12px !important;
}
}
}