阶段性提交

web/public/js/components/server/metric-keys-config-box.js

@@ -8,29 +8,52 @@ Vue.component("metric-keys-config-box", {
 		}
 		return {
 			keys: keys,
-			isAdding: false
+			isAdding: false,
+			key: ""
+		}
+	},
+	methods: {
+		cancel: function () {
+			this.key = ""
+			this.isAdding = false
+		},
+		confirm: function () {
+			if (this.key.length > 0) {
+				this.keys.push(this.key)
+				this.cancel()
+			}
+		},
+		add: function () {
+			this.isAdding = true
+			let that = this
+			setTimeout(function () {
+				that.$refs.key.focus()
+			}, 100)
+		},
+		remove: function (index) {
+			this.keys.$remove(index)
 		}
 	},
-	methods: {},
 	template: `<div>
+	<input type="hidden" name="keysJSON" :value="JSON.stringify(keys)"/>
 	<div>
-		<div v-for="key in keys">
-			
+		<div v-for="(key, index) in keys" class="ui label small basic">
+			{{key}} &nbsp; <a href="" title="删除" @click.prevent="remove"><i class="icon remove small"></i></a>
 		</div>
 	</div>
-	<div>
+	<div v-if="isAdding" style="margin-top: 1em">
 		<div class="ui fields inline">
 			<div class="ui field">
-				<input type="text" placeholder=""/>
+				<input type="text" v-model="key" ref="key" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
 			</div>
 			<div class="ui field">
-				<button type="button" class="ui button tiny">确定</button>
+				<button type="button" class="ui button tiny" @click.prevent="confirm">确定</button>
 				<a href="" @click.prevent="cancel"><i class="icon remove small"></i></a>
 			</div>
 		</div>
 	</div>
-	<div>
-		<button type="button" class="ui button tiny">+</button>
+	<div style="margin-top: 1em" v-if="!isAdding">
+		<button type="button" class="ui button tiny" @click.prevent="add">+</button>
 	</div>
 </div>`
 })