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-29 14:50:45 +08:00
parent 79349604fe
commit 199af4407c
8 changed files with 253 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1160,7 +1160,8 @@ export default {
union: 'Union',
edit_union_relation: 'Edit Union Relation',
add_union_relation: 'Add Union Relation',
field_select: 'Select Field'
field_select: 'Select Field',
add_union_field: 'Add Union Field'
},
datasource: {
datasource: 'Data Source',

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

@ -1161,7 +1161,8 @@ export default {
union: '關聯',
edit_union_relation: '編輯關聯關系',
add_union_relation: '新建關聯關系',
field_select: '字段選擇'
field_select: '字段選擇',
add_union_field: '添加關聯字段'
},
datasource: {
datasource: '數據源',

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

@ -1163,7 +1163,8 @@ export default {
union: '关联',
edit_union_relation: '编辑关联关系',
add_union_relation: '新建关联关系',
field_select: '字段选择'
field_select: '字段选择',
add_union_field: '添加关联字段'
},
datasource: {
datasource: '数据源',

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

@ -95,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: {},
@ -117,7 +117,7 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionType: 'left',
unionFields: []
},
allChildCount: 0

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

@ -60,7 +60,7 @@ export default {
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionType: 'left',
unionFields: []
},
allChildCount: 0

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

@ -3,24 +3,26 @@
<div class="field-style">
<div class="fields">
<p>{{ unionParam.parent.currentDs.name }}</p>
<union-field-list :field-list="parentField" :union-param="unionParam" />
<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" :union-param="unionParam" />
<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: { UnionFieldList },
components: { UnionItemEdit, UnionFieldList },
props: {
unionParam: {
type: Object,
@ -52,6 +54,13 @@ export default {
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
}
}
}

12
frontend/src/views/dataset/add/union/UnionFieldList.vue
View File

@ -52,7 +52,7 @@ export default {
type: Array,
required: true
},
unionParam: {
node: {
type: Object,
required: true
}
@ -84,17 +84,23 @@ export default {
},
methods: {
init() {
this.checkedFields = this.unionParam.parent.currentDsField
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)
}
}
}
@ -116,7 +122,7 @@ span{
padding: 0 0 0 10px;
}
.field-block-body{
height: 200px;
height: 210px;
overflow-y: auto;
}
.field-origin-style{

223
frontend/src/views/dataset/add/union/UnionItemEdit.vue Normal file
View 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>