Merge pull request #1311 from dataease/pr@dev@feat_union_dataset

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

frontend/src/lang/en.js

@@ -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',

frontend/src/lang/tw.js

@@ -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: '數據源',

frontend/src/lang/zh.js

@@ -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: '数据源',

frontend/src/views/dataset/add/AddUnion.vue

@@ -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
     }
   }
 }

frontend/src/views/dataset/add/union/NodeItem.vue

@@ -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>

frontend/src/views/dataset/add/union/UnionEdit.vue

@@ -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>

frontend/src/views/dataset/add/union/UnionFieldEdit.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>123</div>
+</template>
+
+<script>
+export default {
+  name: 'UnionFieldEdit',
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/dataset/add/union/UnionFieldList.vue

@@ -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">&nbsp;</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">&nbsp;</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>

frontend/src/views/dataset/add/union/UnionItemEdit.vue

@@ -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>

frontend/src/views/dataset/add/union/UnionNode.vue

@@ -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-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="unionConfig" />
+      <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="unionConfig" />
+      <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="unionConfig" />
+      <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() {
+    unionEdit() {
-      console.log('union config')
+      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>

frontend/src/views/dataset/group/Group.vue

@@ -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)">
-                            <!--                            <el-dropdown-item :command="beforeClickAddData('union',data)">-->
+                              <svg-icon icon-class="ds-union" class="ds-icon-union" />
-                            <!--                              <svg-icon icon-class="ds-union" class="ds-icon-union" />-->
+                              {{ $t('dataset.union_data') }}
-                            <!--                              {{ $t('dataset.union_data') }}-->
+                            </el-dropdown-item>
-                            <!--                            </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.type === '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.type === '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.type === '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 === '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>