From 66eb1c2b3d004270135510a5b76ee09958b873ba Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 21 Jun 2021 15:33:10 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8B=96=E6=8B=BD=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E5=9B=9E=E9=80=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 4 +- .../canvas/custom-component/component-list.js | 14 ++- frontend/src/store/index.js | 1 - .../src/views/panel/AssistComponent/index.vue | 2 +- frontend/src/views/panel/edit/index.vue | 85 +++++++++++++++++-- 5 files changed, 92 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index ff5a1743bc..ddde75c207 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -1252,7 +1252,7 @@ export default { this.top = this.mouseClickPosition.top this.left = this.mouseClickPosition.left this.width = this.mouseClickPosition.width - console.log('width5:' + this.width) + // console.log('width5:' + this.width) this.height = this.mouseClickPosition.height } } @@ -1436,7 +1436,7 @@ export default { let groupLeft = 0 let groupTop = 0 for (const item of nodes) { - console.log('===' + typeof item.tagName) + // console.log('===' + typeof item.tagName) // 修复判断条件 // if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) { if (item.tagName !== 'svg' && item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) { diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 6203cb51ab..5cc1c686aa 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -33,9 +33,9 @@ export const assistList = [ export const pictureList = [ { id: '20001', - component: 'picture', - type: 'picture', - label: '点击上传', + component: 'picture-add', + type: 'picture-add', + label: '拖拽上传', icon: 'iconfont icon-picture', defaultClass: 'text-filter' } @@ -137,6 +137,14 @@ const list = [ height: 300, borderRadius: '' } + }, + { + id: '20001', + component: 'picture-add', + type: 'picture-add', + label: '拖拽上传', + icon: 'iconfont icon-picture', + defaultClass: 'text-filter' } ] diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index e3cebe8c59..0094960db3 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -71,7 +71,6 @@ const data = { }, setCurComponent(state, { component, index }) { - console.log('curComponent' + JSON.stringify(component)) state.curComponent = component state.curComponentIndex = index }, diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue index 647953d849..0ce2f97b84 100644 --- a/frontend/src/views/panel/AssistComponent/index.vue +++ b/frontend/src/views/panel/AssistComponent/index.vue @@ -37,8 +37,8 @@ :key="index" :data-id="item.id" :data-index="index" + draggable :class="'filter-widget '+ (item.defaultClass || '')" - @click="goFile" >
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index b36ddb3e20..a868021fc3 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -154,6 +154,8 @@ + + @@ -188,6 +190,10 @@ import '@/components/canvas/styles/animate.css' import { ApplicationContext } from '@/utils/ApplicationContext' import FilterDialog from '../filter/filterDialog' +import toast from '@/components/canvas/utils/toast' +import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' +import generateID from '@/components/canvas/utils/generateID' + export default { name: 'PanelEdit', components: { @@ -238,7 +244,8 @@ export default { height: null }, beforeDialogValue: [], - styleDialogVisible: false + styleDialogVisible: false, + currentDropElement: null } }, @@ -248,6 +255,7 @@ export default { }, ...mapState([ 'curComponent', + 'curCanvasScale', 'isClickComponent', 'canvasStyleData', 'curComponentIndex', @@ -384,13 +392,12 @@ export default { return data }, handleDrop(e) { + this.currentDropElement = e e.preventDefault() e.stopPropagation() let component const newComponentId = uuid.v1() - const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo')) - if (componentInfo.type === 'assist') { // 辅助设计组件 componentList.forEach(componentTemp => { @@ -398,6 +405,12 @@ export default { component = deepCopy(componentTemp) } }) + + if (component.type === 'picture-add') { + this.goFile() + this.clearCurrentInfo() + return + } } else if (componentInfo.type === 'view') { // 用户视图设置 复制一个模板 componentList.forEach(componentTemp => { @@ -415,8 +428,8 @@ export default { this.currentWidget = ApplicationContext.getService(componentInfo.id) this.currentFilterCom = this.currentWidget.getDrawPanel() - this.currentFilterCom.style.top = e.offsetY - this.currentFilterCom.style.left = e.offsetX + this.currentFilterCom.style.top = this.getPositionY(e.layerY) + this.currentFilterCom.style.left = this.getPositionX(e.layerX) this.currentFilterCom.id = newComponentId if (this.currentWidget.filterDialog) { this.show = false @@ -427,8 +440,8 @@ export default { } // position = absolution 或导致有偏移 这里中和一下偏移量 - component.style.top = e.offsetY - component.style.left = e.offsetX + component.style.top = this.getPositionY(e.layerY) + component.style.left = this.getPositionX(e.layerX) component.id = newComponentId this.$store.commit('addComponent', { component }) this.$store.commit('recordSnapshot') @@ -525,6 +538,64 @@ export default { }, closeStyleDialog() { this.styleDialogVisible = false + }, + goFile() { + this.$refs.files.click() + }, + handleFileChange(e) { + const file = e.target.files[0] + if (!file.type.includes('image')) { + toast('只能插入图片') + return + } + const reader = new FileReader() + reader.onload = (res) => { + const fileResult = res.target.result + const img = new Image() + img.onload = () => { + const scaleWith = img.width / 400 + const scaleHeight = img.height / 200 + let scale = scaleWith > scaleHeight ? scaleWith : scaleHeight + scale = scale > 1 ? scale : 1 + this.$store.commit('addComponent', { + component: { + ...commonAttr, + id: generateID(), + component: 'Picture', + label: '图片', + icon: '', + propValue: fileResult, + style: { + ...commonStyle, + top: this.getPositionY(this.currentDropElement.layerY), + left: this.getPositionX(this.currentDropElement.layerX), + width: img.width / scale, + height: img.height / scale + } + } + }) + + this.$store.commit('recordSnapshot') + } + + img.src = fileResult + } + + reader.readAsDataURL(file) + }, + getPositionX(x) { + if (this.canvasStyleData.selfAdaption) { + return x * 100 / this.curCanvasScale.scaleWidth + } else { + return x + } + }, + getPositionY(y) { + if (this.canvasStyleData.selfAdaption) { + return y * 100 / this.curCanvasScale.scaleHeight + } else { + return y + } } } }