From b0098ec5b35231cae95fb0c1e2e1b87a52d17d0b Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Tue, 26 Jul 2022 09:08:24 +0800 Subject: [PATCH] =?UTF-8?q?perf(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E4=BB=AA=E8=A1=A8=E6=9D=BF=E6=9F=A5=E8=AF=A2=E6=8C=89?= =?UTF-8?q?=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Editor/ComponentWrapper.vue | 13 ++++++++ .../canvas/components/Editor/Preview.vue | 33 +++++++++++++++++-- .../canvas/components/Editor/index.vue | 28 ++++++++++++++-- .../src/components/dataease/DeOutWidget.vue | 11 +++++-- .../src/components/widget/DeWidget/DeDate.vue | 8 +++-- .../widget/DeWidget/DeInputSearch.vue | 8 +++-- .../widget/DeWidget/DeNumberRange.vue | 14 +++++--- .../components/widget/DeWidget/DeSelect.vue | 8 +++-- .../widget/DeWidget/DeSelectGrid.vue | 8 +++-- .../widget/DeWidget/DeSelectTree.vue | 8 +++-- 10 files changed, 116 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index fdd949c3bc..6eb61794f5 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -15,6 +15,8 @@ :style="getComponentStyleDefault(config.style)" style="overflow: hidden" :out-style="config.style" + :is-relation="isRelation" + ref="deOutWidget" :element="config" :in-screen="inScreen" :edit-mode="'preview'" @@ -103,6 +105,10 @@ export default { type: String, required: false, default: 'NotProvided' + }, + isRelation: { + type: Boolean, + default: false } }, data() { @@ -247,6 +253,13 @@ export default { }, closePreview() { this.previewVisible = false + }, + getCondition() { + if(this.$refs.deOutWidget && this.$refs.deOutWidget.getCondition) { + return this.$refs.deOutWidget.getCondition() + }else { + return null + } } } } diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index d75ab4a966..6861ad7129 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -25,9 +25,11 @@ v-for="(item, index) in componentDataInfo" :key="index" :config="item" + ref="viewWrapperChild" :search-count="searchCount" :in-screen="inScreen" :terminal="terminal" + :is-relation="relationFilterIds.includes(item.id)" :filters="filterMap[item.propValue && item.propValue.viewId]" :screen-shot="screenShot" :canvas-style-data="canvasStyleData" @@ -259,6 +261,17 @@ export default { filterMap() { const map = this.buttonFilterMap || buildFilterMap(this.componentData) return map + }, + searchButtonInfo() { + const result = this.buildButtonFilterMap(this.componentData) + return result + + }, + buttonExist() { + return this.searchButtonInfo && this.searchButtonInfo.buttonExist + }, + relationFilterIds() { + return this.buttonExist && this.searchButtonInfo.relationFilterIds || [] } }, watch: { @@ -295,7 +308,9 @@ export default { }, methods: { triggerSearchButton() { - this.buttonFilterMap = this.buildButtonFilterMap(this.componentData) + const result = this.buildButtonFilterMap(this.componentData) + this.searchButtonInfo.filterMap = result.filterMap + this.buttonFilterMap = this.searchButtonInfo.filterMap }, buildButtonFilterMap(panelItems) { const result = { @@ -331,13 +346,18 @@ export default { }, buildViewKeyFilters(panelItems, result) { const refs = this.$refs - panelItems.forEach((element, index) => { + if(!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result + panelItems.forEach((element) => { if (element.type !== 'custom') { return true } + const index = this.getComponentIndex(element.id) + if(index < 0) { + return true + } let param = null - const wrapperChild = refs['wrapperChild'][index] + const wrapperChild = refs['viewWrapperChild'][index] param = wrapperChild.getCondition && wrapperChild.getCondition() const condition = formatCondition(param) const vValid = valueValid(condition) @@ -357,6 +377,13 @@ export default { }) return result }, + getComponentIndex(id) { + for (let index = 0; index < this.componentData.length; index++) { + const item = this.componentData[index] + if(item.id === id) return index + } + return -1 + }, _isMobile() { const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) this.terminal = flag ? 'mobile' : 'pc' diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index e807fb3543..30d79c6bc7 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -68,6 +68,7 @@ :style="getComponentStyleDefault(item.style)" :prop-value="item.propValue" :element="item" + :is-relation="relationFilterIds.includes(item.id)" :out-style="getShapeStyleInt(item.style)" :active="item === curComponent" :h="getShapeStyleIntDeDrag(item.style,'height')" @@ -1006,6 +1007,17 @@ export default { ]), filterMap() { return this.buttonFilterMap || buildFilterMap(this.componentData) + }, + searchButtonInfo() { + const result = this.buildButtonFilterMap(this.componentData) + return result + + }, + buttonExist() { + return this.searchButtonInfo && this.searchButtonInfo.buttonExist + }, + relationFilterIds() { + return this.buttonExist && this.searchButtonInfo.relationFilterIds || [] } }, watch: { @@ -1075,8 +1087,9 @@ export default { created() { }, methods: { + triggerSearchButton() { - this.buttonFilterMap = this.buildButtonFilterMap(this.componentData) + this.buttonFilterMap = this.searchButtonInfo.filterMap }, buildButtonFilterMap(panelItems) { const result = { @@ -1112,12 +1125,16 @@ export default { }, buildViewKeyFilters(panelItems, result) { const refs = this.$refs - panelItems.forEach((element, index) => { + panelItems.forEach((element) => { if (element.type !== 'custom') { return true } let param = null + const index = this.getComponentIndex(element.id) + if(index < 0) { + return true + } const wrapperChild = refs['wrapperChild'][index] param = wrapperChild.getCondition && wrapperChild.getCondition() const condition = formatCondition(param) @@ -1138,6 +1155,13 @@ export default { }) return result }, + getComponentIndex(id) { + for (let index = 0; index < this.componentData.length; index++) { + const item = this.componentData[index] + if(item.id === id) return index + } + return -1 + }, pluginEditHandler({ e, id }) { let index = -1 for (let i = 0; i < this.componentData.length; i++) { diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 1eb1320159..1312f5078a 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -27,9 +27,10 @@ :is="element.component" v-if="element.type==='custom'" :id="'component' + element.id" - ref="filter-ref" + ref="deOutWidget" class="component-custom" :out-style="element.style" + :is-relation="isRelation" :element="element" :in-draw="inDraw" :in-screen="inScreen" @@ -72,6 +73,10 @@ export default { type: String, require: false, default: 'edit' + }, + isRelation: { + type: Boolean, + default: false } }, data() { @@ -154,8 +159,8 @@ export default { } }, getCondition() { - if (this.$refs && this.$refs['filter-ref'] && this.$refs['filter-ref'].getCondition) { - return this.$refs['filter-ref'].getCondition() + if (this.$refs && this.$refs['deOutWidget'] && this.$refs['deOutWidget'].getCondition) { + return this.$refs['deOutWidget'].getCondition() } return null } diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue index 92db04d2e8..d99e044123 100644 --- a/frontend/src/components/widget/DeWidget/DeDate.vue +++ b/frontend/src/components/widget/DeWidget/DeDate.vue @@ -46,7 +46,11 @@ export default { required: false, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { return { @@ -181,7 +185,7 @@ export default { }, setCondition() { const param = this.getCondition() - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) }, dateChange(value) { if (!this.inDraw) { diff --git a/frontend/src/components/widget/DeWidget/DeInputSearch.vue b/frontend/src/components/widget/DeWidget/DeInputSearch.vue index 2e1b9f751e..36c1ebf647 100644 --- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue +++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue @@ -31,7 +31,11 @@ export default { type: Boolean, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { return { @@ -101,7 +105,7 @@ export default { }, setCondition() { const param = this.getCondition() - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) }, setEdit() { this.canEdit = true diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue index e0f6210e89..9e2dbb17e8 100644 --- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue +++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue @@ -29,7 +29,11 @@ export default { type: Boolean, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { @@ -223,24 +227,24 @@ export default { const param = this.getCondition() if (this.form.min && this.form.max) { - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) return } if (!this.form.min && !this.form.max) { param.value = [] - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) return } if (this.form.min) { param.value = [this.form.min] param.operator = 'ge' - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) return } if (this.form.max) { param.value = [this.form.max] param.operator = 'le' - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) return } }, diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue index 64f00b2ccd..6845f3bd2e 100644 --- a/frontend/src/components/widget/DeWidget/DeSelect.vue +++ b/frontend/src/components/widget/DeWidget/DeSelect.vue @@ -58,7 +58,11 @@ export default { required: false, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { return { @@ -286,7 +290,7 @@ export default { }, setCondition() { const param = this.getCondition() - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) }, formatFilterValue() { if (this.value === null) return [] diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue index 0524278392..af26d5ff20 100644 --- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue +++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue @@ -58,7 +58,11 @@ export default { required: false, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { return { @@ -283,7 +287,7 @@ export default { }, setCondition() { const param = this.getCondition() - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) }, formatFilterValue() { if (this.value === null) return [] diff --git a/frontend/src/components/widget/DeWidget/DeSelectTree.vue b/frontend/src/components/widget/DeWidget/DeSelectTree.vue index db847c33f4..3df7e2a9ad 100644 --- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue +++ b/frontend/src/components/widget/DeWidget/DeSelectTree.vue @@ -47,7 +47,11 @@ export default { required: false, default: true }, - size: String + size: String, + isRelation: { + type: Boolean, + default: false + } }, data() { return { @@ -293,7 +297,7 @@ export default { setCondition() { const param = this.getCondition() - this.inDraw && this.$store.commit('addViewFilter', param) + !this.isRelation && this.inDraw && this.$store.commit('addViewFilter', param) }, formatFilterValue() { const SEPARATOR = '-de-'