feat(数据集): 关联数据集
This commit is contained in:
junjie
parent
7ad24c38c3
commit
d0561e8699
@ -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--
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user