Skip to content

D
dataease
提交 f6593d23 authored 作者: junjie's avatar junjie
浏览文件
操作

feat(fix):视图移动功能

上级 86fd042e
隐藏空白字符变更
内嵌 并排
正在显示 包含 295 行增加 和 7 行删除
backend/src/main/java/io/dataease/service/chart/ChartGroupService.java
浏览文件 @ f6593d23
......@@ -82,8 +82,7 @@ public class ChartGroupService {
public List<ChartGroupDTO> tree(ChartGroupRequest chartGroup) {
chartGroup.setLevel(null);
chartGroup.setPid("0");
chartGroup.setType("group");
chartGroup.setPid(null);
chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
......@@ -92,7 +91,8 @@ public class ChartGroupService {
public List<ChartGroupDTO> treeNode(ChartGroupRequest chartGroup) {
chartGroup.setLevel(null);
chartGroup.setPid(null);
chartGroup.setPid("0");
chartGroup.setType("group");
chartGroup.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
List<ChartGroupDTO> treeInfo = extChartGroupMapper.search(chartGroup);
List<ChartGroupDTO> result = TreeUtils.mergeTree(treeInfo);
......
frontend/src/views/chart/components/TreeSelector/ChartMoveSelector.vue 0 → 100644
浏览文件 @ f6593d23
<template>
<el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
<el-tree
:data="tData"
node-key="id"
:expand-on-click-node="false"
highlight-current
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" :class="treeClass(data,node)">
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
</el-tree>
</el-col>
</template>
<script>
import { post } from '@/api/chart/chart'
export default {
name: 'ChartMoveSelector',
props: {
item: {
type: Object,
required: true
}
},
data() {
return {
tData: [],
currGroup: '',
groupForm: {
name: '',
pid: '0',
level: 0,
type: 'group',
children: [],
sort: 'type desc,name asc'
},
targetGroup: {}
}
},
watch: {
'item': function() {
this.tree(this.groupForm)
}
},
mounted() {
this.tree(this.groupForm)
},
methods: {
tree(group) {
post('/chart/group/tree', group).then(res => {
this.tData = res.data
})
},
nodeClick(data, node) {
this.targetGroup = data
this.$emit('targetDs', data)
},
treeClass(data, node) {
if (data.id === this.item.id) {
node.visible = false
}
return 'custom-tree-node'
}
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right:8px;
}
</style>
frontend/src/views/chart/components/TreeSelector/GroupMoveSelector.vue 0 → 100644
浏览文件 @ f6593d23
<template>
<el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
<el-tree
:data="tData"
node-key="id"
:expand-on-click-node="false"
highlight-current
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" :class="treeClass(data,node)">
<span style="display: flex;flex: 1;width: 0;">
<span v-if="data.type === 'scene'">
<svg-icon icon-class="scene" class="ds-icon-scene" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
</span>
</span>
</el-tree>
</el-col>
</template>
<script>
import { post } from '@/api/chart/chart'
export default {
name: 'GroupMoveSelector',
props: {
item: {
type: Object,
required: true
}
},
data() {
return {
tData: [],
currGroup: '',
groupForm: {
name: '',
pid: '0',
level: 0,
type: 'group',
children: [],
sort: 'type desc,name asc'
},
targetGroup: {}
}
},
watch: {
'item': function() {
this.tree(this.groupForm)
}
},
mounted() {
this.tree(this.groupForm)
},
methods: {
tree(group) {
post('/chart/group/tree', group).then(res => {
this.tData = [{
id: '0',
name: this.$t('dataset.dataset_group'),
pid: '0',
privileges: 'grant,manage,use',
type: 'group',
children: res.data
}]
})
},
nodeClick(data, node) {
this.targetGroup = data
this.$emit('targetGroup', data)
},
treeClass(data, node) {
if (data.id === this.item.id) {
node.visible = false
}
return 'custom-tree-node'
}
}
}
</script>
<style scoped>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right:8px;
}
</style>
frontend/src/views/chart/group/Group.vue
浏览文件 @ f6593d23
......@@ -99,6 +99,9 @@
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
{{ $t('chart.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('chart.delete') }}
</el-dropdown-item>
......@@ -126,6 +129,9 @@
<!-- <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('renameChart',data,node)">-->
<!-- {{ $t('chart.rename') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteChart',data,node)">
{{ $t('chart.delete') }}
</el-dropdown-item>
......@@ -294,12 +300,34 @@
<el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<!--移动分组-->
<el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
<group-move-selector :item="groupForm" @targetGroup="targetGroup" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeMoveGroup()">{{ $t('dataset.cancel') }}</el-button>
<el-button :disabled="groupMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveGroup(tGroup)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
<!--移动视图-->
<el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveDs" :show-close="false" width="30%" class="dialog-css">
<chart-move-selector :item="dsForm" @targetDs="targetDs" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeMoveDs()">{{ $t('dataset.cancel') }}</el-button>
<el-button :disabled="dsMoveConfirmDisabled" type="primary" size="mini" @click="saveMoveDs(tDs)">{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
</el-col>
</template>
<script>
import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector'
import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
import ChartMoveSelector from '../components/TreeSelector/ChartMoveSelector'
import {
DEFAULT_COLOR_CASE,
DEFAULT_LABEL,
......@@ -314,7 +342,7 @@ import {
export default {
name: 'Group',
components: { TableSelector },
components: { TableSelector, GroupMoveSelector, ChartMoveSelector },
props: {
saveStatus: {
type: Object,
......@@ -365,7 +393,22 @@ export default {
label: 'name',
children: 'children',
isLeaf: 'isLeaf'
}
},
dsForm: {
name: '',
pid: '0',
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
},
moveGroup: false,
tGroup: {},
moveDs: false,
tDs: {},
groupMoveConfirmDisabled: true,
dsMoveConfirmDisabled: true,
moveDialogTitle: ''
}
},
computed: {
......@@ -418,7 +461,12 @@ export default {
this.groupForm = JSON.parse(JSON.stringify(param.data))
break
case 'move':
this.moveTo(param.data)
this.groupForm = JSON.parse(JSON.stringify(param.data))
break
case 'moveDs':
this.moveToDs(param.data)
this.dsForm = JSON.parse(JSON.stringify(param.data))
break
case 'delete':
this.delete(param.data)
......@@ -753,6 +801,69 @@ export default {
node.loaded = false
node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
},
moveTo(data) {
this.moveGroup = true
this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
},
closeMoveGroup() {
this.moveGroup = false
this.groupForm = {
name: '',
pid: '0',
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
saveMoveGroup() {
this.groupForm.pid = this.tGroup.id
post('/chart/group/save', this.groupForm).then(res => {
this.closeMoveGroup()
// this.tree(this.groupForm)
this.refreshNodeBy(this.groupForm.pid)
})
},
targetGroup(val) {
this.tGroup = val
this.groupMoveConfirmDisabled = false
},
moveToDs(data) {
this.moveDs = true
this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
},
closeMoveDs() {
this.moveDs = false
this.dsForm = {
name: '',
pid: '0',
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
saveMoveDs() {
// if (this.tDs && this.tDs.type === 'group') {
// return
// }
this.dsForm.sceneId = this.tDs.id
post('/chart/view/save', this.dsForm).then(res => {
this.closeMoveDs()
// this.tableTree()
this.refreshNodeBy(this.dsForm.sceneId)
})
},
targetDs(val) {
this.tDs = val
if (this.tDs.type === 'group') {
this.dsMoveConfirmDisabled = false
} else {
this.dsMoveConfirmDisabled = false
}
}
}
}
......
frontend/src/views/dataset/group/Group.vue
浏览文件 @ f6593d23
......@@ -317,7 +317,7 @@
</div>
</el-dialog>
<!--移动分组、场景-->
<!--移动分组-->
<el-dialog v-dialogDrag :title="moveDialogTitle" :visible="moveGroup" :show-close="false" width="30%" class="dialog-css">
<group-move-selector :item="groupForm" @targetGroup="targetGroup" />
<div slot="footer" class="dialog-footer">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论