forked from github/dataease
fix:代码规范
This commit is contained in:
junjie
parent
09aaaedeb4
commit
ce4d20b8b1
@ -1,54 +1,54 @@
|
||||
<template>
|
||||
<div class="group">
|
||||
<div>
|
||||
<template v-for="item in propValue">
|
||||
<component
|
||||
class="component"
|
||||
:is="item.component"
|
||||
:style="item.groupStyle"
|
||||
:propValue="item.propValue"
|
||||
:key="item.id"
|
||||
:id="'component' + item.id"
|
||||
:element="item"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div>
|
||||
<template v-for="item in propValue">
|
||||
<component
|
||||
:is="item.component"
|
||||
:id="'component' + item.id"
|
||||
:key="item.id"
|
||||
class="component"
|
||||
:style="item.groupStyle"
|
||||
:prop-value="item.propValue"
|
||||
:element="item"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStyle } from '@/components/canvas/utils/style'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
propValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
element: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const parentStyle = this.element.style
|
||||
this.propValue.forEach(component => {
|
||||
// component.groupStyle 的 top left 是相对于 group 组件的位置
|
||||
// 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
|
||||
if (!Object.keys(component.groupStyle).length) {
|
||||
const style = { ...component.style }
|
||||
component.groupStyle = getStyle(style)
|
||||
component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)
|
||||
component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)
|
||||
component.groupStyle.width = this.toPercent(style.width / parentStyle.width)
|
||||
component.groupStyle.height = this.toPercent(style.height / parentStyle.height)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toPercent(val) {
|
||||
return val * 100 + '%'
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
element: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const parentStyle = this.element.style
|
||||
this.propValue.forEach(component => {
|
||||
// component.groupStyle 的 top left 是相对于 group 组件的位置
|
||||
// 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算
|
||||
if (!Object.keys(component.groupStyle).length) {
|
||||
const style = { ...component.style }
|
||||
component.groupStyle = getStyle(style)
|
||||
component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)
|
||||
component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)
|
||||
component.groupStyle.width = this.toPercent(style.width / parentStyle.width)
|
||||
component.groupStyle.height = this.toPercent(style.height / parentStyle.height)
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toPercent(val) {
|
||||
return val * 100 + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,64 +4,64 @@ import generateID from '@/components/canvas/utils/generateID'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
state: {
|
||||
copyData: null, // 复制粘贴剪切
|
||||
isCut: false,
|
||||
state: {
|
||||
copyData: null, // 复制粘贴剪切
|
||||
isCut: false
|
||||
},
|
||||
mutations: {
|
||||
copy(state) {
|
||||
if (!state.curComponent) return
|
||||
state.copyData = {
|
||||
data: deepCopy(state.curComponent),
|
||||
index: state.curComponentIndex
|
||||
}
|
||||
|
||||
state.isCut = false
|
||||
},
|
||||
mutations: {
|
||||
copy(state) {
|
||||
if (!state.curComponent) return
|
||||
state.copyData = {
|
||||
data: deepCopy(state.curComponent),
|
||||
index: state.curComponentIndex,
|
||||
}
|
||||
|
||||
state.isCut = false
|
||||
},
|
||||
paste(state, isMouse) {
|
||||
if (!state.copyData) {
|
||||
toast('请选择组件')
|
||||
return
|
||||
}
|
||||
|
||||
paste(state, isMouse) {
|
||||
if (!state.copyData) {
|
||||
toast('请选择组件')
|
||||
return
|
||||
}
|
||||
const data = state.copyData.data
|
||||
|
||||
const data = state.copyData.data
|
||||
if (isMouse) {
|
||||
data.style.top = state.menuTop
|
||||
data.style.left = state.menuLeft
|
||||
} else {
|
||||
data.style.top += 10
|
||||
data.style.left += 10
|
||||
}
|
||||
|
||||
if (isMouse) {
|
||||
data.style.top = state.menuTop
|
||||
data.style.left = state.menuLeft
|
||||
} else {
|
||||
data.style.top += 10
|
||||
data.style.left += 10
|
||||
}
|
||||
|
||||
data.id = generateID()
|
||||
store.commit('addComponent', { component: deepCopy(data) })
|
||||
if (state.isCut) {
|
||||
state.copyData = null
|
||||
}
|
||||
},
|
||||
|
||||
cut(state) {
|
||||
if (!state.curComponent) {
|
||||
toast('请选择组件')
|
||||
return
|
||||
}
|
||||
|
||||
if (state.copyData) {
|
||||
const data = deepCopy(state.copyData.data)
|
||||
const index = state.copyData.index
|
||||
data.id = generateID()
|
||||
store.commit('addComponent', { component: data, index })
|
||||
if (state.curComponentIndex >= index) {
|
||||
// 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
|
||||
state.curComponentIndex++
|
||||
}
|
||||
}
|
||||
|
||||
store.commit('copy')
|
||||
store.commit('deleteComponent')
|
||||
state.isCut = true
|
||||
},
|
||||
data.id = generateID()
|
||||
store.commit('addComponent', { component: deepCopy(data) })
|
||||
if (state.isCut) {
|
||||
state.copyData = null
|
||||
}
|
||||
},
|
||||
|
||||
cut(state) {
|
||||
if (!state.curComponent) {
|
||||
toast('请选择组件')
|
||||
return
|
||||
}
|
||||
|
||||
if (state.copyData) {
|
||||
const data = deepCopy(state.copyData.data)
|
||||
const index = state.copyData.index
|
||||
data.id = generateID()
|
||||
store.commit('addComponent', { component: data, index })
|
||||
if (state.curComponentIndex >= index) {
|
||||
// 如果当前组件索引大于等于插入索引，需要加一，因为当前组件往后移了一位
|
||||
state.curComponentIndex++
|
||||
}
|
||||
}
|
||||
|
||||
store.commit('copy')
|
||||
store.commit('deleteComponent')
|
||||
state.isCut = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -178,7 +178,7 @@ import bus from '@/utils/bus'
|
||||
import EditPanel from './EditPanel'
|
||||
import { addGroup, delGroup, groupTree, defaultTree, findOne } from '@/api/panel/panel'
|
||||
import {
|
||||
DEFAULT_COMMON_CANVAS_STYLE_STRING
|
||||
DEFAULT_COMMON_CANVAS_STYLE_STRING
|
||||
} from '@/views/panel/panel'
|
||||
|
||||
export default {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user