generate components.js

web/public/js/components.src.js

@@ -1161,7 +1161,7 @@ Vue.component("ns-domain-group-selector", {
 
 // 选择多个线路
 Vue.component("ns-routes-selector", {
-	props: ["v-routes"],
+	props: ["v-routes", "name"],
 	mounted: function () {
 		let that = this
 		Tea.action("/ns/routes/options")
@@ -1176,12 +1176,18 @@ Vue.component("ns-routes-selector", {
 			selectedRoutes = []
 		}
 
+		let inputName = this.name
+		if (typeof inputName != "string" || inputName.length == 0) {
+			inputName = "routeCodes"
+		}
+
 		return {
 			routeCode: "default",
+			inputName: inputName,
 			routes: [],
 			isAdding: false,
 			routeType: "default",
-			selectedRoutes: selectedRoutes
+			selectedRoutes: selectedRoutes,
 		}
 	},
 	watch: {
@@ -1200,9 +1206,11 @@ Vue.component("ns-routes-selector", {
 			this.isAdding = true
 			this.routeType = "default"
 			this.routeCode = "default"
+			this.$emit("add")
 		},
 		cancel: function () {
 			this.isAdding = false
+			this.$emit("cancel")
 		},
 		confirm: function () {
 			if (this.routeCode.length == 0) {
@@ -1215,17 +1223,19 @@ Vue.component("ns-routes-selector", {
 					that.selectedRoutes.push(v)
 				}
 			})
+			this.$emit("change", this.selectedRoutes)
 			this.cancel()
 		},
 		remove: function (index) {
 			this.selectedRoutes.$remove(index)
+			this.$emit("change", this.selectedRoutes)
 		}
 	}
 	,
 	template: `<div>
-	<div>
+	<div v-show="selectedRoutes.length > 0">
 		<div class="ui label basic text small" v-for="(route, index) in selectedRoutes" style="margin-bottom: 0.3em">
-			<input type="hidden" name="routeCodes" :value="route.code"/>
+			<input type="hidden" :name="inputName" :value="route.code"/>
 			{{route.name}} &nbsp; <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
 		</div>
 		<div class="ui divider"></div>
@@ -2012,6 +2022,109 @@ Vue.component("ns-route-ranges-box", {
 </div>`
 })
 
+Vue.component("ns-create-records-table", {
+	props: ["v-types"],
+	data: function () {
+		let types = this.vTypes
+		if (types == null) {
+			types = []
+		}
+		return {
+			types: types,
+			records: [
+				{
+					name: "",
+					type: "A",
+					value: "",
+					routeCodes: [],
+					ttl: 600,
+					index: 0
+				}
+			],
+			lastIndex: 0,
+			isAddingRoutes: false // 是否正在添加线路
+		}
+	},
+	methods: {
+		add: function () {
+			this.records.push({
+				name: "",
+				type: "A",
+				value: "",
+				routeCodes: [],
+				ttl: 600,
+				index: ++this.lastIndex
+			})
+			let that = this
+			setTimeout(function () {
+				that.$refs.nameInputs.$last().focus()
+			}, 100)
+		},
+		remove: function (index) {
+			this.records.$remove(index)
+		},
+		addRoutes: function () {
+			this.isAddingRoutes = true
+		},
+		cancelRoutes: function () {
+			let that = this
+			setTimeout(function () {
+				that.isAddingRoutes = false
+			}, 1000)
+		},
+		changeRoutes: function (record, routes) {
+			if (routes == null) {
+				record.routeCodes = []
+			} else {
+				record.routeCodes = routes.map(function (route) {
+					return route.code
+				})
+			}
+		}
+	},
+	template: `<div>
+<input type="hidden" name="recordsJSON" :value="JSON.stringify(records)"/>
+<table class="ui table selectable celled" style="max-width: 60em">
+	<thead class="full-width">
+		<tr>
+			<th style="width:10em">记录名</th>
+			<th style="width:7em">记录类型</th>
+			<th>线路</th>
+			<th v-if="!isAddingRoutes">记录值</th>
+			<th v-if="!isAddingRoutes">TTL</th>
+			<th class="one op" v-if="!isAddingRoutes">操作</th>
+		</tr>
+	</thead>
+	<tr v-for="(record, index) in records" :key="record.index">
+		<td>
+			<input type="text" style="width:10em" v-model="record.name" ref="nameInputs"/>		
+		</td>
+		<td>
+			<select class="ui dropdown auto-width" v-model="record.type">
+				<option v-for="type in types" :value="type.type">{{type.type}}</option>
+			</select>
+		</td>
+		<td>
+			<ns-routes-selector @add="addRoutes" @cancel="cancelRoutes" @change="changeRoutes(record, $event)"></ns-routes-selector>
+		</td>
+		<td v-if="!isAddingRoutes">
+		  <input type="text" style="width:10em" maxlength="512" v-model="record.value"/>
+		</td>
+		<td v-if="!isAddingRoutes">
+			<div class="ui input right labeled">
+				<input type="text" v-model="record.ttl" style="width:5em" maxlength="8"/>
+				<span class="ui label">秒</span>
+			</div>
+		</td>
+		<td v-if="!isAddingRoutes">
+			<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
+		</td>
+	</tr>
+</table>
+<button class="ui button tiny" type="button" @click.prevent="add">+</button>
+</div>`,
+})
+
 // 选择单一线路
 Vue.component("ns-route-selector", {
 	props: ["v-route-code"],