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

frontend/src/lang/en.js

@@ -1157,7 +1157,9 @@ 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'
   },
   datasource: {
     datasource: 'Data Source',

frontend/src/lang/tw.js

@@ -1158,7 +1158,9 @@ export default {
     union_data: '關聯數據集',
     add_union_table: '添加關聯數據集',
     edit_union: '編輯關聯數據集',
-    union: '關聯'
+    union: '關聯',
+    edit_union_relation: '編輯關聯關系',
+    add_union_relation: '新建關聯關系'
   },
   datasource: {
     datasource: '數據源',

frontend/src/lang/zh.js

@@ -1160,7 +1160,9 @@ export default {
     union_data: '关联数据集',
     add_union_table: '添加关联数据集',
     edit_union: '编辑关联数据集',
-    union: '关联'
+    union: '关联',
+    edit_union_relation: '编辑关联关系',
+    add_union_relation: '新建关联关系'
   },
   datasource: {
     datasource: '数据源',

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

@@ -28,9 +28,23 @@
       </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>
@@ -40,10 +54,18 @@
       <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-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" 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>
   </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,
@@ -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

@@ -32,7 +32,7 @@
       <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>
@@ -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,32 @@
+<template>
+  <div v-if="unionParam.type" style="height:400px;">
+    <p>{{ unionParam.node.currentDs.name }}</p>
+    <p>{{ unionParam.parent.currentDs.name }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnionEdit',
+  props: {
+    unionParam: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</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/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-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" 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

@@ -85,11 +85,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>