From 6919ee27b8757bee183f753cc69699bf89900530 Mon Sep 17 00:00:00 2001 From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com> Date: Tue, 25 Oct 2022 17:50:23 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E9=9B=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96=20=E4=BB=AA=E8=A1=A8=E6=9D=BF?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9=E5=9B=BE=E6=A0=87=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 31 +++-- .../src/components/DeDrag/pointShadow.vue | 11 +- frontend/src/components/DeDrag/shadow.vue | 3 +- frontend/src/components/canvas/DeCanvas.vue | 110 ++++++++++-------- .../canvas/components/Editor/DateFormat.vue | 2 +- .../canvas/components/Editor/DeEditor.vue | 53 ++++++--- .../canvas/components/Editor/EditBar.vue | 2 +- .../canvas/components/Editor/PGrid.vue | 4 +- .../canvas/components/Editor/Preview.vue | 12 +- .../components/Editor/PreviewMobile.vue | 3 +- .../components/canvas/components/TextAttr.vue | 7 +- frontend/src/components/canvas/utils/utils.js | 7 +- .../src/components/dataease/DeOutWidget.vue | 1 - .../src/components/widget/DeWidget/DeTabs.vue | 22 ++-- frontend/src/lang/en.js | 1 + frontend/src/lang/tw.js | 1 + frontend/src/lang/zh.js | 1 + frontend/src/store/index.js | 6 +- frontend/src/views/dataset/add/AddSQL.vue | 3 +- frontend/src/views/dataset/data/ViewTable.vue | 14 ++- frontend/src/views/dataset/data/noSelect.vue | 2 +- .../src/views/panel/LinkJumpSet/index.vue | 2 +- frontend/src/views/panel/edit/index.vue | 71 ++++++----- frontend/src/views/panel/filter/index.vue | 2 +- frontend/src/views/panel/list/PanelList.vue | 4 +- .../src/views/system/datasource/DsMain.vue | 2 +- 26 files changed, 208 insertions(+), 169 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index 227387ac25..3da2dd20e8 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -64,7 +64,7 @@ @mousedown.stop.prevent="handleDown(handlei, $event)" @touchstart.stop.prevent="handleTouchDown(handlei, $event)" > - +
- +
@@ -386,7 +386,7 @@ export default { data: function() { return { contentDisplay: true, - //当画布在tab中是 宽度左右拓展的余量 + // 当画布在tab中是 宽度左右拓展的余量 parentWidthTabOffset: 40, canvasChangeTips: 'none', tabMoveInYOffset: 70, @@ -434,10 +434,10 @@ export default { } }, computed: { - parentWidthOffset(){ - if(this.canvasId==='canvas-main'){ + parentWidthOffset() { + if (this.canvasId === 'canvas-main') { return 0 - }else{ + } else { return this.parentWidthTabOffset } }, @@ -1425,7 +1425,6 @@ export default { // 如果辅助设计 需要最后调整矩阵 if (this.element.auxiliaryMatrix) { - const _this = this const historyTabMoveInActiveId = this.tabMoveInActiveId const historyTabMoveOutComponentId = this.tabMoveOutComponentId setTimeout(() => { @@ -1462,10 +1461,10 @@ export default { componentCanvasChange() { // 主画布移入Tab画布 if (this.tabMoveInActiveId) { - //从当前画布移除 + // 从当前画布移除 this.$emit('amRemoveItem') this.element.canvasPid = this.element.canvasId - //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName + // Tab内部的画布ID 为 tab组件id + '-' + tabActiveName const targetCanvasId = this.tabMoveInActiveId + '-' + this.tabActiveTabNameMap[this.tabMoveInActiveId] const targetCanvasScale = this.curCanvasScaleMap[targetCanvasId] if (this.element.auxiliaryMatrix) { @@ -1487,27 +1486,26 @@ export default { } // Tab 画布 移入主画布 if (this.tabMoveOutComponentId) { - //从当前画布移除 + // 从当前画布移除 this.$emit('amRemoveItem') this.element.canvasPid = 0 this.element.canvasId = 'canvas-main' - //Tab内部的画布ID 为 tab组件id + '-' + tabActiveName + // Tab内部的画布ID 为 tab组件id + '-' + tabActiveName const targetCanvasScale = this.curCanvasScaleMap['canvas-main'] // 按照阴影位置定位 this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth - this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2))/ targetCanvasScale.scalePointHeight - this.element.style.width = this.mousePointShadowMap.width/ targetCanvasScale.scalePointWidth - this.element.style.height = this.mousePointShadowMap.height/ targetCanvasScale.scalePointHeight + this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2)) / targetCanvasScale.scalePointHeight + this.element.style.width = this.mousePointShadowMap.width / targetCanvasScale.scalePointWidth + this.element.style.height = this.mousePointShadowMap.height / targetCanvasScale.scalePointHeight if (this.element.auxiliaryMatrix) { this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1 this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1 - this.element.sizex = Math.round(this.element.style.width /targetCanvasScale.matrixStyleOriginWidth) + this.element.sizex = Math.round(this.element.style.width / targetCanvasScale.matrixStyleOriginWidth) this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight) this.recordMatrixCurShadowStyle(targetCanvasScale) } } - }, // 设置属性(属性跟随所属canvas component类型 要做出改变) @@ -1977,7 +1975,6 @@ export default { } else { this.$store.commit('setTabMoveInActiveId', null) } - } } } diff --git a/frontend/src/components/DeDrag/pointShadow.vue b/frontend/src/components/DeDrag/pointShadow.vue index 2a6591b714..569c968315 100644 --- a/frontend/src/components/DeDrag/pointShadow.vue +++ b/frontend/src/components/DeDrag/pointShadow.vue @@ -4,8 +4,14 @@ :style="styleInfo" >
-
-
+
+
组件将被移出Tab
@@ -94,7 +100,6 @@ export default { background-color: rgba(179, 212, 252); } - .point-shadow-tips { left: 0px; top: 0px; diff --git a/frontend/src/components/DeDrag/shadow.vue b/frontend/src/components/DeDrag/shadow.vue index 26434ff922..a90e29a698 100644 --- a/frontend/src/components/DeDrag/shadow.vue +++ b/frontend/src/components/DeDrag/shadow.vue @@ -10,6 +10,7 @@ import { mapState } from 'vuex' export default { replace: true, + // eslint-disable-next-line name: 'Shadow', props: { canvasId: { @@ -18,7 +19,7 @@ export default { } }, computed: { - curCanvasScaleSelf(){ + curCanvasScaleSelf() { return this.curCanvasScaleMap[this.canvasId] }, styleInfo() { diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue index 30dd77c57e..9616c540a8 100644 --- a/frontend/src/components/canvas/DeCanvas.vue +++ b/frontend/src/components/canvas/DeCanvas.vue @@ -1,7 +1,7 @@ @@ -107,6 +121,35 @@ import FilterDialog from '@/views/panel/filter/filterDialog' export default { components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor }, + props: { + parentForbid: { + type: Boolean, + require: false, + default: true + }, + canvasStyleData: { + type: Object, + require: true + }, + componentData: { + type: Array, + require: false, + default: () => [] + }, + canvasId: { + type: String, + require: true + }, + canvasPid: { + type: String, + require: true + }, + mobileLayoutStatus: { + type: Boolean, + require: false, + default: false + } + }, data() { return { // 需要展示属性设置的组件类型 @@ -140,44 +183,15 @@ export default { } } }, - props: { - parentForbid:{ - type: Boolean, - require: false, - default: true - }, - canvasStyleData: { - type: Object, - require: true - }, - componentData: { - type: Array, - require: false, - default: [] - }, - canvasId: { - type: String, - require: true - }, - canvasPid: { - type: String, - require: true - }, - mobileLayoutStatus: { - type: Boolean, - require: false, - default: false - } - }, computed: { - matrixCountBase(){ - if(this.isMainCanvas && this.mobileLayoutStatus){ + matrixCountBase() { + if (this.isMainCanvas && this.mobileLayoutStatus) { return this.mobileMatrixCount - }else{ + } else { return this.pcMatrixCountBase } }, - isMainCanvas(){ + isMainCanvas() { return this.canvasId === 'canvas-main' }, panelInfo() { @@ -224,7 +238,7 @@ export default { watch: { mobileLayoutStatus() { this.restore() - }, + } // //监控当前组件移动 检查是否靠近tab // curComponent: { // handler(newVal, oldVla) { @@ -263,7 +277,7 @@ export default { if (domInfo) { this.outStyle.height = domInfo.offsetHeight - this.getGap() // 临时处理 确保每次restore 有会更新 - this.outStyle.width = domInfo.offsetWidth + (Math.random() * 0.000001) + this.outStyle.width = domInfo.offsetWidth + (Math.random() * 0.000001) } }) }, @@ -571,7 +585,7 @@ export default { // const canvasInfoMobile = document.getElementById(this.canvasDomId) // canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset // this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset) - }, + } } } diff --git a/frontend/src/components/canvas/components/Editor/DateFormat.vue b/frontend/src/components/canvas/components/Editor/DateFormat.vue index af04e16a9a..840b8c1154 100644 --- a/frontend/src/components/canvas/components/Editor/DateFormat.vue +++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue @@ -130,7 +130,7 @@ export default { } }, computed: { - curCanvasScaleSelf(){ + curCanvasScaleSelf() { return this.curCanvasScaleMap[this.canvasId] }, ...mapState([ diff --git a/frontend/src/components/canvas/components/Editor/DeEditor.vue b/frontend/src/components/canvas/components/Editor/DeEditor.vue index 04f8c99dec..82c04bbbd2 100644 --- a/frontend/src/components/canvas/components/Editor/DeEditor.vue +++ b/frontend/src/components/canvas/components/Editor/DeEditor.vue @@ -13,8 +13,15 @@ @scroll="canvasScroll" > - - + + - + - + - + [] }, canvasId: { type: String, @@ -890,18 +905,18 @@ export default { moveTabCollisionActive() { return this.tabCollisionActiveId }, - pointShadowShow(){ - return this.canvasId==='canvas-main' - && this.curComponent - && this.curComponent.canvasId !== 'canvas-main' - && this.tabMoveOutComponentId + pointShadowShow() { + return this.canvasId === 'canvas-main' && + this.curComponent && + this.curComponent.canvasId !== 'canvas-main' && + this.tabMoveOutComponentId }, shadowShow() { - return ((this.curComponent - && this.curComponent.auxiliaryMatrix - && this.curComponent.canvasId === this.canvasId - && (this.curComponent.optStatus.dragging || this.curComponent.optStatus.resizing)) - || (this.dragComponentInfo && this.dragComponentInfo.canvasId ===this.canvasId )) && !this.tabMoveInActive + return ((this.curComponent && + this.curComponent.auxiliaryMatrix && + this.curComponent.canvasId === this.canvasId && + (this.curComponent.optStatus.dragging || this.curComponent.optStatus.resizing)) || + (this.dragComponentInfo && this.dragComponentInfo.canvasId === this.canvasId)) && !this.tabMoveInActive }, tabMoveInActive() { return this.tabMoveInActiveId @@ -925,7 +940,9 @@ export default { } }, // 挤占式画布设计 + // eslint-disable-next-line coordinates() { + // eslint-disable-next-line return this.coordinates }, customStyle() { @@ -1482,7 +1499,7 @@ export default { } }, handleDragOver(e) { - console.log('handleDragOver--x='+e.pageX+';y='+e.pageY) + console.log('handleDragOver--x=' + e.pageX + ';y=' + e.pageY) this.dragComponentInfo.shadowStyle.x = e.pageX - 220 this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth @@ -1628,7 +1645,7 @@ export default { let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1 newX = newX > 0 ? newX : 1 newY = newY > 0 ? newY : 1 - console.log("moveTabCollisionActive="+this.moveTabCollisionActive) + console.log('moveTabCollisionActive=' + this.moveTabCollisionActive) if (this.moveTabCollisionActive) { return } diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue index d111132bc2..1340650372 100644 --- a/frontend/src/components/canvas/components/Editor/EditBar.vue +++ b/frontend/src/components/canvas/components/Editor/EditBar.vue @@ -319,7 +319,7 @@ export default { miniWidth() { return this.mobileLayoutStatus ? 1 : 4 }, - curCanvasScaleSelf(){ + curCanvasScaleSelf() { return this.curCanvasScaleMap[this.canvasId] }, ...mapState([ diff --git a/frontend/src/components/canvas/components/Editor/PGrid.vue b/frontend/src/components/canvas/components/Editor/PGrid.vue index c2df81e89b..f1fba8b94c 100644 --- a/frontend/src/components/canvas/components/Editor/PGrid.vue +++ b/frontend/src/components/canvas/components/Editor/PGrid.vue @@ -6,8 +6,8 @@ class="outer-class" >
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 8cbdc8b2ba..1cf1a3f83f 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -67,16 +67,14 @@ import { uuid } from 'vue-uuid' import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils' import eventBus from '@/components/canvas/utils/eventBus' import elementResizeDetectorMaker from 'element-resize-detector' -import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog' import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar' -import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog' import bus from '@/utils/bus' import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil' import { hasDataPermission } from '@/utils/permission' const erd = elementResizeDetectorMaker() export default { - components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar }, + components: { ComponentWrapper, CanvasOptBar }, model: { prop: 'show', event: 'change' @@ -141,10 +139,10 @@ export default { }, data() { return { - previewDomId: 'preview-'+this.canvasId, - previewRefId: 'preview-ref-'+this.canvasId, - previewTempDomId: 'preview-temp-'+this.canvasId, - previewTempRefId: 'preview-temp-ref-'+this.canvasId, + previewDomId: 'preview-' + this.canvasId, + previewRefId: 'preview-ref-' + this.canvasId, + previewTempDomId: 'preview-temp-' + this.canvasId, + previewTempRefId: 'preview-temp-ref-' + this.canvasId, isShowPreview: false, panelId: '', needToChangeHeight: [ diff --git a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue index 866a97716e..5a5eac8c9d 100644 --- a/frontend/src/components/canvas/components/Editor/PreviewMobile.vue +++ b/frontend/src/components/canvas/components/Editor/PreviewMobile.vue @@ -46,11 +46,10 @@ import { uuid } from 'vue-uuid' import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils' import eventBus from '@/components/canvas/utils/eventBus' import elementResizeDetectorMaker from 'element-resize-detector' -import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog' import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar' export default { - components: { ComponentWrapper, UserViewDialog, CanvasOptBar }, + components: { ComponentWrapper, CanvasOptBar }, model: { prop: 'show', event: 'change' diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue index ab657a25fa..7e3b2e874e 100644 --- a/frontend/src/components/canvas/components/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -319,7 +319,10 @@ style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;" > - +
@@ -601,7 +604,7 @@ export default { showVertical() { return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName) }, - curCanvasScaleSelf(){ + curCanvasScaleSelf() { return this.curCanvasScaleMap[this.canvasId] }, ...mapState([ diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js index 319232a686..d3ab9c2e14 100644 --- a/frontend/src/components/canvas/utils/utils.js +++ b/frontend/src/components/canvas/utils/utils.js @@ -136,7 +136,6 @@ export function panelDataPrepare(componentData, componentStyle, callback) { // 增加所属画布ID(canvasId)当前所在画布的父ID(canvasPid) 主画布ID为main-canvas, PID = 0 表示当前所属canvas为最顶层 item.canvasId = (item.canvasId || 'canvas-main') item.canvasPid = (item.canvasPid || '0') - }) // 初始化密度为最高密度 componentStyle.aidedDesign.matrixBase = 4 @@ -149,7 +148,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) { export function resetID(data) { if (data) { data.forEach(item => { - item.type !== 'custom' && item.type !== 'de-tabs'&& (item.id = uuid.v1()) + item.type !== 'custom' && item.type !== 'de-tabs' && (item.id = uuid.v1()) }) } return data @@ -229,6 +228,6 @@ export function imgUrlTrans(url) { } } -export function getNowCanvasComponentData(canvasId){ - return store.state.componentData.filter(item => item.canvasId===canvasId) +export function getNowCanvasComponentData(canvasId) { + return store.state.componentData.filter(item => item.canvasId === canvasId) } diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue index 46aa53326e..d813136234 100644 --- a/frontend/src/components/dataease/DeOutWidget.vue +++ b/frontend/src/components/dataease/DeOutWidget.vue @@ -58,7 +58,6 @@