feat:优化查询条件
This commit is contained in:
parent
94a2395c80
commit
e5715d6898
@ -65,6 +65,7 @@ export default {
|
||||
},
|
||||
|
||||
cut() {
|
||||
this.deleteCurCondition()
|
||||
this.$store.commit('cut')
|
||||
},
|
||||
|
||||
@ -78,10 +79,17 @@ export default {
|
||||
},
|
||||
|
||||
deleteComponent() {
|
||||
this.deleteCurCondition()
|
||||
this.$store.commit('deleteComponent')
|
||||
this.$store.commit('recordSnapshot')
|
||||
},
|
||||
|
||||
deleteCurCondition() {
|
||||
if (this.curComponent.type === 'custom') {
|
||||
bus.$emit('delete-condition', { componentId: this.curComponent.id })
|
||||
}
|
||||
},
|
||||
|
||||
upComponent() {
|
||||
this.$store.commit('upComponent')
|
||||
this.$store.commit('recordSnapshot')
|
||||
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
|
||||
this.hideLine()
|
||||
components.forEach(component => {
|
||||
if (component == this.curComponent) return
|
||||
if (component === this.curComponent) return
|
||||
const componentStyle = getComponentRotatedStyle(component.style)
|
||||
const { top, left, bottom, right } = componentStyle
|
||||
const componentHalfwidth = componentStyle.width / 2
|
||||
|
||||
@ -61,13 +61,11 @@ export default {
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
debugger
|
||||
const _this = this
|
||||
const erd = elementResizeDetectorMaker()
|
||||
// 监听div变动事件
|
||||
erd.listenTo(document.getElementById('canvasInfo'), element => {
|
||||
_this.$nextTick(() => {
|
||||
debugger
|
||||
_this.restore()
|
||||
})
|
||||
})
|
||||
|
||||
@ -71,7 +71,6 @@ export default {
|
||||
})
|
||||
})
|
||||
window.onresize = () => {
|
||||
debugger
|
||||
this.resize()
|
||||
}
|
||||
// this.resize()
|
||||
@ -88,7 +87,6 @@ export default {
|
||||
this.handleScaleChange()
|
||||
},
|
||||
restore() {
|
||||
debugger
|
||||
this.panelId = this.$route.path.split('/')[2]
|
||||
// 加载视图数据
|
||||
get('panel/group/findOne/' + this.panelId).then(response => {
|
||||
|
||||
@ -19,7 +19,6 @@ export default {
|
||||
|
||||
methods: {
|
||||
toDir() {
|
||||
debugger
|
||||
this.$router.replace('/panel/index')
|
||||
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
|
||||
}
|
||||
|
||||
@ -25,14 +25,14 @@
|
||||
:class="{ lock: item.isLock }"
|
||||
>
|
||||
|
||||
<de-drawing-widget
|
||||
<component
|
||||
:is="item.component"
|
||||
v-if="item.type==='custom'"
|
||||
:id="'component' + item.id"
|
||||
class="component"
|
||||
:style="getComponentStyle(item.style)"
|
||||
:service-name="item.widgetService.name"
|
||||
:panel-id="panelInfo.id"
|
||||
@filter-value-change="filterValueChange"
|
||||
:style="item.style"
|
||||
:element="item"
|
||||
@set-condition-value="setConditionValue"
|
||||
/>
|
||||
|
||||
<component
|
||||
@ -67,6 +67,7 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Shape from './Shape'
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
|
||||
import { $ } from '@/components/canvas/utils/utils'
|
||||
import ContextMenu from './ContextMenu'
|
||||
@ -75,7 +76,8 @@ import Area from './Area'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import Grid from './Grid'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
|
||||
import { Condition } from '@/components/widget/bean/Condition'
|
||||
import bus from '@/utils/bus'
|
||||
export default {
|
||||
components: { Shape, ContextMenu, MarkLine, Area, Grid },
|
||||
props: {
|
||||
@ -94,7 +96,8 @@ export default {
|
||||
},
|
||||
width: 0,
|
||||
height: 0,
|
||||
isShowArea: false
|
||||
isShowArea: false,
|
||||
conditions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -116,6 +119,9 @@ export default {
|
||||
eventBus.$on('hideArea', () => {
|
||||
this.hideArea()
|
||||
})
|
||||
bus.$on('delete-condition', condition => {
|
||||
this.deleteCondition(condition)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changeStyleWithScale,
|
||||
@ -281,7 +287,8 @@ export default {
|
||||
},
|
||||
|
||||
getComponentStyle(style) {
|
||||
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
return style
|
||||
},
|
||||
|
||||
handleInput(element, value) {
|
||||
@ -290,6 +297,7 @@ export default {
|
||||
},
|
||||
|
||||
getTextareaHeight(element, text) {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { lineHeight, fontSize, height } = element.style
|
||||
if (lineHeight === '') {
|
||||
lineHeight = 1.5
|
||||
@ -301,6 +309,28 @@ export default {
|
||||
|
||||
filterValueChange(value) {
|
||||
console.log('emit:' + value)
|
||||
},
|
||||
|
||||
setConditionValue(obj) {
|
||||
const { component, value, operator } = obj
|
||||
const fieldId = component.options.attrs.fieldId
|
||||
const condition = new Condition(component.id, fieldId, operator, value, null)
|
||||
this.addCondition(condition)
|
||||
},
|
||||
addCondition(condition) {
|
||||
this.conditions.push(condition)
|
||||
this.executeSearch()
|
||||
},
|
||||
deleteCondition(condition) {
|
||||
this.conditions = this.conditions.filter(item => {
|
||||
const componentIdSuitable = !condition.componentId || (item.componentId === condition.componentId)
|
||||
const fieldIdSuitable = !condition.fieldId || (item.fieldId === condition.fieldId)
|
||||
return !(componentIdSuitable && fieldIdSuitable)
|
||||
})
|
||||
this.executeSearch()
|
||||
},
|
||||
executeSearch() {
|
||||
console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,95 +6,95 @@ import { $ } from '@/components/canvas/utils/utils'
|
||||
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
|
||||
|
||||
export default {
|
||||
state: {
|
||||
areaData: { // 选中区域包含的组件以及区域位移信息
|
||||
style: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
components: [],
|
||||
},
|
||||
editor: null,
|
||||
state: {
|
||||
areaData: { // 选中区域包含的组件以及区域位移信息
|
||||
style: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
components: []
|
||||
},
|
||||
mutations: {
|
||||
getEditor(state) {
|
||||
state.editor = $('#editor')
|
||||
},
|
||||
|
||||
setAreaData(state, data) {
|
||||
state.areaData = data
|
||||
},
|
||||
|
||||
compose({ componentData, areaData, editor }) {
|
||||
const components = []
|
||||
areaData.components.forEach(component => {
|
||||
if (component.component != 'Group') {
|
||||
components.push(component)
|
||||
} else {
|
||||
// 如果要组合的组件中,已经存在组合数据,则需要提前拆分
|
||||
const parentStyle = { ...component.style }
|
||||
const subComponents = component.propValue
|
||||
const editorRect = editor.getBoundingClientRect()
|
||||
|
||||
store.commit('deleteComponent')
|
||||
subComponents.forEach(component => {
|
||||
decomposeComponent(component, editorRect, parentStyle)
|
||||
store.commit('addComponent', { component })
|
||||
})
|
||||
|
||||
components.push(...component.propValue)
|
||||
store.commit('batchDeleteComponent', component.propValue)
|
||||
}
|
||||
})
|
||||
|
||||
store.commit('addComponent', {
|
||||
component: {
|
||||
id: generateID(),
|
||||
component: 'Group',
|
||||
...commonAttr,
|
||||
style: {
|
||||
...commonStyle,
|
||||
...areaData.style,
|
||||
},
|
||||
propValue: components,
|
||||
},
|
||||
})
|
||||
|
||||
eventBus.$emit('hideArea')
|
||||
|
||||
store.commit('batchDeleteComponent', areaData.components)
|
||||
store.commit('setCurComponent', {
|
||||
component: componentData[componentData.length - 1],
|
||||
index: componentData.length - 1,
|
||||
})
|
||||
|
||||
areaData.components = []
|
||||
},
|
||||
|
||||
// 将已经放到 Group 组件数据删除,也就是在 componentData 中删除,因为它们已经放到 Group 组件中了
|
||||
batchDeleteComponent({ componentData }, deleteData) {
|
||||
deleteData.forEach(component => {
|
||||
for (let i = 0, len = componentData.length; i < len; i++) {
|
||||
if (component.id == componentData[i].id) {
|
||||
componentData.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
decompose({ curComponent, editor }) {
|
||||
const parentStyle = { ...curComponent.style }
|
||||
const components = curComponent.propValue
|
||||
const editorRect = editor.getBoundingClientRect()
|
||||
|
||||
store.commit('deleteComponent')
|
||||
components.forEach(component => {
|
||||
decomposeComponent(component, editorRect, parentStyle)
|
||||
store.commit('addComponent', { component })
|
||||
})
|
||||
},
|
||||
editor: null
|
||||
},
|
||||
mutations: {
|
||||
getEditor(state) {
|
||||
state.editor = $('#editor')
|
||||
},
|
||||
|
||||
setAreaData(state, data) {
|
||||
state.areaData = data
|
||||
},
|
||||
|
||||
compose({ componentData, areaData, editor }) {
|
||||
const components = []
|
||||
areaData.components.forEach(component => {
|
||||
if (component.component !== 'Group') {
|
||||
components.push(component)
|
||||
} else {
|
||||
// 如果要组合的组件中,已经存在组合数据,则需要提前拆分
|
||||
const parentStyle = { ...component.style }
|
||||
const subComponents = component.propValue
|
||||
const editorRect = editor.getBoundingClientRect()
|
||||
|
||||
store.commit('deleteComponent')
|
||||
subComponents.forEach(component => {
|
||||
decomposeComponent(component, editorRect, parentStyle)
|
||||
store.commit('addComponent', { component })
|
||||
})
|
||||
|
||||
components.push(...component.propValue)
|
||||
store.commit('batchDeleteComponent', component.propValue)
|
||||
}
|
||||
})
|
||||
|
||||
store.commit('addComponent', {
|
||||
component: {
|
||||
id: generateID(),
|
||||
component: 'Group',
|
||||
...commonAttr,
|
||||
style: {
|
||||
...commonStyle,
|
||||
...areaData.style
|
||||
},
|
||||
propValue: components
|
||||
}
|
||||
})
|
||||
|
||||
eventBus.$emit('hideArea')
|
||||
|
||||
store.commit('batchDeleteComponent', areaData.components)
|
||||
store.commit('setCurComponent', {
|
||||
component: componentData[componentData.length - 1],
|
||||
index: componentData.length - 1
|
||||
})
|
||||
|
||||
areaData.components = []
|
||||
},
|
||||
|
||||
// 将已经放到 Group 组件数据删除,也就是在 componentData 中删除,因为它们已经放到 Group 组件中了
|
||||
batchDeleteComponent({ componentData }, deleteData) {
|
||||
deleteData.forEach(component => {
|
||||
for (let i = 0, len = componentData.length; i < len; i++) {
|
||||
if (component.id == componentData[i].id) {
|
||||
componentData.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
decompose({ curComponent, editor }) {
|
||||
const parentStyle = { ...curComponent.style }
|
||||
const components = curComponent.propValue
|
||||
const editorRect = editor.getBoundingClientRect()
|
||||
|
||||
store.commit('deleteComponent')
|
||||
components.forEach(component => {
|
||||
decomposeComponent(component, editorRect, parentStyle)
|
||||
store.commit('addComponent', { component })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,55 +1,55 @@
|
||||
import { sin, cos } from '@/components/canvas/utils/translate'
|
||||
|
||||
export function getStyle(style, filter = []) {
|
||||
const needUnit = [
|
||||
'fontSize',
|
||||
'width',
|
||||
'height',
|
||||
'top',
|
||||
'left',
|
||||
'borderWidth',
|
||||
'letterSpacing',
|
||||
'borderRadius',
|
||||
]
|
||||
const needUnit = [
|
||||
'fontSize',
|
||||
'width',
|
||||
'height',
|
||||
'top',
|
||||
'left',
|
||||
'borderWidth',
|
||||
'letterSpacing',
|
||||
'borderRadius'
|
||||
]
|
||||
|
||||
const result = {}
|
||||
Object.keys(style).forEach(key => {
|
||||
if (!filter.includes(key)) {
|
||||
if (key != 'rotate') {
|
||||
result[key] = style[key]
|
||||
const result = {}
|
||||
Object.keys(style).forEach(key => {
|
||||
if (!filter.includes(key)) {
|
||||
if (key !== 'rotate') {
|
||||
result[key] = style[key]
|
||||
|
||||
if (needUnit.includes(key)) {
|
||||
result[key] += 'px'
|
||||
}
|
||||
} else {
|
||||
result.transform = key + '(' + style[key] + 'deg)'
|
||||
}
|
||||
if (needUnit.includes(key)) {
|
||||
result[key] += 'px'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
result.transform = key + '(' + style[key] + 'deg)'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
return result
|
||||
}
|
||||
|
||||
// 获取一个组件旋转 rotate 后的样式
|
||||
export function getComponentRotatedStyle(style) {
|
||||
style = { ...style }
|
||||
if (style.rotate != 0) {
|
||||
const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
|
||||
const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值,变大是负值
|
||||
style.left += diffX
|
||||
style.right = style.left + newWidth
|
||||
style = { ...style }
|
||||
if (style.rotate != 0) {
|
||||
const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)
|
||||
const diffX = (style.width - newWidth) / 2 // 旋转后范围变小是正值,变大是负值
|
||||
style.left += diffX
|
||||
style.right = style.left + newWidth
|
||||
|
||||
const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
|
||||
const diffY = (newHeight - style.height) / 2 // 始终是正
|
||||
style.top -= diffY
|
||||
style.bottom = style.top + newHeight
|
||||
const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)
|
||||
const diffY = (newHeight - style.height) / 2 // 始终是正
|
||||
style.top -= diffY
|
||||
style.bottom = style.top + newHeight
|
||||
|
||||
style.width = newWidth
|
||||
style.height = newHeight
|
||||
} else {
|
||||
style.bottom = style.top + style.height
|
||||
style.right = style.left + style.width
|
||||
}
|
||||
style.width = newWidth
|
||||
style.height = newHeight
|
||||
} else {
|
||||
style.bottom = style.top + style.height
|
||||
style.right = style.left + style.width
|
||||
}
|
||||
|
||||
return style
|
||||
return style
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { ApplicationContext } from '@/utils/ApplicationContext'
|
||||
import store from '@/store'
|
||||
export default {
|
||||
name: 'DeDrawingWidget',
|
||||
functional: true,
|
||||
@ -7,25 +8,23 @@ export default {
|
||||
serviceName: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
panelId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
render(createElement, context) {
|
||||
const widgetInfo = ApplicationContext.getService(context.props.serviceName)
|
||||
// const widgetInfo = context.props.widgetInfo
|
||||
const panelId = context.props.panelId
|
||||
const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel(panelId) || null
|
||||
const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel() || null
|
||||
const drawInfo = widgetInfo.getDrawPanel && widgetInfo.getDrawPanel() || null
|
||||
const curComponent = store.state.curComponent
|
||||
if (!dialogInfo) {
|
||||
throw new Error('系统错误')
|
||||
}
|
||||
return createElement(dialogInfo.component, {
|
||||
props: {
|
||||
element: dialogInfo
|
||||
element: curComponent || drawInfo || dialogInfo
|
||||
},
|
||||
style: context.data.style,
|
||||
on: {
|
||||
'value-change': value => {
|
||||
context.listeners['filter-value-change'] && context.listeners['filter-value-change'](value)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :placeholder="options.attrs.placeholder" @change="changeValue">
|
||||
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
|
||||
<el-option
|
||||
v-for="item in options.attrs.datas"
|
||||
:key="item[options.attrs.key]"
|
||||
@ -12,19 +12,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inDraw: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: null
|
||||
options: null,
|
||||
operator: 'eq'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'element.style': function(value) {
|
||||
// console.log(value)
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.options = this.element.options
|
||||
},
|
||||
@ -35,7 +47,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
changeValue(value) {
|
||||
this.$emit('value-change', value)
|
||||
this.inDraw && this.$emit('set-condition-value', { component: this.element, value: value, operator: this.operator })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
14
frontend/src/components/widget/bean/Condition.js
Normal file
14
frontend/src/components/widget/bean/Condition.js
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* fieldId 字段ID
|
||||
* value 字段值
|
||||
* viewIds 过滤视图范围
|
||||
*/
|
||||
export class Condition {
|
||||
constructor(componentId, fieldId, operator, value, viewIds) {
|
||||
this.componentId = componentId
|
||||
this.fieldId = fieldId
|
||||
this.operator = operator || 'eq'
|
||||
this.value = value
|
||||
this.viewIds = viewIds
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
export class Widget {
|
||||
constructor(options = {}) {
|
||||
this.type = options.type
|
||||
this.default_style = options.default_style
|
||||
this.icon = options.icon
|
||||
this.lable = options.label
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import { DrawWidgetService } from '../service/DrawWidgetService'
|
||||
|
||||
const leftPanel = {
|
||||
@ -42,39 +43,23 @@ class MySelectImpl extends DrawWidgetService {
|
||||
constructor(options = {}) {
|
||||
Object.assign(options, { name: 'mySelectWidget' })
|
||||
super(options)
|
||||
this.filterDialog = true
|
||||
}
|
||||
|
||||
initLeftPanel(uuid) {
|
||||
uuid = uuid || this.uuid()
|
||||
this.setLeftPanel(uuid, leftPanel)
|
||||
return uuid
|
||||
initLeftPanel() {
|
||||
const value = JSON.parse(JSON.stringify(leftPanel))
|
||||
return value
|
||||
// console.log('this is first initWidget')
|
||||
}
|
||||
|
||||
initFilterDialog(uuid) {
|
||||
uuid = uuid || this.uuid()
|
||||
this.setDialogPanel(uuid, dialogPanel)
|
||||
return uuid
|
||||
initFilterDialog() {
|
||||
const value = JSON.parse(JSON.stringify(dialogPanel))
|
||||
return value
|
||||
}
|
||||
|
||||
initDrawPanel(uuid) {
|
||||
uuid = uuid || this.uuid()
|
||||
this.setDrawPanel(uuid, drawPanel)
|
||||
return uuid
|
||||
}
|
||||
|
||||
toDrawWidget() {
|
||||
// console.log('this is first toDrawWidget')
|
||||
}
|
||||
// 移动到画布之前回掉
|
||||
beforeToDraw() {
|
||||
|
||||
}
|
||||
|
||||
setOptionDatas(uuid, data) {
|
||||
const dialogPanel = this.getDialogPanel(uuid)
|
||||
dialogPanel.options.attrs.datas = data
|
||||
this.setDialogPanel(uuid, dialogPanel)
|
||||
initDrawPanel() {
|
||||
const value = JSON.parse(JSON.stringify(drawPanel))
|
||||
return value
|
||||
}
|
||||
|
||||
filterFieldMethod(fields) {
|
||||
@ -82,6 +67,16 @@ class MySelectImpl extends DrawWidgetService {
|
||||
return field['deType'] === 0
|
||||
})
|
||||
}
|
||||
|
||||
optionDatas(datas) {
|
||||
if (!datas) return null
|
||||
return datas.map(item => {
|
||||
return {
|
||||
id: item,
|
||||
text: item
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const mySelectImpl = new MySelectImpl()
|
||||
export default mySelectImpl
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import store from '@/store'
|
||||
import { uuid } from 'vue-uuid'
|
||||
export const commonStyle = {
|
||||
rotate: 0,
|
||||
opacity: 1
|
||||
@ -15,9 +14,9 @@ export class DrawWidgetService {
|
||||
constructor(options) {
|
||||
this.options = options
|
||||
this.name = options.name
|
||||
this.leftPanelPath = 'application/addLeftWidget'
|
||||
this.dialogPanelPath = 'application/addDialogWidget'
|
||||
this.drawPanelPath = 'application/addDrawWidget'
|
||||
// this.leftPanelPath = 'application/addLeftWidget'
|
||||
// this.dialogPanelPath = 'application/addDialogWidget'
|
||||
// this.drawPanelPath = 'application/addDrawWidget'
|
||||
this.storeWidget()
|
||||
}
|
||||
/**
|
||||
@ -28,56 +27,26 @@ export class DrawWidgetService {
|
||||
store(path, data) {
|
||||
store.dispatch(path, data)
|
||||
}
|
||||
uuid() {
|
||||
return uuid.v1()
|
||||
}
|
||||
setLeftPanel(uuid, leftPanel) {
|
||||
this.store(this.leftPanelPath, { uuid: uuid, leftPanel: leftPanel })
|
||||
}
|
||||
getLeftPanel(uuid) {
|
||||
if (!store.getters.leftWidgetMap[uuid]) {
|
||||
this.initLeftPanel && this.initLeftPanel(uuid)
|
||||
}
|
||||
return store.getters.leftWidgetMap[uuid]
|
||||
|
||||
getLeftPanel() {
|
||||
return this.initLeftPanel()
|
||||
}
|
||||
|
||||
setDialogPanel(uuid, dialogPanel) {
|
||||
this.store(this.dialogPanelPath, { uuid: uuid, dialogPanel: dialogPanel })
|
||||
}
|
||||
getDialogPanel(uuid) {
|
||||
if (!store.getters.dialogWidgetMap[uuid]) {
|
||||
this.initFilterDialog && this.initFilterDialog(uuid)
|
||||
}
|
||||
return store.getters.dialogWidgetMap[uuid]
|
||||
getDialogPanel() {
|
||||
return this.initFilterDialog()
|
||||
}
|
||||
|
||||
setDrawPanel(uuid, drawPanel) {
|
||||
if (!store.getters.drawWidgetMap[uuid]) { // 第一次
|
||||
drawPanel.style = Object.assign(drawPanel.style, commonStyle)
|
||||
drawPanel = Object.assign(drawPanel, commonAttr)
|
||||
if (this.initFilterDialog) { // 需要弹窗
|
||||
const dialogOptions = this.getDialogPanel(uuid)
|
||||
drawPanel = Object.assign(drawPanel, dialogOptions)
|
||||
}
|
||||
getDrawPanel() {
|
||||
let drawPanel = this.initDrawPanel()
|
||||
drawPanel.style = Object.assign(drawPanel.style, commonStyle)
|
||||
drawPanel = Object.assign(drawPanel, commonAttr)
|
||||
if (this.filterDialog) {
|
||||
const dialogOptions = this.getDialogPanel()
|
||||
drawPanel = Object.assign(drawPanel, dialogOptions)
|
||||
}
|
||||
this.store(this.drawPanelPath, { uuid: uuid, drawPanel: drawPanel })
|
||||
return drawPanel
|
||||
}
|
||||
|
||||
getDrawPanel(uuid) {
|
||||
if (!store.getters.drawWidgetMap[uuid]) {
|
||||
this.initDrawPanel && this.initDrawPanel(uuid)
|
||||
}
|
||||
return store.getters.drawWidgetMap[uuid]
|
||||
}
|
||||
|
||||
storeWidget() {
|
||||
// store.dispatch('application/loadBean', { key: this.name, value: this })
|
||||
this.store('application/loadBean', { key: this.name, value: this })
|
||||
}
|
||||
initWidget() {
|
||||
console.log('this is initWidget')
|
||||
}
|
||||
toDrawWidget() {
|
||||
console.log('this is toDrawWidget')
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,13 +74,20 @@
|
||||
:visible.sync="filterVisible"
|
||||
custom-class="de-filter-dialog"
|
||||
>
|
||||
<filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" @re-fresh-component="reFreshComponent">
|
||||
<de-drawing-widget
|
||||
<filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
|
||||
<!-- <de-drawing-widget
|
||||
v-if="filterVisible"
|
||||
style="width: 100% !important;"
|
||||
class="component"
|
||||
:service-name="currentWidget.name"
|
||||
:panel-id="panelInfo.id"
|
||||
/> -->
|
||||
<component
|
||||
:is="currentFilterCom.component"
|
||||
:id="'component' + currentFilterCom.id"
|
||||
class="component"
|
||||
:style="currentFilterCom.style"
|
||||
:element="currentFilterCom"
|
||||
:in-draw="false"
|
||||
/>
|
||||
</filter-dialog>
|
||||
<!-- <div slot="footer" class="dialog-footer">
|
||||
@ -143,7 +150,8 @@ export default {
|
||||
activeName: 'attr',
|
||||
reSelectAnimateIndex: undefined,
|
||||
filterVisible: false,
|
||||
currentWidget: null
|
||||
currentWidget: null,
|
||||
currentFilterCom: null
|
||||
}
|
||||
},
|
||||
|
||||
@ -171,7 +179,6 @@ export default {
|
||||
}
|
||||
},
|
||||
panelInfo(newVal, oldVal) {
|
||||
debugger
|
||||
this.init(newVal.id)
|
||||
}
|
||||
},
|
||||
@ -193,7 +200,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init(panelId) {
|
||||
debugger
|
||||
// 如果临时画布有数据 则使用临时画布数据(视图编辑的时候 会保存临时画布数据)
|
||||
const componentDataTemp = this.$store.state.panel.componentDataTemp
|
||||
const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
|
||||
@ -267,17 +273,16 @@ export default {
|
||||
} else {
|
||||
this.currentWidget = ApplicationContext.getService(componentInfo.id)
|
||||
|
||||
const drawPanel = this.currentWidget.getDrawPanel(this.panelInfo.id)
|
||||
drawPanel.style.top = e.offsetY
|
||||
drawPanel.style.left = e.offsetX
|
||||
drawPanel.id = newComponentId
|
||||
this.currentWidget.setDrawPanel(this.panelInfo.id, drawPanel)
|
||||
if (this.currentWidget.initFilterDialog) {
|
||||
this.currentFilterCom = this.currentWidget.getDrawPanel(this.panelInfo.id)
|
||||
this.currentFilterCom.style.top = e.offsetY
|
||||
this.currentFilterCom.style.left = e.offsetX
|
||||
this.currentFilterCom.id = newComponentId
|
||||
if (this.currentWidget.filterDialog) {
|
||||
this.show = false
|
||||
this.openFilterDiolog()
|
||||
return
|
||||
}
|
||||
component = deepCopy(drawPanel)
|
||||
component = deepCopy(this.currentFilterCom)
|
||||
}
|
||||
|
||||
component.style.top = e.offsetY
|
||||
@ -285,6 +290,11 @@ export default {
|
||||
component.id = newComponentId
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot')
|
||||
this.clearCurrentInfo()
|
||||
},
|
||||
clearCurrentInfo() {
|
||||
this.currentWidget = null
|
||||
this.currentFilterCom = null
|
||||
},
|
||||
|
||||
handleDragOver(e) {
|
||||
@ -316,17 +326,16 @@ export default {
|
||||
cancelFilter() {
|
||||
this.filterVisible = false
|
||||
this.currentWidget = null
|
||||
this.clearCurrentInfo()
|
||||
},
|
||||
sureFilter() {
|
||||
const currentComponent = this.currentWidget.getDrawPanel(this.panelInfo.id)
|
||||
currentComponent.widgetService = this.currentWidget
|
||||
const component = deepCopy(currentComponent)
|
||||
const component = deepCopy(this.currentFilterCom)
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot')
|
||||
this.cancelFilter()
|
||||
},
|
||||
reFreshComponent(component) {
|
||||
this.currentComponent = component
|
||||
this.currentFilterCom = component
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,6 +160,10 @@ export default {
|
||||
widgetInfo: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
componentInfo: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -181,22 +185,17 @@ export default {
|
||||
fieldValues: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uuid() {
|
||||
return this.$store.state.panel.panelInfo.id
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectField(values) {
|
||||
if (values && values.length > 0) {
|
||||
const value = values[0]
|
||||
const fieldId = value.id
|
||||
this.widget && this.widget.setOptionDatas && fieldValues(fieldId).then(res => {
|
||||
const datas = res.data.map(item => {
|
||||
return { id: item, text: item }
|
||||
})
|
||||
this.widget.setOptionDatas(this.uuid, datas)
|
||||
// this.$emit('re-fresh-component', this.componentInfo)
|
||||
const info = this.componentInfo
|
||||
this.widget && fieldValues(fieldId).then(res => {
|
||||
info.options.attrs.datas = this.widget.optionDatas(res.data)
|
||||
info.options.attrs.fieldId = fieldId
|
||||
this.$emit('re-fresh-component', info)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,10 +65,8 @@ export default {
|
||||
const widgetNames = this.widgetSubjects[key]
|
||||
this.widgetSubjects[key] = widgetNames.map(widgetName => {
|
||||
const widget = ApplicationContext.getService(widgetName)
|
||||
const uuid = this.panelInfo.id
|
||||
// widget.initLeftPanel(uuid)
|
||||
const result = { widgetName: widgetName }
|
||||
Object.assign(result, widget.getLeftPanel(uuid))
|
||||
Object.assign(result, widget.getLeftPanel())
|
||||
return result
|
||||
})
|
||||
}
|
||||
|
||||
@ -69,7 +69,6 @@ export default {
|
||||
},
|
||||
saveToTemplate() {
|
||||
html2canvas(this.$refs.imageWrapper).then(canvas => {
|
||||
debugger
|
||||
const snapShot = canvas.toDataURL('image/jpeg', 0.5) // 0.5是图片质量
|
||||
if (snapShot !== '') {
|
||||
const templateInfo = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user