智能DNS中国家/地区线路下支持省/州的细分

Author: iwind

web/public/js/components/ns/ns-routes-selector.js

@@ -7,6 +7,22 @@ Vue.component("ns-routes-selector", {
 			.post()
 			.success(function (resp) {
 				that.routes = resp.data.routes
+
+				// provinces
+				let provinces = {}
+				if (resp.data.provinces != null && resp.data.provinces.length > 0) {
+					for (const province of resp.data.provinces) {
+						let countryCode = province.countryCode
+						if (typeof provinces[countryCode] == "undefined") {
+							provinces[countryCode] = []
+						}
+						provinces[countryCode].push({
+							name: province.name,
+							code: province.code
+						})
+					}
+				}
+				that.provinces = provinces
 			})
 	},
 	data: function () {
@@ -24,6 +40,10 @@ Vue.component("ns-routes-selector", {
 			routeCode: "default",
 			inputName: inputName,
 			routes: [],
+
+			provinces: {}, // country code => [ province1, province2, ... ]
+			provinceRouteCode: "",
+
 			isAdding: false,
 			routeType: "default",
 			selectedRoutes: selectedRoutes,
@@ -45,6 +65,7 @@ Vue.component("ns-routes-selector", {
 			this.isAdding = true
 			this.routeType = "default"
 			this.routeCode = "default"
+			this.provinceRouteCode = ""
 			this.$emit("add")
 		},
 		cancel: function () {
@@ -57,11 +78,33 @@ Vue.component("ns-routes-selector", {
 			}
 
 			let that = this
-			this.routes.forEach(function (v) {
-				if (v.code == that.routeCode) {
-					that.selectedRoutes.push(v)
+
+			// route
+			let selectedRoute = null
+			for (const route of this.routes) {
+				if (route.code == this.routeCode) {
+					selectedRoute = route
+					break
 				}
-			})
+			}
+
+			if (selectedRoute != null) {
+				// province route
+				if (this.provinceRouteCode.length > 0 && this.provinces[this.routeCode] != null) {
+					for (const province of this.provinces[this.routeCode]) {
+						if (province.code == this.provinceRouteCode) {
+							selectedRoute = {
+								name: selectedRoute.name + "-" + province.name,
+								code: province.code
+							}
+							break
+						}
+					}
+				}
+
+				that.selectedRoutes.push(selectedRoute)
+			}
+
 			this.$emit("change", this.selectedRoutes)
 			this.cancel()
 		},
@@ -80,30 +123,43 @@ Vue.component("ns-routes-selector", {
 		<div class="ui divider"></div>
 	</div>
 	<div v-if="isAdding" style="margin-bottom: 1em">
-		<div class="ui fields inline">
-			<div class="ui field">
-				<select class="ui dropdown" v-model="routeType">
-					<option value="default">[默认线路]</option>
-					<option value="user">自定义线路</option>
-					<option value="isp">运营商</option>
-					<option value="china">中国省市</option>
-					<option value="world">全球国家地区</option>
-					<option value="agent">搜索引擎</option>
-				</select>
-			</div>
-			
-			<div class="ui field">
-				<select class="ui dropdown" v-model="routeCode" style="width: 10em">
-					<option v-for="route in routes" :value="route.code" v-if="route.type == routeType">{{route.name}}</option>
-				</select>
-			</div>
-			
-			<div class="ui field">
-				<button type="button" class="ui button tiny" @click.prevent="confirm">确定</button>
-				&nbsp; <a href="" title="取消" @click.prevent="cancel"><i class="icon remove small"></i></a>
-			</div>
-		</div>
+		<table class="ui table">
+			<tr>
+				<td class="title">选择类型 *</td>
+				<td>
+					<select class="ui dropdown auto-width" v-model="routeType">
+						<option value="default">[默认线路]</option>
+						<option value="user">自定义线路</option>
+						<option value="isp">运营商</option>
+						<option value="china">中国省市</option>
+						<option value="world">全球国家地区</option>
+						<option value="agent">搜索引擎</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<td>选择线路 *</td>
+				<td>
+					<select class="ui dropdown auto-width" v-model="routeCode">
+						<option v-for="route in routes" :value="route.code" v-if="route.type == routeType">{{route.name}}</option>
+					</select>
+				</td>
+			</tr>
+			<tr v-if="routeCode.length > 0 && provinces[routeCode] != null">
+				<td>选择省/州</td>
+				<td>
+					<select class="ui dropdown auto-width" v-model="provinceRouteCode">
+						<option value="">[全域]</option>
+						<option v-for="province in provinces[routeCode]" :value="province.code">{{province.name}}</option>
+					</select>
+				</td>
+			</tr>
+		</table>
+		<div>
+			<button type="button" class="ui button tiny" @click.prevent="confirm">确定</button>
+			&nbsp; <a href="" title="取消" @click.prevent="cancel">取消</a>
+		</div>	
 	</div>
-	<button class="ui button tiny" type="button" @click.prevent="add">+</button>
+	<button class="ui button tiny" type="button" @click.prevent="add" v-if="!isAdding">+</button>
 </div>`
 })