增加国家/地区封禁管理

web/views/@default/servers/components/waf/ipadmin.html

@@ -1,8 +0,0 @@
-{$layout}
-{$template "/left_menu"}
-
-<div class="right-box">
-	{$template "waf_menu"}
-
-	<p class="ui message">此功能暂未开放，敬请期待。</p>
-</div>

web/views/@default/servers/components/waf/ipadmin/@menu.html

@@ -0,0 +1,5 @@
+<second-menu style="margin-top:-1em">
+	<menu-item :href="'/servers/components/waf/ipadmin?firewallPolicyId=' + firewallPolicyId" :active="subMenuItem == 'region'">国家/地区封禁</menu-item>
+	<menu-item :href="'/servers/components/waf/ipadmin/provinces?firewallPolicyId=' + firewallPolicyId" :active="subMenuItem == 'province'">省份封禁</menu-item>
+	<menu-item :href="'/servers/components/waf/ipadmin/lists?firewallPolicyId=' + firewallPolicyId" :active="subMenuItem == 'list'">IP名单</menu-item>
+</second-menu>

web/views/@default/servers/components/waf/ipadmin/index.css

@@ -0,0 +1,16 @@
+.region-letter-group .item {
+  padding-left: 1em !important;
+  padding-right: 1em !important;
+}
+.country-group {
+  padding-bottom: 1em;
+}
+.country-group .country-list .item {
+  float: left;
+  width: 12em;
+  margin-bottom: 0.5em;
+}
+.country-group .country-list .item .checkbox label {
+  font-size: 12px !important;
+}
+/*# sourceMappingURL=index.css.map */

web/views/@default/servers/components/waf/ipadmin/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,oBACC;EACC,4BAAA;EACA,6BAAA;;AAIF;EAaC,mBAAA;;AAbD,cACC,cACC;EACC,WAAA;EACA,WAAA;EACA,oBAAA;;AALH,cACC,cACC,MAKC,UAAU;EACT,0BAAA","file":"index.css"}

web/views/@default/servers/components/waf/ipadmin/index.html

@@ -0,0 +1,51 @@
+{$layout}
+{$template "/left_menu"}
+
+<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="country in countries" v-if="country.isChecked" style="margin-bottom: 0.5em">
+						<input type="hidden" name="countryIds" :value="country.id"/>
+						({{country.letter}}){{country.name}} <a href="" @click.prevent="deselectCountry(country)" title="取消封禁"><i class="icon remove"></i></a>
+					</div>
+				</td>
+			</tr>
+			<tr>
+				<td>选择封禁区域</td>
+				<td>
+					<div class="ui menu tabular tiny region-letter-group">
+						<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">
+								<input type="checkbox" v-model="isCheckingAll"/>
+								<label>全选</label>
+							</div>
+						</div>
+					</div>
+					<div v-for="group in letterGroups">
+						<div v-for="letter in group" v-if="letterCountries[letter] != null && group == selectedGroup" class="country-group">
+							<h4>{{letter}}</h4>
+							<div class="country-list">
+								<div class="item" v-for="country in letterCountries[letter]">
+									<div class="ui checkbox" @click.prevent="selectCountry(country)">
+										<input type="checkbox" v-model="country.isChecked"/>
+										<label>{{country.name}}</label>
+									</div>
+								</div>
+							</div>
+							<div class="clear"></div>
+						</div>
+					</div>
+				</td>
+			</tr>
+		</table>
+		<submit-btn></submit-btn>
+	</form>
+</div>

web/views/@default/servers/components/waf/ipadmin/index.js

@@ -0,0 +1,40 @@
+Tea.context(function () {
+	this.letterGroups = [
+		"ABC", "DEF", "GHI", "JKL", "MNO", "PQR", "STU", "VWX", "YZ"
+	];
+	this.selectedGroup = "ABC"
+	this.selectedCountries = []
+	this.letterCountries = {}
+	let that = this
+	this.countries.forEach(function (country) {
+		if (typeof (that.letterCountries[country.letter]) == "undefined") {
+			that.letterCountries[country.letter] = []
+		}
+		that.letterCountries[country.letter].push(country)
+	})
+	this.isCheckingAll = false
+
+	this.selectGroup = function (group) {
+		this.selectedGroup = group
+	}
+
+	this.selectCountry = function (country) {
+		country.isChecked = !country.isChecked
+	}
+
+	this.deselectCountry = function (country) {
+		country.isChecked = false
+	}
+
+	this.checkAll = function () {
+		this.isCheckingAll = !this.isCheckingAll
+
+		this.countries.forEach(function (country) {
+			country.isChecked = that.isCheckingAll
+		})
+	}
+
+	this.success = function () {
+		teaweb.successToast("保存成功")
+	}
+})

web/views/@default/servers/components/waf/ipadmin/index.less

@@ -0,0 +1,22 @@
+.region-letter-group {
+	.item {
+		padding-left: 1em !important;
+		padding-right: 1em !important;
+	}
+}
+
+.country-group {
+	.country-list {
+		.item {
+			float: left;
+			width: 12em;
+			margin-bottom: 0.5em;
+
+			.checkbox label {
+				font-size: 12px !important;
+			}
+		}
+	}
+
+	padding-bottom: 1em;
+}

web/views/@default/servers/components/waf/ipadmin/lists.html

@@ -0,0 +1,7 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	{$template "../waf_menu"}
+	{$template "menu"}
+</div>

web/views/@default/servers/components/waf/ipadmin/provinces.html

@@ -0,0 +1,7 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	{$template "../waf_menu"}
+	{$template "menu"}
+</div>