feat: 优化过滤组件

2021-04-15 10:33:22 +08:00 · 2021-04-15 10:33:22 +08:00 · fea7ceec9b
commit fea7ceec9b
parent 4d3e20126a
12 changed files with 512 additions and 281 deletions
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@ -1,14 +1,14 @@
 <template>
-    <div class="mark-line">
-        <div
-            v-for="line in lines"
-            :key="line"
-            class="line"
-            :class="line.includes('x')? 'xline' : 'yline'"
-            :ref="line"
-            v-show="lineStatus[line] || false"
-        ></div>
-    </div>
+  <div class="mark-line">
+    <div
+      v-for="line in lines"
+      v-show="lineStatus[line] || false"
+      :key="line"
+      :ref="line"
+      class="line"
+      :class="line.includes('x')? 'xline' : 'yline'"
+    />
+  </div>
 </template>

 <script>
@ -17,215 +17,215 @@ import { mapState } from 'vuex'
 import { getComponentRotatedStyle } from '@/components/canvas/utils/style'

 export default {
-    data() {
-        return {
-            lines: ['xt', 'xc', 'xb', 'yl', 'yc', 'yr'], // 分别对应三条横线和三条竖线
-            diff: 3, // 相距 dff 像素将自动吸附
-            lineStatus: {
-                xt: false,
-                xc: false,
-                xb: false,
-                yl: false,
-                yc: false,
-                yr: false,
+  data() {
+    return {
+      lines: ['xt', 'xc', 'xb', 'yl', 'yc', 'yr'], // 分别对应三条横线和三条竖线
+      diff: 3, // 相距 dff 像素将自动吸附
+      lineStatus: {
+        xt: false,
+        xc: false,
+        xb: false,
+        yl: false,
+        yc: false,
+        yr: false
+      }
+    }
+  },
+  computed: mapState([
+    'curComponent',
+    'componentData'
+  ]),
+  mounted() {
+    // 监听元素移动和不移动的事件
+    eventBus.$on('move', (isDownward, isRightward) => {
+      this.showLine(isDownward, isRightward)
+    })
+
+    eventBus.$on('unmove', () => {
+      this.hideLine()
+    })
+  },
+  methods: {
+    hideLine() {
+      Object.keys(this.lineStatus).forEach(line => {
+        this.lineStatus[line] = false
+      })
+    },
+
+    showLine(isDownward, isRightward) {
+      const lines = this.$refs
+      const components = this.componentData
+      const curComponentStyle = getComponentRotatedStyle(this.curComponent.style)
+      const curComponentHalfwidth = curComponentStyle.width / 2
+      const curComponentHalfHeight = curComponentStyle.height / 2
+
+      this.hideLine()
+      components.forEach(component => {
+        if (component == this.curComponent) return
+        const componentStyle = getComponentRotatedStyle(component.style)
+        const { top, left, bottom, right } = componentStyle
+        const componentHalfwidth = componentStyle.width / 2
+        const componentHalfHeight = componentStyle.height / 2
+
+        const conditions = {
+          top: [
+            {
+              isNearly: this.isNearly(curComponentStyle.top, top),
+              lineNode: lines.xt[0], // xt
+              line: 'xt',
+              dragShift: top,
+              lineShift: top
            },
+            {
+              isNearly: this.isNearly(curComponentStyle.bottom, top),
+              lineNode: lines.xt[0], // xt
+              line: 'xt',
+              dragShift: top - curComponentStyle.height,
+              lineShift: top
+            },
+            {
+              // 组件与拖拽节点的中间是否对齐
+              isNearly: this.isNearly(curComponentStyle.top + curComponentHalfHeight, top + componentHalfHeight),
+              lineNode: lines.xc[0], // xc
+              line: 'xc',
+              dragShift: top + componentHalfHeight - curComponentHalfHeight,
+              lineShift: top + componentHalfHeight
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.top, bottom),
+              lineNode: lines.xb[0], // xb
+              line: 'xb',
+              dragShift: bottom,
+              lineShift: bottom
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.bottom, bottom),
+              lineNode: lines.xb[0], // xb
+              line: 'xb',
+              dragShift: bottom - curComponentStyle.height,
+              lineShift: bottom
+            }
+          ],
+          left: [
+            {
+              isNearly: this.isNearly(curComponentStyle.left, left),
+              lineNode: lines.yl[0], // yl
+              line: 'yl',
+              dragShift: left,
+              lineShift: left
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.right, left),
+              lineNode: lines.yl[0], // yl
+              line: 'yl',
+              dragShift: left - curComponentStyle.width,
+              lineShift: left
+            },
+            {
+              // 组件与拖拽节点的中间是否对齐
+              isNearly: this.isNearly(curComponentStyle.left + curComponentHalfwidth, left + componentHalfwidth),
+              lineNode: lines.yc[0], // yc
+              line: 'yc',
+              dragShift: left + componentHalfwidth - curComponentHalfwidth,
+              lineShift: left + componentHalfwidth
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.left, right),
+              lineNode: lines.yr[0], // yr
+              line: 'yr',
+              dragShift: right,
+              lineShift: right
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.right, right),
+              lineNode: lines.yr[0], // yr
+              line: 'yr',
+              dragShift: right - curComponentStyle.width,
+              lineShift: right
+            }
+          ]
        }
-    },
-    computed: mapState([
-        'curComponent',
-        'componentData',
-    ]),
-    mounted() {
-        // 监听元素移动和不移动的事件
-        eventBus.$on('move', (isDownward, isRightward) => {
-            this.showLine(isDownward, isRightward)
+
+        const needToShow = []
+        const { rotate } = this.curComponent.style
+        Object.keys(conditions).forEach(key => {
+          // 遍历符合的条件并处理
+          conditions[key].forEach((condition) => {
+            if (!condition.isNearly) return
+            // 修改当前组件位移
+            this.$store.commit('setShapeSingleStyle', {
+              key,
+              value: rotate !== 0 ? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift
+            })
+
+            condition.lineNode && (condition.lineNode.style[key] = `${condition.lineShift}px`)
+            needToShow.push(condition.line)
+          })
        })

-        eventBus.$on('unmove', () => {
-            this.hideLine()
-        })
+        // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
+        // 同一方向上的线只显示一条，例如多条横条只显示一条横线
+        if (needToShow.length) {
+          this.chooseTheTureLine(needToShow, isDownward, isRightward)
+        }
+      })
    },
-    methods: {
-        hideLine() {
-            Object.keys(this.lineStatus).forEach(line => {
-                this.lineStatus[line] = false
-            })
-        },

-        showLine(isDownward, isRightward) {
-            const lines = this.$refs
-            const components = this.componentData
-            const curComponentStyle = getComponentRotatedStyle(this.curComponent.style)
-            const curComponentHalfwidth = curComponentStyle.width / 2
-            const curComponentHalfHeight = curComponentStyle.height / 2
+    translatecurComponentShift(key, condition, curComponentStyle) {
+      const { width, height } = this.curComponent.style
+      if (key === 'top') {
+        return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
+      }

-            this.hideLine()
-            components.forEach(component => {
-                if (component == this.curComponent) return
-                const componentStyle = getComponentRotatedStyle(component.style)
-                const { top, left, bottom, right } = componentStyle
-                const componentHalfwidth = componentStyle.width / 2
-                const componentHalfHeight = componentStyle.height / 2
-
-                const conditions = {
-                    top: [
-                        {
-                            isNearly: this.isNearly(curComponentStyle.top, top),
-                            lineNode: lines.xt[0], // xt
-                            line: 'xt',
-                            dragShift: top,
-                            lineShift: top,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.bottom, top),
-                            lineNode: lines.xt[0], // xt
-                            line: 'xt',
-                            dragShift: top - curComponentStyle.height,
-                            lineShift: top,
-                        },
-                        {
-                            // 组件与拖拽节点的中间是否对齐
-                            isNearly: this.isNearly(curComponentStyle.top + curComponentHalfHeight, top + componentHalfHeight),
-                            lineNode: lines.xc[0], // xc
-                            line: 'xc',
-                            dragShift: top + componentHalfHeight - curComponentHalfHeight,
-                            lineShift: top + componentHalfHeight,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.top, bottom),
-                            lineNode: lines.xb[0], // xb
-                            line: 'xb',
-                            dragShift: bottom,
-                            lineShift: bottom,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.bottom, bottom),
-                            lineNode: lines.xb[0], // xb
-                            line: 'xb',
-                            dragShift: bottom - curComponentStyle.height,
-                            lineShift: bottom,
-                        },
-                    ],
-                    left: [
-                        {
-                            isNearly: this.isNearly(curComponentStyle.left, left),
-                            lineNode: lines.yl[0], // yl
-                            line: 'yl',
-                            dragShift: left,
-                            lineShift: left,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.right, left),
-                            lineNode: lines.yl[0], // yl
-                            line: 'yl',
-                            dragShift: left - curComponentStyle.width,
-                            lineShift: left,
-                        },
-                        {
-                            // 组件与拖拽节点的中间是否对齐
-                            isNearly: this.isNearly(curComponentStyle.left + curComponentHalfwidth, left + componentHalfwidth),
-                            lineNode: lines.yc[0], // yc
-                            line: 'yc',
-                            dragShift: left + componentHalfwidth - curComponentHalfwidth,
-                            lineShift: left + componentHalfwidth,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.left, right),
-                            lineNode: lines.yr[0], // yr
-                            line: 'yr',
-                            dragShift: right,
-                            lineShift: right,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.right, right),
-                            lineNode: lines.yr[0], // yr
-                            line: 'yr',
-                            dragShift: right - curComponentStyle.width,
-                            lineShift: right,
-                        },
-                    ],
-                }
-
-                const needToShow = []
-                const { rotate } = this.curComponent.style
-                Object.keys(conditions).forEach(key => {
-                    // 遍历符合的条件并处理
-                    conditions[key].forEach((condition) => {
-                        if (!condition.isNearly) return
-                        // 修改当前组件位移
-                        this.$store.commit('setShapeSingleStyle', {
-                            key,
-                            value: rotate !== 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
-                        })
-
-                        condition.lineNode.style[key] = `${condition.lineShift}px`
-                        needToShow.push(condition.line)
-                    })
-                })
-
-                // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
-                // 同一方向上的线只显示一条，例如多条横条只显示一条横线
-                if (needToShow.length) {
-                    this.chooseTheTureLine(needToShow, isDownward, isRightward)
-                }
-            })
-        },
-
-        translatecurComponentShift(key, condition, curComponentStyle) {
-            const { width, height } = this.curComponent.style
-            if (key === 'top') {
-                return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
-            }
-
-            return Math.round(condition.dragShift - (width - curComponentStyle.width) / 2)
-        },
-
-        chooseTheTureLine(needToShow, isDownward, isRightward) {
-            // 如果鼠标向右移动 则按从右到左的顺序显示竖线 否则按相反顺序显示
-            // 如果鼠标向下移动 则按从下到上的顺序显示横线 否则按相反顺序显示
-            if (isRightward) {
-                if (needToShow.includes('yr')) {
-                    this.lineStatus.yr = true
-                } else if (needToShow.includes('yc')) {
-                    this.lineStatus.yc = true
-                } else if (needToShow.includes('yl')) {
-                    this.lineStatus.yl = true
-                }
-            } else {
-                // eslint-disable-next-line no-lonely-if
-                if (needToShow.includes('yl')) {
-                    this.lineStatus.yl = true
-                } else if (needToShow.includes('yc')) {
-                    this.lineStatus.yc = true
-                } else if (needToShow.includes('yr')) {
-                    this.lineStatus.yr = true
-                }
-            }
-
-            if (isDownward) {
-                if (needToShow.includes('xb')) {
-                    this.lineStatus.xb = true
-                } else if (needToShow.includes('xc')) {
-                    this.lineStatus.xc = true
-                } else if (needToShow.includes('xt')) {
-                    this.lineStatus.xt = true
-                }
-            } else {
-                // eslint-disable-next-line no-lonely-if
-                if (needToShow.includes('xt')) {
-                    this.lineStatus.xt = true
-                } else if (needToShow.includes('xc')) {
-                    this.lineStatus.xc = true
-                } else if (needToShow.includes('xb')) {
-                    this.lineStatus.xb = true
-                }
-            }
-        },
-
-        isNearly(dragValue, targetValue) {
-            return Math.abs(dragValue - targetValue) <= this.diff
-        },
+      return Math.round(condition.dragShift - (width - curComponentStyle.width) / 2)
    },
+
+    chooseTheTureLine(needToShow, isDownward, isRightward) {
+      // 如果鼠标向右移动 则按从右到左的顺序显示竖线 否则按相反顺序显示
+      // 如果鼠标向下移动 则按从下到上的顺序显示横线 否则按相反顺序显示
+      if (isRightward) {
+        if (needToShow.includes('yr')) {
+          this.lineStatus.yr = true
+        } else if (needToShow.includes('yc')) {
+          this.lineStatus.yc = true
+        } else if (needToShow.includes('yl')) {
+          this.lineStatus.yl = true
+        }
+      } else {
+        // eslint-disable-next-line no-lonely-if
+        if (needToShow.includes('yl')) {
+          this.lineStatus.yl = true
+        } else if (needToShow.includes('yc')) {
+          this.lineStatus.yc = true
+        } else if (needToShow.includes('yr')) {
+          this.lineStatus.yr = true
+        }
+      }
+
+      if (isDownward) {
+        if (needToShow.includes('xb')) {
+          this.lineStatus.xb = true
+        } else if (needToShow.includes('xc')) {
+          this.lineStatus.xc = true
+        } else if (needToShow.includes('xt')) {
+          this.lineStatus.xt = true
+        }
+      } else {
+        // eslint-disable-next-line no-lonely-if
+        if (needToShow.includes('xt')) {
+          this.lineStatus.xt = true
+        } else if (needToShow.includes('xc')) {
+          this.lineStatus.xc = true
+        } else if (needToShow.includes('xb')) {
+          this.lineStatus.xb = true
+        }
+      }
+    },
+
+    isNearly(dragValue, targetValue) {
+      return Math.abs(dragValue - targetValue) <= this.diff
+    }
+  }
 }
 </script>

--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@ -3,13 +3,13 @@
    <span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
    <span v-show="element.isLock" class="iconfont icon-suo" />

-<!--    <span v-show="isActive()" class="iconfont icon-more">-->
-<!--      <el-button-->
-<!--        icon="el-icon-more"-->
-<!--        type="text"-->
-<!--        size="small"-->
-<!--      />-->
-<!--    </span>-->
+    <!--    <span v-show="isActive()" class="iconfont icon-more">-->
+    <!--      <el-button-->
+    <!--        icon="el-icon-more"-->
+    <!--        type="text"-->
+    <!--        size="small"-->
+    <!--      />-->
+    <!--    </span>-->
    <div
      v-for="item in (isActive()? pointList : [])"
      :key="item"
@ -335,9 +335,9 @@ export default {
          symmetricPoint
        })

-        console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
+        // console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
        this.$store.commit('setShapeStyle', style)
-        eventBus.$emit('resizing', this.element.propValue.viewId)
+        this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId)
      }

      const up = () => {
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -30,8 +30,8 @@
        :id="'component' + item.id"
        class="component"
        :style="getComponentStyle(item.style)"
-        :element="item"
-        :item="item"
+        :service-name="item.widgetService.name"
+        :panel-id="panelInfo.id"
        @filter-value-change="filterValueChange"
      />

@ -97,12 +97,18 @@ export default {
      isShowArea: false
    }
  },
-  computed: mapState([
-    'componentData',
-    'curComponent',
-    'canvasStyleData',
-    'editor'
-  ]),
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'canvasStyleData',
+      'editor'
+    ])
+  },
+
  mounted() {
    // 获取编辑器元素
    this.$store.commit('getEditor')
--- a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
+++ b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
@ -1,19 +1,30 @@
 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 export default {
  name: 'DeDrawingWidget',
  functional: true,
  props: {
-    item: {
-      type: Object,
+    serviceName: {
+      type: String,
+      default: null
+    },
+    panelId: {
+      type: String,
      default: null
    }
  },

  render(createElement, context) {
-    const item = context.props.item
-    return createElement(item.component, {
+    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
+    if (!dialogInfo) {
+      throw new Error('系统错误')
+    }
+    return createElement(dialogInfo.component, {
      props: {
-        element: item
+        element: dialogInfo
      },
      on: {
        'value-change': value => {
--- a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
+++ b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
@ -0,0 +1,87 @@
+import { DrawWidgetService } from '../service/DrawWidgetService'
+
+const leftPanel = {
+//   name: 'text-select',
+  icon: 'iconfont icon-xialakuang',
+  label: '文本下拉',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    refId: '1234567890',
+    attrs: {
+      multiple: false,
+      placeholder: '请选择',
+      datas: [],
+      key: 'id',
+      label: 'text',
+      value: 'id'
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-select'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 200,
+    height: 22,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-select'
+}
+
+class MySelectImpl extends DrawWidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'mySelectWidget' })
+    super(options)
+  }
+
+  initLeftPanel(uuid) {
+    uuid = uuid || this.uuid()
+    this.setLeftPanel(uuid, leftPanel)
+    return uuid
+    // 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')
+  }
+  // 移动到画布之前回掉
+  beforeToDraw() {
+
+  }
+
+  setOptionDatas(uuid, data) {
+    const dialogPanel = this.getDialogPanel(uuid)
+    dialogPanel.options.attrs.datas = data
+    this.setDialogPanel(uuid, dialogPanel)
+  }
+
+  filterFieldMethod(fields) {
+    return fields.filter(field => {
+      return field['deType'] === 0
+    })
+  }
+}
+const mySelectImpl = new MySelectImpl()
+export default mySelectImpl
--- a/frontend/src/components/widget/index.js
+++ b/frontend/src/components/widget/index.js
@ -31,7 +31,8 @@ requireComponent.keys().forEach(fileName => {
  )
 })

-const req = require.context('./serviceImpl', false, /\.js$/)
+// const req = require.context('./serviceImpl', false, /\.js$/)
+const req = require.context('./drawServiceImpl', false, /\.js$/)
 const requireAll = requireContext => requireContext.keys()

 const widgets = {}
--- a/frontend/src/components/widget/service/DrawWidgetService.js
+++ b/frontend/src/components/widget/service/DrawWidgetService.js
@ -0,0 +1,83 @@
+import store from '@/store'
+import { uuid } from 'vue-uuid'
+export const commonStyle = {
+  rotate: 0,
+  opacity: 1
+}
+
+export const commonAttr = {
+  animations: [],
+  events: {},
+  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
+  isLock: false // 是否锁定组件
+}
+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.storeWidget()
+  }
+  /**
+   * 存储数据到本地
+   * @param {本地存储路径} path
+   * @param {要存储的数据} data
+   */
+  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]
+  }
+
+  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 })
+  }
+
+  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')
+  }
+}
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@ -18,6 +18,9 @@ const getters = {
  loadingMap: state => state.request.loadingMap,
  currentPath: state => state.permission.currentPath,
  permissions: state => state.user.permissions,
-  beanMap: state => state.application.beanMap
+  beanMap: state => state.application.beanMap,
+  leftWidgetMap: state => state.application.leftWidgetMap,
+  dialogWidgetMap: state => state.application.dialogWidgetMap,
+  drawWidgetMap: state => state.application.drawWidgetMap
 }
 export default getters
--- a/frontend/src/store/modules/application.js
+++ b/frontend/src/store/modules/application.js
@ -1,11 +1,26 @@
 const state = {
-  beanMap: {}
+  beanMap: {},
+  leftWidgetMap: {},
+  dialogWidgetMap: {},
+  drawWidgetMap: {}
 }

 const mutations = {

  ADD_BEAN: (state, { key, value }) => {
    state.beanMap[key] = value
+  },
+
+  ADD_LEFT_WIDGET: (state, { uuid, leftPanel }) => {
+    state.leftWidgetMap[uuid] = leftPanel
+  },
+
+  ADD_DIALOG_WIDGET: (state, { uuid, dialogPanel }) => {
+    state.dialogWidgetMap[uuid] = dialogPanel
+  },
+
+  ADD_DRAW_WIDGET: (state, { uuid, drawPanel }) => {
+    state.drawWidgetMap[uuid] = drawPanel
  }

 }
@ -13,7 +28,20 @@ const mutations = {
 const actions = {
  loadBean({ commit }, data) {
    commit('ADD_BEAN', data)
+  },
+
+  addLeftWidget({ commit }, data) {
+    commit('ADD_LEFT_WIDGET', data)
+  },
+
+  addDialogWidget({ commit }, data) {
+    commit('ADD_DIALOG_WIDGET', data)
+  },
+
+  addDrawWidget({ commit }, data) {
+    commit('ADD_DRAW_WIDGET', data)
  }
+
 }

 export default {
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -69,19 +69,18 @@
    </de-container>

    <el-dialog
-      v-if="filterVisible"
+      v-if="filterVisible && panelInfo.id"
      title="过滤组件"
      :visible.sync="filterVisible"
      custom-class="de-filter-dialog"
    >
-      <filter-dialog v-if="filterVisible" :component-info="currentComponent" :widget-id="currentWidgetId" @re-fresh-component="reFreshComponent">
+      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" @re-fresh-component="reFreshComponent">
        <de-drawing-widget
-          v-if="filterVisible && currentComponent"
-          :id="'component' + currentComponent.id"
+          v-if="filterVisible"
          style="width: 100% !important;"
          class="component"
-          :element="currentComponent"
-          :item="currentComponent"
+          :service-name="currentWidget.name"
+          :panel-id="panelInfo.id"
        />
      </filter-dialog>
      <!-- <div slot="footer" class="dialog-footer">
@ -144,9 +143,7 @@ export default {
      activeName: 'attr',
      reSelectAnimateIndex: undefined,
      filterVisible: false,
-      currentWidgetId: null,
-      currentWidget: null,
-      currentComponent: null
+      currentWidget: null
    }
  },

@ -252,6 +249,7 @@ export default {
      e.stopPropagation()
      let component
      const newComponentId = uuid.v1()
+
      const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))

      // 用户视图设置 复制一个模板
@ -268,16 +266,18 @@ export default {
        })
      } else {
        this.currentWidget = ApplicationContext.getService(componentInfo.id)
-        if (this.currentWidget.filterDialog) {
+
+        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.show = false
-          this.currentComponent = deepCopy(this.currentWidget)
-          this.currentComponent.style.top = e.offsetY
-          this.currentComponent.style.left = e.offsetX
-          this.currentComponent.id = newComponentId
          this.openFilterDiolog()
          return
        }
-        component = deepCopy(this.currentWidget)
+        component = deepCopy(drawPanel)
      }

      component.style.top = e.offsetY
@ -311,17 +311,16 @@ export default {
      }
    },
    openFilterDiolog() {
-      this.currentWidgetId = this.currentComponent.name
      this.filterVisible = true
    },
    cancelFilter() {
      this.filterVisible = false
-      this.currentWidgetId = null
      this.currentWidget = null
-      this.currentComponent = null
    },
    sureFilter() {
-      const component = deepCopy(this.currentComponent)
+      const currentComponent = this.currentWidget.getDrawPanel(this.panelInfo.id)
+      currentComponent.widgetService = this.currentWidget
+      const component = deepCopy(currentComponent)
      this.$store.commit('addComponent', { component })
      this.$store.commit('recordSnapshot')
      this.cancelFilter()
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@ -144,7 +144,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
-import { ApplicationContext } from '@/utils/ApplicationContext'
+// import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
 export default {
  name: 'FilterDialog',
@ -156,11 +156,8 @@ export default {
    DragItem
  },
  props: {
-    widgetId: {
-      type: String,
-      default: null
-    },
-    componentInfo: {
+
+    widgetInfo: {
      type: Object,
      default: null
    }
@ -184,23 +181,29 @@ 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.componentInfo && this.componentInfo.setOptionDatas && fieldValues(fieldId).then(res => {
+        this.widget && this.widget.setOptionDatas && fieldValues(fieldId).then(res => {
          const datas = res.data.map(item => {
            return { id: item, text: item }
          })
-          this.componentInfo.setOptionDatas(datas)
-          this.$emit('re-fresh-component', this.componentInfo)
+          this.widget.setOptionDatas(this.uuid, datas)
+        //   this.$emit('re-fresh-component', this.componentInfo)
        })
      }
    }
  },
  created() {
-    this.widget = ApplicationContext.getService(this.widgetId)
+    // this.widget = ApplicationContext.getService(this.widgetId)
+    this.widget = this.widgetInfo
    this.loadDataSetTree()
  },

--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@ -10,8 +10,8 @@
      <div class="filter-widget-content">
        <div
          v-for="(widget, index) in item"
-          :key="widget.name+index"
-          :data-id="widget.name"
+          :key="widget.widgetName+index"
+          :data-id="widget.widgetName"
          draggable
          :data-index="index"
          :class="'filter-widget '+ (widget.defaultClass || '')"
@ -35,23 +35,29 @@ export default {
  data() {
    return {
      componentList,
+      panelInfo: this.$store.state.panel.panelInfo,
      widgetSubjects: {
-        '时间过滤组件': [
-          'timeYearWidget',
-          'timeMonthWidget',
-          'timeQuarterWidget',
-          'timeDateWidget',
-          'timeDateRangeWidget'
-
-        ],
        '文本过滤组件': [
-          'textSelectWidget',
-          'textInputWidget'
-        ],
-        '按钮': [
-          'buttonSureWidget'
+          'mySelectWidget'
        ]
      }
+      //   widgetSubjects: {
+      //     '时间过滤组件': [
+      //       'timeYearWidget',
+      //       'timeMonthWidget',
+      //       'timeQuarterWidget',
+      //       'timeDateWidget',
+      //       'timeDateRangeWidget'
+
+    //     ],
+    //     '文本过滤组件': [
+    //       'textSelectWidget',
+    //       'textInputWidget'
+    //     ],
+    //     '按钮': [
+    //       'buttonSureWidget'
+    //     ]
+    //   }
    }
  },
  created() {
@ -59,7 +65,11 @@ export default {
      const widgetNames = this.widgetSubjects[key]
      this.widgetSubjects[key] = widgetNames.map(widgetName => {
        const widget = ApplicationContext.getService(widgetName)
-        return widget
+        const uuid = this.panelInfo.id
+        // widget.initLeftPanel(uuid)
+        const result = { widgetName: widgetName }
+        Object.assign(result, widget.getLeftPanel(uuid))
+        return result
      })
    }
  },