Merge pull request #166 from dataease/pr@dev@panel

backend/src/main/java/io/dataease/base/domain/PanelView.java

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class PanelView implements Serializable {
+    private String id;
+
+    private String panelId;
+
+    private String chartViewId;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private String updateBy;
+
+    private Long updateTime;
+
+    private byte[] content;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/PanelViewMapper.java

+package io.dataease.base.mapper;
+
+import io.dataease.base.domain.PanelView;
+import io.dataease.base.domain.PanelViewExample;
+import java.util.List;
+import org.apache.ibatis.annotations.Param;
+
+public interface PanelViewMapper {
+    long countByExample(PanelViewExample example);
+
+    int deleteByExample(PanelViewExample example);
+
+    int deleteByPrimaryKey(String id);
+
+    int insert(PanelView record);
+
+    int insertSelective(PanelView record);
+
+    List<PanelView> selectByExampleWithBLOBs(PanelViewExample example);
+
+    List<PanelView> selectByExample(PanelViewExample example);
+
+    PanelView selectByPrimaryKey(String id);
+
+    int updateByExampleSelective(@Param("record") PanelView record, @Param("example") PanelViewExample example);
+
+    int updateByExampleWithBLOBs(@Param("record") PanelView record, @Param("example") PanelViewExample example);
+
+    int updateByExample(@Param("record") PanelView record, @Param("example") PanelViewExample example);
+
+    int updateByPrimaryKeySelective(PanelView record);
+
+    int updateByPrimaryKeyWithBLOBs(PanelView record);
+
+    int updateByPrimaryKey(PanelView record);
+}
\ No newline at end of file

backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.java

@@ -16,4 +16,6 @@ public interface ExtChartViewMapper {
 
     @Select("select id from chart_view where table_id = #{tableId}")
     List<String> allViewIds(@Param("tableId") String tableId);
+
+    String searchAdviceSceneId(@Param("userId") String userId,@Param("panelId") String panelId);
 }

backend/src/main/java/io/dataease/base/mapper/ext/ExtChartViewMapper.xml

@@ -52,7 +52,7 @@
         `scene_id`,
         `table_id`,
         `type`,
-        `title`,
+        GET_CHART_VIEW_COPY_NAME ( #{oldChartId} ),
         `x_axis`,
         `y_axis`,
         `custom_attr`,
@@ -68,4 +68,19 @@
         WHERE
             id = #{oldChartId}
     </insert>
+
+    <select id="searchAdviceSceneId" resultType="String">
+        SELECT DISTINCT
+            ( scene_id )
+        FROM
+            ( SELECT GET_V_AUTH_MODEL_ID_P_USE ( #{userId}, 'chart' ) cids ) t,
+            panel_view
+            LEFT JOIN chart_view ON panel_view.chart_view_id = chart_view.id
+            LEFT JOIN chart_group ON chart_view.scene_id = chart_group.id
+        WHERE
+            FIND_IN_SET( chart_view.scene_id, cids )  and panel_view.panel_id =#{panelId}
+        ORDER BY
+            chart_group.create_time DESC
+            LIMIT 1
+    </select>
 </mapper>

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewMapper.java

 package io.dataease.base.mapper.ext;
 
+import io.dataease.base.domain.PanelView;
 import io.dataease.dto.panel.PanelViewDto;
+import io.dataease.dto.panel.po.PanelViewInsertDTO;
+import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
@@ -9,4 +12,8 @@ public interface ExtPanelViewMapper {
     List<PanelViewDto> groups(String userId);
 
     List<PanelViewDto> views(String userId);
+
+    void deleteWithPanelId(String panelId);
+
+    void savePanelView(@Param("panelViews") List<PanelViewInsertDTO> panelViews);
 }

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewMapper.xml

@@ -31,6 +31,16 @@
     </select>
 
 
+    <delete id="deleteWithPanelId">
+        delete from panel_view where panel_id =#{panelId}
+    </delete>
+
+    <insert id="savePanelView">
+        INSERT INTO `panel_view` (id,chart_view_id, panel_id) VALUES
+        <foreach collection="panelViews" item="panelView" index="index" separator=",">
+            (uuid(),#{panelView.chartViewId},#{panelView.panelId})
+        </foreach>
+    </insert>
 
 
 

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

@@ -60,4 +60,9 @@ public class ChartViewController {
     public String chartCopy(@PathVariable String id) {
         return chartViewService.chartCopy(id);
     }
+
+    @GetMapping("searchAdviceSceneId/{panelId}")
+    public String searchAdviceSceneId(@PathVariable String panelId){
+        return chartViewService.searchAdviceSceneId(panelId);
+    }
 }

backend/src/main/java/io/dataease/dto/panel/po/PanelViewInsertDTO.java

+package io.dataease.dto.panel.po;
+
+import io.dataease.base.domain.PanelView;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-07-06
+ * Description:
+ */
+public class PanelViewInsertDTO extends PanelView {
+
+    public PanelViewInsertDTO() {
+    }
+
+    public PanelViewInsertDTO(String chartViewId,String panelGroupId) {
+        super();
+        super.setChartViewId(chartViewId);
+        super.setPanelId(panelGroupId);
+    }
+
+}

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

@@ -405,4 +405,8 @@ public class ChartViewService {
        extChartViewMapper.chartCopy(newChartId,id);
         return newChartId;
     }
+
+    public String searchAdviceSceneId(String panelId){
+       return extChartViewMapper.searchAdviceSceneId(AuthUtils.getUser().getUserId().toString(),panelId);
+    }
 }

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -53,6 +53,8 @@ public class PanelGroupService {
     private PanelLinkService panelLinkService;
     @Resource
     private SysAuthService sysAuthService;
+    @Resource
+    private PanelViewService panelViewService;
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         String userId = String.valueOf(AuthUtils.getUser().getUserId());
@@ -72,6 +74,12 @@ public class PanelGroupService {
 
     @Transactional
     public PanelGroup saveOrUpdate(PanelGroupRequest request) {
+        try{
+            panelViewService.syncPanelViews(request);
+        }catch (Exception e){
+            e.printStackTrace();
+            LOGGER.error("更新panelView出错panelId：{}" ,request.getId());
+        }
         String panelId = request.getId();
         if (StringUtils.isEmpty(panelId)) {
             // 新建
@@ -163,4 +171,5 @@ public class PanelGroupService {
         });
         return chartViewDTOList;
     }
+
 }

backend/src/main/java/io/dataease/service/panel/PanelViewService.java

 package io.dataease.service.panel;
 
+import com.alibaba.fastjson.JSON;
+import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
+import io.dataease.base.domain.PanelGroup;
+import io.dataease.base.domain.PanelGroupWithBLOBs;
+import io.dataease.base.mapper.PanelViewMapper;
 import io.dataease.base.mapper.ext.ExtPanelViewMapper;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.dto.panel.PanelViewDto;
+import io.dataease.dto.panel.po.PanelViewInsertDTO;
 import io.dataease.dto.panel.po.PanelViewPo;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Propagation;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.Assert;
+
+import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
@@ -22,6 +34,7 @@ public class PanelViewService {
     @Autowired(required = false)
     private ExtPanelViewMapper extPanelViewMapper;
 
+
     private final static String SCENE_TYPE = "scene";
 
     public List<PanelViewDto> groups(){
@@ -63,4 +76,25 @@ public class PanelViewService {
         // 最后 没有孩子的老东西淘汰
         return roots.stream().filter(item -> CollectionUtils.isNotEmpty(item.getChildren())).collect(Collectors.toList());
     }
+
+    @Transactional(propagation=Propagation.REQUIRES_NEW)
+    public void syncPanelViews(PanelGroupWithBLOBs panelGroup){
+        String panelId = panelGroup.getId();
+        Assert.notNull(panelId, "panelId cannot be null");
+        String panelData = panelGroup.getPanelData();
+        if(StringUtils.isNotEmpty(panelData)){
+            JSONArray dataArray = JSON.parseArray(panelData);
+            List<PanelViewInsertDTO> panelViewInsertDTOList = new ArrayList<>();
+            for(int i=0;i<dataArray.size();i++){
+                JSONObject jsonObject =  dataArray.getJSONObject(i);
+                if("view".equals(jsonObject.getString("type"))){
+                    panelViewInsertDTOList.add(new PanelViewInsertDTO(jsonObject.getJSONObject("propValue").getString("viewId"),panelId));
+                }
+            }
+            extPanelViewMapper.deleteWithPanelId(panelId);
+            if(CollectionUtils.isNotEmpty(panelViewInsertDTOList)){
+                extPanelViewMapper.savePanelView(panelViewInsertDTOList);
+            }
+        }
+    }
 }

backend/src/main/resources/db/migration/V11__panel_view.sql

+DROP TABLE IF EXISTS `panel_view`;
+CREATE TABLE `panel_view` (
+  `id` varchar(50) NOT NULL,
+  `panel_id` varchar(50) DEFAULT NULL COMMENT 'panel_id',
+  `chart_view_id` varchar(50) DEFAULT NULL COMMENT 'chart_view_id',
+  `content` blob COMMENT '内容',
+  `create_by` varchar(255) DEFAULT NULL COMMENT '创建人',
+  `create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
+  `update_by` varchar(255) DEFAULT NULL COMMENT '更新人',
+  `update_time` bigint(13) DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;

backend/src/main/resources/generatorConfig.xml

@@ -74,7 +74,7 @@
 <!--        </table>-->
 <!--        <table tableName="v_dataset"/>-->
 <!--        <table tableName="sys_auth_detail"/>-->
-        <table tableName="dataset_table"/>
+        <table tableName="panel_view"/>
 
 
     </context>

frontend/src/api/chart/chart.js

@@ -35,3 +35,19 @@ export function chartCopy(id) {
     loading: true
   })
 }
+export function chartGroupTree(data) {
+  return request({
+    url: '/chart/group/tree',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function searchAdviceSceneId(panelId) {
+  return request({
+    url: '/chart/view/searchAdviceSceneId/' + panelId,
+    method: 'get',
+    loading: true
+  })
+}

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

@@ -51,7 +51,7 @@ export default {
       if (this.curComponent.type === 'view') {
         this.$store.dispatch('chart/setViewId', null)
         this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
       }
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit')

frontend/src/lang/en.js

@@ -708,6 +708,8 @@ export default {
     area_mode: 'Area',
     rose_radius: 'Fillet',
     view_name: 'Chart Title',
+    belong_group: 'Belong Group',
+    select_group: 'Select Group',
     name_can_not_empty: 'Name cannot be empty',
     template_can_not_empty: 'Please check a Template',
     custom_count: 'Number of records',

frontend/src/lang/tw.js

@@ -708,6 +708,8 @@ export default {
     area_mode: '面積',
     rose_radius: '園角',
     view_name: '視圖標題',
+    belong_group: '所属分组',
+    select_group: '选择分组',
     name_can_not_empty: '名稱不能為空',
     template_can_not_empty: '請選擇儀表板',
     custom_count: '記錄數',

frontend/src/lang/zh.js

@@ -708,6 +708,8 @@ export default {
     area_mode: '面积',
     rose_radius: '圆角',
     view_name: '视图标题',
+    belong_group: '所属分组',
+    select_group: '选择分组',
     name_can_not_empty: '名称不能为空',
     template_can_not_empty: '请选择仪表版',
     custom_count: '记录数',

frontend/src/views/chart/group/Group.vue

@@ -290,17 +290,29 @@
       class="dialog-css"
       :destroy-on-close="true"
     >
-      <el-row style="width: 400px;">
+      <el-row style="width: 800px;">
         <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
-          <el-form-item :label="$t('chart.view_name')">
-            <el-input v-model="chartName" size="mini" />
-          </el-form-item>
+          <el-col :span="12">
+            <el-form-item :label="$t('chart.view_name')">
+              <el-input v-model="chartName" style="height: 34px" size="mini" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="optFrom==='panel'">
+            <el-form-item :label="$t('chart.belong_group')">
+              <treeselect
+                v-model="currGroup.id"
+                :options="chartGroupTreeAvailable"
+                :normalizer="normalizer"
+                :placeholder="$t('chart.select_group')"
+              />
+            </el-form-item>
+          </el-col>
         </el-form>
       </el-row>
       <table-selector @getTable="getTable" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!table.id || !currGroup.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
 
@@ -327,7 +339,7 @@
 </template>
 
 <script>
-import { post } from '@/api/chart/chart'
+import { post, chartGroupTree } from '@/api/chart/chart'
 import { authModel } from '@/api/system/sysAuth'
 import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
@@ -353,6 +365,17 @@ export default {
       type: Object,
       required: false,
       default: null
+    },
+    // 操作来源 'panel' 为仪表板
+    optFrom: {
+      type: String,
+      required: false,
+      default: null
+    },
+    adviceGroupId: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   data() {
@@ -416,7 +439,8 @@ export default {
       groupMoveConfirmDisabled: true,
       dsMoveConfirmDisabled: true,
       moveDialogTitle: '',
-      isTreeSearch: false
+      isTreeSearch: false,
+      chartGroupTreeAvailable: []
     }
   },
   computed: {
@@ -444,12 +468,19 @@ export default {
     },
     saveStatus() {
       this.refreshNodeBy(this.saveStatus.sceneId)
+    },
+    adviceGroupId() {
+      // 仪表板新建视图建议的存放路径
+      if (this.optFrom === 'panel') {
+        this.currGroup['id'] = this.adviceGroupId
+      }
     }
   },
   mounted() {
     this.treeNode(this.groupForm)
     this.refresh()
     // this.chartTree()
+    this.getChartGroupTree()
   },
   methods: {
     clickAdd(param) {
@@ -760,10 +791,14 @@ export default {
         this.$store.dispatch('chart/setTableId', null)
         this.$store.dispatch('chart/setTableId', this.table.id)
         // this.$router.push('/chart/chart-edit')
-        this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
-        // this.$store.dispatch('chart/setViewId', response.data.id)
-        // this.chartTree()
-        this.refreshNodeBy(view.sceneId)
+        if (this.optFrom === 'panel') {
+          this.$emit('newViewInfo', { 'id': response.data.id })
+        } else {
+          this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
+          // this.$store.dispatch('chart/setViewId', response.data.id)
+          // this.chartTree()
+          this.refreshNodeBy(view.sceneId)
+        }
       })
     },
 
@@ -953,6 +988,18 @@ export default {
         this.isTreeSearch = false
         this.treeNode(this.groupForm)
       }
+    },
+
+    getChartGroupTree() {
+      chartGroupTree({}).then(res => {
+        this.chartGroupTreeAvailable = res.data
+      })
+    },
+    normalizer(node) {
+      // 去掉children=null的属性
+      if (node.children === null || node.children === 'null') {
+        delete node.children
+      }
     }
   }
 }
@@ -1047,4 +1094,11 @@ export default {
     height: 100%;
     overflow-y: auto;
   }
+  /deep/ .vue-treeselect__control{
+    height: 28px;
+  }
+  /deep/ .vue-treeselect__single-value{
+    color:#606266;
+    line-height: 28px!important;
+  }
 </style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -497,7 +497,11 @@ export default {
   },
   watch: {
     'param': function() {
-      this.getData(this.param.id)
+      if(this.param.optType === 'new'){
+
+      }else{
+        this.getData(this.param.id)
+      }
     },
     searchField(val) {
       this.fieldFilter(val)

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

@@ -2,13 +2,19 @@
   <el-col v-loading="loading">
     <el-row style="margin-top: 5px">
       <el-row style="margin-left: 5px;margin-right: 5px">
-        <el-input
-          v-model="templateFilterText"
-          :placeholder="$t('panel.filter_keywords')"
-          size="mini"
-          clearable
-          prefix-icon="el-icon-search"
-        />
+        <el-col :span="16">
+          <el-input
+            v-model="templateFilterText"
+            :placeholder="$t('panel.filter_keywords')"
+            size="mini"
+            clearable
+            prefix-icon="el-icon-search"
+          />
+        </el-col>
+        <el-col :span="7">
+          <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
+        </el-col>
+
       </el-row>
       <el-row style="margin-top: 5px">
         <el-tree
@@ -117,6 +123,9 @@ export default {
     },
     allowDrop(draggingNode, dropNode, type) {
       return false
+    },
+    newChart() {
+      this.$emit('newChart')
     }
 
   }

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

@@ -9,6 +9,7 @@
       <!--横向工具栏-->
       <el-col :span="16">
         <Toolbar
+          ref="toolbar"
           :style-button-active="show&&showIndex===2"
           :aided-button-active="aidedButtonActive"
           @showPanel="showPanel"
@@ -87,7 +88,7 @@
           :close-on-press-escape="false"
           :modal-append-to-body="true"
         >
-          <view-select v-show=" show && showIndex===0" />
+          <view-select v-show=" show && showIndex===0" @newChart="newChart" />
           <filter-group v-show=" show &&showIndex===1" />
           <subject-setting v-show=" show &&showIndex===2" />
           <assist-component v-show=" show &&showIndex===3" />
@@ -160,6 +161,15 @@
     <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
     <TextAttr v-if="curComponent&&curComponent.type==='v-text'" />
 
+    <!--复用ChartGroup组件 不做显示-->
+    <ChartGroup
+      ref="chartGroup"
+      :opt-from="'panel'"
+      :advice-group-id="adviceGroupId"
+      style="height: 0px;width:0px;overflow: hidden"
+      @newViewInfo="newViewInfo"
+    />
+
   </el-row>
 </template>
 
@@ -187,6 +197,8 @@ import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
 import PanelTextEditor from '@/components/canvas/custom-component/PanelTextEditor'
+import ChartGroup from '@/views/chart/group/Group'
+import { searchAdviceSceneId } from '@/api/chart/chart'
 
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -220,7 +232,8 @@ export default {
     AssistComponent,
     PanelTextEditor,
     RectangleAttr,
-    TextAttr
+    TextAttr,
+    ChartGroup
   },
   data() {
     return {
@@ -255,7 +268,8 @@ export default {
       },
       beforeDialogValue: [],
       styleDialogVisible: false,
-      currentDropElement: null
+      currentDropElement: null,
+      adviceGroupId: null
     }
   },
 
@@ -605,6 +619,49 @@ export default {
       } else {
         return y
       }
+    },
+    newChart() {
+      this.adviceGroupId = null
+      this.show = false
+      searchAdviceSceneId(this.panelInfo.id).then(res => {
+        this.adviceGroupId = res.data
+        this.$refs['chartGroup'].selectTable()
+      })
+    },
+    newViewInfo(newViewInfo) {
+      debugger
+      let component
+      const newComponentId = uuid.v1()
+      // 用户视图设置 复制一个模板
+      componentList.forEach(componentTemp => {
+        if (componentTemp.type === 'view') {
+          component = deepCopy(componentTemp)
+          const propValue = {
+            id: newComponentId,
+            viewId: newViewInfo.id
+          }
+          component.propValue = propValue
+          component.filters = []
+        }
+      })
+
+      // position = absolution 或导致有偏移 这里中和一下偏移量
+      component.style.top = 0
+      component.style.left = 600
+      component.id = newComponentId
+      this.$store.commit('addComponent', { component })
+      this.$store.commit('recordSnapshot')
+      this.clearCurrentInfo()
+      this.$store.commit('setCurComponent', { component: component, index: this.componentData.length - 1 })
+
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
     }
   }
 }