Skip to content

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

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

上级 7ad24c38
显示空白字符变更
内嵌 并排
正在显示 包含 112 行增加 和 18 行删除
frontend/src/views/dataset/add/AddUnion.vue
浏览文件 @ d0561e86
......@@ -28,15 +28,15 @@
</div>
<!--数据集关联树型结构-->
<div v-else class="union-container">
<node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" />
<node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" @notifyParent="calc" />
<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" />
<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" />
</div>
</div>
</div>
<!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
<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>
......@@ -72,17 +72,19 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionType: '', // left join,right join,inner join
unionFields: [
{
parentField: {},
currentField: {}
}
]
}
},
allChildCount: 0
}
],
unionToParent: {}
unionToParent: {},
allChildCount: 0
}],
// union data
dataset: [],
......@@ -94,7 +96,8 @@ export default {
unionToParent: {
unionType: '',
unionFields: []
}
},
allChildCount: 0
},
name: '',
customType: ['db', 'sql', 'excel'],
......@@ -127,9 +130,26 @@ export default {
ds.currentDs = this.tempDs
this.dataset.push(ds)
this.closeSelectDs()
this.calc('union')
},
deleteNode(index) {
this.dataset.splice(index, 1)
this.calc('delete')
},
calc(param) {
if (param.type === 'union') {
if (param.grandParentAdd) {
this.dataset[0] && this.dataset[0].allChildCount++
}
} else if (param.type === 'delete') {
if (param.grandParentSub) {
if (param.subCount > 1) {
this.dataset[0] && (this.dataset[0].allChildCount -= param.subCount)
} else {
this.dataset[0] && this.dataset[0].allChildCount--
}
}
}
}
}
}
......
frontend/src/views/dataset/add/union/NodeItem.vue
浏览文件 @ d0561e86
......@@ -28,7 +28,7 @@
</div>
<!--选择数据集-->
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
<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>
......@@ -62,7 +62,8 @@ export default {
unionToParent: {
unionType: '',
unionFields: []
}
},
allChildCount: 0
},
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
......@@ -77,7 +78,6 @@ export default {
console.log('node click to edit')
},
nodeMenuClick(param) {
console.log(param)
switch (param.type) {
case 'union':
this.unionNode(param)
......@@ -105,11 +105,13 @@ export default {
},
deleteNode(param) {
this.$emit('deleteNode', this.nodeIndex)
this.notifyFirstParent('delete')
},
selectDs() {
this.selectDsDialog = true
},
// 弹框中选择数据集
firstDs(val) {
this.tempDs = val
},
......@@ -122,6 +124,10 @@ export default {
ds.currentDs = this.tempDs
this.tempParentDs.childrenDs.push(ds)
this.closeSelectDs()
this.notifyFirstParent('union')
},
notifyFirstParent(type) {
this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
}
}
}
......
frontend/src/views/dataset/add/union/UnionNode.vue
浏览文件 @ d0561e86
<template>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="children-node node-container" :style="{height:nodeHeight}">
<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" />
<path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
</svg>
</div>
<node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" />
<!--递归调用自身-->
<node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" @notifyParent="calc" />
<!--递归调用自身，完成树状结构-->
<div>
<union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" />
<union-node v-for="(item,index) in childrenNode.childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="childrenNode.childrenDs" @notifyParent="calc" />
</div>
</div>
</template>
......@@ -38,17 +38,85 @@ export default {
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'
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',
nodeHeight: '40px',
lineLength: '',
pathParam: ''
}
},
watch: {
'childrenNode.allChildCount': function() {
this.calcNodeHeight()
this.nodeLineHeight()
},
nodeIndex: function() {
this.calcNodeHeight()
this.nodeLineHeight()
},
childrenList: function() {
this.calcNodeHeight()
this.nodeLineHeight()
}
},
mounted() {
this.calcNodeHeight()
this.nodeLineHeight()
},
methods: {
unionConfig() {
console.log('union config')
},
deleteNode(index) {
this.childrenList.splice(index, 1)
},
nodeLineHeight() {
if (this.childrenList.length === 1 && this.nodeIndex === 0) {
this.pathParam = this.path
this.lineLength = ''
} else {
if (this.nodeIndex === 0) {
this.pathParam = this.pathExt
this.lineLength = this.childrenNode.allChildCount < 2 ? '' : ('l0,' + ((this.childrenNode.allChildCount - 1) * 40))
} else if (this.nodeIndex === (this.childrenList.length - 1)) {
this.pathParam = this.pathMore
this.lineLength = ''
} else {
this.pathParam = this.pathMoreExt
this.lineLength = this.childrenNode.allChildCount < 2 ? '' : ('l0,' + ((this.childrenNode.allChildCount - 1) * 40))
}
}
},
calcNodeHeight() {
this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
},
calc(param) {
this.notifyFirstParent(param)
},
notifyFirstParent(param) {
if (param.type === 'union') {
if (param.grandParentAdd) {
this.childrenNode.allChildCount++
}
} else if (param.type === 'delete') {
if (param.grandParentSub) {
if (param.subCount > 1) {
this.childrenNode.allChildCount -= param.subCount
} else {
this.childrenNode.allChildCount--
}
}
}
const p = JSON.parse(JSON.stringify(param))
// 传递到父级
p.grandParentAdd = this.childrenNode.allChildCount > 1
if (param.subCount > 1) {
p.grandParentSub = true
} else {
p.grandParentSub = this.childrenNode.allChildCount !== 0
}
this.$emit('notifyParent', p)
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论