feat(视图): 视图编辑保存，横纵维度指标，EChart展示

backend/src/main/java/io/dataease/controller/chart/ChartGroupController.java

 package io.dataease.controller.chart;
 
 import io.dataease.base.domain.ChartGroup;
+import io.dataease.base.domain.DatasetGroup;
 import io.dataease.controller.request.chart.ChartGroupRequest;
 import io.dataease.dto.chart.ChartGroupDTO;
 import io.dataease.service.chart.ChartGroupService;
@@ -29,4 +30,9 @@ public class ChartGroupController {
     public void tree(@PathVariable String id) {
         chartGroupService.delete(id);
     }
+
+    @PostMapping("/getScene/{id}")
+    public ChartGroup getScene(@PathVariable String id) {
+        return chartGroupService.getScene(id);
+    }
 }

backend/src/main/java/io/dataease/controller/dataset/DataSetGroupController.java

@@ -33,4 +33,9 @@ public class DataSetGroupController {
     public void tree(@PathVariable String id) {
         dataSetGroupService.delete(id);
     }
+
+    @PostMapping("/getScene/{id}")
+    public DatasetGroup getScene(@PathVariable String id) {
+        return dataSetGroupService.getScene(id);
+    }
 }

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

@@ -47,6 +47,10 @@ public class ChartGroupService {
         chartGroupMapper.deleteByExample(ChartGroupExample);
     }
 
+    public ChartGroup getScene(String id) {
+        return chartGroupMapper.selectByPrimaryKey(id);
+    }
+
     public List<ChartGroupDTO> tree(ChartGroupRequest ChartGroup) {
         ChartGroupExample ChartGroupExample = new ChartGroupExample();
         ChartGroupExample.Criteria criteria = ChartGroupExample.createCriteria();

backend/src/main/java/io/dataease/service/dataset/DataSetGroupService.java

@@ -58,6 +58,10 @@ public class DataSetGroupService {
         }).map(DatasetGroup::getId).collect(Collectors.toList()));
     }
 
+    public DatasetGroup getScene(String id) {
+        return datasetGroupMapper.selectByPrimaryKey(id);
+    }
+
     public void deleteTableAndField(List<String> sceneIds) {
         for (String sceneId : sceneIds) {
             DataSetTableRequest dataSetTableRequest = new DataSetTableRequest();

frontend/src/business/components/chart/group/Group.vue

@@ -216,7 +216,7 @@ export default {
       editTable: false,
       data: [],
       chartData: [],
-      currGroup: null,
+      currGroup: {},
       expandedArray: [],
       groupForm: {
         name: '',
@@ -252,10 +252,7 @@ export default {
   },
   mounted() {
     this.groupTree(this.groupForm);
-    this.chartTree();
-  },
-  activated() {
-    this.groupTree(this.groupForm);
+    this.refresh();
     this.chartTree();
   },
   watch: {},
@@ -430,7 +427,7 @@ export default {
 
     chartTree() {
       this.chartData = [];
-      if (this.currGroup) {
+      if (this.currGroup.id) {
         this.$post('/chart/view/list', {
           sort: 'create_time desc,name asc',
           sceneId: this.currGroup.id
@@ -505,6 +502,17 @@ export default {
 
     getTable(table) {
       this.table = table;
+    },
+
+    refresh() {
+      let path = this.$route.path;
+      if (path === '/chart/chart-edit') {
+        this.sceneMode = true;
+        let sceneId = this.$store.state.chart.sceneId;
+        this.$post('/chart/group/getScene/' + sceneId, null, response => {
+          this.currGroup = response.data;
+        })
+      }
     }
   },
 }

frontend/src/business/components/chart/view/ChartEdit.vue

@@ -47,7 +47,7 @@
       <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;" class="padding-lr">
         <el-row>
           <span>{{$t('chart.title')}}</span>
-          <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>
+          <!--          <el-checkbox v-model="view.show" style="float: right;">{{$t('chart.show')}}</el-checkbox>-->
         </el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -91,9 +91,9 @@
             <draggable v-model="view.xaxis" @end="end3" group="itxst"
                        animation="300"
                        :move="onMove"
-                       style="width:100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
-              <transition-group>
-                <el-tag size="mini" class="item" v-for="(item,index) in view.xaxis" :key="index" closable
+                       style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
+              <transition-group style="width: 100%;height: 100%;">
+                <el-tag size="small" class="item" v-for="(item,index) in view.xaxis" :key="index" closable
                         @close="clear1(index)">
                   {{item.name}}
                 </el-tag>
@@ -105,9 +105,9 @@
             <draggable v-model="view.yaxis" @end="end4" group="itxst"
                        animation="300"
                        :move="onMove"
-                       style="width:100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
-              <transition-group>
-                <el-tag size="mini" class="item" v-for="(item,index) in view.yaxis" :key="index" closable
+                       style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;border: 1px solid #DCDFE6;">
+              <transition-group style="width:100%;height: 100%;">
+                <el-tag size="small" class="item" v-for="(item,index) in view.yaxis" :key="index" closable
                         @close="clear2(index)">
                   {{item.name}}
                 </el-tag>
@@ -172,16 +172,16 @@ export default {
   },
   computed: {
     tableId() {
-      console.log(this.$store.state.chart.tableId);
+      // console.log(this.$store.state.chart.tableId);
       this.initTableData(this.$store.state.chart.tableId);
       return this.$store.state.chart.tableId;
     },
     sceneId() {
-      console.log(this.$store.state.chart.sceneId);
+      // console.log(this.$store.state.chart.sceneId);
       return this.$store.state.chart.sceneId;
     },
     vId() {
-      console.log(this.$store.state.chart.viewId);
+      // console.log(this.$store.state.chart.viewId);
       this.getData(this.$store.state.chart.viewId);
       return this.$store.state.chart.viewId;
     },

frontend/src/business/components/dataset/group/Group.vue

@@ -231,7 +231,7 @@ export default {
       editTable: false,
       data: [],
       tableData: [],
-      currGroup: null,
+      currGroup: {},
       expandedArray: [],
       groupForm: {
         name: '',
@@ -266,15 +266,9 @@ export default {
   },
   mounted() {
     this.tree(this.groupForm);
+    this.refresh();
     this.tableTree();
-    this.$router.push('/dataset');
-    this.$store.commit('setTable', null);
-  },
-  activated() {
-    this.tree(this.groupForm);
-    this.tableTree();
-    this.$router.push('/dataset');
-    this.$store.commit('setTable', null);
+    // this.$router.push('/dataset');
   },
   watch: {
     // search(val){
@@ -457,7 +451,7 @@ export default {
 
     tableTree() {
       this.tableData = [];
-      if (this.currGroup) {
+      if (this.currGroup.id) {
         this.$post('/dataset/table/list', {
           sort: 'type asc,create_time desc,name asc',
           sceneId: this.currGroup.id
@@ -473,6 +467,7 @@ export default {
       if (data.type === 'scene') {
         this.sceneMode = true;
         this.currGroup = data;
+        this.$store.commit("setSceneData", this.currGroup.id);
       }
       if (node.expanded) {
         this.expandedArray.push(data.id);
@@ -535,6 +530,16 @@ export default {
       });
     },
 
+    refresh() {
+      let path = this.$route.path;
+      if (path === '/dataset/table') {
+        this.sceneMode = true;
+        let sceneId = this.$store.state.dataset.sceneData;
+        this.$post('/dataset/group/getScene/' + sceneId, null, response => {
+          this.currGroup = response.data;
+        })
+      }
+    }
   },
 }
 </script>