feat:仪表盘模板导入导出

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

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class PanelTemplate implements Serializable {
+    private String id;
+
+    private String name;
+
+    private String pid;
+
+    private Integer level;
+
+    private String nodeType;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private String templateType;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

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

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+@ToString(callSuper = true)
+public class PanelTemplateWithBLOBs extends PanelTemplate implements Serializable {
+    private String snapshot;
+
+    private String templateStyle;
+
+    private String templateData;
+
+    private String dynamicData;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

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

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class SysDict implements Serializable {
+    private String id;
+
+    private String dictName;
+
+    private String dictCode;
+
+    private String description;
+
+    private Boolean delFlag;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private String updateBy;
+
+    private Long updateTime;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

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

+package io.dataease.base.domain;
+
+import java.io.Serializable;
+import lombok.Data;
+
+@Data
+public class SysDictItem implements Serializable {
+    private String id;
+
+    private String dictId;
+
+    private String itemText;
+
+    private String itemValue;
+
+    private String description;
+
+    private Integer sortOrder;
+
+    private String status;
+
+    private String createBy;
+
+    private Long createTime;
+
+    private String updateBy;
+
+    private Long updateTime;
+
+    private static final long serialVersionUID = 1L;
+}
\ No newline at end of file

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

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

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

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

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

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

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

+package io.dataease.base.mapper.ext;
+
+import io.dataease.controller.request.panel.PanelTemplateRequest;
+import io.dataease.dto.panel.PanelGroupDTO;
+import io.dataease.dto.panel.PanelTemplateDTO;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+public interface ExtPanelTemplateMapper {
+
+    List<PanelTemplateDTO> panelTemplateList(PanelTemplateRequest request);
+
+    List<PanelTemplateDTO> panelSystemTemplateType(PanelTemplateRequest request);
+    //会级联删除pid 下的所有数据
+    int deleteCircle(@Param("pid") String pid);
+
+    PanelTemplateDTO panelTemplate(String id);
+
+
+}

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

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelTemplateMapper">
+
+    <resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelTemplateDTO"
+               extends="io.dataease.base.mapper.PanelTemplateMapper.BaseResultMap">
+        <result column="label" jdbcType="VARCHAR" property="label"/>
+        <result column="childrenCount" jdbcType="VARCHAR" property="childrenCount"/>
+    </resultMap>
+
+    <select id="panelTemplate" resultMap="BaseResultMapDTO">
+        SELECT
+            panel_template.*,
+            panel_template.NAME AS label,
+            ifnull(tempCountInfo.childrenCount,0) as childrenCount
+        FROM
+            panel_template
+            LEFT JOIN (
+            SELECT
+                pid,
+                count( 1 ) AS childrenCount
+            FROM
+                panel_template
+            WHERE
+                pid IS NOT NULL
+            GROUP BY
+                pid
+            ) tempCountInfo ON panel_template.id = tempCountInfo.pid
+        WHERE
+            id = #{id}
+    </select>
+
+    <select id="panelTemplateList" resultMap="BaseResultMapDTO">
+        SELECT
+        panel_template.*,
+        panel_template.NAME AS label,
+        ifnull(tempCountInfo.childrenCount,0) as childrenCount
+        FROM
+        panel_template
+        LEFT JOIN (
+        SELECT
+        pid,
+        count( 1 ) AS childrenCount
+        FROM
+        panel_template
+        WHERE
+        pid IS NOT NULL
+        GROUP BY
+        pid
+        ) tempCountInfo ON panel_template.id = tempCountInfo.pid
+        <where>
+            <if test="name != null">
+                and panel_template.name like CONCAT('%', #{name},'%')
+            </if>
+            <if test="nodeType != null">
+                and panel_template.node_type = #{nodeType}
+            </if>
+            <if test="templateType != null">
+                and panel_template.template_type = #{templateType}
+            </if>
+            <if test="id != null">
+                and panel_template.id = #{id}
+            </if>
+            <if test="pid != null">
+                and panel_template.pid = #{pid}
+            </if>
+            <if test="level != null">
+                and panel_template.level = #{level}
+            </if>
+        </where>
+        <if test="sort != null">
+            order by ${sort}
+        </if>
+    </select>
+
+    <delete id="deleteCircle">
+        delete from panel_template where FIND_IN_SET(panel_template.id,GET_PANEL_TEMPLATE_WITH_CHILDREN(#{pid}))
+    </delete>
+</mapper>

backend/src/main/java/io/dataease/commons/constants/PanelConstants.java

@@ -12,4 +12,9 @@ public class PanelConstants {
     public final static String COMPONENT_TYPE_PUBLIC = "public";
 
 
+    public final static String TEMPLATE_TYPE_SYSTEM = "system";
+
+    public final static String TEMPLATE_TYPE_SELF = "self";
+
+
 }

backend/src/main/java/io/dataease/controller/panel/PanelTemplateController.java

+package io.dataease.controller.panel;
+
+import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import io.dataease.controller.request.panel.PanelTemplateRequest;
+import io.dataease.dto.panel.PanelTemplateDTO;
+import io.dataease.service.panel.PanelTemplateService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@RestController
+@RequestMapping("template")
+public class PanelTemplateController {
+
+    @Resource
+    private PanelTemplateService panelTemplateService;
+
+    @PostMapping("/templateList")
+    public List<PanelTemplateDTO> templateList(@RequestBody PanelTemplateRequest request) {
+        return panelTemplateService.templateList(request);
+    }
+
+    @PostMapping("/save")
+    public PanelTemplateDTO save(@RequestBody PanelTemplateRequest request) {
+        return panelTemplateService.save(request);
+    }
+
+    @PostMapping("/deleteCircle/{id}")
+    public void deleteCircle(@PathVariable String id) {
+        panelTemplateService.deleteCircle(id);
+    }
+
+    @GetMapping("/findOne/{id}")
+    public PanelTemplateWithBLOBs findOne(@PathVariable String id) throws Exception {
+        return panelTemplateService.findOne(id);
+    }
+
+    @PostMapping("/find")
+    public List<PanelTemplateDTO> find(@RequestBody PanelTemplateRequest request) {
+        return panelTemplateService.find(request);
+    }
+
+
+}

backend/src/main/java/io/dataease/controller/request/panel/PanelTemplateRequest.java

+package io.dataease.controller.request.panel;
+
+import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@Data
+public class PanelTemplateRequest extends PanelTemplateWithBLOBs {
+    private String sort;
+
+    private Boolean withChildren = false;
+
+    public PanelTemplateRequest() {
+    }
+
+    public PanelTemplateRequest(String pid) {
+        super.setPid(pid);
+    }
+}

backend/src/main/java/io/dataease/dto/panel/PanelTemplateDTO.java

+package io.dataease.dto.panel;
+
+import io.dataease.base.domain.PanelTemplateWithBLOBs;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@Data
+public class PanelTemplateDTO extends PanelTemplateWithBLOBs {
+
+    private String label;
+
+    private Integer childrenCount;
+
+    private List<PanelTemplateDTO> children;
+
+
+}

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

+package io.dataease.service.panel;
+
+import io.dataease.base.domain.*;
+import io.dataease.base.mapper.PanelTemplateMapper;
+import io.dataease.base.mapper.ext.ExtPanelTemplateMapper;
+import io.dataease.commons.constants.PanelConstants;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.request.panel.PanelTemplateRequest;
+import io.dataease.dto.panel.PanelTemplateDTO;
+import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Service;
+import org.springframework.util.Assert;
+
+import javax.annotation.Resource;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+/**
+ * Author: wangjiahao
+ * Date: 2021-03-05
+ * Description:
+ */
+@Service
+public class PanelTemplateService {
+
+    private Logger LOGGER = LoggerFactory.getLogger(this.getClass());
+
+    @Resource
+    private PanelTemplateMapper panelTemplateMapper;
+    @Resource
+    private ExtPanelTemplateMapper extPanelTemplateMapper;
+
+    public List<PanelTemplateDTO> templateList(PanelTemplateRequest panelTemplateRequest) {
+        List<PanelTemplateDTO> panelTemplateList = extPanelTemplateMapper.panelTemplateList(panelTemplateRequest);
+        if(panelTemplateRequest.getWithChildren()){
+            getTreeChildren(panelTemplateList);
+        }
+        return panelTemplateList;
+    }
+
+    public void getTreeChildren(List<PanelTemplateDTO> parentPanelTemplateDTO){
+        Optional.ofNullable(parentPanelTemplateDTO).ifPresent(parent -> parent.forEach(panelTemplateDTO -> {
+            List<PanelTemplateDTO> panelTemplateDTOChildren = extPanelTemplateMapper.panelTemplateList(new PanelTemplateRequest(panelTemplateDTO.getId()));
+            panelTemplateDTO.setChildren(panelTemplateDTOChildren);
+            getTreeChildren(panelTemplateDTOChildren);
+        }));
+    }
+
+    public List<PanelTemplateDTO> getSystemTemplateType(PanelTemplateRequest panelTemplateRequest){
+        return extPanelTemplateMapper.panelTemplateList(panelTemplateRequest);
+    }
+
+
+    public PanelTemplateDTO save(PanelTemplateRequest request) {
+        if (StringUtils.isEmpty(request.getId())) {
+            request.setId(UUID.randomUUID().toString());
+            request.setCreateTime(System.currentTimeMillis());
+            panelTemplateMapper.insert(request);
+        } else {
+            panelTemplateMapper.updateByPrimaryKeySelective(request);
+        }
+        PanelTemplateDTO panelTemplateDTO = new PanelTemplateDTO();
+        BeanUtils.copyBean(panelTemplateDTO, request);
+        panelTemplateDTO.setLabel(request.getName());
+        return panelTemplateDTO;
+    }
+
+
+    public void deleteCircle(String id){
+        Assert.notNull(id, "id cannot be null");
+        extPanelTemplateMapper.deleteCircle(id);
+    }
+
+
+    public PanelTemplateWithBLOBs findOne(String panelId){
+       return panelTemplateMapper.selectByPrimaryKey(panelId);
+    }
+
+    public List<PanelTemplateDTO> find(PanelTemplateRequest panelTemplateRequest){
+        List<PanelTemplateDTO> panelTemplateList = extPanelTemplateMapper.panelTemplateList(panelTemplateRequest);
+        return panelTemplateList;
+    }
+
+}

backend/src/main/resources/generatorConfig.xml

@@ -65,7 +65,9 @@
         <!--要生成的数据库表 -->
 
         <!--        <table tableName="datasource"/>-->
-        <table tableName="panel_group"/>
+<!--        <table tableName="sys_dict"/>-->
+<!--        <table tableName="sys_dict_item"/>-->
+        <table tableName="panel_template"/>
 <!--        <table tableName="panel_design"/>-->
 
 

frontend/src/views/panel/list/PanelViewShow.vue

@@ -4,9 +4,14 @@
       <el-row class="panel-design-head">
         <!--TODO 仪表盘头部区域-->
         <span>{{ panelInfo.name || '测试仪表板' }}</span>
+        <span style="float: right;margin-right: 10px">
+          <el-tooltip content="保存为模板">
+            <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
+          </el-tooltip>
+        </span>
         <span style="float: right;margin-right: 10px">
           <el-tooltip content="导出为模板">
-            <el-button class="el-icon-download" size="mini" circle @click="saveToTemplate" />
+            <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
           </el-tooltip>
         </span>
         <span style="float: right;margin-right: 10px">
@@ -27,21 +32,32 @@
         请从左侧选择仪表盘
       </el-row>
     </el-col>
+
+    <el-dialog
+      :title="templateSaveTitle"
+      :visible.sync="templateSaveShow"
+      custom-class="de-dialog"
+    >
+      <save-to-template />
+    </el-dialog>
   </el-row>
 </template>
 <script>
 import Preview from '@/components/canvas/components/Editor/Preview'
+import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
 import { mapState } from 'vuex'
 import html2canvas from 'html2canvas'
 import FileSaver from 'file-saver'
 
 export default {
   name: 'PanelViewShow',
-  components: { Preview },
+  components: { Preview, SaveToTemplate },
   data() {
     return {
-      showMain: true
-
+      showMain: true,
+      templateInfo: '',
+      templateSaveTitle: '保存为模板',
+      templateSaveShow: false
     }
   },
   computed: {
@@ -68,20 +84,50 @@ export default {
       window.open(url, '_blank')
     },
     saveToTemplate() {
+      this.templateSaveShow = true
       html2canvas(this.$refs.imageWrapper).then(canvas => {
         debugger
-        const snapShot = canvas.toDataURL('image/jpeg', 0.5) // 0.5是图片质量
+        const snapShot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
         if (snapShot !== '') {
-          const templateInfo = {
+          this.templateInfo = {
             snapShot: snapShot,
             panelStyle: JSON.stringify(this.canvasStyleData),
             panelData: JSON.stringify(this.componentData),
             dynamicData: ''
           }
-          const blob = new Blob([JSON.stringify(templateInfo)], { type: '' })
+        }
+      })
+    },
+    downloadToTemplate() {
+      html2canvas(this.$refs.imageWrapper).then(canvas => {
+        debugger
+        const snapShot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
+        if (snapShot !== '') {
+          this.templateInfo = {
+            snapShot: snapShot,
+            panelStyle: JSON.stringify(this.canvasStyleData),
+            panelData: JSON.stringify(this.componentData),
+            dynamicData: ''
+          }
+          const blob = new Blob([JSON.stringify(this.templateInfo)], { type: '' })
           FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
         }
       })
+    },
+    refreshTemplateInfo() {
+      this.templateInfo = ''
+      html2canvas(this.$refs.imageWrapper).then(canvas => {
+        debugger
+        const snapShot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
+        if (snapShot !== '') {
+          this.templateInfo = {
+            snapShot: snapShot,
+            panelStyle: JSON.stringify(this.canvasStyleData),
+            panelData: JSON.stringify(this.componentData),
+            dynamicData: ''
+          }
+        }
+      })
     }
 
   }

frontend/src/views/panel/list/SaveToTemplate.vue

+<template>
+  <el-row>
+    <el-row>
+      <el-input v-model="name" placeholder="名称" />
+    </el-row>
+    <el-row class="de-tab">
+      <div class="my_table">
+        <el-table
+          ref="table"
+          :data="data.filter(node => !keyWordSearch || node[fieldName].toLowerCase().includes(keyWordSearch.toLowerCase()))"
+          style="width: 100%"
+          :row-style="{height: '35px'}"
+          highlight-current-row
+          @current-change="clickChange"
+        >
+          <el-table-column :label="columnLabel" :column-key="fieldName" :prop="fieldName" />
+          <el-table-column align="right">
+            <template slot="header">
+              <el-input v-model="keyWordSearch" size="mini" placeholder="输入关键字搜索" />
+            </template>
+            <template slot-scope="scope">
+              <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-row>
+    <el-row class="root-class">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { post } from '@/api/panel/panel'
+
+export default {
+  name: 'SaveToTemplate',
+  data() {
+    return {
+      data: [],
+      name: '',
+      fieldName: 'name',
+      tableRadio: null,
+      keyWordSearch: '',
+      columnLabel: '所属类别'
+    }
+  },
+  created() {
+    this.search()
+  },
+  methods: {
+    search() {
+      const param = {
+        template_type: 'self',
+        level: '0'
+      }
+      post('/template/templateList', param).then(response => {
+        this.data = response.data
+      })
+    },
+
+    setCheckNodes() {
+      this.data.forEach(node => {
+        const nodeId = node.userId
+        this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
+      })
+    },
+    clickChange(item) {
+      this.tableRadio = item
+    },
+    cancel() {
+      this.$refs[this.activeName].cancel()
+      this.$emit('close-grant', 0)
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+  .de-tab {
+    border:1px solid #E6E6E6;
+    min-height:200px !important;
+    max-height:300px !important;
+    overflow:auto;
+    margin-top: 10px;
+  }
+
+.my_table >>> .el-table__row>td{
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table >>> .el-table th.is-leaf {
+  /* 去除上边框 */
+    border: none;
+}
+.my_table >>> .el-table::before{
+  /* 去除下边框 */
+  height: 0;
+}
+
+  .root-class {
+    margin: 15px 0px 5px;
+    text-align: center;
+  }
+</style>

frontend/src/views/panel/template/component/SystemTemplateList.vue

+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <el-col>
+    <el-row>
+      <div class="block">
+        <el-form>
+          <el-form-item class="form-item">
+            <el-input
+              v-model="systemTemplateFilterText"
+              placeholder="输入关键字进行过滤"
+              size="mini"
+              clearable
+              prefix-icon="el-icon-search"
+            />
+          </el-form-item>
+        </el-form>
+        <el-tree
+          ref="systemTemplateTree"
+          :default-expanded-keys="defaultExpandedKeys"
+          :data="systemTemplateList"
+          node-key="id"
+          :expand-on-click-node="true"
+          :filter-node-method="filterNode"
+          highlight-current
+          @node-click="nodeClick"
+        >
+          <span slot-scope="{ data }" class="custom-tree-node">
+            <span>
+              <span>
+                <el-button
+                  icon="el-icon-picture-outline"
+                  type="text"
+                />
+              </span>
+              <span style="margin-left: 6px">{{ data.name }}</span>
+            </span>
+          </span>
+        </el-tree>
+      </div>
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+import { get, post } from '@/api/panel/panel'
+
+export default {
+  name: 'SystemTemplateList',
+  components: { },
+  data() {
+    return {
+      systemTemplateFilterText: '',
+      defaultExpandedKeys: [],
+      systemTemplateList: [],
+      currentTemplateShowList: []
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    systemTemplateFilterText(val) {
+      this.$refs.systemTemplateTree.filter(val)
+    }
+  },
+  mounted() {
+    this.getTree()
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    getTree() {
+      const request = {
+        templateType: 'system',
+        level: '0'
+      }
+      post('/template/templateList', request).then(res => {
+        this.systemTemplateList = res.data
+        if (this.systemTemplateList && this.systemTemplateList.length > 0) {
+          const id = this.systemTemplateList[0].id
+          // this.currentNodeKey = id
+          // this.$refs['systemTemplateTree'].setCurrentKey(id)
+          this.$emit('showCurrentTemplate', id)
+        }
+      })
+    },
+    nodeClick(data, node) {
+      console.log('nodeClick')
+      debugger
+      this.$emit('showCurrentTemplate', data.id)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>

frontend/src/views/panel/template/component/TemplateItem.vue

+<template>
+  <div class="testcase-template">
+    <div :style="classBackground" class="template-img">
+      <i class="el-icon-error" @click.stop="templateDelete" />
+    </div>
+    <span class="demonstration">{{ template.name }}</span>
+  </div>
+</template>
+
+<script>
+import { get, post } from '@/api/panel/panel'
+export default {
+  name: 'TemplateItem',
+  props: {
+    template: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    classBackground() {
+      return {
+        background: `url(${this.template.snapshot}) no-repeat`,
+        'background-size': '100%,100%'
+      }
+    }
+  },
+  methods: {
+    templateDelete() {
+      console.log('templateDelete')
+    },
+    handleDelete() {
+      console.log('handleDelete')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .testcase-template {
+    display: inline-block;
+    margin: 10px 30px;
+    width: 150px;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .template-img {
+    height: 150px;
+    width: 200px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 2px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+    background-size: 100%,100%;
+  }
+
+  .template-img:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .template-img > i{
+    display:none;
+    float: right;
+    color: gray;
+    margin: 2px;
+  }
+
+  .template-img > i:hover {
+    color: red;
+  }
+
+  .template-img:hover > .el-icon-error {
+    display: inline;
+  }
+
+</style>

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

+<template>
+  <de-container>
+    <de-aside-container>
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane name="SystemTemplate">
+          <span slot="label"><i class="el-icon-document" />系统模板</span>
+          <system-template-list @showCurrentTemplate="showCurrentTemplate" />
+        </el-tab-pane>
+        <el-tab-pane name="UserTemplate">
+          <span slot="label"><i class="el-icon-star-off" />用户模板</span>
+          开发中...
+        </el-tab-pane>
+      </el-tabs>
+    </de-aside-container>
+    <de-main-container>
+      <!--      <el-card class="el-card-template">-->
+      <template-item
+        v-for="item in currentTemplateShowList"
+        :key="item.id"
+        :template="item"
+      />
+      <!--      </el-card>-->
+    </de-main-container>
+  </de-container>
+</template>
+
+<script>
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
+import SystemTemplateList from './component/SystemTemplateList'
+import TemplateItem from './component/TemplateItem'
+import { get, post } from '@/api/panel/panel'
+
+export default {
+  name: 'PanelMain',
+  components: { DeMainContainer, DeContainer, DeAsideContainer, SystemTemplateList, TemplateItem },
+  data() {
+    return {
+      activeName: 'SystemTemplate',
+      showShare: false,
+      currentTemplateShowList: []
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      // 点击分析面板需要刷新分享内容
+      if (tab.name === 'panels_share') {
+        this.refreshShare()
+      }
+    },
+    refreshShare() {
+      this.showShare = false
+      this.$nextTick(() => (this.showShare = true))
+    },
+    get() {
+      this.showShare = false
+      this.$nextTick(() => (this.showShare = true))
+    },
+    showCurrentTemplate(currentPid) {
+      if (currentPid) {
+        post('/template/templateList', { pid: currentPid }).then(response => {
+          this.currentTemplateShowList = response.data
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-card-template {
+    min-width: 260px;
+    min-width: 460px;
+    width: 100%;
+    height: 100%;
+  }
+
+</style>