diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue index 959a1379aa..5b0ed2085a 100644 --- a/frontend/src/components/canvas/DeCanvas.vue +++ b/frontend/src/components/canvas/DeCanvas.vue @@ -252,6 +252,9 @@ export default { bus.$off('button-dialog-edit', this.editButtonDialog) }, methods: { + getWrapperChildRefs() { + return this.$refs[this.editorRefName].getWrapperChildRefs() + }, initEvents() { bus.$on('component-dialog-edit', this.editDialog) bus.$on('button-dialog-edit', this.editButtonDialog) diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue index feb5095084..005c2e2d74 100644 --- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue @@ -223,10 +223,18 @@ export default { runAnimation(this.$el, this.config.animations) }, methods: { - setChartData(chart) { - this.chart = chart + getComponentId() { + return this.config.id + }, + getCanvasId() { + return this.canvasId + }, + getType() { + return this.config.type + }, + getWrapperChildRefs() { + return this.$refs.wrapperChild.getWrapperChildRefs() }, - getStyle, getShapeStyleIntDeDrag(style, prop) { if (prop === 'rotate') { return style['rotate'] diff --git a/frontend/src/components/canvas/components/editor/DeEditor.vue b/frontend/src/components/canvas/components/editor/DeEditor.vue index 8f2eeff20e..55935a47a6 100644 --- a/frontend/src/components/canvas/components/editor/DeEditor.vue +++ b/frontend/src/components/canvas/components/editor/DeEditor.vue @@ -1017,7 +1017,7 @@ export default { ]), searchButtonInfo() { - const result = this.buildButtonFilterMap(this.componentData) + const result = this.buildButtonFilterMap(this.$store.state.componentData) return result }, filterMap() { @@ -1138,6 +1138,25 @@ export default { created() { }, methods: { + getWrapperChildRefs() { + return this.$refs['wrapperChild'] + }, + getAllWrapperChildRefs() { + let allChildRefs = [] + const currentChildRefs = this.getWrapperChildRefs() + if (currentChildRefs && currentChildRefs.length > 0) { + allChildRefs.push.apply(allChildRefs, currentChildRefs) + } + currentChildRefs && currentChildRefs.forEach(subRef => { + if (subRef?.getType && subRef.getType() === 'de-tabs') { + const currentTabChildRefs = subRef.getWrapperChildRefs() + if (currentTabChildRefs && currentTabChildRefs.length > 0) { + allChildRefs.push.apply(allChildRefs, currentTabChildRefs) + } + } + }) + return allChildRefs + }, setChartData(chart) { this.componentData.forEach((item, index) => { if (item.type === 'view' && item.component === 'user-view' && item.propValue.viewId === chart.id) { @@ -1154,7 +1173,7 @@ export default { }) }, refreshButtonInfo(isClear = false) { - const result = this.buildButtonFilterMap(this.componentData, isClear) + const result = this.buildButtonFilterMap(this.$store.state.componentData, isClear) this.searchButtonInfo.buttonExist = result.buttonExist this.searchButtonInfo.relationFilterIds = result.relationFilterIds this.searchButtonInfo.filterMap = result.filterMap @@ -1162,10 +1181,12 @@ export default { this.buttonFilterMap = this.searchButtonInfo.filterMap }, triggerSearchButton(isClear = false) { + if (this.canvasId !== 'canvas-main') { + return + } this.refreshButtonInfo(isClear) this.buttonFilterMap = this.searchButtonInfo.filterMap - - this.componentData.forEach(component => { + this.$store.state.componentData.forEach(component => { if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) { component.filters = this.buttonFilterMap[component.propValue.viewId] } @@ -1212,20 +1233,16 @@ export default { return result }, buildViewKeyFilters(panelItems, result, isClear = false) { - const refs = this.$refs - if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result - const len = this.$refs['wrapperChild'].length + const wrapperChildAll = this.getAllWrapperChildRefs() + if (!wrapperChildAll || !wrapperChildAll.length) return result panelItems.forEach((element) => { - if (element.type !== 'custom') { - return true - } - let param = null - const index = this.getComponentIndex(element.id) - if (index < 0 || index >= len) { - return true - } - const wrapperChild = refs['wrapperChild'][index] + let wrapperChild + wrapperChildAll?.forEach(item => { + if (item?.['getComponentId'] && item.getComponentId() === element.id) { + wrapperChild = item + } + }) if (!wrapperChild || !wrapperChild.getCondition) return true if (isClear) { wrapperChild.clearHandler && wrapperChild.clearHandler() @@ -1234,9 +1251,11 @@ export default { const condition = formatCondition(param) const vValid = valueValid(condition) const filterComponentId = condition.componentId + const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId() Object.keys(result).forEach(viewId => { const vidMatch = viewIdMatch(condition.viewIds, viewId) const viewFilters = result[viewId] + const canvasMatch = this.checkCanvasViewIdsMatch(conditionCanvasId, viewId) let j = viewFilters.length while (j--) { const filter = viewFilters[j] @@ -1244,14 +1263,24 @@ export default { viewFilters.splice(j, 1) } } - vidMatch && vValid && viewFilters.push(condition) + canvasMatch && vidMatch && vValid && viewFilters.push(condition) }) }) return result }, + checkCanvasViewIdsMatch(conditionCanvasId, viewId) { + if (conditionCanvasId === 'canvas-main') { + return true + } + for (let index = 0; index < this.$store.state.componentData.length; index++) { + const item = this.$store.state.componentData[index] + if (item.type === 'view' && item.propValue.viewId === viewId && item.canvasId === conditionCanvasId) return true + } + return false + }, getComponentIndex(id) { - for (let index = 0; index < this.componentData.length; index++) { - const item = this.componentData[index] + for (let index = 0; index < this.$store.state.componentData.length; index++) { + const item = this.$store.state.componentData[index] if (item.id === id) return index } return -1 diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue index 1ce56ac016..6e305c0772 100644 --- a/frontend/src/components/canvas/components/editor/Preview.vue +++ b/frontend/src/components/canvas/components/editor/Preview.vue @@ -366,7 +366,7 @@ export default { ]), searchButtonInfo() { - const result = this.buildButtonFilterMap(this.componentData) + const result = this.buildButtonFilterMap(this.$store.state.componentData) return result }, filterMap() { @@ -448,6 +448,26 @@ export default { bus.$off('trigger-reset-button', this.triggerResetButton) }, methods: { + getWrapperChildRefs() { + return this.$refs['viewWrapperChild'] + }, + getAllWrapperChildRefs() { + let allChildRefs = [] + const currentChildRefs = this.getWrapperChildRefs() + if (currentChildRefs && currentChildRefs.length > 0) { + allChildRefs.push.apply(allChildRefs, currentChildRefs) + } + currentChildRefs && currentChildRefs.forEach(subRef => { + if (subRef?.getType && subRef.getType() === 'de-tabs') { + const currentTabChildRefs = subRef.getWrapperChildRefs() + if (currentTabChildRefs && currentTabChildRefs.length > 0) { + allChildRefs.push.apply(allChildRefs, currentTabChildRefs) + } + } + }) + return allChildRefs + }, + getCanvasHeight() { return this.mainHeightCount }, @@ -484,12 +504,15 @@ export default { }) }, triggerSearchButton(isClear = false) { - const result = this.buildButtonFilterMap(this.componentData, isClear) + if (this.canvasId !== 'canvas-main') { + return + } + const result = this.buildButtonFilterMap(this.$store.state.componentData, isClear) this.searchButtonInfo.autoTrigger = result.autoTrigger this.searchButtonInfo.filterMap = result.filterMap this.buttonFilterMap = this.searchButtonInfo.filterMap - this.componentData.forEach(component => { + this.$store.state.componentData.forEach(component => { if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) { component.filters = this.buttonFilterMap[component.propValue.viewId] } @@ -534,19 +557,20 @@ export default { return result }, buildViewKeyFilters(panelItems, result, isClear = false) { - const refs = this.$refs - if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result + const wrapperChildAll = this.getAllWrapperChildRefs() + if (!wrapperChildAll || !wrapperChildAll.length) return result panelItems.forEach((element) => { if (element.type !== 'custom') { return true } - - const index = this.getComponentIndex(element.id) - if (index < 0) { - return true - } + let wrapperChild + wrapperChildAll?.forEach(item => { + if (item?.['getComponentId'] && item.getComponentId() === element.id) { + wrapperChild = item + } + }) + if (!wrapperChild || !wrapperChild.getCondition) return true let param = null - const wrapperChild = refs['viewWrapperChild'][index] if (isClear) { wrapperChild.clearHandler && wrapperChild.clearHandler() } @@ -554,9 +578,12 @@ export default { const condition = formatCondition(param) const vValid = valueValid(condition) const filterComponentId = condition.componentId + const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId() Object.keys(result).forEach(viewId => { const vidMatch = viewIdMatch(condition.viewIds, viewId) const viewFilters = result[viewId] + const canvasMatch = this.checkCanvasViewIdsMatch(conditionCanvasId, viewId) + let j = viewFilters.length while (j--) { const filter = viewFilters[j] @@ -564,11 +591,21 @@ export default { viewFilters.splice(j, 1) } } - vidMatch && vValid && viewFilters.push(condition) + canvasMatch && vidMatch && vValid && viewFilters.push(condition) }) }) return result }, + checkCanvasViewIdsMatch(conditionCanvasId, viewId) { + if (conditionCanvasId === 'canvas-main') { + return true + } + for (let index = 0; index < this.$store.state.componentData.length; index++) { + const item = this.$store.state.componentData[index] + if (item.type === 'view' && item.propValue.viewId === viewId && item.canvasId === conditionCanvasId) return true + } + return false + }, getComponentIndex(id) { for (let index = 0; index < this.componentData.length; index++) { const item = this.componentData[index] diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 487b35df75..48a9bfb896 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -175,6 +175,12 @@ export default { this.$set(this.element.style, 'innerBgColor', innerBgColor || '') }, methods: { + getComponentId() { + return this.element.id + }, + getCanvasId() { + return this.canvasId + }, handlerPositionChange(val) { const { horizontal = 'left', vertical = 'center' } = val this.titleStyle = { @@ -185,7 +191,6 @@ export default { flexDirection: 'column' } - if (vertical !== 'top' && this.element.component !== 'de-select-grid') { this.titleStyle = null this.outsideStyle = { diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue index 3703d146b2..3e9fe23856 100644 --- a/frontend/src/components/widget/deWidget/DeTabs.vue +++ b/frontend/src/components/widget/deWidget/DeTabs.vue @@ -76,6 +76,7 @@ > { + const refsSub = _this.$refs['canvasTabRef-' + tabItem.name] + if (refsSub && refsSub.length) { + const refsSubArray = refsSub[0].getWrapperChildRefs() + if (refsSubArray && refsSubArray.length > 0) { + refsSubAll.push.apply(refsSubAll, refsSubArray) + } + } + }) + return refsSubAll + }, titleStyle(itemName) { if (this.activeTabName === itemName) { return {