From 14df491fcd6a6ae92ddb8e858f415452c510ffd7 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Tue, 26 Jul 2022 15:35: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 --- .../canvas/components/Editor/Preview.vue | 37 +++++--- .../canvas/components/Editor/index.vue | 87 +++++++++++++++---- .../components/widget/DeWidget/DeButton.vue | 12 ++- .../serviceImpl/ButtonSureServiceImpl.js | 2 +- frontend/src/lang/en.js | 9 ++ frontend/src/lang/tw.js | 9 ++ frontend/src/lang/zh.js | 9 ++ frontend/src/store/index.js | 3 +- frontend/src/styles/index.scss | 4 +- frontend/src/views/panel/edit/index.vue | 28 ++++-- .../src/views/panel/filter/ButtonDialog.vue | 31 ++++--- 11 files changed, 174 insertions(+), 57 deletions(-) diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 6861ad7129..cc0ea8e755 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -24,8 +24,8 @@ !this.searchButtonInfo.relationFilterIds.includes(item.componentId)) + result[key] = filters + } + } + } + return result }, buttonExist() { return this.searchButtonInfo && this.searchButtonInfo.buttonExist @@ -309,13 +318,21 @@ export default { methods: { triggerSearchButton() { const result = this.buildButtonFilterMap(this.componentData) + this.searchButtonInfo.autoTrigger = result.autoTrigger this.searchButtonInfo.filterMap = result.filterMap this.buttonFilterMap = this.searchButtonInfo.filterMap + + this.componentData.forEach(component => { + if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) { + component.filters = this.buttonFilterMap[component.propValue.viewId] + } + }) }, buildButtonFilterMap(panelItems) { const result = { buttonExist: false, relationFilterIds: [], + autoTrigger: true, filterMap: { } @@ -332,7 +349,7 @@ export default { if (!result.buttonExist) return result const customRange = sureButtonItem.options.attrs.customRange - + result.autoTrigger = sureButtonItem.options.attrs.autoTrigger const allFilters = panelItems.filter(item => item.type === 'custom') const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters @@ -346,14 +363,14 @@ export default { }, buildViewKeyFilters(panelItems, result) { const refs = this.$refs - if(!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result + 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) { + if (index < 0) { return true } let param = null @@ -380,7 +397,7 @@ export default { getComponentIndex(id) { for (let index = 0; index < this.componentData.length; index++) { const item = this.componentData[index] - if(item.id === id) return index + if (item.id === id) return index } return -1 }, diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 30d79c6bc7..2b62ac983b 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -68,7 +68,7 @@ :style="getComponentStyleDefault(item.style)" :prop-value="item.propValue" :element="item" - :is-relation="relationFilterIds.includes(item.id)" + :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)" :out-style="getShapeStyleInt(item.style)" :active="item === curComponent" :h="getShapeStyleIntDeDrag(item.style,'height')" @@ -931,7 +931,8 @@ export default { linkJumpSetVisible: false, linkJumpSetViewId: null, editShow: false, - buttonFilterMap: null + buttonFilterMap: null, + autoTrigger: true } }, computed: { @@ -1005,20 +1006,25 @@ export default { 'curCanvasScale', 'batchOptStatus' ]), - 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 || [] + filterMap() { + const result = buildFilterMap(this.componentData) + if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) { + for (const key in result) { + if (Object.hasOwnProperty.call(result, key)) { + let filters = result[key] + filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId)) + result[key] = filters + } + } + } + return result } + }, watch: { customStyle: { @@ -1056,6 +1062,29 @@ export default { this.initMatrix() }, deep: true + }, + autoTrigger: { + handler(val, old) { + if (val === old) return + const result = buildFilterMap(this.componentData) + for (const key in result) { + if (Object.hasOwnProperty.call(result, key)) { + let filters = result[key] + if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) { + filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId)) + } + + this.filterMap[key] = filters + + this.componentData.forEach(item => { + if (item.type === 'view' && item.propValue.viewId === key) { + item.filters = filters + } + }) + } + } + }, + deep: true } }, @@ -1069,6 +1098,7 @@ export default { eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog) bus.$on('onRemoveLastItem', this.removeLastItem) bus.$on('trigger-search-button', this.triggerSearchButton) + bus.$on('refresh-button-info', this.refreshButtonInfo) // 矩阵定位调试模式 if (this.psDebug) { @@ -1083,21 +1113,37 @@ export default { eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog) bus.$off('onRemoveLastItem', this.removeLastItem) bus.$off('trigger-search-button', this.triggerSearchButton) + bus.$off('refresh-button-info', this.refreshButtonInfo) }, created() { }, methods: { - - triggerSearchButton() { + refreshButtonInfo() { + const result = this.buildButtonFilterMap(this.componentData) + this.searchButtonInfo.buttonExist = result.buttonExist + this.searchButtonInfo.relationFilterIds = result.relationFilterIds + this.searchButtonInfo.filterMap = result.filterMap + this.searchButtonInfo.autoTrigger = result.autoTrigger this.buttonFilterMap = this.searchButtonInfo.filterMap }, + triggerSearchButton() { + this.refreshButtonInfo() + this.buttonFilterMap = this.searchButtonInfo.filterMap + + this.componentData.forEach(component => { + if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) { + component.filters = this.buttonFilterMap[component.propValue.viewId] + } + }) + + // this.$store.commit('addViewFilter', param) + }, buildButtonFilterMap(panelItems) { const result = { buttonExist: false, relationFilterIds: [], - filterMap: { - - } + autoTrigger: true, + filterMap: {} } if (!panelItems || !panelItems.length) return result let sureButtonItem = null @@ -1111,6 +1157,8 @@ export default { if (!result.buttonExist) return result const customRange = sureButtonItem.options.attrs.customRange + result.autoTrigger = sureButtonItem.options.attrs.autoTrigger + this.autoTrigger = result.autoTrigger const allFilters = panelItems.filter(item => item.type === 'custom') @@ -1125,6 +1173,8 @@ export default { }, buildViewKeyFilters(panelItems, result) { const refs = this.$refs + if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result + const len = this.$refs['wrapperChild'].length panelItems.forEach((element) => { if (element.type !== 'custom') { return true @@ -1132,10 +1182,11 @@ export default { let param = null const index = this.getComponentIndex(element.id) - if(index < 0) { + if (index < 0 || index >= len) { return true } const wrapperChild = refs['wrapperChild'][index] + if (!wrapperChild || !wrapperChild.getCondition) return true param = wrapperChild.getCondition && wrapperChild.getCondition() const condition = formatCondition(param) const vValid = valueValid(condition) @@ -1158,7 +1209,7 @@ export default { getComponentIndex(id) { for (let index = 0; index < this.componentData.length; index++) { const item = this.componentData[index] - if(item.id === id) return index + if (item.id === id) return index } return -1 }, diff --git a/frontend/src/components/widget/DeWidget/DeButton.vue b/frontend/src/components/widget/DeWidget/DeButton.vue index b3af43a56d..c3c9c4fb80 100644 --- a/frontend/src/components/widget/DeWidget/DeButton.vue +++ b/frontend/src/components/widget/DeWidget/DeButton.vue @@ -1,14 +1,14 @@ @@ -29,13 +29,11 @@ export default { }, data() { return { - options: null, operator: 'eq', values: null } }, created() { - this.options = this.element.options }, methods: { triggerSearch() { diff --git a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js index e8c0bc79db..0d107ef2cf 100644 --- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js +++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js @@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService' const leftPanel = { icon: 'iconfont icon-chaxunsousuo', - label: '查询按钮', + label: 'desearchbutton.label', defaultClass: 'time-filter' } diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 429ffa0efa..8d76051a6a 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -2046,6 +2046,15 @@ export default { min_out_max: 'The min value must be less than the max value', max_out_min: 'The max value must be more than the min value' }, + desearchbutton: { + label: 'Search Button', + text: 'Text', + auto_trigger: 'Auto Trigger', + range: 'Ranger', + relative: 'Relation', + auto_trigger_tip: 'Automatically trigger once when entering the preview page', + range_tip: 'Default association all filter components' + }, denumberselect: { label: 'Number selector', placeholder: 'Please select' diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 82b5fa89e7..89c9ea0784 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -2057,6 +2057,15 @@ export default { min_out_max: '最小值必須小於最大值', max_out_min: '最大值必須大於最小值' }, + desearchbutton: { + label: '查詢按鈕', + text: '名稱', + auto_trigger: '自動觸發', + range: '控製範圍', + relative: '關聯組件', + auto_trigger_tip: '進入預覽頁面自動觸發一次', + range_tip: '默認關聯全部過濾組件' + }, denumberselect: { label: '數字下拉', placeholder: '請選擇' diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 4bc67a27ac..7833cc3fcf 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -2067,6 +2067,15 @@ export default { min_out_max: '最小值必须小于最大值', max_out_min: '最大值必须大于最小值' }, + desearchbutton: { + label: '查询按钮', + text: '名称', + auto_trigger: '自动触发', + range: '控制范围', + relative: '关联组件', + auto_trigger_tip: '进入预览页面自动触发一次', + range_tip: '默认关联全部过滤组件' + }, denumberselect: { label: '数字下拉', placeholder: '请选择' diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 1f4fc2dce9..fc356e5295 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -108,7 +108,7 @@ const data = { y: 600 }, scrollAutoMove: 0, - // 系统管理菜单是否收缩 + // 系统管理菜单是否收缩 isCollapse: false, // 视图是否编辑记录 panelViewEditInfo: {}, @@ -243,6 +243,7 @@ const data = { return newItem }) }, + addViewFilter(state, data) { const condition = formatCondition(data) const vValid = valueValid(condition) diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index a75619b95b..3bb994c7a4 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -111,8 +111,8 @@ div:focus { } .de-button-dialog { - min-width: 250px !important; - width: 30% !important; + min-width: 200px !important; + width: 27% !important; .el-dialog__header { padding: 10px 20px !important; diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 9ac46d8471..425028e499 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -239,11 +239,11 @@ - + /> @@ -653,6 +652,7 @@ export default { bus.$off('component-dialog-style', this.componentDialogStyle) bus.$off('previewFullScreenClose', this.previewFullScreenClose) bus.$off('change_panel_right_draw', this.changeRightDrawOpen) + bus.$off('delete-condition', this.deleteCustomComponent) const elx = this.$refs.rightPanel elx && elx.remove() }, @@ -673,6 +673,19 @@ export default { bus.$on('component-dialog-style', this.componentDialogStyle) bus.$on('previewFullScreenClose', this.previewFullScreenClose) bus.$on('change_panel_right_draw', this.changeRightDrawOpen) + bus.$on('delete-condition', this.deleteCustomComponent) + }, + deleteCustomComponent(param) { + param && param.componentId && this.componentData.forEach(com => { + if (com.type === 'custom-button' && com.options.attrs.filterIds) { + const filterIds = com.options.attrs.filterIds + let len = filterIds.length + while (len--) { + if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) } + } + com.options.attrs.filterIds = filterIds + } + }) }, loadMultiplexingViewTree() { queryPanelMultiplexingViewTree().then(res => { @@ -1158,6 +1171,7 @@ export default { this.$store.commit('setComponentWithId', this.currentFilterCom) this.$store.commit('recordSnapshot', 'sureFilter') this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex }) + bus.$emit('refresh-button-info') this.closeButton() }, cancelHandler() { diff --git a/frontend/src/views/panel/filter/ButtonDialog.vue b/frontend/src/views/panel/filter/ButtonDialog.vue index ab2b9fb514..a76dd044af 100644 --- a/frontend/src/views/panel/filter/ButtonDialog.vue +++ b/frontend/src/views/panel/filter/ButtonDialog.vue @@ -1,28 +1,29 @@