forked from github/dataease
feat(数据集):数据集 分组、场景、数据集移动功能
This commit is contained in:
junjie
parent
584a5499ad
commit
d585fd469f
@ -663,7 +663,7 @@ export default {
|
||||
radius_mode: 'Radius',
|
||||
area_mode: 'Area',
|
||||
rose_radius: 'Fillet',
|
||||
view_name: 'Chart Name',
|
||||
view_name: 'Chart Title',
|
||||
name_can_not_empty: 'Name cannot be empty',
|
||||
template_can_not_empty: 'Please check a Template',
|
||||
custom_count: 'Number of records',
|
||||
@ -715,7 +715,8 @@ export default {
|
||||
date_split: 'yyyy/MM/dd',
|
||||
chartName: 'New Chart',
|
||||
chart_show_error: 'can not show normal',
|
||||
chart_error_tips: 'Please contact admin '
|
||||
chart_error_tips: 'Please contact admin ',
|
||||
title_cannot_empty: 'Title can not be empty'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
@ -834,7 +835,10 @@ export default {
|
||||
edit_excel_table: 'Edit Excel Dataset',
|
||||
edit_excel: 'Edit Excel',
|
||||
excel_replace: 'Replace',
|
||||
excel_add: 'Add'
|
||||
excel_add: 'Add',
|
||||
dataset_group: 'Dataset Group',
|
||||
m1: 'Move ',
|
||||
m2: ' To'
|
||||
},
|
||||
datasource: {
|
||||
datasource: 'Data Source',
|
||||
|
||||
@ -663,7 +663,7 @@ export default {
|
||||
radius_mode: '半徑',
|
||||
area_mode: '面積',
|
||||
rose_radius: '園角',
|
||||
view_name: '視圖名稱',
|
||||
view_name: '視圖標題',
|
||||
name_can_not_empty: '名稱不能為空',
|
||||
template_can_not_empty: '请选择仪表板',
|
||||
custom_count: '記錄數',
|
||||
@ -715,7 +715,8 @@ export default {
|
||||
date_split: 'yyyy/MM/dd',
|
||||
chartName: '新建視圖',
|
||||
chart_show_error: '無法正常顯示',
|
||||
chart_error_tips: '如有疑問請聯系管理員'
|
||||
chart_error_tips: '如有疑問請聯系管理員',
|
||||
title_cannot_empty: '標題不能為空'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個sheet頁面，默認抽取第一個',
|
||||
@ -834,7 +835,10 @@ export default {
|
||||
edit_excel_table: '編輯Excel數據集',
|
||||
edit_excel: '編輯Excel',
|
||||
excel_replace: '替換',
|
||||
excel_add: '追加'
|
||||
excel_add: '追加',
|
||||
dataset_group: '數據集分組',
|
||||
m1: '將 ',
|
||||
m2: ' 移動到'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '數據源',
|
||||
|
||||
@ -663,7 +663,7 @@ export default {
|
||||
radius_mode: '半径',
|
||||
area_mode: '面积',
|
||||
rose_radius: '圆角',
|
||||
view_name: '视图名称',
|
||||
view_name: '视图标题',
|
||||
name_can_not_empty: '名称不能为空',
|
||||
template_can_not_empty: '请选择仪表版',
|
||||
custom_count: '记录数',
|
||||
@ -715,7 +715,8 @@ export default {
|
||||
date_split: 'yyyy/MM/dd',
|
||||
chartName: '新建视图',
|
||||
chart_show_error: '无法正常显示',
|
||||
chart_error_tips: '如有疑问请联系管理员'
|
||||
chart_error_tips: '如有疑问请联系管理员',
|
||||
title_cannot_empty: '标题不能为空'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
@ -834,7 +835,10 @@ export default {
|
||||
edit_excel_table: '编辑Excel数据集',
|
||||
edit_excel: '编辑Excel',
|
||||
excel_replace: '替换',
|
||||
excel_add: '追加'
|
||||
excel_add: '追加',
|
||||
dataset_group: '数据集分组',
|
||||
m1: '将 ',
|
||||
m2: ' 移动到'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '数据源',
|
||||
|
||||
@ -40,6 +40,8 @@
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="nodeClick"
|
||||
@node-expand="nodeExpand"
|
||||
@node-collapse="nodeCollapse"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node father">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
@ -491,14 +493,14 @@ export default {
|
||||
this.$store.dispatch('chart/setSceneId', this.currGroup.id)
|
||||
this.chartTree()
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id)
|
||||
} else {
|
||||
const index = this.expandedArray.indexOf(data.id)
|
||||
if (index > -1) {
|
||||
this.expandedArray.splice(index, 1)
|
||||
}
|
||||
}
|
||||
// if (node.expanded) {
|
||||
// this.expandedArray.push(data.id)
|
||||
// } else {
|
||||
// const index = this.expandedArray.indexOf(data.id)
|
||||
// if (index > -1) {
|
||||
// this.expandedArray.splice(index, 1)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
|
||||
back() {
|
||||
@ -609,6 +611,17 @@ export default {
|
||||
this.currGroup = response.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
nodeExpand(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.push(data.id)
|
||||
}
|
||||
},
|
||||
nodeCollapse(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
85
frontend/src/views/dataset/group/DsMoveSelector.vue
Normal file
85
frontend/src/views/dataset/group/DsMoveSelector.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<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 { groupTree } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'DsMoveSelector',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tData: [],
|
||||
currGroup: '',
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
targetGroup: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'item': function() {
|
||||
this.tree(this.groupForm)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tree(this.groupForm)
|
||||
},
|
||||
methods: {
|
||||
tree(group) {
|
||||
groupTree(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>
|
||||
@ -40,6 +40,8 @@
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="nodeClick"
|
||||
@node-expand="nodeExpand"
|
||||
@node-collapse="nodeCollapse"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node father">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
@ -86,9 +88,9 @@
|
||||
<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-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>
|
||||
@ -207,9 +209,9 @@
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',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-right" :command="beforeClickMore('moveDs',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>
|
||||
@ -238,14 +240,37 @@
|
||||
</el-dialog>
|
||||
|
||||
</el-col>
|
||||
|
||||
<!--移动分组、场景-->
|
||||
<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">
|
||||
<ds-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 { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
|
||||
import GroupMoveSelector from './GroupMoveSelector'
|
||||
import DsMoveSelector from './DsMoveSelector'
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
components: { GroupMoveSelector, DsMoveSelector },
|
||||
data() {
|
||||
return {
|
||||
sceneMode: false,
|
||||
@ -266,6 +291,14 @@ export default {
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
dsForm: {
|
||||
name: '',
|
||||
pid: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
tableForm: {
|
||||
name: '',
|
||||
mode: '',
|
||||
@ -282,7 +315,14 @@ export default {
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' },
|
||||
{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
},
|
||||
moveGroup: false,
|
||||
tGroup: {},
|
||||
moveDs: false,
|
||||
tDs: {},
|
||||
groupMoveConfirmDisabled: true,
|
||||
dsMoveConfirmDisabled: true,
|
||||
moveDialogTitle: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -329,7 +369,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)
|
||||
@ -506,14 +551,14 @@ export default {
|
||||
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)
|
||||
}
|
||||
}
|
||||
// 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);
|
||||
},
|
||||
|
||||
@ -563,6 +608,79 @@ export default {
|
||||
this.currGroup = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
nodeExpand(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.push(data.id)
|
||||
}
|
||||
},
|
||||
nodeCollapse(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
|
||||
}
|
||||
},
|
||||
|
||||
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: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
}
|
||||
},
|
||||
saveMoveGroup() {
|
||||
this.groupForm.pid = this.tGroup.id
|
||||
addGroup(this.groupForm).then(res => {
|
||||
this.closeMoveGroup()
|
||||
this.tree(this.groupForm)
|
||||
})
|
||||
},
|
||||
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: null,
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
}
|
||||
},
|
||||
saveMoveDs() {
|
||||
if (this.tDs && this.tDs.type === 'group') {
|
||||
return
|
||||
}
|
||||
this.dsForm.sceneId = this.tDs.id
|
||||
this.dsForm.isRename = true
|
||||
addTable(this.dsForm).then(res => {
|
||||
this.closeMoveDs()
|
||||
this.tableTree()
|
||||
})
|
||||
},
|
||||
targetDs(val) {
|
||||
this.tDs = val
|
||||
if (this.tDs.type === 'group') {
|
||||
this.dsMoveConfirmDisabled = true
|
||||
} else {
|
||||
this.dsMoveConfirmDisabled = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -640,4 +758,8 @@ export default {
|
||||
.father:hover .child {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
92
frontend/src/views/dataset/group/GroupMoveSelector.vue
Normal file
92
frontend/src/views/dataset/group/GroupMoveSelector.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<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 { groupTree } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'GroupMoveSelector',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tData: [],
|
||||
currGroup: '',
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: null,
|
||||
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) {
|
||||
groupTree(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>
|
||||
Loading…
Reference in New Issue
Block a user