From ee2c15ccd5f9a65c7f59786446ea3052bcb932de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9C=E6=80=80=E7=A3=8A=E2=80=9D?= <2280131253@qq.com> Date: Mon, 8 Nov 2021 16:42:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=A5=E8=AF=A2=E5=8F=82=E6=95=B0?= =?UTF-8?q?=E4=BF=9D=E5=AD=98=E5=9C=A8url=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ListTable/index.vue | 2 +- src/components/TagSearch/index.vue | 63 ++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue index 626e65ec2..e79d69d10 100644 --- a/src/components/ListTable/index.vue +++ b/src/components/ListTable/index.vue @@ -91,7 +91,7 @@ export default { }, search(attrs) { this.$emit('TagSearch', attrs) - return this.dataTable.search(attrs, true) + return this.dataTable?.search(attrs, true) }, filter(attrs) { this.$emit('TagFilter', attrs) diff --git a/src/components/TagSearch/index.vue b/src/components/TagSearch/index.vue index 7f12806a9..6850fe3fc 100644 --- a/src/components/TagSearch/index.vue +++ b/src/components/TagSearch/index.vue @@ -100,6 +100,25 @@ export default { // }, // deep: true // } + options: { + handler(val) { + if (val && val.length > 0) { + const routeFilter = this.checkInTableColumns() + const asFilterTags = _.cloneDeep(this.filterTags) + this.filterTags = { + ...asFilterTags, + ...routeFilter + } + if (Object.keys(routeFilter).length > 0) { + setTimeout(() => { + return this.$emit('tagSearch', this.filterMaps) + }, 490) + } + } + }, + immediate: true, + deep: true + } }, mounted() { setTimeout(() => { @@ -111,6 +130,39 @@ export default { // this.$nextTick(() => this.$emit('tagSearch', this.filterMaps)) }, methods: { + // 判断url中的查询条件 + checkInTableColumns() { + const routeQuery = this.$route?.query + const routeQueryKeys = Object.keys(routeQuery) + const keys = {} + if (routeQueryKeys.length < 1) return keys + if (routeQueryKeys.length > 0) { + for (let i = 0; i < routeQueryKeys.length; i++) { + const key = routeQueryKeys[i] + const valueDecode = decodeURI(routeQuery[key]) + const isSearch = key !== 'search' + for (let k = 0, len = this.options.length; k < len; k++) { + const cur = this.options[k] + if (key === cur.value || !isSearch) { + const curChildren = cur.children || [] + keys[key] = { + key, + label: isSearch ? cur.label : '', + value: valueDecode + } + if (isSearch && curChildren.length > 0) { + curChildren.forEach(item => { + if (valueDecode === item.value) { + keys[key].valueLabel = item.label + } + }) + } + } + } + } + } + return keys + }, getValueLabel(key, value) { for (const field of this.options) { if (field.value !== key) { @@ -143,6 +195,7 @@ export default { this.$nextTick(() => this.$refs.Cascade.handleClear()) }, handleTagClose(evt) { + this.checkUrlFilds(evt) this.$delete(this.filterTags, evt) this.$emit('tagSearch', this.filterMaps) return true @@ -154,6 +207,11 @@ export default { const tag = { key: this.filterKey, label: this.keyLabel, value: this.filterValue, valueLabel: this.valueLabel } this.$set(this.filterTags, this.filterKey, tag) this.$emit('tagSearch', this.filterMaps) + + let newQuery = _.cloneDeep(this.$route.query) + newQuery = { ...newQuery, [this.filterKey]: encodeURI(this.filterValue) } + this.$router.replace({ query: newQuery }) + this.filterKey = '' this.filterValue = '' this.valueLabel = '' @@ -180,6 +238,11 @@ export default { this.filterKey = v.key this.filterValue = v.value this.$refs.SearchInput.focus() + }, + // 删除查询条件时改变url + checkUrlFilds(evt) { + const newQuery = _.omit(this.$route.query, evt) + this.$router.replace({ query: newQuery }) } } }