Merge pull request #2676 from dataease/pr@dev@feat_panel_filter_button

feat(仪表板): 仪表板新增查询按钮

backend/src/main/resources/db/migration/V38__1.13.sql

@@ -75,3 +75,6 @@ INSERT INTO `system_parameter` (`param_key`, `param_value`, `type`, `sort`) VALU
 ALTER TABLE `panel_group`
     ADD COLUMN `update_by` varchar(255) NULL COMMENT '更新人' AFTER `status`,
 ADD COLUMN `update_time` bigint(13) NULL COMMENT '更新时间' AFTER `update_by`;
+
+ALTER TABLE `sys_task_email`
+ADD COLUMN `view_ids` varchar(255) NULL COMMENT '视图ID结婚' AFTER `task_id`;

frontend/src/components/canvas/components/Editor/ContextMenu.vue

@@ -30,7 +30,8 @@ export default {
       copyData: null,
       editFilter: [
         'view',
-        'custom'
+        'custom',
+        'custom-button'
       ]
     }
   },
@@ -56,6 +57,10 @@ export default {
         bus.$emit('component-dialog-edit')
       }
 
+      if (this.curComponent.type === 'custom-button') {
+        bus.$emit('button-dialog-edit')
+      }
+
       // 编辑样式组件
 
       if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -82,7 +82,8 @@ export default {
       linkageActiveStatus: false,
       editFilter: [
         'view',
-        'custom'
+        'custom',
+        'custom-button'
       ],
       timer: null
     }
@@ -216,6 +217,9 @@ export default {
     edit() {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit', 'update')
+      }
+      else if (this.curComponent.type === 'custom-button') {
+        bus.$emit('button-dialog-edit')
       } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {
         bus.$emit('component-dialog-style')
       } else { bus.$emit('change_panel_right_draw', true) }

frontend/src/components/canvas/components/Editor/SettingMenu.vue

@@ -60,7 +60,8 @@ export default {
       hyperlinksSetVisible: false,
       editFilter: [
         'view',
-        'custom'
+        'custom',
+        'custom-button'
       ]
     }
   },
@@ -72,6 +73,8 @@ export default {
     edit() {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit', 'update')
+      }else if (this.curComponent.type === 'custom-button') {
+        bus.$emit('button-dialog-edit')
       } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {
         bus.$emit('component-dialog-style')
       } else { bus.$emit('change_panel_right_draw', true) }

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

@@ -4,6 +4,7 @@
     v-if="options!== null && options.attrs!==null"
     :type="options.attrs.type"
     :round="options.attrs.round"
+    :plain="options.attrs.plain"
     :size="size"
   >
     {{ options.value }}

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <el-button type="primary" @click="execute" plain>{{text}}</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SearchButton',
+    props: {
+
+    },
+    data() {
+      return {
+        text: '查询'
+      }
+    },
+    methods: {
+      execute() {
+        console.log('开始查询。。。')
+      }
+
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js

@@ -2,15 +2,15 @@ import { WidgetService } from '../service/WidgetService'
 
 const leftPanel = {
   icon: 'iconfont icon-chaxunsousuo',
-  label: '确定',
+  label: '查询按钮',
   defaultClass: 'time-filter'
 }
 
 const drawPanel = {
-  type: 'custom',
+  type: 'custom-button',
   style: {
-    width: 300,
-    height: 47,
+    width: 150,
+    height: 60,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
@@ -21,9 +21,12 @@ const drawPanel = {
   options: {
     attrs: {
       type: 'primary',
-      round: true
+      round: false,
+      plain: true,
+      customRange: false,
+      filterIds: []
     },
-    value: '测试按钮'
+    value: '查询'
   },
   component: 'de-button',
   miniSizex: 1,
@@ -35,6 +38,7 @@ class ButtonSureServiceImpl extends WidgetService {
     Object.assign(options, { name: 'buttonSureWidget' })
     super(options)
     this.filterDialog = false
+    this.buttonDialog = true
     this.showSwitch = false
   }
 

frontend/src/styles/index.scss

@@ -110,6 +110,23 @@ div:focus {
   }
 }
 
+.de-button-dialog {
+  min-width: 250px !important;
+  width: 30% !important;
+
+  .el-dialog__header {
+    padding: 10px 20px !important;
+
+    .el-dialog__headerbtn {
+      top: 15px !important;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 1px 15px !important;
+  }
+}
+
 .de-style-dialog {
   width: 600px !important;
 

frontend/src/views/panel/edit/index.vue

@@ -238,6 +238,25 @@
       </div>
     </de-container>
 
+    <el-dialog
+     v-if="buttonVisible && panelInfo.id"
+     :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+     :visible.sync="buttonVisible"
+     custom-class="de-button-dialog"
+     @close="cancelButton"
+    >
+      <button-dialog
+        v-if="buttonVisible && currentWidget"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-handler="sureHandler"
+        @cancel-handler="cancelHandler"
+       />
+      
+
+    </el-dialog>
+
     <el-dialog
       v-if="filterVisible && panelInfo.id"
       :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
@@ -357,6 +376,7 @@ import '@/components/canvas/assets/iconfont/iconfont.css'
 import '@/components/canvas/styles/animate.css'
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import FilterDialog from '../filter/filterDialog'
+import ButtonDialog from '../filter/ButtonDialog'
 import toast from '@/components/canvas/utils/toast'
 import { commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
@@ -383,6 +403,7 @@ export default {
     Editor,
     Toolbar,
     FilterDialog,
+    ButtonDialog,
     SubjectSetting,
     Preview,
     AssistComponent,
@@ -449,9 +470,11 @@ export default {
       ],
       enableSureButton: false,
       filterFromDrag: false,
+      buttonFromDrag: false,
       activeToolsName: 'view',
       rightDrawOpen: false,
-      editType: null
+      editType: null,
+      buttonVisible: false
     }
   },
 
@@ -626,6 +649,7 @@ export default {
   beforeDestroy() {
     bus.$off('component-on-drag', this.componentOnDrag)
     bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('button-dialog-edit', this.editButtonDialog)
     bus.$off('component-dialog-style', this.componentDialogStyle)
     bus.$off('previewFullScreenClose', this.previewFullScreenClose)
     bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
@@ -645,6 +669,7 @@ export default {
     initEvents() {
       bus.$on('component-on-drag', this.componentOnDrag)
       bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('button-dialog-edit', this.editButtonDialog)
       bus.$on('component-dialog-style', this.componentDialogStyle)
       bus.$on('previewFullScreenClose', this.previewFullScreenClose)
       bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
@@ -817,6 +842,11 @@ export default {
           this.openFilterDialog(true)
           return
         }
+        if (this.currentWidget.buttonDialog) {
+          this.show = false
+          this.openButtonDialog(true)
+          return
+        }
         component = deepCopy(this.currentFilterCom)
       }
       if (this.canvasStyleData.auxiliaryMatrix) {
@@ -874,6 +904,24 @@ export default {
       if (e.button !== 2) {
         this.$store.commit('hideContextMenu')
       }
+    },
+    openButtonDialog(fromDrag = false) {
+      this.buttonFromDrag = fromDrag
+      this.buttonVisible = true
+    },
+    closeButton() {
+      this.buttonVisible = false
+      this.currentWidget = null
+      this.clearCurrentInfo()
+    },
+    cancelButton() {
+      this.closeButton()
+      if (this.buttonFromDrag) {
+        bus.$emit('onRemoveLastItem')
+      }
+    },
+    sureButton() {
+
     },
     openFilterDialog(fromDrag = false) {
       this.filterFromDrag = fromDrag
@@ -914,6 +962,15 @@ export default {
         this.openFilterDialog()
       }
     },
+    editButtonDialog(editType) {
+      this.editType = editType
+      if (this.curComponent && this.curComponent.serviceName) {
+        const serviceName = this.curComponent.serviceName
+        this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openButtonDialog()
+      }
+    },
     closeLeftPanel() {
       this.show = false
     },
@@ -1093,6 +1150,19 @@ export default {
       e.dataTransfer.dropEffect = 'copy'
       this.$refs.canvasEditor.handleDragOver(e)
     },
+    sureHandler() {
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      if (this.editType !== 'update') {
+        adaptCurThemeCommonStyle(this.currentFilterCom)
+      }
+      this.$store.commit('setComponentWithId', this.currentFilterCom)
+      this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      this.closeButton()
+    },
+    cancelHandler() {
+      this.cancelButton()
+    },
     sureStatusChange(status) {
       this.enableSureButton = status
     },

frontend/src/views/panel/filter/ButtonDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-form size="mini" ref="form" :model="form" label-width="100px">
+      <el-form-item label="名称">
+        <el-input v-model="currentElement.options.value"></el-input>
+      </el-form-item>
+      
+      
+      <el-form-item label="自定义范围">
+        <el-switch v-model="myAttrs.customRange" @change="customRangeChange"></el-switch>
+        <el-link style="margin-left: 10px;" type="warning" disabled>默认关联全部过滤组件</el-link>
+      </el-form-item>
+
+      <el-form-item label="关联组件" v-if="myAttrs.customRange">
+        <el-select style="width: 300px;" multiple clearable v-model="myAttrs.filterIds" placeholder="请选择活动区域">
+          <el-option  v-for="(filter, index) in filters" :key="filter.id" :label="filter.showName" :value="filter.id" />
+        </el-select>
+      </el-form-item>
+
+      
+      <el-form-item>
+        <el-button type="primary" @click="sure">确定</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'ButtonDialog',
+  props: {
+    widgetInfo: {
+      type: Object,
+      default: null,
+    },
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      form: {
+        
+      },
+      currentElement: null,
+      widget: null,
+      myAttrs: null
+    }
+  },
+  created() {
+    this.widget = this.widgetInfo
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+    this.myAttrs = this.currentElement.options.attrs
+  },
+  computed: {
+    
+    ...mapState([
+      'componentData'
+    ]),
+    filters() {
+      const datas = this.componentData.filter(item => item.type === 'custom')
+      datas.forEach(item => {
+
+        const serviceName = item.serviceName
+        const widget = ApplicationContext.getService(serviceName)
+        const showName = widget.initLeftPanel().label
+        let result = ''
+        if(showName) {
+          result = this.$t(showName)
+        }
+        if(item.options.attrs.title) {
+          result += '【' + item.options.attrs.title + '】'
+        }
+
+        item.showName = result
+      })
+      return datas
+    }
+  },
+  methods: {
+    sure() {
+      this.$emit('sure-handler')
+    },
+    cancel() {
+      this.$emit('cancel-handler')
+    },
+    getElementInfo() {
+      return this.currentElement
+    },
+    customRangeChange(val) {
+      this.myAttrs.filterIds = []
+    }
+  }
+}
+</script>

frontend/src/views/panel/filter/index.vue

@@ -59,10 +59,10 @@ export default {
           'numberSelectWidget',
           'numberSelectGridWidget',
           'numberRangeWidget'
+        ],
+        '按钮': [
+          'buttonSureWidget'
         ]
-        // '按钮': [
-        //   'buttonSureWidget'
-        // ]
       }
     }
   },