feat: 优化过滤组件

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 = () => {

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')

frontend/src/components/widget/DeWidget/DeDrawingWidget.vue

 <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 => {

frontend/src/components/widget/drawServiceImpl/MySelectImpl.js

+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

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 = {}

frontend/src/components/widget/service/DrawWidgetService.js

+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')
+  }
+}

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

frontend/src/store/modules/application.js

 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 {

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()

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()
   },
 

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
       })
     }
   },