github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 19:42:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(数据集): 关联数据集

Browse Source
This commit is contained in:
junjie 2021-11-19 18:42:59 +08:00
parent b206225ae0
commit 7ad24c38c3
10 changed files with 399 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/icons/svg/ds-union.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1637288020248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3387" width="200" height="200"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" p-id="3388"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" p-id="3389"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

18
frontend/src/lang/en.js
View File

@ -653,9 +653,9 @@ export default {
process: 'Speed of progress',
add_chart: 'Add Chart',
db_data: 'Database Dataset',
sql_data: 'SQL data set',
excel_data: 'Excel data set',
custom_data: 'Custom data set',
sql_data: 'SQL Dataset',
excel_data: 'Excel Dataset',
custom_data: 'Custom Dataset',
pls_slc_tbl_left: 'Please select the chart from the left',
add_db_table: 'Add Database Dataset',
pls_slc_data_source: 'Please select data source',
@ -994,9 +994,9 @@ export default {
process: 'Speed of progress',
update: 'update',
db_data: 'Database Dataset',
sql_data: 'SQL data set',
excel_data: 'Excel data set',
custom_data: 'Custom data set',
sql_data: 'SQL Dataset',
excel_data: 'Excel Dataset',
custom_data: 'Custom Dataset',
pls_slc_tbl_left: 'Please select the chart from the left',
add_db_table: 'Add Database Dataset',
pls_slc_data_source: 'Please select data source',
@ -1150,7 +1150,11 @@ export default {
confirm_sync_field: 'Confirm Sync',
confirm_sync_field_tips: 'Sync field maybe change edit field，please confirm',
sync_success: 'Success',
sync_success_1: 'Success，please sync data again'
sync_success_1: 'Success，please sync data again',
union_data: 'Union Dataset',
add_union_table: 'Add Union Dataset',
edit_union: 'Edit Union Dataset',
union: 'Union'
},
datasource: {
datasource: 'Data Source',

6
frontend/src/lang/tw.js
View File

@ -1151,7 +1151,11 @@ export default {
confirm_sync_field: '確認同步',
confirm_sync_field_tips: '同步字段可能會導致已編輯字段發生變更，請確認',
sync_success: '同步成功',
sync_success_1: '同步成功，請對當前數據集重新執行數據同步操作'
sync_success_1: '同步成功，請對當前數據集重新執行數據同步操作',
union_data: '關聯數據集',
add_union_table: '添加關聯數據集',
edit_union: '編輯關聯數據集',
union: '關聯'
},
datasource: {
datasource: '數據源',

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

@ -1154,7 +1154,11 @@ export default {
confirm_sync_field: '确认同步',
confirm_sync_field_tips: '同步字段可能会导致已编辑字段发生变更，请确认',
sync_success: '同步成功',
sync_success_1: '同步成功，请对当前数据集重新执行数据同步操作'
sync_success_1: '同步成功，请对当前数据集重新执行数据同步操作',
union_data: '关联数据集',
add_union_table: '添加关联数据集',
edit_union: '编辑关联数据集',
union: '关联'
},
datasource: {
datasource: '数据源',

7
frontend/src/styles/index.scss
View File

@ -340,6 +340,13 @@ div:focus {
margin: 0 2px 0 0;
}
.ds-icon-union{
width: 14px;
height: 14px;
color: #a479e7;
margin: 0 2px 0 0;
}
.showRightPanel {
.el-popper {
position: fixed !important;

346
frontend/src/views/dataset/add/AddUnion.vue
View File

@ -1,262 +1,154 @@
<template>
<div>
<div class="union-container">
<div class="current-node ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-row>
<el-row style="height: 26px;" class="title-text">
<span style="line-height: 26px;font-size: 14px;">
{{ param.tableId?$t('dataset.edit_union'):$t('dataset.add_union_table') }}
</span>
<el-row style="float: right">
<el-button size="mini" @click="cancel">
{{ $t('dataset.cancel') }}
</el-button>
<el-button size="mini" type="primary" @click="save">
{{ $t('dataset.confirm') }}
</el-button>
</el-row>
</el-row>
<el-divider />
<div>
<el-form :inline="true">
<el-form-item class="form-item">
<el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
</el-form-item>
</el-form>
<!--添加第一个数据集按钮-->
<div v-if="dataset.length === 0">
<el-button type="primary" size="mini" @click="selectDs">
{{ $t('chart.select_dataset') }}
</el-button>
</div>
<div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="inner-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'120px'}">
<div class="node-line">
<svg-icon icon-class="right-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMoreExt+'l0,80'" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMoreExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMore" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="inner-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMore" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<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">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<!--数据集关联树型结构-->
<div v-else class="union-container">
<node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" />
<div v-if="dataset.length > 0">
<union-node v-for="(item,index) in dataset[0].childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="dataset[0].childrenDs" />
</div>
</div>
</div>
</div>
<!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</el-row>
</template>
<script>
import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
export default {
name: 'AddUnion',
components: { DatasetGroupSelectorTree, NodeItem, UnionNode },
props: {
param: {
type: Object,
required: true
}
},
data() {
return {
dataset: [{
// mock data，结构比较复杂，需要这个结构多看看...
datasetMock: [{
currentDs: {},
currentDsField: [],
childrenDs: [
{
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: [
{
parentField: {},
currentField: {}
}
]
unionToParent: {
unionType: '',
unionFields: [
{
parentField: {},
currentField: {}
}
]
}
}
],
unionToParent: []
unionToParent: {}
}],
path: 'm0,13 l28,0 m24,0 l28,0',
pathExt: 'm0,13 l28,0 m24,0 l28,0 M14,13 l0,27',
pathMore: 'M14,0 l0,13 l14,0 m24,0 l28,0',
pathMoreExt: 'M14,0 l0,13 l14,0 m24,0 l28,0 M14,13 l0,27'
// union data
dataset: [],
// union item
unionItem: {
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionFields: []
}
},
name: '',
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {}
}
},
mounted() {
},
methods: {
save() {
},
cancel() {
},
selectDs() {
this.selectDsDialog = true
},
firstDs(val) {
this.tempDs = val
},
closeSelectDs() {
this.selectDsDialog = false
this.tempDs = {}
},
confirmSelectDs() {
const ds = JSON.parse(JSON.stringify(this.unionItem))
ds.currentDs = this.tempDs
this.dataset.push(ds)
this.closeSelectDs()
},
deleteNode(index) {
this.dataset.splice(index, 1)
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 12px 0;
}
.union-container{
display: flex;
padding: 10px;
width:100%;
height:400px;
overflow: auto;
}
.ds-node{
width:140px;
height: 26px;
line-height: 26px;
border: #dcdfe6 solid 1px;
min-width: 140px;
color: var(--TextPrimary,#606266);
font-size: 14px;
display: flex;
align-items: center;
padding: 0 6px;
.form-item{
margin-bottom: 10px!important;
}
.node-container{
display: flex;
position: relative;
}
.join-icon{
height: 26px;
font-size: 24px;
line-height: 26px;
position: absolute;
left: 28px;
color:#dcdfe6;
}
.join-svg-container{
width:80px;
}
.node-name{
flex: 1;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
}
.ds-node .node-menu{
visibility: hidden;
}
.ds-node:hover .node-menu{
visibility: visible;
}
.ds-node:hover{
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
.node-line{
display: flex;
position: relative;
}
.join-icon:hover{
cursor: pointer;
color: var(--Main,#2681ff);
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

160
frontend/src/views/dataset/add/union/NodeItem.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div>
<div class="ds-node" @click="nodeClick">
<svg-icon v-if="currentNode.currentDs.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-else-if="currentNode.currentDs.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-else-if="currentNode.currentDs.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
<span class="node-menu" @click.stop>
<el-dropdown trigger="click" size="small" @command="nodeMenuClick">
<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-copy-document" :command="beforeNodeMenuClick('union',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.union') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeNodeMenuClick('edit',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.edit') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeNodeMenuClick('delete',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.delete') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
export default {
name: 'NodeItem',
components: { DatasetGroupSelectorTree },
props: {
currentNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
}
},
data() {
return {
unionItem: {
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionFields: []
}
},
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {},
// 父级数据集
tempParentDs: {}
}
},
methods: {
nodeClick() {
console.log('node click to edit')
},
nodeMenuClick(param) {
console.log(param)
switch (param.type) {
case 'union':
this.unionNode(param)
break
case 'edit':
this.editNode(param)
break
case 'delete':
this.deleteNode(param)
break
}
},
beforeNodeMenuClick(type, item) {
return {
'type': type,
'item': item
}
},
unionNode(param) {
this.tempParentDs = param.item
this.selectDs()
},
editNode(param) {
},
deleteNode(param) {
this.$emit('deleteNode', this.nodeIndex)
},
selectDs() {
this.selectDsDialog = true
},
firstDs(val) {
this.tempDs = val
},
closeSelectDs() {
this.selectDsDialog = false
this.tempDs = {}
},
confirmSelectDs() {
const ds = JSON.parse(JSON.stringify(this.unionItem))
ds.currentDs = this.tempDs
this.tempParentDs.childrenDs.push(ds)
this.closeSelectDs()
}
}
}
</script>
<style scoped>
.ds-node{
width:160px;
height: 26px;
line-height: 26px;
border: #dcdfe6 solid 1px;
min-width: 160px;
color: var(--TextPrimary,#606266);
font-size: 14px;
display: flex;
align-items: center;
padding: 0 6px;
}
.node-name{
flex: 1;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
padding: 0 2px;
}
.ds-node .node-menu{
visibility: hidden;
}
.ds-node:hover .node-menu{
visibility: visible;
}
.ds-node:hover{
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
</style>

81
frontend/src/views/dataset/add/union/UnionNode.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="inner-join" class="join-icon" @click="unionConfig" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathExt" />
</svg>
</div>
<node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" />
<!--递归调用自身-->
<div>
<union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" />
</div>
</div>
</template>
<script>
import NodeItem from '@/views/dataset/add/union/NodeItem'
export default {
name: 'UnionNode',
components: {
NodeItem
},
props: {
childrenList: {
type: Array,
required: true
},
childrenNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
}
},
data() {
return {
path: 'm0,13 l28,0 m24,0 l28,0',
pathExt: 'm0,13 l28,0 m24,0 l28,0 M14,13 l0,27',
pathMore: 'M14,0 l0,13 l14,0 m24,0 l28,0',
pathMoreExt: 'M14,0 l0,13 l14,0 m24,0 l28,0 M14,13 l0,27'
}
},
methods: {
unionConfig() {
console.log('union config')
},
deleteNode(index) {
this.childrenList.splice(index, 1)
}
}
}
</script>
<style scoped>
.node-container{
display: flex;
position: relative;
}
.join-icon{
height: 26px;
font-size: 24px;
line-height: 26px;
position: absolute;
left: 28px;
color:#dcdfe6;
}
.join-svg-container{
width:80px;
}
.node-line{
display: flex;
position: relative;
}
.join-icon:hover{
cursor: pointer;
color: var(--Main,#2681ff);
}
</style>

31
frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
View File

@ -162,16 +162,6 @@ export default {
this.unionDataChange()
},
'table': function() {
// if (this.table && this.table.sceneId) {
// post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(response => {
// this.currGroup = response.data
//
// this.$nextTick(function() {
// this.sceneMode = true
// this.tableTree()
// })
// })
// }
this.treeNode(this.groupForm)
},
search(val) {
@ -217,14 +207,6 @@ export default {
}
},
// tree(group) {
// this.dsLoading = true
// post('/dataset/group/tree', group, false).then(response => {
// this.data = response.data
// this.dsLoading = false
// })
// },
treeNode(group) {
post('/dataset/group/treeNode', group).then(res => {
this.data = res.data
@ -402,13 +384,12 @@ export default {
searchTree(val) {
const queryCondition = {
// withExtend: 'parent',
// modelType: 'dataset',
name: val
name: val,
sort: 'type asc,name asc,create_time desc',
mode: this.mode < 0 ? null : this.mode,
type: this.type,
typeFilter: this.customType ? this.customType : null
}
// authModel(queryCondition).then(res => {
// this.data = this.buildTree(res.data)
// })
post('/dataset/table/search', queryCondition).then(res => {
this.data = this.buildTree(res.data)
})
@ -422,8 +403,6 @@ export default {
const roots = []
arrs.forEach(el => {
// 判断根节点 ###
// el.type = el.modelInnerType
// el.isLeaf = el.leaf
if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
roots.push(el)
return

10
frontend/src/views/dataset/group/Group.vue
View File

@ -86,10 +86,10 @@
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
<!-- 此处菜单暂时隐藏，后续功能完整后再放开-->
<!-- <el-dropdown-item :command="beforeClickAddData('custom1',data)">-->
<!-- <svg-icon icon-class="ds-custom" class="ds-icon-custom" />-->
<!-- {{ $t('dataset.custom_data') }}-->
<!-- </el-dropdown-item>-->
<el-dropdown-item :command="beforeClickAddData('union',data)">
<svg-icon icon-class="ds-union" class="ds-icon-union" />
{{ $t('dataset.union_data') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
@ -526,7 +526,7 @@ export default {
case 'custom':
this.addData('AddCustom')
break
case 'custom1':
case 'union':
this.addData('AddUnion')
break
}