Skip to content

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

feat(数据集):数据集 分组、场景、数据集移动功能

上级 584a5499
隐藏空白字符变更
内嵌 并排
正在显示 包含 357 行增加 和 33 行删除
frontend/src/lang/en.js
浏览文件 @ d585fd46
......@@ -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',
......
frontend/src/lang/tw.js
浏览文件 @ d585fd46
......@@ -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: '數據源',
......
frontend/src/lang/zh.js
浏览文件 @ d585fd46
......@@ -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: '数据源',
......
frontend/src/views/chart/group/Group.vue
浏览文件 @ d585fd46
......@@ -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)
}
}
}
}
......
frontend/src/views/dataset/group/DsMoveSelector.vue 0 → 100644
浏览文件 @ d585fd46
<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>
frontend/src/views/dataset/group/Group.vue
浏览文件 @ d585fd46
......@@ -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>
frontend/src/views/dataset/group/GroupMoveSelector.vue 0 → 100644
浏览文件 @ d585fd46
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论