From 290502b35bbcddafefaeaa4d063413d7595693e9 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 21 Apr 2021 18:48:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=BB=BA=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E4=BF=AE=E6=94=B9=20=E5=90=8C=E6=97=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=BB=BA=20=E5=A4=8D=E7=94=A8=20=E5=AF=BC?= =?UTF-8?q?=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../service/panel/PanelTemplateService.java | 4 + .../panel/list/EditPanel/TemplateAllList.vue | 113 ++++++++ .../src/views/panel/list/EditPanel/index.vue | 167 +++++++++++ frontend/src/views/panel/list/PanelList.vue | 264 ++++++------------ .../src/views/panel/list/PanelViewShow.vue | 13 +- .../src/views/panel/list/SaveToTemplate.vue | 4 +- .../panel/template/component/TemplateList.vue | 2 +- frontend/src/views/panel/template/index.vue | 2 +- 8 files changed, 385 insertions(+), 184 deletions(-) create mode 100644 frontend/src/views/panel/list/EditPanel/TemplateAllList.vue create mode 100644 frontend/src/views/panel/list/EditPanel/index.vue diff --git a/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java b/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java index 25ea6083fe..66a7adfc21 100644 --- a/backend/src/main/java/io/dataease/service/panel/PanelTemplateService.java +++ b/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); diff --git a/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue b/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue new file mode 100644 index 0000000000..d7b0a47e61 --- /dev/null +++ b/frontend/src/views/panel/list/EditPanel/TemplateAllList.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue new file mode 100644 index 0000000000..6990ef455f --- /dev/null +++ b/frontend/src/views/panel/list/EditPanel/index.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index 2033405310..cfbef04387 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -51,7 +51,7 @@ - + - + {{ $t('panel.groupAdd') }} - + {{ $t('panel.panelAdd') }} @@ -79,7 +79,7 @@ /> - + {{ $t('panel.rename') }} @@ -136,6 +136,10 @@ 复制链接 --> + + + + @@ -145,14 +149,44 @@ import GrantAuth from '../GrantAuth' import LinkGenerate from '@/views/link/generate' import { uuid } from 'vue-uuid' import bus from '@/utils/bus' -import eventBus from '@/components/canvas/utils/eventBus' -import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel' +import EditPanel from './EditPanel' +import { addGroup, delGroup, groupTree, defaultTree, get } from '@/api/panel/panel' export default { name: 'PanelList', - components: { GrantAuth, LinkGenerate }, + components: { GrantAuth, LinkGenerate, EditPanel }, data() { return { + editPanelModel: { + titlePre: null, + titleSuf: null, + visible: false, + optType: null, + panelInfo: { + name: null, + pid: null, + level: null, + nodeType: null, + panelType: null, + panelStyle: null, + panelDate: null + } + }, + editPanel: { + titlePre: null, + titleSuf: '仪表盘', + visible: false, + optType: 'new', + panelInfo: { + name: null, + pid: null, + level: null, + nodeType: null, + panelType: null, + panelStyle: null, + panelDate: null + } + }, linkTitle: '链接分享', linkVisible: false, linkResourceId: null, @@ -163,7 +197,6 @@ export default { dialogTitle: '', search: '', editGroup: false, - editTable: false, tData: [], tableData: [], currGroup: {}, @@ -197,87 +230,99 @@ export default { } }, computed: { + panelDialogTitle() { + return this.editPanel.titlePre + this.editPanel.titleSuf + } }, watch: { - // search(val){ - // this.groupForm.name = val; - // this.tree(this.groupForm); - // } + }, mounted() { this.defaultTree() this.tree(this.groupForm) - this.refresh() - this.tableTree() - // this.$router.push('/dataset'); }, methods: { - clickAdd(param) { - // console.log(param); - this.add(param.type) - this.groupForm.pid = param.data.id - this.groupForm.level = param.data.level + 1 + closeEditPanelDialog() { + this.editPanel.visible = false + this.tree(this.groupForm) }, - - beforeClickAdd(type, data, node) { + showEditPanel(param) { + this.editPanel = JSON.parse(JSON.stringify(this.editPanelModel)) + this.editPanel.optType = param.optType + this.editPanel.panelInfo.nodeType = param.type + this.editPanel.visible = true + switch (param.optType) { + case 'new': + this.editPanel.titlePre = '新建' + this.editPanel.panelInfo.name = '新建仪表盘' + this.editPanel.panelInfo.pid = param.data.id + this.editPanel.panelInfo.level = param.data.level + 1 + break + case 'edit': + this.editPanel.titlePre = '编辑' + this.editPanel.panelInfo.id = param.data.id + this.editPanel.panelInfo.name = param.data.name + break + } + switch (param.type) { + case 'folder': + this.editPanel.titleSuf = '目录' + break + case 'panel': + this.editPanel.titleSuf = '仪表盘' + break + } + }, + beforeClickEdit(type, optType, data, node) { return { 'type': type, 'data': data, - 'node': node + 'node': node, + 'optType': optType } }, clickMore(param) { - console.log(param) - switch (param.type) { - case 'rename': - this.add(param.data.nodeType) - this.groupForm = JSON.parse(JSON.stringify(param.data)) + debugger + switch (param.optType) { + case 'edit': + this.showEditPanel(param) break case 'move': break case 'delete': this.delete(param.data) break - case 'editTable': - this.editTable = true - this.tableForm = JSON.parse(JSON.stringify(param.data)) - this.tableForm.mode = this.tableForm.mode + '' - break - case 'deleteTable': - this.deleteTable(param.data) - break case 'share': this.share(param.data) break - case 'edit': - this.edit(param.data) - break case 'link': this.link(param.data) break } }, - beforeClickMore(type, data, node) { + beforeClickMore(optType, data, node) { return { - 'type': type, + 'type': data.nodeType, 'data': data, - 'node': node + 'node': node, + 'optType': optType } }, add(nodeType) { + this.groupForm.nodeType = nodeType switch (nodeType) { case 'folder': this.dialogTitle = this.$t('panel.groupAdd') + this.editGroup = true break case 'panel': - this.dialogTitle = this.$t('panel.panelAdd') + this.editPanel.title = this.$t('panel.panelAdd') + this.editPanel.visible = true break } - this.groupForm.nodeType = nodeType - this.editGroup = true }, saveGroup(group) { @@ -304,34 +349,6 @@ export default { }) }, - saveTable(table) { - // console.log(table) - table.mode = parseInt(table.mode) - this.$refs['tableForm'].validate((valid) => { - if (valid) { - addTable(table).then(response => { - this.closeTable() - this.$message({ - message: this.$t('commons.save_success'), - type: 'success', - showClose: true - }) - this.tableTree() - // this.$router.push('/dataset/home') - this.$emit('switchComponent', { name: '' }) - this.$store.dispatch('dataset/setTable', null) - }) - } else { - this.$message({ - message: this.$t('commons.input_content'), - type: 'error', - showClose: true - }) - return false - } - }) - }, - delete(data) { this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), { confirmButtonText: this.$t('panel.confirm'), @@ -350,27 +367,6 @@ export default { }) }, - deleteTable(data) { - this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), { - confirmButtonText: this.$t('panel.confirm'), - cancelButtonText: this.$t('panel.cancel'), - type: 'warning' - }).then(() => { - delTable(data.id).then(response => { - this.$message({ - type: 'success', - message: this.$t('panel.delete_success'), - showClose: true - }) - this.tableTree() - // this.$router.push('/dataset/home') - this.$emit('switchComponent', { name: '' }) - this.$store.dispatch('dataset/setTable', null) - }) - }).catch(() => { - }) - }, - close() { this.editGroup = false this.groupForm = { @@ -382,14 +378,6 @@ export default { sort: 'node_type desc,name asc' } }, - - closeTable() { - this.editTable = false - this.tableForm = { - name: '' - } - }, - tree(group) { groupTree(group).then(res => { this.tData = res.data @@ -404,18 +392,6 @@ export default { }) }, - tableTree() { - this.tableData = [] - if (this.currGroup.id) { - loadTable({ - sort: 'type asc,create_time desc,name asc', - sceneId: this.currGroup.id - }).then(res => { - this.tableData = res.data - }) - } - }, - nodeClick(data, node) { if (data.nodeType === 'panel') { // 加载视图数据 @@ -440,72 +416,12 @@ export default { this.$store.dispatch('dataset/setSceneData', null) this.$emit('switchComponent', { name: '' }) }, - - clickAddData(param) { - // console.log(param); - switch (param.type) { - case 'db': - this.addDB() - break - case 'sql': - this.$message(param.type) - break - case 'excel': - this.$message(param.type) - break - case 'custom': - this.$message(param.type) - break - } - }, - beforeClickAddData(type) { return { 'type': type } }, - addDB() { - // this.$router.push({ - // name: 'add_db', - // params: { - // scene: this.currGroup - - // } - // }) - this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup }) - }, - - sceneClick(data, node) { - // console.log(data); - this.$store.dispatch('dataset/setTable', null) - this.$store.dispatch('dataset/setTable', data.id) - // this.$router.push({ - // name: 'table', - // params: { - // table: data - // } - // }) - this.$emit('switchComponent', { name: 'ViewTable' }) - }, - - refresh() { - const path = this.$route.path - if (path === '/dataset/table') { - this.sceneMode = true - const sceneId = this.$store.state.dataset.sceneData - getScene(sceneId).then(res => { - this.currGroup = res.data - }) - } - }, - panelDefaultClick(data, node) { - console.log(data) - console.log(node) - this.$store.dispatch('panel/setPanelInfo', data) - // 切换view - this.$emit('switchComponent', { name: 'PanelView' }) - }, share(data) { this.authResourceId = data.id this.authTitle = '把[' + data.label + ']分享给' diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue index fc0cb69e64..f01b0f05aa 100644 --- a/frontend/src/views/panel/list/PanelViewShow.vue +++ b/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: '' diff --git a/frontend/src/views/panel/list/SaveToTemplate.vue b/frontend/src/views/panel/list/SaveToTemplate.vue index 20ce9cb306..7e02929576 100644 --- a/frontend/src/views/panel/list/SaveToTemplate.vue +++ b/frontend/src/views/panel/list/SaveToTemplate.vue @@ -1,8 +1,8 @@