forked from github/dataease
feat: 仪表板选择视图
This commit is contained in:
parent
621e92a06d
commit
3b87239aa2
@ -0,0 +1,13 @@
|
|||||||
|
package io.dataease.base.mapper.ext;
|
||||||
|
|
||||||
|
import io.dataease.base.mapper.ext.query.GridExample;
|
||||||
|
import io.dataease.dto.panel.po.PanelViewPo;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public interface ExtPanelViewMapper {
|
||||||
|
|
||||||
|
List<PanelViewPo> groups(GridExample example);
|
||||||
|
|
||||||
|
List<PanelViewPo> views(GridExample example);
|
||||||
|
}
|
@ -0,0 +1,47 @@
|
|||||||
|
<?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.ExtPanelViewMapper">
|
||||||
|
|
||||||
|
<resultMap id="treeNodeMap" type="io.dataease.dto.panel.po.PanelViewPo">
|
||||||
|
<id column="id" property="id" />
|
||||||
|
<result column="name" property="name" />
|
||||||
|
<result column="pid" property="pid" />
|
||||||
|
<result column="type" property="type" />
|
||||||
|
</resultMap>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<select id="groups" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="treeNodeMap">
|
||||||
|
select id, pid, name, `type`
|
||||||
|
from chart_group
|
||||||
|
<if test="_parameter != null">
|
||||||
|
<include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
|
||||||
|
</if>
|
||||||
|
<if test="orderByClause != null">
|
||||||
|
order by ${orderByClause}
|
||||||
|
</if>
|
||||||
|
<if test="orderByClause == null">
|
||||||
|
order by create_time desc
|
||||||
|
</if>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select id="views" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="treeNodeMap">
|
||||||
|
select id, scene_id as pid ,title as name, `type`
|
||||||
|
from chart_view
|
||||||
|
<if test="_parameter != null">
|
||||||
|
<include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
|
||||||
|
</if>
|
||||||
|
<if test="orderByClause != null">
|
||||||
|
order by ${orderByClause}
|
||||||
|
</if>
|
||||||
|
<if test="orderByClause == null">
|
||||||
|
order by create_time desc
|
||||||
|
</if>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</mapper>
|
@ -0,0 +1,21 @@
|
|||||||
|
package io.dataease.controller.panel.api;
|
||||||
|
|
||||||
|
|
||||||
|
import io.dataease.controller.sys.base.BaseGridRequest;
|
||||||
|
import io.dataease.dto.panel.PanelViewDto;
|
||||||
|
import io.swagger.annotations.Api;
|
||||||
|
import io.swagger.annotations.ApiOperation;
|
||||||
|
import org.springframework.web.bind.annotation.PostMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
@Api(tags = "仪表板:视图管理")
|
||||||
|
@RequestMapping("/api/panelView")
|
||||||
|
public interface ViewApi {
|
||||||
|
|
||||||
|
|
||||||
|
@ApiOperation("视图树")
|
||||||
|
@PostMapping("/tree")
|
||||||
|
List<PanelViewDto> tree(BaseGridRequest request);
|
||||||
|
}
|
@ -0,0 +1,43 @@
|
|||||||
|
package io.dataease.controller.panel.server;
|
||||||
|
|
||||||
|
import io.dataease.commons.utils.AuthUtils;
|
||||||
|
import io.dataease.controller.panel.api.ViewApi;
|
||||||
|
import io.dataease.controller.sys.base.BaseGridRequest;
|
||||||
|
import io.dataease.controller.sys.base.ConditionEntity;
|
||||||
|
import io.dataease.dto.panel.PanelViewDto;
|
||||||
|
import io.dataease.dto.panel.po.PanelViewPo;
|
||||||
|
import io.dataease.service.panel.PanelViewService;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.web.bind.annotation.RequestBody;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
@RestController
|
||||||
|
public class ViewServer implements ViewApi {
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private PanelViewService panelViewService;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 为什么查两次?
|
||||||
|
* 因为left join 会导致全表扫描
|
||||||
|
* 查两次在索引合理情况下 效率比查询一次高
|
||||||
|
* @return
|
||||||
|
*/
|
||||||
|
@Override
|
||||||
|
public List<PanelViewDto> tree(@RequestBody BaseGridRequest request) {
|
||||||
|
List<ConditionEntity> conditions = new ArrayList<>();
|
||||||
|
ConditionEntity condition = new ConditionEntity();
|
||||||
|
condition.setField("create_by");
|
||||||
|
condition.setOperator("eq");
|
||||||
|
condition.setValue(AuthUtils.getUser().getUsername());
|
||||||
|
conditions.add(condition);
|
||||||
|
request.setConditions(conditions);
|
||||||
|
List<PanelViewPo> groups = panelViewService.groups(request);
|
||||||
|
List<PanelViewPo> views = panelViewService.views(request);
|
||||||
|
List<PanelViewDto> panelViewDtos = panelViewService.buildTree(groups, views);
|
||||||
|
return panelViewDtos;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,26 @@
|
|||||||
|
package io.dataease.dto.panel;
|
||||||
|
|
||||||
|
import lombok.Data;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Optional;
|
||||||
|
|
||||||
|
@Data
|
||||||
|
public class PanelViewDto {
|
||||||
|
|
||||||
|
private String id;
|
||||||
|
|
||||||
|
private String pid;
|
||||||
|
|
||||||
|
private String type;
|
||||||
|
|
||||||
|
private String name;
|
||||||
|
|
||||||
|
private List<PanelViewDto> children;
|
||||||
|
|
||||||
|
public void addChild(PanelViewDto dto){
|
||||||
|
children = Optional.ofNullable(children).orElse(new ArrayList<>());
|
||||||
|
children.add(dto);
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,15 @@
|
|||||||
|
package io.dataease.dto.panel.po;
|
||||||
|
|
||||||
|
import lombok.Data;
|
||||||
|
|
||||||
|
@Data
|
||||||
|
public class PanelViewPo {
|
||||||
|
|
||||||
|
private String id;
|
||||||
|
|
||||||
|
private String pid;
|
||||||
|
|
||||||
|
private String type;
|
||||||
|
|
||||||
|
private String name;
|
||||||
|
}
|
@ -0,0 +1,69 @@
|
|||||||
|
package io.dataease.service.panel;
|
||||||
|
|
||||||
|
import io.dataease.base.mapper.ext.ExtPanelViewMapper;
|
||||||
|
import io.dataease.base.mapper.ext.query.GridExample;
|
||||||
|
import io.dataease.commons.utils.BeanUtils;
|
||||||
|
import io.dataease.controller.sys.base.BaseGridRequest;
|
||||||
|
import io.dataease.dto.panel.PanelViewDto;
|
||||||
|
import io.dataease.dto.panel.po.PanelViewPo;
|
||||||
|
import org.apache.commons.collections.CollectionUtils;
|
||||||
|
import org.apache.commons.lang3.ObjectUtils;
|
||||||
|
import org.apache.commons.lang3.StringUtils;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.stereotype.Service;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
import java.util.Optional;
|
||||||
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
|
@Service
|
||||||
|
public class PanelViewService {
|
||||||
|
|
||||||
|
@Autowired(required = false)
|
||||||
|
private ExtPanelViewMapper extPanelViewMapper;
|
||||||
|
|
||||||
|
private final static String SCENE_TYPE = "scene";
|
||||||
|
|
||||||
|
public List<PanelViewPo> groups(BaseGridRequest request){
|
||||||
|
GridExample example = request.convertExample();
|
||||||
|
return extPanelViewMapper.groups(example);
|
||||||
|
}
|
||||||
|
|
||||||
|
public List<PanelViewPo> views(BaseGridRequest request){
|
||||||
|
GridExample example = request.convertExample();
|
||||||
|
return extPanelViewMapper.views(example);
|
||||||
|
}
|
||||||
|
|
||||||
|
public List<PanelViewDto> buildTree(List<PanelViewPo> groups, List<PanelViewPo> views){
|
||||||
|
|
||||||
|
if (CollectionUtils.isEmpty(groups) || CollectionUtils.isEmpty(views)) return null;
|
||||||
|
|
||||||
|
Map<String, List<PanelViewPo>> viewsMap = views.stream().collect(Collectors.groupingBy(PanelViewPo::getPid));
|
||||||
|
List<PanelViewDto> dtos = groups.stream().map(group -> BeanUtils.copyBean(new PanelViewDto(), group)).collect(Collectors.toList());
|
||||||
|
List<PanelViewDto> roots = new ArrayList<>();
|
||||||
|
dtos.forEach(group -> {
|
||||||
|
// 查找跟节点
|
||||||
|
if (ObjectUtils.isEmpty(group.getPid())){
|
||||||
|
roots.add(group);
|
||||||
|
}
|
||||||
|
// 查找当前节点的子节点
|
||||||
|
// 当前group是场景
|
||||||
|
if (StringUtils.equals(group.getType(), SCENE_TYPE)){
|
||||||
|
Optional.ofNullable(viewsMap.get(group.getId())).ifPresent(lists -> lists.forEach(view -> {
|
||||||
|
PanelViewDto dto = BeanUtils.copyBean(new PanelViewDto(), view);
|
||||||
|
group.addChild(dto);
|
||||||
|
}));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 当前group是分组
|
||||||
|
dtos.forEach(item -> {
|
||||||
|
if (StringUtils.equals(item.getPid(), group.getId())){
|
||||||
|
group.addChild(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 最后 没有孩子的老东西淘汰
|
||||||
|
return roots.stream().filter(item -> CollectionUtils.isNotEmpty(item.getChildren())).collect(Collectors.toList());
|
||||||
|
}
|
||||||
|
}
|
10
frontend/src/api/panel/view.js
Normal file
10
frontend/src/api/panel/view.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function tree(data) {
|
||||||
|
return request({
|
||||||
|
url: '/api/panelView/tree',
|
||||||
|
method: 'post',
|
||||||
|
loading: true,
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
122
frontend/src/views/panel/ViewSelect/index.vue
Normal file
122
frontend/src/views/panel/ViewSelect/index.vue
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="my-top">
|
||||||
|
<el-input
|
||||||
|
v-model="filterText"
|
||||||
|
placeholder="按名称搜索"
|
||||||
|
/>
|
||||||
|
<el-tree
|
||||||
|
ref="tree"
|
||||||
|
class="filter-tree"
|
||||||
|
:data="data"
|
||||||
|
:props="defaultProps"
|
||||||
|
:render-content="renderNode"
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="showdetail" class="detail-class">
|
||||||
|
<el-card class="filter-card-class">
|
||||||
|
<div slot="header" class="button-div-class">
|
||||||
|
<span>{{ detailItem.name }}</span>
|
||||||
|
<div style="float: right; padding: 1px 5px; cursor:pointer; " @click="closeDetail">
|
||||||
|
<i class="el-icon-close" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="view-list-thumbnails" :src="'/common-files/images/'+detailItem.id+'/VIEW_DEFAULT_IMAGE'" alt="">
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { tree } from '@/api/panel/view'
|
||||||
|
import { addClass, removeClass } from '@/utils'
|
||||||
|
export default {
|
||||||
|
name: 'ViewSelect',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filterText: null,
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
showdetail: false,
|
||||||
|
detailItem: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
},
|
||||||
|
showdetail(val) {
|
||||||
|
const dom = document.querySelector('.my-top')
|
||||||
|
if (val) {
|
||||||
|
addClass(dom, 'top-div-class')
|
||||||
|
} else {
|
||||||
|
removeClass(dom, 'top-div-class')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
loadData() {
|
||||||
|
const param = {}
|
||||||
|
tree(param).then(res => {
|
||||||
|
let arr = []
|
||||||
|
for (let index = 0; index < 10; index++) {
|
||||||
|
arr = arr.concat(res.data)
|
||||||
|
}
|
||||||
|
this.data = arr
|
||||||
|
})
|
||||||
|
},
|
||||||
|
renderNode(h, { node, data, store }) {
|
||||||
|
return (
|
||||||
|
<div class='custom-tree-node' on-click={() => this.detail(data)} >
|
||||||
|
<span class='label-span'>{node.label}</span>
|
||||||
|
{data.type !== 'group' && data.type !== 'scene' ? (
|
||||||
|
|
||||||
|
<svg-icon icon-class={data.type} class='chart-icon' />
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
detail(data) {
|
||||||
|
this.showdetail = true
|
||||||
|
this.detailItem = data
|
||||||
|
},
|
||||||
|
closeDetail() {
|
||||||
|
this.showdetail = false
|
||||||
|
this.detailItem = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.top-div-class {
|
||||||
|
max-height: calc(100vh - 335px);
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
overflow-y : auto
|
||||||
|
}
|
||||||
|
.detail-class {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
.view-list-thumbnails {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
@ -73,7 +73,8 @@
|
|||||||
<div v-if="show" class="leftPanel">
|
<div v-if="show" class="leftPanel">
|
||||||
|
|
||||||
<div class="leftPanel-items">
|
<div class="leftPanel-items">
|
||||||
<filter-group />
|
<view-select v-if="show && showIndex===0" />
|
||||||
|
<filter-group v-if="show && showIndex===1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -92,6 +93,7 @@ import DeContainer from '@/components/dataease/DeContainer'
|
|||||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||||
import { addClass, removeClass } from '@/utils'
|
import { addClass, removeClass } from '@/utils'
|
||||||
import FilterGroup from '../filter'
|
import FilterGroup from '../filter'
|
||||||
|
import ViewSelect from '../ViewSelect'
|
||||||
import DrawingBoard from '../DrawingBoard'
|
import DrawingBoard from '../DrawingBoard'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -99,13 +101,15 @@ export default {
|
|||||||
DeContainer,
|
DeContainer,
|
||||||
DeAsideContainer,
|
DeAsideContainer,
|
||||||
FilterGroup,
|
FilterGroup,
|
||||||
|
ViewSelect,
|
||||||
DrawingBoard
|
DrawingBoard
|
||||||
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
clickNotClose: false
|
clickNotClose: false,
|
||||||
|
showIndex: -1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -136,6 +140,7 @@ export default {
|
|||||||
},
|
},
|
||||||
showPanel(type) {
|
showPanel(type) {
|
||||||
this.show = !this.show
|
this.show = !this.show
|
||||||
|
this.showIndex = type
|
||||||
},
|
},
|
||||||
addEventClick() {
|
addEventClick() {
|
||||||
window.addEventListener('click', this.closeSidebar)
|
window.addEventListener('click', this.closeSidebar)
|
||||||
@ -146,6 +151,7 @@ export default {
|
|||||||
if (!parent && !self) {
|
if (!parent && !self) {
|
||||||
this.show = false
|
this.show = false
|
||||||
window.removeEventListener('click', this.closeSidebar)
|
window.removeEventListener('click', this.closeSidebar)
|
||||||
|
this.showIndex = -1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
insertToBody() {
|
insertToBody() {
|
||||||
|
@ -1,348 +1,348 @@
|
|||||||
<template xmlns:el-col="http://www.w3.org/1999/html">
|
<template xmlns:el-col="http://www.w3.org/1999/html">
|
||||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||||
<span>仪表盘名称:{{panelName}}</span>
|
<span>仪表盘名称:{{ panelName }}</span>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset'
|
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PanelView',
|
name: 'PanelView',
|
||||||
data() {
|
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: {
|
||||||
|
panelName: function() {
|
||||||
|
console.log(this.$store.state.panel.panelName)
|
||||||
|
return this.$store.state.panel.panelName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 {
|
return {
|
||||||
sceneMode: false,
|
'type': type,
|
||||||
dialogTitle: '',
|
'data': data,
|
||||||
search: '',
|
'node': node
|
||||||
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: {
|
|
||||||
panelName: function () {
|
clickMore(param) {
|
||||||
console.log(this.$store.state.panel.panelName)
|
console.log(param)
|
||||||
return this.$store.state.panel.panelName
|
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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
// search(val){
|
beforeClickMore(type, data, node) {
|
||||||
// this.groupForm.name = val;
|
return {
|
||||||
// this.tree(this.groupForm);
|
'type': type,
|
||||||
// }
|
'data': data,
|
||||||
|
'node': node
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.tree(this.groupForm)
|
add(type) {
|
||||||
this.refresh()
|
switch (type) {
|
||||||
this.tableTree()
|
case 'group':
|
||||||
// this.$router.push('/dataset');
|
this.dialogTitle = this.$t('dataset.group')
|
||||||
|
break
|
||||||
|
case 'scene':
|
||||||
|
this.dialogTitle = this.$t('dataset.scene')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.groupForm.type = type
|
||||||
|
this.editGroup = true
|
||||||
},
|
},
|
||||||
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) {
|
saveGroup(group) {
|
||||||
return {
|
// console.log(group);
|
||||||
'type': type,
|
this.$refs['groupForm'].validate((valid) => {
|
||||||
'data': data,
|
if (valid) {
|
||||||
'node': node
|
addGroup(group).then(res => {
|
||||||
}
|
this.close()
|
||||||
},
|
|
||||||
|
|
||||||
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({
|
this.$message({
|
||||||
|
message: this.$t('commons.save_success'),
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: this.$t('dataset.delete_success'),
|
|
||||||
showClose: true
|
showClose: true
|
||||||
})
|
})
|
||||||
this.tree(this.groupForm)
|
this.tree(this.groupForm)
|
||||||
})
|
})
|
||||||
}).catch(() => {
|
} else {
|
||||||
})
|
this.$message({
|
||||||
},
|
message: this.$t('commons.input_content'),
|
||||||
|
type: 'error',
|
||||||
|
showClose: true
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
deleteTable(data) {
|
saveTable(table) {
|
||||||
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
|
// console.log(table)
|
||||||
confirmButtonText: this.$t('dataset.confirm'),
|
table.mode = parseInt(table.mode)
|
||||||
cancelButtonText: this.$t('dataset.cancel'),
|
this.$refs['tableForm'].validate((valid) => {
|
||||||
type: 'warning'
|
if (valid) {
|
||||||
}).then(() => {
|
addTable(table).then(response => {
|
||||||
delTable(data.id).then(response => {
|
this.closeTable()
|
||||||
this.$message({
|
this.$message({
|
||||||
|
message: this.$t('commons.save_success'),
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: this.$t('dataset.delete_success'),
|
|
||||||
showClose: true
|
showClose: true
|
||||||
})
|
})
|
||||||
this.tableTree()
|
this.tableTree()
|
||||||
// this.$router.push('/dataset/home')
|
// this.$router.push('/dataset/home')
|
||||||
this.$emit('switchComponent', {name: ''})
|
this.$emit('switchComponent', { name: '' })
|
||||||
this.$store.dispatch('dataset/setTable', null)
|
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 {
|
} else {
|
||||||
const index = this.expandedArray.indexOf(data.id)
|
this.$message({
|
||||||
if (index > -1) {
|
message: this.$t('commons.input_content'),
|
||||||
this.expandedArray.splice(index, 1)
|
type: 'error',
|
||||||
}
|
showClose: true
|
||||||
}
|
|
||||||
// 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
|
|
||||||
})
|
})
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
panelDefaultClick(data, node) {
|
},
|
||||||
// console.log(data);
|
|
||||||
// console.log(node);
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
panelDefaultClick(data, node) {
|
||||||
|
// console.log(data);
|
||||||
|
// console.log(node);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
Loading…
Reference in New Issue
Block a user