提交 e5715d68 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat:优化查询条件

上级 94a2395c
......@@ -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: []
},
editor: null
},
mutations: {
getEditor(state) {
state.editor = $('#editor')
},
mutations: {
getEditor(state) {
state.editor = $('#editor')
},
setAreaData(state, data) {
state.areaData = data
},
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()
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 })
})
store.commit('deleteComponent')
subComponents.forEach(component => {
decomposeComponent(component, editorRect, parentStyle)
store.commit('addComponent', { component })
})
components.push(...component.propValue)
store.commit('batchDeleteComponent', component.propValue)
}
})
components.push(...component.propValue)
store.commit('batchDeleteComponent', component.propValue)
}
})
store.commit('addComponent', {
component: {
id: generateID(),
component: 'Group',
...commonAttr,
style: {
...commonStyle,
...areaData.style,
},
propValue: components,
},
})
store.commit('addComponent', {
component: {
id: generateID(),
component: 'Group',
...commonAttr,
style: {
...commonStyle,
...areaData.style
},
propValue: components
}
})
eventBus.$emit('hideArea')
eventBus.$emit('hideArea')
store.commit('batchDeleteComponent', areaData.components)
store.commit('setCurComponent', {
component: componentData[componentData.length - 1],
index: componentData.length - 1,
})
store.commit('batchDeleteComponent', areaData.components)
store.commit('setCurComponent', {
component: componentData[componentData.length - 1],
index: componentData.length - 1
})
areaData.components = []
},
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
}
}
})
},
// 将已经放到 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()
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 })
})
},
},
store.commit('deleteComponent')
components.forEach(component => {
decomposeComponent(component, editorRect, parentStyle)
store.commit('addComponent', { component })
})
}
}
}
import { sin, cos } from '@/components/canvas/utils/translate'
export function getStyle(style, filter = []) {
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]
if (needUnit.includes(key)) {
result[key] += 'px'
}
} else {
result.transform = key + '(' + style[key] + 'deg)'
}
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]
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
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
}
return 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
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
}
return style
}
<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)
......
<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 })
}
}
}
......
/**
* 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
}
}
export class Widget {
constructor(options = {}) {
this.type = options.type
this.default_style = options.default_style
this.icon = options.icon
this.lable = options.label
}
}
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
}
initDrawPanel(uuid) {
uuid = uuid || this.uuid()
this.setDrawPanel(uuid, drawPanel)
return uuid
}
toDrawWidget() {
// console.log('this is first toDrawWidget')
initFilterDialog() {
const value = JSON.parse(JSON.stringify(dialogPanel))
return value
}
// 移动到画布之前回掉
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
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]
}
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]
getLeftPanel() {
return this.initLeftPanel()
}
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)
}
}
this.store(this.drawPanelPath, { uuid: uuid, drawPanel: drawPanel })
getDialogPanel() {
return this.initFilterDialog()
}
getDrawPanel(uuid) {
if (!store.getters.drawWidgetMap[uuid]) {
this.initDrawPanel && this.initDrawPanel(uuid)
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)
}
return store.getters.drawWidgetMap[uuid]
return drawPanel
}
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 = {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论