forked from github/dataease
Merge pull request #1311 from dataease/pr@dev@feat_union_dataset
feat(数据集): 关联数据集
This commit is contained in:
XiaJunjie2020
GitHub
commit
b44f152cab
@ -1157,7 +1157,11 @@ 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',
|
||||
field_select: 'Select Field',
|
||||
add_union_field: 'Add Union Field'
|
||||
},
|
||||
datasource: {
|
||||
datasource: 'Data Source',
|
||||
|
||||
@ -1158,7 +1158,11 @@ export default {
|
||||
union_data: '關聯數據集',
|
||||
add_union_table: '添加關聯數據集',
|
||||
edit_union: '編輯關聯數據集',
|
||||
union: '關聯'
|
||||
union: '關聯',
|
||||
edit_union_relation: '編輯關聯關系',
|
||||
add_union_relation: '新建關聯關系',
|
||||
field_select: '字段選擇',
|
||||
add_union_field: '添加關聯字段'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '數據源',
|
||||
|
||||
@ -1160,7 +1160,11 @@ export default {
|
||||
union_data: '关联数据集',
|
||||
add_union_table: '添加关联数据集',
|
||||
edit_union: '编辑关联数据集',
|
||||
union: '关联'
|
||||
union: '关联',
|
||||
edit_union_relation: '编辑关联关系',
|
||||
add_union_relation: '新建关联关系',
|
||||
field_select: '字段选择',
|
||||
add_union_field: '添加关联字段'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '数据源',
|
||||
|
||||
@ -28,22 +28,44 @@
|
||||
</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>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" 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>
|
||||
<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-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
|
||||
<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,
|
||||
@ -72,7 +95,7 @@ export default {
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: '', // left join,right join,inner join
|
||||
unionType: 'left', // left join,right join,inner join
|
||||
unionFields: [
|
||||
{
|
||||
parentField: {},
|
||||
@ -94,7 +117,7 @@ export default {
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: '',
|
||||
unionType: 'left',
|
||||
unionFields: []
|
||||
},
|
||||
allChildCount: 0
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
</div>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" 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>
|
||||
<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>
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: '',
|
||||
unionType: 'left',
|
||||
unionFields: []
|
||||
},
|
||||
allChildCount: 0
|
||||
@ -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>
|
||||
|
||||
88
frontend/src/views/dataset/add/union/UnionEdit.vue
Normal file
88
frontend/src/views/dataset/add/union/UnionEdit.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div v-if="unionParam.type" style="height:600px;">
|
||||
<div class="field-style">
|
||||
<div class="fields">
|
||||
<p>{{ unionParam.parent.currentDs.name }}</p>
|
||||
<union-field-list :field-list="parentField" :node="unionParam.parent" @checkedFields="changeParentFields" />
|
||||
</div>
|
||||
<div class="fields">
|
||||
<p>{{ unionParam.node.currentDs.name }}</p>
|
||||
<union-field-list :field-list="nodeField" :node="unionParam.node" @checkedFields="changeNodeFields" />
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
<union-item-edit :parent-field-list="parentField" :node-field-list="nodeField" :union-param="unionParam" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
|
||||
import UnionItemEdit from '@/views/dataset/add/union/UnionItemEdit'
|
||||
|
||||
export default {
|
||||
name: 'UnionEdit',
|
||||
components: { UnionItemEdit, UnionFieldList },
|
||||
props: {
|
||||
unionParam: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parentField: [],
|
||||
nodeField: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'unionParam': function() {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getParentFieldList()
|
||||
this.getNodeFieldList()
|
||||
},
|
||||
methods: {
|
||||
getParentFieldList() {
|
||||
post('/dataset/field/list/' + this.unionParam.parent.currentDs.id, null, true).then(response => {
|
||||
this.parentField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
})
|
||||
},
|
||||
getNodeFieldList() {
|
||||
post('/dataset/field/list/' + this.unionParam.node.currentDs.id, null, true).then(response => {
|
||||
this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
})
|
||||
},
|
||||
|
||||
changeParentFields(val) {
|
||||
this.unionParam.parent.currentDsField = val
|
||||
},
|
||||
changeNodeFields(val) {
|
||||
this.unionParam.node.currentDsField = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-style{
|
||||
height: 300px;
|
||||
}
|
||||
.fields{
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 0 6px;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
margin: 6px 0!important;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
</style>
|
||||
23
frontend/src/views/dataset/add/union/UnionFieldEdit.vue
Normal file
23
frontend/src/views/dataset/add/union/UnionFieldEdit.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionFieldEdit',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
176
frontend/src/views/dataset/add/union/UnionFieldList.vue
Normal file
176
frontend/src/views/dataset/add/union/UnionFieldList.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field-block-style">
|
||||
<div class="field-block-option">
|
||||
<span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
|
||||
<el-input
|
||||
v-model="search"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
class="option-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-block-head">
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
|
||||
<span class="field-style">{{ $t('dataset.field_name') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field-block-body">
|
||||
<el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
|
||||
<div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
|
||||
<el-checkbox :label="field.id" class="check-style"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style" :title="field.originName">
|
||||
<span>
|
||||
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
<span class="origin-style">
|
||||
{{ field.originName }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="field-style" :title="field.name">{{ field.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionFieldList',
|
||||
props: {
|
||||
fieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
checkedFields: [],
|
||||
search: '',
|
||||
fieldSearchList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fieldList: function() {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
this.init()
|
||||
},
|
||||
search: function(val) {
|
||||
if (val && val !== '') {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
|
||||
} else {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.checkedFields = this.node.currentDsField
|
||||
this.handleCheckedCitiesChange(this.checkedFields)
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
|
||||
this.isIndeterminate = false
|
||||
this.returnCheckedFields()
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.fieldList.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
|
||||
this.returnCheckedFields()
|
||||
},
|
||||
|
||||
returnCheckedFields() {
|
||||
this.$emit('checkedFields', this.checkedFields)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.field-block-style{
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
.field-block-head{
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.field-block-body{
|
||||
height: 210px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.field-origin-style{
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-style{
|
||||
margin-left: 10px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
}
|
||||
.label-style{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-item-style{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top:1px solid #dcdfe6;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.check-style{
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.origin-style{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.field-block-option{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.option-field{
|
||||
color: #C0C4CC;
|
||||
}
|
||||
.option-input{
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
223
frontend/src/views/dataset/add/union/UnionItemEdit.vue
Normal file
223
frontend/src/views/dataset/add/union/UnionItemEdit.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="union-header">
|
||||
{{ $t('dataset.join_view') }}
|
||||
<div class="union-header-operator">
|
||||
<svg-icon v-if="unionParam.node.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" />
|
||||
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" />
|
||||
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" />
|
||||
<svg-icon v-else icon-class="no-join" class="join-icon" />
|
||||
|
||||
<el-select v-model="unionParam.node.unionToParent.unionType" size="mini" class="union-selector">
|
||||
<el-option v-for="item in unionOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<el-button size="mini" icon="el-icon-circle-plus-outline" class="union-add" @click="addUnion">{{ $t('dataset.add_union_field') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="union-body">
|
||||
<div class="union-body-header">
|
||||
<span class="column" :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</span>
|
||||
<span class="column" :title="unionParam.node.currentDs.name">{{ unionParam.node.currentDs.name }}</span>
|
||||
<span class="column-last">{{ $t('dataset.operator') }}</span>
|
||||
</div>
|
||||
<div class="union-body-container">
|
||||
<div v-for="(field,index) in unionParam.node.unionToParent.unionFields" :key="index" class="union-body-item">
|
||||
<!--左侧父级field-->
|
||||
<span class="column">
|
||||
<el-select v-model="field.parentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
|
||||
<el-option
|
||||
v-for="item in parentFieldList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
<!--右侧孩子field-->
|
||||
<span class="column">
|
||||
<el-select v-model="field.currentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
|
||||
<el-option
|
||||
v-for="item in nodeFieldList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
|
||||
<span class="column-last">
|
||||
<el-button :disabled="unionParam.node.unionToParent.unionFields && unionParam.node.unionToParent.unionFields.length === 1" icon="el-icon-delete" circle size="mini" @click="removeUnionItem(index)" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionItemEdit',
|
||||
props: {
|
||||
parentFieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
nodeFieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
unionParam: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unionOptions: [
|
||||
{ label: this.$t('dataset.left_join'), value: 'left' },
|
||||
{ label: this.$t('dataset.right_join'), value: 'right' },
|
||||
{ label: this.$t('dataset.inner_join'), value: 'inner' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.unionParam.node.unionToParent.unionFields.length < 1) {
|
||||
const item = {
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
this.unionParam.node.unionToParent.unionFields.push(item)
|
||||
}
|
||||
},
|
||||
addUnion() {
|
||||
const item = {
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
this.unionParam.node.unionToParent.unionFields.push(item)
|
||||
},
|
||||
removeUnionItem(index) {
|
||||
this.unionParam.node.unionToParent.unionFields.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.container{
|
||||
height: 275px;
|
||||
}
|
||||
.union-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
}
|
||||
.union-header-operator{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
.union-selector{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.union-add{
|
||||
margin-left: 6px;
|
||||
}
|
||||
.union-body{
|
||||
height: 240px;
|
||||
}
|
||||
.union-body-header{
|
||||
height: 30px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
.union-body-header .column{
|
||||
width: 240px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.union-body-header .column-last{
|
||||
width: 40px;
|
||||
}
|
||||
.union-body-container{
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.select-field{
|
||||
width: 200px;
|
||||
display: inline-block;
|
||||
}
|
||||
.union-body-item{
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
.union-body-item .column{
|
||||
width: 240px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.union-body-item .column-last{
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
@ -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-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" 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>
|
||||
|
||||
@ -93,11 +93,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>
|
||||
@ -131,10 +130,11 @@
|
||||
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
<span>
|
||||
<svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
|
||||
<svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
|
||||
<svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
|
||||
<svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
|
||||
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
|
||||
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
|
||||
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
|
||||
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
|
||||
<svg-icon v-if="data.type === 'union'" icon-class="ds-union" class="ds-icon-union" />
|
||||
</span>
|
||||
<span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user