forked from github/dataease
fix: 拖拽问题回退
This commit is contained in:
wangjiahao
parent
f88d0f5eaa
commit
66eb1c2b3d
@ -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)) {
|
||||
|
||||
@ -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'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -71,7 +71,6 @@ const data = {
|
||||
},
|
||||
|
||||
setCurComponent(state, { component, index }) {
|
||||
console.log('curComponent' + JSON.stringify(component))
|
||||
state.curComponent = component
|
||||
state.curComponentIndex = index
|
||||
},
|
||||
|
||||
@ -37,8 +37,8 @@
|
||||
:key="index"
|
||||
:data-id="item.id"
|
||||
:data-index="index"
|
||||
draggable
|
||||
:class="'filter-widget '+ (item.defaultClass || '')"
|
||||
@click="goFile"
|
||||
>
|
||||
<div class="filter-widget-icon">
|
||||
<i :class="(item.icon || 'el-icon-setting') + ' widget-icon-i'" />
|
||||
|
||||
@ -154,6 +154,8 @@
|
||||
<Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
|
||||
</fullscreen>
|
||||
|
||||
<input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
|
||||
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user