center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
junjie 2021-11-25 11:33:47 +08:00
parent f9a8518975
commit 3c78b3bec2
9 changed files with 198 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1157,7 +1157,9 @@ export default {
union_data: 'Union Dataset',
add_union_table: 'Add Union Dataset',
edit_union: 'Edit Union Dataset',
union: 'Union'
union: 'Union',
edit_union_relation: 'Edit Union Relation',
add_union_relation: 'Add Union Relation'
},
datasource: {
datasource: 'Data Source',

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

@ -1158,7 +1158,9 @@ export default {
union_data: '關聯數據集',
add_union_table: '添加關聯數據集',
edit_union: '編輯關聯數據集',
union: '關聯'
union: '關聯',
edit_union_relation: '編輯關聯關系',
add_union_relation: '新建關聯關系'
},
datasource: {
datasource: '數據源',

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

@ -1160,7 +1160,9 @@ export default {
union_data: '关联数据集',
add_union_table: '添加关联数据集',
edit_union: '编辑关联数据集',
union: '关联'
union: '关联',
edit_union_relation: '编辑关联关系',
add_union_relation: '新建关联关系'
},
datasource: {
datasource: '数据源',

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

@ -28,9 +28,23 @@
</div>
<!--数据集关联树型结构-->
<div v-else class="union-container">
<node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" @notifyParent="calc" />
<node-item
:current-node="dataset[0]"
:node-index="0"
@deleteNode="deleteNode"
@notifyParent="calc"
@editUnion="unionConfig"
/>
<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" @notifyParent="calc" />
<union-node
v-for="(item,index) in dataset[0].childrenDs"
:key="index"
:node-index="index"
:children-node="item"
:children-list="dataset[0].childrenDs"
:parent-node="dataset[0]"
@notifyParent="calc"
/>
</div>
</div>
</div>
@ -40,10 +54,18 @@
<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>
<el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
<!--编辑关联关系-->
<el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
<union-edit :union-param="unionParam" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</el-row>
</template>
@ -51,9 +73,10 @@
import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default {
name: 'AddUnion',
components: { DatasetGroupSelectorTree, NodeItem, UnionNode },
components: { UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
props: {
param: {
type: Object,
@ -103,7 +126,9 @@ export default {
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {}
tempDs: {},
editUnion: false,
unionParam: {}
}
},
mounted() {
@ -154,6 +179,22 @@ export default {
}
}
}
},
unionConfig(param) {
this.unionParam = param
this.editUnion = true
},
closeEditUnion() {
this.editUnion = false
// 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
if (this.unionParam.type === 'add') {
this.dataset[0].childrenDs.pop()
this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
}
},
confirmEditUnion() {
this.editUnion = false
}
}
}

15
frontend/src/views/dataset/add/union/NodeItem.vue
View File

@ -32,7 +32,7 @@
<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>
<el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</div>
@ -125,7 +125,17 @@ export default {
this.tempParentDs.childrenDs.push(ds)
this.closeSelectDs()
this.notifyFirstParent('union')
// 构建新建关联关系传递的参数
const param = {
type: 'add',
nodeIndex: this.nodeIndex,
node: ds,
parent: this.tempParentDs
}
this.$emit('editUnion', param)
},
// 增加与删除事件向父级传递
notifyFirstParent(type) {
this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
}
@ -163,4 +173,7 @@ export default {
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

32
frontend/src/views/dataset/add/union/UnionEdit.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div v-if="unionParam.type" style="height:400px;">
<p>{{ unionParam.node.currentDs.name }}</p>
<p>{{ unionParam.parent.currentDs.name }}</p>
</div>
</template>
<script>
export default {
name: 'UnionEdit',
props: {
unionParam: {
type: Object,
required: true
}
},
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
</style>

23
frontend/src/views/dataset/add/union/UnionFieldEdit.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div>123</div>
</template>
<script>
export default {
name: 'UnionFieldEdit',
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
</style>

80
frontend/src/views/dataset/add/union/UnionNode.vue
View File

@ -1,29 +1,54 @@
<template>
<div class="children-node node-container" :style="{height:nodeHeight}">
<div class="node-line">
<svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionConfig" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionConfig" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionConfig" />
<svg-icon v-else icon-class="no-join" class="join-icon" @click="unionConfig" />
<svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionEdit" />
<svg-icon v-else icon-class="no-join" class="join-icon" @click="unionEdit" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
</svg>
</div>
<node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" @notifyParent="calc" />
<node-item
:current-node="childrenNode"
:node-index="nodeIndex"
@deleteNode="deleteNode"
@notifyParent="calc"
@editUnion="unionConfig"
/>
<!--递归调用自身，完成树状结构-->
<div>
<union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" @notifyParent="calc" />
<union-node
v-for="(item,index) in childrenNode.childrenDs"
:key="index"
:node-index="index"
:children-node="item"
:children-list="childrenNode.childrenDs"
:parent-node="childrenNode"
@notifyParent="calc"
/>
</div>
<!--编辑关联关系-->
<el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
<union-edit :union-param="unionParam" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import NodeItem from '@/views/dataset/add/union/NodeItem'
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
export default {
name: 'UnionNode',
components: {
UnionEdit,
NodeItem
},
props: {
@ -35,6 +60,10 @@ export default {
type: Object,
required: true
},
parentNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
@ -48,7 +77,9 @@ export default {
pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,13 l0,27',
nodeHeight: '40px',
lineLength: '',
pathParam: ''
pathParam: '',
editUnion: false,
unionParam: {}
}
},
watch: {
@ -70,12 +101,23 @@ export default {
this.nodeLineHeight()
},
methods: {
unionConfig() {
console.log('union config')
unionEdit() {
const param = {
type: 'edit',
nodeIndex: this.nodeIndex,
node: this.childrenNode,
parent: this.parentNode
}
this.unionConfig(param)
},
unionConfig(param) {
this.unionParam = param
this.editUnion = true
},
deleteNode(index) {
this.childrenList.splice(index, 1)
},
// 计算连接线长度
nodeLineHeight() {
if (this.childrenList.length === 1 && this.nodeIndex === 0) {
this.pathParam = this.path
@ -93,12 +135,14 @@ export default {
}
}
},
// 计算行高
calcNodeHeight() {
this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
},
calc(param) {
this.notifyFirstParent(param)
},
// 判断每个node的状态等，并继续向父级传递
notifyFirstParent(param) {
if (param.type === 'union') {
if (param.grandParentAdd) {
@ -113,8 +157,9 @@ export default {
}
}
}
const p = JSON.parse(JSON.stringify(param))
// 传递到父级
const p = JSON.parse(JSON.stringify(param))
p.grandParentAdd = this.childrenNode.allChildCount > 1
if (param.subCount > 1) {
p.grandParentSub = true
@ -122,6 +167,18 @@ export default {
p.grandParentSub = this.childrenNode.allChildCount !== 0
}
this.$emit('notifyParent', p)
},
closeEditUnion() {
this.editUnion = false
if (this.unionParam.type === 'add') {
this.childrenNode.childrenDs.pop()
// 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
this.notifyFirstParent({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
}
},
confirmEditUnion() {
this.editUnion = false
}
}
}
@ -151,4 +208,7 @@ export default {
cursor: pointer;
color: var(--Main,#2681ff);
}
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

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

@ -85,11 +85,10 @@
<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-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>