feat:仪表盘模板导入导出

2021-04-19 18:20:15 +08:00 · 2021-04-19 18:20:15 +08:00 · 5405332dc2
commit 5405332dc2
parent f4f43a47aa
11 changed files with 258 additions and 120 deletions
--- a/backend/src/main/java/io/dataease/controller/panel/PanelTemplateController.java
+++ b/backend/src/main/java/io/dataease/controller/panel/PanelTemplateController.java
@ -31,9 +31,9 @@ public class PanelTemplateController {
        return panelTemplateService.save(request);
    }

-    @PostMapping("/deleteCircle/{id}")
-    public void deleteCircle(@PathVariable String id) {
-        panelTemplateService.deleteCircle(id);
+    @PostMapping("/delete/{id}")
+    public void delete(@PathVariable String id) {
+        panelTemplateService.delete(id);
    }

    @GetMapping("/findOne/{id}")
--- a/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java
@ -69,9 +69,9 @@ public class PanelTemplateService {
    }


-    public void deleteCircle(String id){
+    public void delete(String id){
        Assert.notNull(id, "id cannot be null");
-        extPanelTemplateMapper.deleteCircle(id);
+        panelTemplateMapper.deleteByPrimaryKey(id);
    }


--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -1,13 +1,14 @@
 <template>
-    <div @click="handleClick">
-        <component
-            class="component"
-            :is="config.component"
-            :style="getStyle(config.style)"
-            :propValue="config.propValue"
-            :element="config"
-        />
-    </div>
+  <div @click="handleClick">
+    <component
+      :is="config.component"
+      class="component"
+      :style="getStyle(config.style)"
+      :prop-value="config.propValue"
+      :element="config"
+      :filter="filter"
+    />
+  </div>
 </template>

 <script>
@ -16,26 +17,30 @@ import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'

 export default {
-    props: {
-        config: {
-            type: Object,
-            require: true,
-        },
+  mixins: [mixins],
+  props: {
+    config: {
+      type: Object,
+      require: true
    },
-    mounted() {
-        runAnimation(this.$el, this.config.animations)
-    },
-    mixins: [mixins],
-    methods: {
-        getStyle,
+    filter: {
+      type: Object,
+      require: false
+    }
+  },
+  mounted() {
+    runAnimation(this.$el, this.config.animations)
+  },
+  methods: {
+    getStyle,

-        handleClick() {
-            const events = this.config.events
-            Object.keys(events).forEach(event => {
-                this[event](events[event])
-            })
-        },
-    },
+    handleClick() {
+      const events = this.config.events
+      Object.keys(events).forEach(event => {
+        this[event](events[event])
+      })
+    }
+  }
 }
 </script>

--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -43,6 +43,7 @@
        :style="getComponentStyle(item.style)"
        :prop-value="item.propValue"
        :element="item"
+        :filter="filter"
      />
      <!-- <component
        :is="item.component"
@ -84,6 +85,10 @@ export default {
    isEdit: {
      type: Boolean,
      default: true
+    },
+    filter: {
+      type: Object,
+      require: false
    }
  },
  data() {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -15,6 +15,20 @@ export default {
  props: {
    element: {
      type: Object
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {
+          filter: []
+        }
+      }
+    }
+  },
+  watch: {
+    filter(val) {
+      this.getData(this.element.propValue.viewId)
    }
  },
  data() {
@ -31,7 +45,7 @@ export default {
  methods: {
    getData(id) {
      if (id) {
-        post('/chart/view/getData/' + id, null).then(response => {
+        post('/chart/view/getData/' + id, this.filter).then(response => {
          // 将视图传入echart组件
          this.chart = response.data
        })
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -20,7 +20,11 @@ export default {
    chart: {
      type: Object,
      required: true
-    }
+    },
+  filter: {
+    type: Object,
+    required: false
+  }
  },
  data() {
    return {
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@ -38,7 +38,7 @@
      :visible.sync="templateSaveShow"
      custom-class="de-dialog"
    >
-      <save-to-template />
+      <save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
    </el-dialog>
  </el-row>
 </template>
@ -87,12 +87,16 @@ export default {
      this.templateSaveShow = true
      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,
-            panelStyle: JSON.stringify(this.canvasStyleData),
-            panelData: JSON.stringify(this.componentData),
+            name: this.$store.state.panel.panelInfo.name,
+            snapshot: snapshot,
+            templateStyle: JSON.stringify(this.canvasStyleData),
+            templateData: JSON.stringify(this.componentData),
+            templateType: 'self',
+            level: 1,
+            pid: null,
            dynamicData: ''
          }
        }
@ -104,6 +108,8 @@ export default {
        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,
            panelStyle: JSON.stringify(this.canvasStyleData),
            panelData: JSON.stringify(this.componentData),
@ -128,6 +134,9 @@ export default {
          }
        }
      })
+    },
+    closeSaveDialog() {
+      this.templateSaveShow = false
    }

  }
--- a/frontend/src/views/panel/list/SaveToTemplate.vue
+++ b/frontend/src/views/panel/list/SaveToTemplate.vue
@ -1,7 +1,10 @@
 <template>
  <el-row>
    <el-row>
-      <el-input v-model="name" placeholder="名称" />
+      <el-col span="4">模板名称</el-col>
+      <el-col span="20">
+        <el-input v-model="templateInfo.name" clearable size="mini" />
+      </el-col>
    </el-row>
    <el-row class="de-tab">
      <div class="my_table">
@ -15,9 +18,9 @@
        >
          <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="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>
@ -26,8 +29,8 @@
      </div>
    </el-row>
    <el-row class="root-class">
-      <el-button @click="cancel">取 消</el-button>
-      <el-button type="primary" @click="save">确 定</el-button>
+      <el-button @click="cancel()">取 消</el-button>
+      <el-button type="primary" @click="save()">确 定</el-button>
    </el-row>
  </el-row>
 </template>
@ -37,10 +40,15 @@ import { post } from '@/api/panel/panel'

 export default {
  name: 'SaveToTemplate',
+  props: {
+    templateInfo: {
+      type: Object,
+      require: true
+    }
+  },
  data() {
    return {
      data: [],
-      name: '',
      fieldName: 'name',
      tableRadio: null,
      keyWordSearch: '',
@ -53,26 +61,37 @@ export default {
  methods: {
    search() {
      const param = {
-        template_type: 'self',
+        templateType: '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
+      this.templateInfo.pid = item.id
    },
    cancel() {
-      this.$refs[this.activeName].cancel()
-      this.$emit('close-grant', 0)
+      this.$emit('closeSaveDialog')
+    },
+    save() {
+      if (!this.templateInfo.pid) {
+        this.$warning('请选择所属类别')
+        return false
+      }
+      if (!this.templateInfo.name) {
+        this.$warning('模板名称不能为空')
+        return false
+      }
+      post('/template/save', this.templateInfo).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.$emit('closeSaveDialog')
+      })
    }

  }
--- a/frontend/src/views/panel/template/component/SystemTemplateList.vue
+++ b/frontend/src/views/panel/template/component/SystemTemplateList.vue
@ -1,18 +1,21 @@
 <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-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
+        添加分类
+      </el-button>
+    </el-row>
+    <el-row style="margin-top: 5px">
+      <el-row>
+        <el-input
+          v-model="systemTemplateFilterText"
+          placeholder="输入关键字进行过滤"
+          size="mini"
+          clearable
+          prefix-icon="el-icon-search"
+        />
+      </el-row>
+      <el-row style="margin-top: 5px">
        <el-tree
          ref="systemTemplateTree"
          :default-expanded-keys="defaultExpandedKeys"
@ -27,7 +30,7 @@
            <span>
              <span>
                <el-button
-                  icon="el-icon-picture-outline"
+                  icon="el-icon-collection"
                  type="text"
                />
              </span>
@ -35,22 +38,27 @@
            </span>
          </span>
        </el-tree>
-      </div>
+      </el-row>
    </el-row>
  </el-col>
 </template>

 <script>
-import { get, post } from '@/api/panel/panel'
-
 export default {
  name: 'SystemTemplateList',
  components: { },
+  props: {
+    systemTemplateList: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }
+  },
  data() {
    return {
      systemTemplateFilterText: '',
      defaultExpandedKeys: [],
-      systemTemplateList: [],
      currentTemplateShowList: []
    }
  },
@ -62,33 +70,18 @@ export default {
      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)
+    },
+    add() {
+      this.$emit('showTemplateEditDialog', 'new')
    }
  }
 }
--- a/frontend/src/views/panel/template/component/TemplateItem.vue
+++ b/frontend/src/views/panel/template/component/TemplateItem.vue
@ -1,6 +1,6 @@
 <template>
  <div class="testcase-template">
-    <div :style="classBackground" class="template-img">
+    <div class="template-img" :style="classBackground">
      <i class="el-icon-error" @click.stop="templateDelete" />
    </div>
    <span class="demonstration">{{ template.name }}</span>
@ -23,13 +23,23 @@ export default {
    classBackground() {
      return {
        background: `url(${this.template.snapshot}) no-repeat`,
-        'background-size': '100%,100%'
+        'background-size': `100% 100%`
      }
    }
  },
  methods: {
    templateDelete() {
-      console.log('templateDelete')
+      this.$alert('是否删除模板：' + this.template.name + '？', '', {
+        confirmButtonText: '确认',
+        callback: (action) => {
+          if (action === 'confirm') {
+            this.$emit('templateDelete', this.template.id)
+          }
+        }
+      })
+    },
+    templateEdit() {
+      this.$emit('templateEdit', this.template)
    },
    handleDelete() {
      console.log('handleDelete')
@ -57,14 +67,13 @@ export default {
  }

  .template-img {
-    height: 150px;
+    height: 130px;
    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 {
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@ -1,26 +1,38 @@
 <template>
  <de-container>
    <de-aside-container>
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane name="SystemTemplate">
+      <el-tabs v-model="currentTemplateType" @tab-click="handleClick">
+        <el-tab-pane name="system">
          <span slot="label"><i class="el-icon-document" />系统模板</span>
-          <system-template-list @showCurrentTemplate="showCurrentTemplate" />
+          <system-template-list :system-template-list="systemTemplateList" @showTemplateEditDialog="showTemplateEditDialog" />
        </el-tab-pane>
-        <el-tab-pane name="UserTemplate">
+        <el-tab-pane name="self">
          <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"
+        @templateDelete="templateDelete"
+        @templateEdit="templateEdit"
      />
-      <!--      </el-card>-->
    </de-main-container>
+    <el-dialog :title="dialogTitle" :visible="editTemplate" :show-close="false" width="30%">
+      <el-form ref="templateEditForm" :model="templateEditForm" :rules="templateEditFormRules">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="templateEditForm.name" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveTemplateEdit(templateEditForm)">{{ $t('panel.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
  </de-container>
 </template>

@ -31,38 +43,106 @@ import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import SystemTemplateList from './component/SystemTemplateList'
 import TemplateItem from './component/TemplateItem'
 import { get, post } from '@/api/panel/panel'
+import { deepCopy } from '../../../components/canvas/utils/utils'

 export default {
  name: 'PanelMain',
  components: { DeMainContainer, DeContainer, DeAsideContainer, SystemTemplateList, TemplateItem },
  data() {
    return {
-      activeName: 'SystemTemplate',
      showShare: false,
-      currentTemplateShowList: []
+      currentTemplateShowList: [],
+      currentPid: '',
+      currentTemplateType: 'system',
+      templateEditFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
+        ]
+      },
+      templateEditForm: {},
+      editTemplate: false,
+      dialogTitle: '',
+      systemTemplateList: []
    }
  },
+  mounted() {
+    this.getTree()
+  },
  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 => {
+    showCurrentTemplate(pid) {
+      this.currentPid = pid
+      if (this.currentPid) {
+        post('/template/templateList', { pid: this.currentPid }).then(response => {
          this.currentTemplateShowList = response.data
        })
      }
+    },
+    templateDelete(id) {
+      if (id) {
+        post('/template/delete/' + id, null).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            showClose: true
+          })
+          this.showCurrentTemplate(this.currentPid)
+        })
+      }
+    },
+    saveTemplate(templateEditForm) {
+      if (templateEditForm) {
+        post('/template/save', templateEditForm).then(response => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            showClose: true
+          })
+          this.showCurrentTemplate(this.currentPid)
+        })
+      }
+    },
+    showTemplateEditDialog(type, templateInfo) {
+      if (type === 'edit') {
+        this.dialogTitle = '编辑'
+        this.templateEditForm = deepCopy(templateInfo)
+      } else {
+        this.dialogTitle = '新建'
+        this.templateEditForm = { name: '', templateType: this.currentTemplateType, level: 0 }
+      }
+      this.editTemplate = true
+    },
+    templateEdit(templateInfo) {
+      this.showTemplateEditDialog('edit', templateInfo)
+    },
+    saveTemplateEdit(templateEditForm) {
+      debugger
+      post('/template/save', templateEditForm).then(response => {
+        this.$message({
+          message: '保存成功',
+          type: 'success',
+          showClose: true
+        })
+        this.editTemplate = false
+        this.getTree()
+      })
+    },
+    close() {
+      this.editTemplate = false
+    },
+    getTree() {
+      const request = {
+        templateType: this.currentTemplateType,
+        level: '0'
+      }
+      post('/template/templateList', request).then(res => {
+        this.systemTemplateList = res.data
+        if (this.systemTemplateList && this.systemTemplateList.length > 0) {
+          this.showCurrentTemplate(this.systemTemplateList[0].id)
+        }
+      })
    }
  }
 }