feat:新建仪表盘修改 同时支持自建 复用 导入

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

@@ -56,6 +56,10 @@ public class PanelTemplateService {
 
     public PanelTemplateDTO save(PanelTemplateRequest request) {
         if (StringUtils.isEmpty(request.getId())) {
+            //如果level 是0（第一级）设置父级为对应的templateType
+            if(request.getLevel()==0){
+                request.setPid(request.getTemplateType());
+            }
             request.setId(UUID.randomUUID().toString());
             request.setCreateTime(System.currentTimeMillis());
             panelTemplateMapper.insert(request);

frontend/src/views/panel/list/EditPanel/TemplateAllList.vue

+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <el-col>
+    <el-row style="margin-top: 5px">
+      <el-row>
+        <el-input
+          v-model="templateFilterText"
+          placeholder="输入关键字进行过滤"
+          size="mini"
+          clearable
+          prefix-icon="el-icon-search"
+        />
+      </el-row>
+      <el-row style="margin-top: 5px">
+        <el-tree
+          ref="templateTree"
+          :default-expanded-keys="defaultExpandedKeys"
+          :data="templateList"
+          node-key="id"
+          :expand-on-click-node="true"
+          :filter-node-method="filterNode"
+          :highlight-current="true"
+          @node-click="nodeClick"
+        >
+          <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span>
+              <span v-if="data.nodeType==='template'">
+                <el-button
+                  icon="el-icon-picture-outline"
+                  type="text"
+                />
+              </span>
+              <span v-if="data.nodeType==='folder'">
+                <el-button
+                  icon="el-icon-folder"
+                  type="text"
+                />
+              </span>
+              <span style="margin-left: 6px">{{ data.name }}</span>
+            </span>
+          </span></el-tree>
+      </el-row>
+    </el-row>
+  </el-col>
+</template>
+
+<script>
+export default {
+  name: 'TemplateAllList',
+  components: { },
+  props: {
+    templateList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      templateFilterText: '',
+      defaultExpandedKeys: [],
+      currentTemplateShowList: []
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    templateFilterText(val) {
+      this.$refs.templateTree.filter(val)
+    }
+  },
+  methods: {
+    clickMore(param) {
+      console.log(param)
+      switch (param.type) {
+        case 'edit':
+          this.templateEdit(param.data)
+          break
+        case 'delete':
+          this.templateDelete(param.data)
+          break
+      }
+    },
+    beforeClickMore(type, data, node) {
+      return {
+        'type': type,
+        'data': data,
+        'node': node
+      }
+    },
+
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    nodeClick(data, node) {
+      this.$emit('showCurrentTemplateInfo', data)
+    }
+  }
+}
+</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/list/EditPanel/index.vue

+<template>
+  <el-row>
+    <el-row v-if="editPanel.optType==='new' && editPanel.panelInfo.nodeType==='panel'">
+      <el-col :span="18" style="height: 40px">
+        <el-radio v-model="inputType" label="self">自定义</el-radio>
+        <el-radio v-model="inputType" label="import">导入模板</el-radio>
+        <el-radio v-model="inputType" label="copy">复用模板</el-radio>
+      </el-col>
+      <el-col v-if="inputType==='import'" :span="6">
+        <el-button class="el-icon-upload" size="small" type="primary" @click="goFile">上传模板</el-button>
+        <input id="input" ref="files" type="file" accept=".DE" hidden @change="handleFileChange">
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 5px">
+      <el-col :span="4">{{ editPanel.titleSuf }}名称</el-col>
+      <el-col :span="20">
+        <el-input v-model="editPanel.panelInfo.name" clearable size="mini" />
+      </el-col>
+    </el-row>
+    <el-row v-if="inputType==='copy'" class="preview">
+      <el-col :span="8" style="overflow: auto">
+        <template-all-list :template-list="templateList" @showCurrentTemplateInfo="showCurrentTemplateInfo" />
+      </el-col>
+      <el-col :span="16" :style="classBackground" class="preview-show" />
+    </el-row>
+    <el-row v-if="inputType==='import'" class="preview" :style="classBackground" />
+    <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'
+import TemplateAllList from './TemplateAllList'
+
+export default {
+  components: { TemplateAllList },
+  props: {
+    editPanel: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      inputType: 'self',
+      fieldName: 'name',
+      tableRadio: null,
+      keyWordSearch: '',
+      columnLabel: '所属类别',
+      templateList: [],
+      importTemplateInfo: {
+        snapshot: ''
+      }
+    }
+  },
+  computed: {
+    classBackground() {
+      return {
+        background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
+      }
+    }
+  },
+  watch: {
+    inputType() {
+      this.editPanel.panelInfo.name = null
+      this.editPanel.panelInfo.panelStyle = null
+      this.editPanel.panelInfo.panelData = null
+      this.importTemplateInfo.snapshot = null
+    }
+  },
+  created() {
+    this.getTree()
+  },
+  methods: {
+    showCurrentTemplateInfo(data) {
+      this.editPanel.panelInfo.name = data.name
+      this.editPanel.panelInfo.panelStyle = data.templateStyle
+      this.editPanel.panelInfo.panelData = data.templateData
+      this.importTemplateInfo.snapshot = data.snapshot
+    },
+    getTree() {
+      const request = {
+        level: '-1',
+        withChildren: true
+      }
+      post('/template/templateList', request).then(res => {
+        this.templateList = res.data
+      })
+    },
+    handleExceed(file) {
+      console.log(file.name)
+    },
+    cancel() {
+      this.$emit('closeEditPanelDialog')
+    },
+    save() {
+      if (!this.editPanel.panelInfo.name) {
+        this.$warning('名称不能为空')
+        return false
+      }
+      post('/panel/group/save', this.editPanel.panelInfo).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.$emit('closeEditPanelDialog')
+      })
+    },
+    handleFileChange(e) {
+      debugger
+      const file = e.target.files[0]
+      const reader = new FileReader()
+      reader.onload = (res) => {
+        const result = res.target.result
+        this.importTemplateInfo = JSON.parse(result)
+        this.editPanel.panelInfo.name = this.importTemplateInfo.name
+        this.editPanel.panelInfo.panelStyle = this.importTemplateInfo.panelStyle
+        this.editPanel.panelInfo.panelData = this.importTemplateInfo.panelData
+        console.log(this.importTemplateInfo)
+      }
+      reader.readAsText(file)
+    },
+    goFile() {
+      this.$refs.files.click()
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+
+.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;
+  }
+  .preview {
+    margin-top: 5px;
+    border:1px solid #E6E6E6;
+    height:300px !important;
+    overflow:auto;
+    background-size: 100% 100% !important;
+  }
+  .preview-show {
+    border-left:1px solid #E6E6E6;
+    height:300px;
+    background-size: 100% 100% !important;
+  }
+</style>

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

@@ -95,6 +95,7 @@ export default {
             templateStyle: JSON.stringify(this.canvasStyleData),
             templateData: JSON.stringify(this.componentData),
             templateType: 'self',
+            nodeType: 'folder',
             level: 1,
             pid: null,
             dynamicData: ''
@@ -105,12 +106,12 @@ export default {
     downloadToTemplate() {
       html2canvas(this.$refs.imageWrapper).then(canvas => {
         debugger
-        const snapShot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
-        if (snapShot !== '') {
+        const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
+        if (snapshot !== '') {
           this.templateInfo = {
             name: this.$store.state.panel.panelInfo.name,
             templateType: 'self',
-            snapShot: snapShot,
+            snapshot: snapshot,
             panelStyle: JSON.stringify(this.canvasStyleData),
             panelData: JSON.stringify(this.componentData),
             dynamicData: ''
@@ -124,10 +125,10 @@ export default {
       this.templateInfo = ''
       html2canvas(this.$refs.imageWrapper).then(canvas => {
         debugger
-        const snapShot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
-        if (snapShot !== '') {
+        const snapshot = canvas.toDataURL('image/jpeg', 0.2) // 0.2是图片质量
+        if (snapshot !== '') {
           this.templateInfo = {
-            snapShot: snapShot,
+            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-col span="4">模板名称</el-col>
-      <el-col span="20">
+      <el-col :span="4">模板名称</el-col>
+      <el-col :span="20">
         <el-input v-model="templateInfo.name" clearable size="mini" />
       </el-col>
     </el-row>

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

@@ -67,7 +67,7 @@
 
 <script>
 export default {
-  name: 'SystemTemplateList',
+  name: 'TemplateList',
   components: { },
   props: {
     templateType: {

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

@@ -98,7 +98,7 @@ export default {
         this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
       } else {
         this.dialogTitle = '新建'
-        this.templateEditForm = { name: '', templateType: this.currentTemplateType, level: 0 }
+        this.templateEditForm = { name: '', nodeType: 'template', templateType: this.currentTemplateType, level: 0 }
       }
       this.editTemplate = true
     },