实现基本的匹配条件管理

2025-11-06 23:00:25 +08:00 · 2020-09-29 11:28:39 +08:00
parent 43de7e4678
commit ba2bbaff0b
19 changed files with 613 additions and 23 deletions
--- a/web/public/js/components/server/http-cond-definitions.js
+++ b/web/public/js/components/server/http-cond-definitions.js
@@ -0,0 +1,157 @@
+// URL扩展名条件
+Vue.component("http-cond-url-extension", {
+	props: ["v-cond"],
+	data: function () {
+		let cond = this.vCond
+		if (cond == null) {
+			cond = {
+				param: "${requestPathExtension}",
+				operator: "in",
+				value: "[]"
+			}
+		}
+		return {
+			cond: cond,
+			extensions: JSON.parse(cond.value), // TODO 可以拖动排序
+
+			isAdding: false,
+			addingExt: ""
+		}
+	},
+	watch: {
+		extensions: function () {
+			this.cond.value = JSON.stringify(this.extensions)
+		}
+	},
+	methods: {
+		addExt: function () {
+			this.isAdding = !this.isAdding
+
+			if (this.isAdding) {
+				let that = this
+				setTimeout(function () {
+					that.$refs.addingExt.focus()
+				}, 100)
+			}
+		},
+		cancelAdding: function () {
+			this.isAdding = false
+			this.addingExt = ""
+		},
+		confirmAdding: function () {
+			// TODO 做更详细的校验
+			// TODO 如果有重复的则提示之
+
+			if (this.addingExt.length == 0) {
+				return
+			}
+			if (this.addingExt[0] != ".") {
+				this.addingExt = "." + this.addingExt
+			}
+			this.addingExt = this.addingExt.replace(/\s+/g, "")
+			this.extensions.push(this.addingExt)
+
+			// 清除状态
+			this.cancelAdding()
+		},
+		removeExt: function (index) {
+			this.extensions.$remove(index)
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
+	<div v-if="extensions.length > 0">
+		<div class="ui label small" v-for="(ext, index) in extensions">{{ext}} <a href="" title="删除" @click.prevent="removeExt(index)"><i class="icon remove"></i></a></div>
+		<div class="ui divider"></div>
+	</div>
+	<div class="ui fields inline" v-if="isAdding">
+		<div class="ui field">
+			<input type="text" size="6" maxlength="100" v-model="addingExt" ref="addingExt" placeholder=".xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
+		</div>
+		<div class="ui field">
+			<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
+			<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
+		</div> 
+	</div>
+	<button class="ui button tiny" type="button" @click.prevent="addExt()">+添加扩展名</button>
+	<p class="comment">扩展名需要包含点（.）符号，例如<span class="ui label tiny">.jpg</span>、<span class="ui label tiny">.png</span>之类。</p>
+</div>`
+})
+
+// 根据MimeType
+Vue.component("http-cond-mime-type", {
+	props: ["v-cond"],
+	data: function () {
+		let cond = this.vCond
+		if (cond == null) {
+			cond = {
+				type: "mime-type",
+				param: "${response.contentType}",
+				operator: "mime type",
+				value: "[]"
+			}
+		}
+		return {
+			cond: cond,
+			mimeTypes: JSON.parse(cond.value), // TODO 可以拖动排序
+
+			isAdding: false,
+			addingMimeType: ""
+		}
+	},
+	watch: {
+		mimeTypes: function () {
+			this.cond.value = JSON.stringify(this.mimeTypes)
+		}
+	},
+	methods: {
+		addMimeType: function () {
+			this.isAdding = !this.isAdding
+
+			if (this.isAdding) {
+				let that = this
+				setTimeout(function () {
+					that.$refs.addingMimeType.focus()
+				}, 100)
+			}
+		},
+		cancelAdding: function () {
+			this.isAdding = false
+			this.addingMimeType = ""
+		},
+		confirmAdding: function () {
+			// TODO 做更详细的校验
+			// TODO 如果有重复的则提示之
+
+			if (this.addingMimeType.length == 0) {
+				return
+			}
+			this.addingMimeType = this.addingMimeType.replace(/\s+/g, "")
+			this.mimeTypes.push(this.addingMimeType)
+
+			// 清除状态
+			this.cancelAdding()
+		},
+		removeMimeType: function (index) {
+			this.mimeTypes.$remove(index)
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="condJSON" :value="JSON.stringify(cond)"/>
+	<div v-if="mimeTypes.length > 0">
+		<div class="ui label small" v-for="(mimeType, index) in mimeTypes">{{mimeType}} <a href="" title="删除" @click.prevent="removeMimeType(index)"><i class="icon remove"></i></a></div>
+		<div class="ui divider"></div>
+	</div>
+	<div class="ui fields inline" v-if="isAdding">
+		<div class="ui field">
+			<input type="text" size="16" maxlength="100" v-model="addingMimeType" ref="addingMimeType" placeholder="xxxxx/xxx" @keyup.enter="confirmAdding" @keypress.enter.prevent="1" />
+		</div>
+		<div class="ui field">
+			<button class="ui button tiny" type="button" @click.prevent="confirmAdding">确认</button>
+			<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove"></i></a>
+		</div> 
+	</div>
+	<button class="ui button tiny" type="button" @click.prevent="addMimeType()">+添加MimeType</button>
+	<p class="comment">服务器返回的内容的MimeType，比如<span class="ui label tiny">text/html</span>、<span class="ui label tiny">image/*</span>等。</p>
+</div>`
+})