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

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-11-23 17:39:06 +08:00
commit b9742acbb7
12 changed files with 508 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/icons/svg/ds-union.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1637288020248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3387" width="200" height="200"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" p-id="3388"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" p-id="3389"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

1
frontend/src/icons/svg/no-join.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1637659782078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4169" width="200" height="200"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z" p-id="4170"></path><path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" p-id="4171"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -653,9 +653,9 @@ export default {
process: 'Speed of progress',
add_chart: 'Add Chart',
db_data: 'Database Dataset',
sql_data: 'SQL data set',
excel_data: 'Excel data set',
custom_data: 'Custom data set',
sql_data: 'SQL Dataset',
excel_data: 'Excel Dataset',
custom_data: 'Custom Dataset',
pls_slc_tbl_left: 'Please select the chart from the left',
add_db_table: 'Add Database Dataset',
pls_slc_data_source: 'Please select data source',
@ -994,9 +994,9 @@ export default {
process: 'Speed of progress',
update: 'update',
db_data: 'Database Dataset',
sql_data: 'SQL data set',
excel_data: 'Excel data set',
custom_data: 'Custom data set',
sql_data: 'SQL Dataset',
excel_data: 'Excel Dataset',
custom_data: 'Custom Dataset',
pls_slc_tbl_left: 'Please select the chart from the left',
add_db_table: 'Add Database Dataset',
pls_slc_data_source: 'Please select data source',
@ -1150,7 +1150,11 @@ export default {
confirm_sync_field: 'Confirm Sync',
confirm_sync_field_tips: 'Sync field maybe change edit field，please confirm',
sync_success: 'Success',
sync_success_1: 'Success，please sync data again'
sync_success_1: 'Success，please sync data again',
union_data: 'Union Dataset',
add_union_table: 'Add Union Dataset',
edit_union: 'Edit Union Dataset',
union: 'Union'
},
datasource: {
datasource: 'Data Source',

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

@ -1151,7 +1151,11 @@ export default {
confirm_sync_field: '確認同步',
confirm_sync_field_tips: '同步字段可能會導致已編輯字段發生變更，請確認',
sync_success: '同步成功',
sync_success_1: '同步成功，請對當前數據集重新執行數據同步操作'
sync_success_1: '同步成功，請對當前數據集重新執行數據同步操作',
union_data: '關聯數據集',
add_union_table: '添加關聯數據集',
edit_union: '編輯關聯數據集',
union: '關聯'
},
datasource: {
datasource: '數據源',

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

@ -1154,7 +1154,11 @@ export default {
confirm_sync_field: '确认同步',
confirm_sync_field_tips: '同步字段可能会导致已编辑字段发生变更，请确认',
sync_success: '同步成功',
sync_success_1: '同步成功，请对当前数据集重新执行数据同步操作'
sync_success_1: '同步成功，请对当前数据集重新执行数据同步操作',
union_data: '关联数据集',
add_union_table: '添加关联数据集',
edit_union: '编辑关联数据集',
union: '关联'
},
datasource: {
datasource: '数据源',

7
frontend/src/styles/index.scss
View File

@ -340,6 +340,13 @@ div:focus {
margin: 0 2px 0 0;
}
.ds-icon-union{
width: 14px;
height: 14px;
color: #a479e7;
margin: 0 2px 0 0;
}
.showRightPanel {
.el-popper {
position: fixed !important;

4
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -993,6 +993,7 @@ export default {
view.type.startsWith('gauge') ||
view.type === 'treemap' ||
view.type === 'liquid' ||
view.type === 'word-cloud' ||
view.type === 'waterfall') {
if (view.yaxis.length > 1) {
view.yaxis.splice(1, view.yaxis.length)
@ -1001,6 +1002,9 @@ export default {
if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true
}
if (view.type === 'line' && trigger === 'chart') {
view.customAttr.size.lineArea = false
}
if (view.type === 'treemap' && trigger === 'chart') {
view.customAttr.label.show = true
}

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

@ -1,262 +1,178 @@
<template>
<div>
<div class="union-container">
<div class="current-node ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-row>
<el-row style="height: 26px;" class="title-text">
<span style="line-height: 26px;font-size: 14px;">
{{ param.tableId?$t('dataset.edit_union'):$t('dataset.add_union_table') }}
</span>
<el-row style="float: right">
<el-button size="mini" @click="cancel">
{{ $t('dataset.cancel') }}
</el-button>
<el-button size="mini" type="primary" @click="save">
{{ $t('dataset.confirm') }}
</el-button>
</el-row>
</el-row>
<el-divider />
<div>
<el-form :inline="true">
<el-form-item class="form-item">
<el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
</el-form-item>
</el-form>
<!--添加第一个数据集按钮-->
<div v-if="dataset.length === 0">
<el-button type="primary" size="mini" @click="selectDs">
{{ $t('chart.select_dataset') }}
</el-button>
</div>
<div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="inner-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'120px'}">
<div class="node-line">
<svg-icon icon-class="right-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMoreExt+'l0,80'" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMoreExt" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="left-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMore" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
</div>
</div>
</div>
<div class="children-node node-container" :style="{height:'40px'}">
<div class="node-line">
<svg-icon icon-class="inner-join" class="join-icon" />
<svg class="join-svg-container">
<path fill="none" stroke="#dcdfe6" :d="pathMore" />
</svg>
</div>
<div class="ds-node">
<svg-icon icon-class="ds-db" class="ds-icon-db" />
<span class="node-name">123</span>
<span class="node-menu">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline">
<span style="font-size: 12px;">edit</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<!--数据集关联树型结构-->
<div v-else class="union-container">
<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" @notifyParent="calc" />
</div>
</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>
<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>
</div>
</el-dialog>
</el-row>
</template>
<script>
import UnionNode from '@/views/dataset/add/union/UnionNode'
import NodeItem from '@/views/dataset/add/union/NodeItem'
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
export default {
name: 'AddUnion',
components: { DatasetGroupSelectorTree, NodeItem, UnionNode },
props: {
param: {
type: Object,
required: true
}
},
data() {
return {
dataset: [{
// mock data，结构比较复杂，需要这个结构多看看...
datasetMock: [{
currentDs: {},
currentDsField: [],
childrenDs: [
{
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: [
{
parentField: {},
currentField: {}
}
]
unionToParent: {
unionType: '', // left join,right join,inner join
unionFields: [
{
parentField: {},
currentField: {}
}
]
},
allChildCount: 0
}
],
unionToParent: []
unionToParent: {},
allChildCount: 0
}],
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'
// union data
dataset: [],
// union item
unionItem: {
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionFields: []
},
allChildCount: 0
},
name: '',
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {}
}
},
mounted() {
},
methods: {
save() {
},
cancel() {
if (this.param.tableId) {
this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table })
} else {
this.$emit('switchComponent', { name: '' })
}
},
selectDs() {
this.selectDsDialog = true
},
firstDs(val) {
this.tempDs = val
},
closeSelectDs() {
this.selectDsDialog = false
this.tempDs = {}
},
confirmSelectDs() {
const ds = JSON.parse(JSON.stringify(this.unionItem))
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--
}
}
}
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 12px 0;
}
.union-container{
display: flex;
padding: 10px;
width:100%;
height:400px;
overflow: auto;
}
.ds-node{
width:140px;
height: 26px;
line-height: 26px;
border: #dcdfe6 solid 1px;
min-width: 140px;
color: var(--TextPrimary,#606266);
font-size: 14px;
display: flex;
align-items: center;
padding: 0 6px;
.form-item{
margin-bottom: 10px!important;
}
.node-container{
display: flex;
position: relative;
}
.join-icon{
height: 26px;
font-size: 24px;
line-height: 26px;
position: absolute;
left: 28px;
color:#dcdfe6;
}
.join-svg-container{
width:80px;
}
.node-name{
flex: 1;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
}
.ds-node .node-menu{
visibility: hidden;
}
.ds-node:hover .node-menu{
visibility: visible;
}
.ds-node:hover{
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
.node-line{
display: flex;
position: relative;
}
.join-icon:hover{
cursor: pointer;
color: var(--Main,#2681ff);
.dialog-css >>> .el-dialog__body {
padding: 0 20px;
}
</style>

166
frontend/src/views/dataset/add/union/NodeItem.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<div>
<div class="ds-node" @click="nodeClick">
<svg-icon v-if="currentNode.currentDs.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-else-if="currentNode.currentDs.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
<svg-icon v-else-if="currentNode.currentDs.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
<span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
<span class="node-menu" @click.stop>
<el-dropdown trigger="click" size="small" @command="nodeMenuClick">
<span class="el-dropdown-link">
<el-button icon="el-icon-more" type="text" size="small" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-copy-document" :command="beforeNodeMenuClick('union',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.union') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeNodeMenuClick('edit',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.edit') }}</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeNodeMenuClick('delete',currentNode)">
<span style="font-size: 12px;">{{ $t('dataset.delete') }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</div>
<!--选择数据集-->
<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>
<el-button type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
export default {
name: 'NodeItem',
components: { DatasetGroupSelectorTree },
props: {
currentNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
}
},
data() {
return {
unionItem: {
currentDs: {},
currentDsField: [],
childrenDs: [],
unionToParent: {
unionType: '',
unionFields: []
},
allChildCount: 0
},
customType: ['db', 'sql', 'excel'],
selectDsDialog: false,
// 弹框临时选中的数据集
tempDs: {},
// 父级数据集
tempParentDs: {}
}
},
methods: {
nodeClick() {
console.log('node click to edit')
},
nodeMenuClick(param) {
switch (param.type) {
case 'union':
this.unionNode(param)
break
case 'edit':
this.editNode(param)
break
case 'delete':
this.deleteNode(param)
break
}
},
beforeNodeMenuClick(type, item) {
return {
'type': type,
'item': item
}
},
unionNode(param) {
this.tempParentDs = param.item
this.selectDs()
},
editNode(param) {
},
deleteNode(param) {
this.$emit('deleteNode', this.nodeIndex)
this.notifyFirstParent('delete')
},
selectDs() {
this.selectDsDialog = true
},
// 弹框中选择数据集
firstDs(val) {
this.tempDs = val
},
closeSelectDs() {
this.selectDsDialog = false
this.tempDs = {}
},
confirmSelectDs() {
const ds = JSON.parse(JSON.stringify(this.unionItem))
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 })
}
}
}
</script>
<style scoped>
.ds-node{
width:160px;
height: 26px;
line-height: 26px;
border: #dcdfe6 solid 1px;
min-width: 160px;
color: var(--TextPrimary,#606266);
font-size: 14px;
display: flex;
align-items: center;
padding: 0 6px;
}
.node-name{
flex: 1;
text-overflow: ellipsis;
white-space: pre;
overflow: hidden;
padding: 0 2px;
}
.ds-node .node-menu{
visibility: hidden;
}
.ds-node:hover .node-menu{
visibility: visible;
}
.ds-node:hover{
cursor: pointer;
border: var(--Main,#2681ff) solid 1px;
}
</style>

154
frontend/src/views/dataset/add/union/UnionNode.vue Normal file
View File

@ -0,0 +1,154 @@
<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 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" />
<!--递归调用自身，完成树状结构-->
<div>
<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>
<script>
import NodeItem from '@/views/dataset/add/union/NodeItem'
export default {
name: 'UnionNode',
components: {
NodeItem
},
props: {
childrenList: {
type: Array,
required: true
},
childrenNode: {
type: Object,
required: true
},
nodeIndex: {
type: Number,
required: true
}
},
data() {
return {
path: 'm0,13 l18,0 m24,0 l18,0',
pathExt: 'm0,13 l18,0 m24,0 l18,0 M9,13 l0,27', // 向下直线
pathMore: 'M9,0 l0,13 l9,0 m24,0 l18,0', // 向上直线
pathMoreExt: 'M9,0 l0,13 l9,0 m24,0 l18,0 M9,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)
}
}
}
</script>
<style scoped>
.node-container{
display: flex;
position: relative;
}
.join-icon{
height: 26px;
font-size: 24px;
line-height: 26px;
position: absolute;
left: 18px;
color:#dcdfe6;
}
.join-svg-container{
width:60px;
}
.node-line{
display: flex;
position: relative;
}
.join-icon:hover{
cursor: pointer;
color: var(--Main,#2681ff);
}
</style>

31
frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue
View File

@ -162,16 +162,6 @@ export default {
this.unionDataChange()
},
'table': function() {
// if (this.table && this.table.sceneId) {
// post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(response => {
// this.currGroup = response.data
//
// this.$nextTick(function() {
// this.sceneMode = true
// this.tableTree()
// })
// })
// }
this.treeNode(this.groupForm)
},
search(val) {
@ -217,14 +207,6 @@ export default {
}
},
// tree(group) {
// this.dsLoading = true
// post('/dataset/group/tree', group, false).then(response => {
// this.data = response.data
// this.dsLoading = false
// })
// },
treeNode(group) {
post('/dataset/group/treeNode', group).then(res => {
this.data = res.data
@ -402,13 +384,12 @@ export default {
searchTree(val) {
const queryCondition = {
// withExtend: 'parent',
// modelType: 'dataset',
name: val
name: val,
sort: 'type asc,name asc,create_time desc',
mode: this.mode < 0 ? null : this.mode,
type: this.type,
typeFilter: this.customType ? this.customType : null
}
// authModel(queryCondition).then(res => {
// this.data = this.buildTree(res.data)
// })
post('/dataset/table/search', queryCondition).then(res => {
this.data = this.buildTree(res.data)
})
@ -422,8 +403,6 @@ export default {
const roots = []
arrs.forEach(el => {
// 判断根节点 ###
// el.type = el.modelInnerType
// el.isLeaf = el.leaf
if (el[this.treeProps.parentId] === null || el[this.treeProps.parentId] === 0 || el[this.treeProps.parentId] === '0') {
roots.push(el)
return

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

@ -85,11 +85,11 @@
<svg-icon icon-class="ds-custom" class="ds-icon-custom" />
{{ $t('dataset.custom_data') }}
</el-dropdown-item>
<!-- 此处菜单暂时隐藏，后续功能完整后再放开-->
<!-- <el-dropdown-item :command="beforeClickAddData('custom1',data)">-->
<!-- <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-menu>
</el-dropdown>
</el-dropdown-item>
@ -526,7 +526,7 @@ export default {
case 'custom':
this.addData('AddCustom')
break
case 'custom1':
case 'union':
this.addData('AddUnion')
break
}