center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat:仪表盘

Browse Source
This commit is contained in:
wangjiahao 2021-03-08 18:43:28 +08:00
parent f46912392c
commit fe9d8a2d44
12 changed files with 276 additions and 838 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.java Normal file
View File

@ -0,0 +1,17 @@
package io.dataease.base.mapper.ext;
import io.dataease.controller.request.panel.PanelGroupRequest;
import io.dataease.dto.panel.PanelGroupDTO;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface ExtPanelGroupMapper {
List<PanelGroupDTO> panelGroupList(PanelGroupRequest request);
//会级联删除pid 下的所有数据
int deleteCircle(@Param("pid") String pid);
}

39
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml Normal file
View File

@ -0,0 +1,39 @@
<?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.ExtPanelGroupMapper">
<resultMap id="BaseResultMapDTO" type="io.dataease.dto.panel.PanelGroupDTO" extends="io.dataease.base.mapper.PanelGroupMapper.BaseResultMap">
<result column="label" jdbcType="VARCHAR" property="label"/>
</resultMap>
<select id="panelGroupList" resultMap="BaseResultMapDTO">
select panel_group.*,panel_group.name as label from panel_group
<where>
<if test="name != null">
and panel_group.name like CONCAT('%', #{name},'%')
</if>
<if test="nodeType != null">
and panel_group.node_type = #{nodeType}
</if>
<if test="panelType != null">
and panel_group.panel_type = #{panelType}
</if>
<if test="id != null">
and panel_group.id = #{id}
</if>
<if test="pid != null">
and panel_group.pid = #{pid}
</if>
<if test="level != null">
and panel_group.level = #{level}
</if>
</where>
<if test="sort != null">
order by ${sort}
</if>
</select>
<delete id="deleteCircle">
delete from panel_group where FIND_IN_SET(panel_group.id,GET_PANEL_GROUP_WITH_CHILDREN(#{pid}))
</delete>
</mapper>

32
backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
View File

@ -1,14 +1,46 @@
package io.dataease.controller.panel;
import io.dataease.base.domain.DatasetGroup;
import io.dataease.controller.request.dataset.DataSetGroupRequest;
import io.dataease.controller.request.panel.PanelGroupRequest;
import io.dataease.dto.dataset.DataSetGroupDTO;
import io.dataease.dto.panel.PanelGroupDTO;
import io.dataease.service.panel.PanelGroupService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* Author: wangjiahao
* Date: 2021-03-05
* Description:
*/
@RestController
@RequestMapping("panel/group")
public class PanelGroupController {
@Resource
private PanelGroupService panelGroupService;
@PostMapping("/tree")
public List<PanelGroupDTO> tree(@RequestBody PanelGroupRequest request) {
request.setLevel(0);
return panelGroupService.tree(request);
}
@PostMapping("/defaultTree")
public List<PanelGroupDTO> defaultTree(@RequestBody PanelGroupRequest request) {
return panelGroupService.getDefaultTree(request);
}
@PostMapping("/save")
public PanelGroupDTO save(@RequestBody PanelGroupRequest request) {
return panelGroupService.save(request);
}
@PostMapping("/deleteCircle/{id}")
public void deleteCircle(@PathVariable String id) {
panelGroupService.deleteCircle(id);
}
}

21
backend/src/main/java/io/dataease/controller/request/panel/PanelGroupRequest.java Normal file
View File

@ -0,0 +1,21 @@
package io.dataease.controller.request.panel;
import io.dataease.base.domain.PanelGroup;
import lombok.Data;
/**
* Author: wangjiahao
* Date: 2021-03-05
* Description:
*/
@Data
public class PanelGroupRequest extends PanelGroup {
private String sort;
public PanelGroupRequest() {
}
public PanelGroupRequest(String pid) {
super.setPid(pid);
}
}

18
backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
View File

@ -2,6 +2,7 @@ package io.dataease.dto.panel;
import io.dataease.base.domain.PanelGroup;
import io.dataease.dto.dataset.DataSetGroupDTO;
import lombok.Data;
import java.util.List;
@ -10,25 +11,10 @@ import java.util.List;
* Date: 2021-03-05
* Description:
*/
@Data
public class PanelGroupDTO extends PanelGroup {
private String label;
private List<PanelGroupDTO> children;
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public List<PanelGroupDTO> getChildren() {
return children;
}
public void setChildren(List<PanelGroupDTO> children) {
this.children = children;
}
}

49
backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
View File

@ -1,9 +1,20 @@
package io.dataease.service.panel;
import io.dataease.base.domain.DatasetGroup;
import io.dataease.base.mapper.PanelGroupMapper;
import io.dataease.base.mapper.ext.ExtPanelGroupMapper;
import io.dataease.commons.utils.BeanUtils;
import io.dataease.controller.request.panel.PanelGroupRequest;
import io.dataease.dto.dataset.DataSetGroupDTO;
import io.dataease.dto.panel.PanelGroupDTO;
import org.apache.commons.lang3.StringUtils;
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
@ -15,9 +26,47 @@ public class PanelGroupService {
@Resource
private PanelGroupMapper panelGroupMapper;
@Resource
private ExtPanelGroupMapper extPanelGroupMapper;
public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
List<PanelGroupDTO> panelGroupDTOList = extPanelGroupMapper.panelGroupList(panelGroupRequest);
getTreeChildren(panelGroupDTOList);
return panelGroupDTOList;
}
public void getTreeChildren(List<PanelGroupDTO> parentPanelGroupDTO){
Optional.ofNullable(parentPanelGroupDTO).ifPresent(parent -> parent.forEach(panelGroupDTO -> {
List<PanelGroupDTO> panelGroupDTOChildren = extPanelGroupMapper.panelGroupList(new PanelGroupRequest(panelGroupDTO.getId()));
panelGroupDTO.setChildren(panelGroupDTOChildren);
getTreeChildren(panelGroupDTOChildren);
}));
}
public List<PanelGroupDTO> getDefaultTree(PanelGroupRequest panelGroupRequest){
return extPanelGroupMapper.panelGroupList(panelGroupRequest);
}
public PanelGroupDTO save(PanelGroupRequest request) {
if (StringUtils.isEmpty(request.getId())) {
request.setId(UUID.randomUUID().toString());
request.setCreateTime(System.currentTimeMillis());
panelGroupMapper.insert(request);
} else {
panelGroupMapper.updateByPrimaryKey(request);
}
PanelGroupDTO panelGroupDTO = new PanelGroupDTO();
BeanUtils.copyBean(panelGroupDTO, request);
panelGroupDTO.setLabel(request.getName());
return panelGroupDTO;
}
public void deleteCircle(String id){
Assert.notNull(id, "id cannot be null");
extPanelGroupMapper.deleteCircle(id);
}
}

29
backend/src/main/resources/db/migration/V12__panel_table.sql
View File

@ -32,4 +32,31 @@ CREATE TABLE `panel_view` (
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
SET FOREIGN_KEY_CHECKS = 1;
SET FOREIGN_KEY_CHECKS = 1;
CREATE DEFINER=`root`@`%` FUNCTION `GET_PANEL_CHILDREN_CHILDREN`(parentId varchar(8000)) RETURNS varchar(8000) CHARSET utf8
BEGIN
DECLARE oTemp VARCHAR(8000);
DECLARE oTempChild VARCHAR(8000);
SET oTemp = '';
SET oTempChild = CAST(parentId AS CHAR);
WHILE oTempChild IS NOT NULL
DO
SET oTemp = CONCAT(oTemp,',',oTempChild);
SELECT GROUP_CONCAT(id) INTO oTempChild FROM panel_group WHERE FIND_IN_SET(pid,oTempChild) > 0;
END WHILE;
RETURN oTemp;
END

48
frontend/src/api/panel/panel.js
View File

@ -1,8 +1,26 @@
import request from '@/utils/request'
export function defaultTree(data) {
return request({
url: '/panel/group/defaultTree',
method: 'post',
loading: true,
data
})
}
export function groupTree(data) {
return request({
url: '/panel/group/tree',
method: 'post',
loading: true,
data
})
}
export function loadTable(data) {
return request({
url: '/dataset/table/list',
url: '/panel/table/list',
method: 'post',
data
})
@ -10,14 +28,14 @@ export function loadTable(data) {
export function getScene(sceneId) {
return request({
url: '/dataset/group/getScene/' + sceneId,
url: '/panel/group/getScene/' + sceneId,
method: 'post'
})
}
export function addGroup(data) {
return request({
url: '/dataset/group/save',
url: '/panel/group/save',
method: 'post',
data
})
@ -25,14 +43,14 @@ export function addGroup(data) {
export function delGroup(groupId) {
return request({
url: '/dataset/group/delete/' + groupId,
url: '/panel/group/deleteCircle/' + groupId,
method: 'post'
})
}
export function addTable(data) {
return request({
url: '/dataset/table/update',
url: '/panel/table/update',
method: 'post',
data
})
@ -40,19 +58,11 @@ export function addTable(data) {
export function delTable(tableId) {
return request({
url: '/dataset/table/delete/' + tableId,
url: '/panel/table/delete/' + tableId,
method: 'post'
})
}
export function groupTree(data) {
return request({
url: '/dataset/group/tree',
method: 'post',
data
})
}
export function listDatasource() {
return request({
url: '/datasource/list',
@ -62,14 +72,14 @@ export function listDatasource() {
export function getTable(id) {
return request({
url: '/dataset/table/get/' + id,
url: '/panel/table/get/' + id,
method: 'post'
})
}
export function getPreviewData(data) {
return request({
url: '/dataset/table/getPreviewData',
url: '/panel/table/getPreviewData',
method: 'post',
data
})
@ -77,14 +87,14 @@ export function getPreviewData(data) {
export function fieldList(id) {
return request({
url: '/dataset/field/list/' + id,
url: '/panel/field/list/' + id,
method: 'post'
})
}
export function batchEdit(data) {
return request({
url: '/dataset/field/batchEdit',
url: '/panel/field/batchEdit',
method: 'post',
data
})
@ -98,4 +108,4 @@ export function post(url, data) {
})
}
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree }
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree,defaultTree }

36
frontend/src/lang/zh.js
View File

@ -683,10 +683,10 @@ export default {
},
panel: {
datalist: '视图列表',
add_group: '添加分组',
add_scene: '添加场景',
group: '分组',
scene: '场景',
group:'目录',
panel:'仪表盘',
groupAdd:'新建目录',
panelAdd:'新建仪表盘',
delete: '删除',
move_to: '移动到',
rename: '重命名',
@ -696,31 +696,7 @@ export default {
confirm: '确认',
cancel: '取消',
search: '搜索',
back: '返回',
add_table: '添加表',
process: '进度',
add_chart: '添加视图',
db_data: '数据库表',
sql_data: 'SQL数据集',
excel_data: 'Excel数据集',
custom_data: '自助数据集',
pls_slc_tbl_left: '请从左侧选视图',
add_db_table: '添加数据库表',
pls_slc_data_source: '请选择数据库连接',
table: '表',
edit: '编辑',
create_view: '创建试图',
data_preview: '数据预览',
dimension: '维度',
quota: '指标',
title: '标题',
show: '显示',
chart_type: '图表类型',
shape_attr: '图形属性',
module_style: '组件样式',
result_filter: '结果过滤器',
x_axis: '横轴',
y_axis: '纵轴',
chart: '视图'
back: '返回'
}
}

605
frontend/src/views/panel/group/Group.vue
View File

@ -1,605 +0,0 @@
<template xmlns:el-col="http://www.w3.org/1999/html">
<el-col>
<!-- group -->
<el-col v-if="!sceneMode">
<el-row>
<el-button icon="el-icon-circle-plus" type="primary" size="mini" @click="add('group')">
{{ $t('dataset.add_group') }}
</el-button>
<el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add('scene')">
{{ $t('dataset.add_scene') }}
</el-button>
</el-row>
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<el-col class="custom-tree-container">
<div class="block">
<el-tree
:default-expanded-keys="expandedArray"
:data="tData"
node-key="id"
:expand-on-click-node="true"
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span v-if="data.type === 'scene'">
<el-button
icon="el-icon-folder"
type="text"
size="mini"
/>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
<span v-if="data.type ==='group'" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickAdd">
<span class="el-dropdown-link">
<el-button
icon="el-icon-plus"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
{{ $t('dataset.group') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
{{ $t('dataset.scene') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
{{ $t('dataset.rename') }}
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
<!-- {{$t('dataset.move_to')}}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
</div>
</el-col>
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="groupForm.name"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css">
<span class="title-text">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" @click="back">
{{ $t('dataset.back') }}
</el-button>
</el-row>
<el-divider/>
<el-row>
<el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
<el-button type="primary" size="mini" plain>
{{ $t('dataset.add_table') }}
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeClickAddData('db')">
{{ $t('dataset.db_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('sql')">
{{ $t('dataset.sql_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('excel')">
{{ $t('dataset.excel_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('custom')">
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button type="primary" size="mini" plain>
{{ $t('dataset.update') }}
</el-button>
<el-button type="primary" size="mini" plain>
{{ $t('dataset.process') }}
</el-button> -->
</el-row>
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<span v-show="false">{{ sceneData }}</span>
<el-tree
:data="tableData"
node-key="id"
:expand-on-click-node="true"
@node-click="sceneClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span>
({{ data.type }})
</span>
<span>
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
{{ $t('dataset.edit') }}
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
<!-- {{$t('dataset.move_to')}}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
<el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name"/>
</el-form-item>
<el-form-item :label="$t('dataset.mode')" prop="mode">
<el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
<el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
</el-col>
</template>
<script>
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/panel/panel'
export default {
name: 'Group',
data() {
return {
sceneMode: false,
dialogTitle: '',
search: '',
editGroup: false,
editTable: false,
tData: [],
tableData: [],
currGroup: {},
expandedArray: [],
groupForm: {
name: '',
pid: null,
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
},
tableForm: {
name: '',
mode: '',
sort: 'type asc,create_time desc,name asc'
},
groupFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
]
},
tableFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
],
mode: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
]
}
}
},
computed: {
sceneData: function() {
console.log(this.$store.state.dataset.sceneData + ' do post')
this.tableTree()
return this.$store.state.dataset.sceneData
}
},
watch: {
// search(val){
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
},
mounted() {
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
},
beforeClickAdd(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
clickMore(param) {
console.log(param)
switch (param.type) {
case 'rename':
this.add(param.data.type)
this.groupForm = JSON.parse(JSON.stringify(param.data))
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
}
},
beforeClickMore(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
add(type) {
switch (type) {
case 'group':
this.dialogTitle = this.$t('dataset.group')
break
case 'scene':
this.dialogTitle = this.$t('dataset.scene')
break
}
this.groupForm.type = type
this.editGroup = true
},
saveGroup(group) {
// console.log(group);
this.$refs['groupForm'].validate((valid) => {
if (valid) {
addGroup(group).then(res => {
this.close()
this.$message({
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.tree(this.groupForm)
})
} else {
this.$message({
message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
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('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true
})
this.tree(this.groupForm)
})
}).catch(() => {
})
},
deleteTable(data) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
delTable(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.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 = {
name: '',
pid: null,
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
closeTable() {
this.editTable = false
this.tableForm = {
name: ''
}
},
tree(group) {
groupTree(group).then(res => {
this.tData = res.data
})
},
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) {
// console.log(data);
// console.log(node);
if (data.type === 'scene') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
}
if (node.expanded) {
this.expandedArray.push(data.id)
} else {
const index = this.expandedArray.indexOf(data.id)
if (index > -1) {
this.expandedArray.splice(index, 1)
}
}
// console.log(this.expandedArray);
},
back() {
this.sceneMode = false
// const route = this.$store.state.permission.currentRoutes
// console.log(route)
// this.$router.push('/dataset/index')
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
})
}
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 12px 0
}
.search-input {
padding: 12px 0;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
font-size: 14px;
flex-flow: row nowrap;
}
.form-item {
margin-bottom: 0;
}
.title-css {
height: 26px;
}
.title-text {
line-height: 26px;
}
</style>

4
frontend/src/views/panel/index.vue
View File

@ -34,13 +34,13 @@
import MsMainContainer from '@/metersphere/common/components/MsMainContainer'
import MsContainer from '@/metersphere/common/components/MsContainer'
import MsAsideContainer from '@/metersphere/common/components/MsAsideContainer'
import Group from './group/Group'
// import Group from './group/Group'
import PanelList from './list/PanelList'
import PanelView from './list/PanelView'
export default {
name: 'Panel',
components: {MsMainContainer, MsContainer, MsAsideContainer, Group, PanelList,PanelView},
components: {MsMainContainer, MsContainer, MsAsideContainer, PanelList,PanelView},
data() {
return {
component: PanelView,

216
frontend/src/views/panel/list/PanelList.vue
View File

@ -1,13 +1,13 @@
<template xmlns:el-col="http://www.w3.org/1999/html">
<el-col>
<!-- group -->
<el-col v-if="!sceneMode">
<!-- panel list -->
<el-col>
<el-row>
<span class="header-title">默认仪表盘</span>
<div class="block">
<el-tree
:default-expanded-keys="expandedArray"
:data="tData"
:data="defaultData"
node-key="id"
:expand-on-click-node="true"
@node-click="panelDefaultClick"
@ -41,17 +41,16 @@
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span v-if="data.type === 'scene'">
<span v-if="data.nodeType === 'panel'">
<el-button
icon="el-icon-folder"
icon="el-icon-picture-outline"
type="text"
size="mini"
/>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
<span v-if="data.type ==='group'" @click.stop>
<span v-if="data.nodeType ==='folder'" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickAdd">
<span class="el-dropdown-link">
<el-button
@ -61,11 +60,11 @@
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('group',data,node)">
{{ $t('dataset.group') }}
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('folder',data,node)">
{{ $t('panel.groupAdd') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('scene',data,node)">
{{ $t('dataset.scene') }}
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('panel',data,node)">
{{ $t('panel.panelAdd') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -81,13 +80,10 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
{{ $t('dataset.rename') }}
{{ $t('panel.rename') }}
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
<!-- {{$t('dataset.move_to')}}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
{{ $t('dataset.delete') }}
{{ $t('panel.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -105,138 +101,23 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="close()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('dataset.confirm') }}
<el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
<!--scene-->
<el-col v-if="sceneMode">
<el-row class="title-css">
<span class="title-text">
{{ currGroup.name }}
</span>
<el-button icon="el-icon-back" size="mini" style="float: right" @click="back">
{{ $t('dataset.back') }}
</el-button>
</el-row>
<el-divider/>
<el-row>
<el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">
<el-button type="primary" size="mini" plain>
{{ $t('dataset.add_table') }}
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeClickAddData('db')">
{{ $t('dataset.db_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('sql')">
{{ $t('dataset.sql_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('excel')">
{{ $t('dataset.excel_data') }}
</el-dropdown-item>
<el-dropdown-item :command="beforeClickAddData('custom')">
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button type="primary" size="mini" plain>
{{ $t('dataset.update') }}
</el-button>
<el-button type="primary" size="mini" plain>
{{ $t('dataset.process') }}
</el-button> -->
</el-row>
<el-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="search"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<span v-show="false">{{ sceneData }}</span>
<el-tree
:data="tableData"
node-key="id"
:expand-on-click-node="true"
@node-click="sceneClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span>
({{ data.type }})
</span>
<span>
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation"/></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-time"/></span>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
{{ $t('dataset.edit') }}
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
<!-- {{$t('dataset.move_to')}}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">
{{ $t('dataset.delete') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
<el-dialog :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
<el-form ref="tableForm" :model="tableForm" :rules="tableFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="tableForm.name"/>
</el-form-item>
<el-form-item :label="$t('dataset.mode')" prop="mode">
<el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
<el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveTable(tableForm)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
</el-col>
</template>
<script>
import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree,defaultTree} from '@/api/panel/panel'
export default {
name: 'PanelList',
data() {
return {
sceneMode: false,
defaultData:[],
dialogTitle: '',
search: '',
editGroup: false,
@ -246,17 +127,17 @@
currGroup: {},
expandedArray: [],
groupForm: {
name: '',
name: null,
pid: null,
level: 0,
type: '',
nodeType: null,
children: [],
sort: 'type desc,name asc'
sort: 'node_type desc,name asc'
},
tableForm: {
name: '',
mode: '',
sort: 'type asc,create_time desc,name asc'
sort: 'node_type asc,create_time desc,name asc'
},
groupFormRules: {
name: [
@ -274,11 +155,6 @@
}
},
computed: {
sceneData: function () {
console.log(this.$store.state.dataset.sceneData + ' do post')
this.tableTree()
return this.$store.state.dataset.sceneData
}
},
watch: {
// search(val){
@ -287,6 +163,7 @@
// }
},
mounted() {
this.defaultTree()
this.tree(this.groupForm)
this.refresh()
this.tableTree()
@ -312,7 +189,7 @@
console.log(param)
switch (param.type) {
case 'rename':
this.add(param.data.type)
this.add(param.data.nodeType)
this.groupForm = JSON.parse(JSON.stringify(param.data))
break
case 'move':
@ -340,16 +217,16 @@
}
},
add(type) {
switch (type) {
case 'group':
this.dialogTitle = this.$t('dataset.group')
add(nodeType) {
switch (nodeType) {
case 'folder':
this.dialogTitle = this.$t('panel.groupAdd')
break
case 'scene':
this.dialogTitle = this.$t('dataset.scene')
case 'panel':
this.dialogTitle = this.$t('panel.panelAdd')
break
}
this.groupForm.type = type
this.groupForm.nodeType = nodeType
this.editGroup = true
},
@ -406,15 +283,15 @@
},
delete(data) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
confirmButtonText: this.$t('panel.confirm'),
cancelButtonText: this.$t('panel.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.delete_success'),
message: this.$t('panel.delete_success'),
showClose: true
})
this.tree(this.groupForm)
@ -424,15 +301,15 @@
},
deleteTable(data) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
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('dataset.delete_success'),
message: this.$t('panel.delete_success'),
showClose: true
})
this.tableTree()
@ -447,12 +324,12 @@
close() {
this.editGroup = false
this.groupForm = {
name: '',
name: null,
pid: null,
level: 0,
type: '',
nodeType: null,
children: [],
sort: 'type desc,name asc'
sort: 'node_type desc,name asc'
}
},
@ -468,6 +345,14 @@
this.tData = res.data
})
},
defaultTree() {
let requestInfo ={
panelType: 'system'
}
defaultTree(requestInfo).then(res => {
this.defaultData = res.data
})
},
tableTree() {
this.tableData = []
@ -484,7 +369,7 @@
nodeClick(data, node) {
// console.log(data);
// console.log(node);
if (data.type === 'scene') {
if (data.nodeType === 'panel') {
this.sceneMode = true
this.currGroup = data
this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
@ -538,6 +423,8 @@
// name: 'add_db',
// params: {
// scene: this.currGroup
// }
// })
this.$emit('switchComponent', {name: 'AddDB', param: this.currGroup})
@ -567,7 +454,6 @@
}
},
panelDefaultClick(data, node) {
debugger
console.log(data);
console.log(node);
this.$store.dispatch('panel/setPanelName', data.name)