feat:设置条件绑定视图

backend/src/main/java/io/dataease/controller/panel/api/ViewApi.java

 package io.dataease.controller.panel.api;
 
 
+import io.dataease.base.domain.ChartView;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.dto.panel.PanelViewDto;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
@@ -20,6 +22,11 @@ public interface ViewApi {
     List<PanelViewDto> tree(BaseGridRequest request);
 
 
+    @ApiOperation("根据仪表板Id查询视图")
+    @PostMapping("/viewsWithIds")
+    List<ChartView> viewsWithIds(List<String> viewIds);
+
+
 
 
 

backend/src/main/java/io/dataease/controller/panel/server/ViewServer.java

 package io.dataease.controller.panel.server;
 
+import io.dataease.base.domain.ChartView;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.panel.api.ViewApi;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.dto.panel.PanelViewDto;
 import io.dataease.dto.panel.po.PanelViewPo;
+import io.dataease.service.chart.ChartViewService;
 import io.dataease.service.panel.PanelViewService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -20,6 +23,9 @@ public class ViewServer implements ViewApi {
     @Autowired
     private PanelViewService panelViewService;
 
+    @Autowired
+    private ChartViewService chartViewService;
+
     /**
      * 为什么查两次？
      * 因为left join 会导致全表扫描
@@ -40,4 +46,10 @@ public class ViewServer implements ViewApi {
         List<PanelViewDto> panelViewDtos = panelViewService.buildTree(groups, views);
         return panelViewDtos;
     }
+
+    @Override
+    public List<ChartView> viewsWithIds(@RequestBody List<String> viewIds) {
+
+        return chartViewService.viewsByIds(viewIds);
+    }
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -320,4 +320,10 @@ public class ChartViewService {
         }
         return map;
     }
+
+    public List<ChartView> viewsByIds(List<String> viewIds){
+        ChartViewExample example = new ChartViewExample();
+        example.createCriteria().andIdIn(viewIds);
+        return chartViewMapper.selectByExample(example);
+    }
 }

frontend/src/api/panel/view.js

@@ -8,3 +8,12 @@ export function tree(data) {
     data
   })
 }
+
+export function viewsWithIds(data) {
+  return request({
+    url: '/api/panelView/viewsWithIds',
+    method: 'post',
+    loading: true,
+    data
+  })
+}

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

@@ -314,7 +314,8 @@ export default {
     setConditionValue(obj) {
       const { component, value, operator } = obj
       const fieldId = component.options.attrs.fieldId
-      const condition = new Condition(component.id, fieldId, operator, value, null)
+      const viewIds = component.options.attrs.viewIds
+      const condition = new Condition(component.id, fieldId, operator, value, viewIds)
       this.addCondition(condition)
     },
     addCondition(condition) {

frontend/src/components/canvas/custom-component/UserView.vue

@@ -31,7 +31,7 @@ export default {
   methods: {
     getData(id) {
       if (id) {
-        post('/chart/view/getData/' + id, null).then(response => {
+        post('/chart/view/getData/' + id, {}).then(response => {
           // 将视图传入echart组件
           this.chart = response.data
         })

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

 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
+  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :multiple="options.attrs.multiple" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"

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

@@ -110,12 +110,36 @@
                 v-model="componentInfo.options.attrs.multiple"
                 active-text="多选"
                 inactive-text="单选"
+                @change="multipleChange"
               />
             </div>
           </el-col>
           <el-col :span="16"><div class="filter-options-right">
             <el-checkbox v-model="customRange"><span> 自定义控制范围 </span> </el-checkbox>
-            <i :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" @click="showFilterRange" />
+
+            <el-popover
+              v-model="popovervisible"
+              placement="bottom-end"
+              :disabled="!customRange"
+              width="200"
+            >
+              <div class="view-container-class">
+                <el-checkbox-group v-model="checkedViews" @change="checkedViewsChange">
+                  <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" border>
+                    <span>
+                      <svg-icon :icon-class="item.type" class="chart-icon" />
+                      <span style="margin-left: 6px">{{ item.name }}</span>
+                    </span>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+
+              <!-- <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="popovervisible=false">取消</el-button>
+                <el-button type="primary" size="mini" @click="popovervisible=false">确定</el-button>
+              </div> -->
+              <i slot="reference" :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" />
+            </el-popover>
             <!-- <el-checkbox disabled>备选项</el-checkbox> -->
           </div>
 
@@ -147,8 +171,10 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
+import { mapState } from 'vuex'
 // import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
+import { viewsWithIds } from '@/api/panel/view'
 export default {
   name: 'FilterDialog',
   components: {
@@ -169,6 +195,7 @@ export default {
       default: null
     }
   },
+
   data() {
     return {
       activeName: 'dataset',
@@ -186,21 +213,35 @@ export default {
       selectField: [],
       widget: null,
       fieldValues: [],
-      customRange: false
+      customRange: false,
+      popovervisible: false,
+      viewInfos: [],
+      checkedViews: []
     }
   },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'isClickComponent',
+      'canvasStyleData',
+      'curComponentIndex'
+    ])
+  },
 
   watch: {
     selectField(values) {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        const info = this.componentInfo
         this.widget && fieldValues(fieldId).then(res => {
-          info.options.attrs.datas = this.widget.optionDatas(res.data)
-          info.options.attrs.fieldId = fieldId
-          info.options.attrs.dragItems = values
-          this.$emit('re-fresh-component', info)
+          this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
+          this.componentInfo.options.attrs.fieldId = fieldId
+          this.componentInfo.options.attrs.dragItems = values
+          this.$emit('re-fresh-component', this.componentInfo)
         })
       }
     }
@@ -213,9 +254,26 @@ export default {
     if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
       this.selectField = this.componentInfo.options.attrs.dragItems
     }
+    this.loadViews()
   },
 
   methods: {
+
+    loadViews() {
+      const viewIds = this.componentData
+        .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
+        .map(item => item.propValue.viewId)
+      viewsWithIds(viewIds).then(res => {
+        const datas = res.data
+
+        // for (let index = 0; index < 4; index++) {
+        //   datas = datas.concat(datas)
+        // }
+        // datas.forEach(item => item.name += 'aaaaaaaaabbbbb')
+
+        this.viewInfos = datas
+      })
+    },
     handleNodeClick(data) {
       if (data.type === 'scene') {
         this.showSceneTable(data)
@@ -334,11 +392,16 @@ export default {
       const index = tag.index
       this.selectField.splice(index, 1)
     },
-    showFilterRange() {
-      // 如果不是自定义范围 直接返回
-      if (!this.customRange) {
-        return
-      }
+
+    multipleChange(value) {
+      // this.componentInfo.options.attrs.multiple = value
+      this.componentInfo.options.value = null
+      this.$emit('re-fresh-component', this.componentInfo)
+    },
+
+    checkedViewsChange(values) {
+      this.componentInfo.options.attrs.viewIds = values
+      this.$emit('re-fresh-component', this.componentInfo)
     }
   }
 }
@@ -484,4 +547,18 @@ export default {
       cursor: pointer!important;
   }
 
+  .view-container-class {
+
+      min-height: 150px;
+      max-height: 200px;
+      width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-break:break-all;
+      position: relative;
+        >>> label {
+            width: 100%;
+        }
+  }
+
 </style>