From 6559ad75829d3bbc777235c81320cf5dacf33584 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 18 Nov 2021 18:16:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/icons/svg/inner-join.svg       |   1 +
 frontend/src/icons/svg/left-join.svg        |   1 +
 frontend/src/icons/svg/right-join.svg       |   1 +
 frontend/src/views/dataset/add/AddUnion.vue | 262 ++++++++++++++++++++
 frontend/src/views/dataset/group/Group.vue  | 189 +-------------
 frontend/src/views/dataset/index.vue        |  26 +-
 6 files changed, 279 insertions(+), 201 deletions(-)
 create mode 100644 frontend/src/icons/svg/inner-join.svg
 create mode 100644 frontend/src/icons/svg/left-join.svg
 create mode 100644 frontend/src/icons/svg/right-join.svg
 create mode 100644 frontend/src/views/dataset/add/AddUnion.vue

diff --git a/frontend/src/icons/svg/inner-join.svg b/frontend/src/icons/svg/inner-join.svg
new file mode 100644
index 0000000000..69894f07fc
--- /dev/null
+++ b/frontend/src/icons/svg/inner-join.svg
@@ -0,0 +1 @@
+<svg t="1637222099589" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7937" width="200" height="200"><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="7938"></path></svg>
diff --git a/frontend/src/icons/svg/left-join.svg b/frontend/src/icons/svg/left-join.svg
new file mode 100644
index 0000000000..c0ec03b8a1
--- /dev/null
+++ b/frontend/src/icons/svg/left-join.svg
@@ -0,0 +1 @@
+<svg t="1637222082620" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7099" width="200" height="200"><path d="M29.563081 516.459501a478.33617 478.33617 0 0 0 470.958234 485.406692A478.33617 478.33617 0 0 0 970.557308 516.459501 478.33617 478.33617 0 0 0 500.521315 31.052809 478.028756 478.028756 0 0 0 29.563081 516.152087z" p-id="7100"></path><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="7101"></path></svg>
diff --git a/frontend/src/icons/svg/right-join.svg b/frontend/src/icons/svg/right-join.svg
new file mode 100644
index 0000000000..dd027cc599
--- /dev/null
+++ b/frontend/src/icons/svg/right-join.svg
@@ -0,0 +1 @@
+<svg t="1637222010777" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6222" width="200" height="200"><path d="M544.174102 511.848291a478.33617 478.33617 0 0 0 470.958234 485.406692 478.33617 478.33617 0 0 0 470.958234-485.406692A478.028756 478.028756 0 0 0 1015.132336 26.4416 478.33617 478.33617 0 0 0 544.174102 511.848291z" p-id="6223"></path><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="6224"></path></svg>
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
new file mode 100644
index 0000000000..210f1b916a
--- /dev/null
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -0,0 +1,262 @@
+<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>
+      </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddUnion',
+  data() {
+    return {
+      dataset: [{
+        currentDs: {},
+        childrenDs: [
+          {
+            currentDs: {},
+            childrenDs: [],
+            unionToParent: [
+              {
+                parentField: {},
+                currentField: {}
+              }
+            ]
+          }
+        ],
+        unionToParent: []
+      }],
+      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'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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;
+}
+.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);
+}
+</style>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index f3a5948034..81988abd51 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -6,21 +6,10 @@
         <span class="title-text">
           {{ $t('dataset.datalist') }}
         </span>
-        <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')">
-          <!--          {{ $t('dataset.add_group') }}-->
-        </el-button>
+        <el-button icon="el-icon-plus" type="text" size="mini" style="float: right;" @click="add('group')" />
       </el-row>
       <el-divider />
 
-      <!--      <el-row>-->
-      <!--        <el-button type="primary" size="mini" @click="add('group')">-->
-      <!--          {{ $t('dataset.add_group') }}-->
-      <!--        </el-button>-->
-      <!--        <el-button type="primary" size="mini" @click="add('scene')">-->
-      <!--          {{ $t('dataset.add_scene') }}-->
-      <!--        </el-button>-->
-      <!--      </el-row>-->
-
       <el-row>
         <el-form>
           <el-form-item class="form-item">
@@ -52,14 +41,6 @@
           >
             <span v-if="data.type === 'group'" slot-scope="{ node, data }" class="custom-tree-node father">
               <span style="display: flex;flex: 1;width: 0;">
-                <!--                <span v-if="data.type === 'scene'">-->
-                <!--                  &lt;!&ndash;                  <el-button&ndash;&gt;-->
-                <!--                  &lt;!&ndash;                    icon="el-icon-folder-opened"&ndash;&gt;-->
-                <!--                  &lt;!&ndash;                    type="text"&ndash;&gt;-->
-                <!--                  &lt;!&ndash;                    size="mini"&ndash;&gt;-->
-                <!--                  &lt;!&ndash;                  />&ndash;&gt;-->
-                <!--                  <svg-icon icon-class="scene" class="ds-icon-scene" />-->
-                <!--                </span>-->
                 <span>
                   <i class="el-icon-folder" />
                 </span>
@@ -80,14 +61,9 @@
                         <span style="font-size: 13px;">{{ $t('dataset.group') }}</span>
                       </el-dropdown-item>
                       <el-dropdown-item icon="el-icon-circle-plus">
-                        <!--                        {{ $t('dataset.scene') }}-->
                         <el-dropdown size="small" placement="right-start" @command="clickAddData">
-                          <!--                          <el-button type="primary" size="mini" plain>-->
-                          <!--                            {{ $t('dataset.add_table') }}-->
-                          <!--                          </el-button>-->
                           <span class="el-dropdown-link inner-dropdown-menu">
                             <span>
-                              <!--                              <i class="el-icon-sort" />-->
                               <span style="font-size: 13px;">{{ $t('dataset.add_table') }}</span>
                             </span>
                             <i class="el-icon-arrow-right el-icon--right" />
@@ -109,6 +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-menu>
                         </el-dropdown>
                       </el-dropdown-item>
@@ -196,121 +177,11 @@
       </el-dialog>
     </el-col>
 
-    <!--scene-->
-    <!--    <el-col v-if="sceneMode">-->
-    <!--      <el-row class="title-css scene-title">-->
-    <!--        <span class="title-text scene-title-name" :title="currGroup.name">-->
-    <!--          {{ currGroup.name }}-->
-    <!--        </span>-->
-    <!--        <el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">-->
-    <!--          &lt;!&ndash;          {{ $t('dataset.back') }}&ndash;&gt;-->
-    <!--        </el-button>-->
-    <!--      </el-row>-->
-    <!--      <el-divider />-->
-    <!--      <el-row>-->
-    <!--        <el-dropdown style="margin-right: 10px;" size="small" trigger="click" @command="clickAddData">-->
-    <!--          <el-button type="primary" size="mini" plain>-->
-    <!--            {{ $t('dataset.add_table') }}-->
-    <!--          </el-button>-->
-    <!--          <el-dropdown-menu slot="dropdown">-->
-    <!--            <el-dropdown-item :command="beforeClickAddData('db')">-->
-    <!--              <svg-icon icon-class="ds-db" class="ds-icon-db" />-->
-    <!--              {{ $t('dataset.db_data') }}-->
-    <!--            </el-dropdown-item>-->
-    <!--            <el-dropdown-item :command="beforeClickAddData('sql')">-->
-    <!--              <svg-icon icon-class="ds-sql" class="ds-icon-sql" />-->
-    <!--              {{ $t('dataset.sql_data') }}-->
-    <!--            </el-dropdown-item>-->
-    <!--            <el-dropdown-item :command="beforeClickAddData('excel')">-->
-    <!--              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />-->
-    <!--              {{ $t('dataset.excel_data') }}-->
-    <!--            </el-dropdown-item>-->
-    <!--            <el-dropdown-item :command="beforeClickAddData('custom')">-->
-    <!--              <svg-icon icon-class="ds-custom" class="ds-icon-custom" />-->
-    <!--              {{ $t('dataset.custom_data') }}-->
-    <!--            </el-dropdown-item>-->
-    <!--          </el-dropdown-menu>-->
-    <!--        </el-dropdown>-->
-    <!--        &lt;!&ndash; <el-button type="primary" size="mini" plain>-->
-    <!--          {{ $t('dataset.update') }}-->
-    <!--        </el-button>-->
-    <!--        <el-button type="primary" size="mini" plain>-->
-    <!--          {{ $t('dataset.process') }}-->
-    <!--        </el-button> &ndash;&gt;-->
-    <!--      </el-row>-->
-    <!--      <el-row>-->
-    <!--        <el-form>-->
-    <!--          <el-form-item class="form-item">-->
-    <!--            <el-input-->
-    <!--              v-model="search"-->
-    <!--              size="mini"-->
-    <!--              :placeholder="$t('dataset.search')"-->
-    <!--              prefix-icon="el-icon-search"-->
-    <!--              clearable-->
-    <!--            />-->
-    <!--          </el-form-item>-->
-    <!--        </el-form>-->
-    <!--      </el-row>-->
-    <!--      <span v-show="false">{{ sceneData }}</span>-->
-    <!--      <el-tree-->
-    <!--        :data="tableData"-->
-    <!--        node-key="id"-->
-    <!--        :expand-on-click-node="true"-->
-    <!--        class="tree-list"-->
-    <!--        highlight-current-->
-    <!--        @node-click="sceneClick"-->
-    <!--      >-->
-    <!--        <span slot-scope="{ node, data }" class="custom-tree-node-list father">-->
-    <!--          <span style="display: flex;flex: 1;width: 0;">-->
-    <!--            <span>-->
-    <!--              <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" />-->
-    <!--            </span>-->
-    <!--            <span v-if="data.type === 'db' || data.type === 'sql'">-->
-    <!--              <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>-->
-    <!--              <span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>-->
-    <!--            </span>-->
-    <!--            <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>-->
-    <!--          </span>-->
-    <!--          <span v-if="hasDataPermission('manage',data.privileges)" class="child">-->
-    <!--            <span style="margin-left: 12px;" @click.stop>-->
-    <!--              <el-dropdown trigger="click" size="small" @command="clickMore">-->
-    <!--                <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" :command="beforeClickMore('editTable',data,node)">-->
-    <!--                    {{ $t('dataset.rename') }}-->
-    <!--                  </el-dropdown-item>-->
-    <!--                  <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('moveDs',data,node)">-->
-    <!--                    {{ $t('dataset.move_to') }}-->
-    <!--                  </el-dropdown-item>-->
-    <!--                  <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('deleteTable',data,node)">-->
-    <!--                    {{ $t('dataset.delete') }}-->
-    <!--                  </el-dropdown-item>-->
-    <!--                </el-dropdown-menu>-->
-    <!--              </el-dropdown>-->
-    <!--            </span>-->
-    <!--          </span>-->
-    <!--        </span>-->
-    <!--      </el-tree>-->
-    <!--    </el-col>-->
-
     <el-dialog v-dialogDrag :title="$t('dataset.table')" :visible="editTable" :show-close="false" width="30%">
       <el-form ref="tableForm" :model="tableForm" :rules="tableFormRules" @keypress.enter.native="saveTable(tableForm)">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="tableForm.name" />
         </el-form-item>
-        <!--          <el-form-item :label="$t('dataset.mode')" prop="mode">-->
-        <!--            <el-radio v-model="tableForm.mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>-->
-        <!--            <el-radio v-model="tableForm.mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>-->
-        <!--          </el-form-item>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeTable()">{{ $t('dataset.cancel') }}</el-button>
@@ -342,7 +213,7 @@
 </template>
 
 <script>
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
+import { loadTable, getScene, addGroup, delGroup, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
 import GroupMoveSelector from './GroupMoveSelector'
 import DsMoveSelector from './DsMoveSelector'
 
@@ -443,11 +314,9 @@ export default {
   mounted() {
     this.treeNode(this.groupForm)
     this.refresh()
-    // this.tableTree()
   },
   methods: {
     clickAdd(param) {
-      // console.log(param);
       this.add(param.type)
       this.groupForm.pid = param.data.id
       this.groupForm.level = param.data.level + 1
@@ -466,7 +335,6 @@ export default {
       })
     },
     clickMore(param) {
-      // console.log(param)
       switch (param.type) {
         case 'rename':
           this.add(param.data.type)
@@ -566,7 +434,6 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          // this.tree(this.groupForm)
           this.refreshNodeBy(data.pid)
         })
       }).catch(() => {
@@ -585,10 +452,7 @@ export default {
             message: this.$t('dataset.delete_success'),
             showClose: true
           })
-          // this.tableTree()
           this.refreshNodeBy(data.sceneId)
-          // this.$router.push('/dataset/home')
-          // this.$emit('switchComponent', { name: '' })
           this.$store.dispatch('dataset/setTable', new Date().getTime())
         })
       }).catch(() => {
@@ -615,12 +479,6 @@ export default {
       }
     },
 
-    // tree(group) {
-    //   groupTree(group).then(res => {
-    //     this.tData = res.data
-    //   })
-    // },
-
     treeNode(group) {
       post('/dataset/group/treeNode', group).then(res => {
         this.tData = res.data
@@ -642,26 +500,9 @@ export default {
     },
 
     nodeClick(data, node) {
-      // console.log(data);
-      // console.log(node);
-      // if (data.type === 'scene') {
-      //   this.sceneMode = true
-      //   this.currGroup = data
-      //   this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
-      // }
-
       if (data.type !== 'group') {
         this.$emit('switchComponent', { name: 'ViewTable', param: data })
       }
-      // if (node.expanded) {
-      //   this.expandedArray.push(data.id)
-      // } else {
-      //   const index = this.expandedArray.indexOf(data.id)
-      //   if (index > -1) {
-      //     this.expandedArray.splice(index, 1)
-      //   }
-      // }
-      // console.log(this.expandedArray);
     },
 
     back() {
@@ -670,7 +511,6 @@ export default {
     },
 
     clickAddData(param) {
-      // console.log(param);
       this.currGroup = param.data
       this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
       switch (param.type) {
@@ -686,6 +526,9 @@ export default {
         case 'custom':
           this.addData('AddCustom')
           break
+        case 'custom1':
+          this.addData('AddUnion')
+          break
       }
     },
 
@@ -745,7 +588,6 @@ export default {
       this.groupForm.pid = this.tGroup.id
       addGroup(this.groupForm).then(res => {
         this.closeMoveGroup()
-        // this.tree(this.groupForm)
         this.refreshNodeBy(this.groupForm.pid)
       })
     },
@@ -828,15 +670,8 @@ export default {
 
     searchTree(val) {
       const queryCondition = {
-        // withExtend: 'parent',
-        // modelType: 'dataset',
         name: val
       }
-      // authModel(queryCondition).then(res => {
-      //   // this.highlights(res.data)
-      //   this.tData = this.buildTree(res.data)
-      //   // console.log(this.tData)
-      // })
 
       post('/dataset/table/search', queryCondition).then(res => {
         this.tData = this.buildTree(res.data)
@@ -851,8 +686,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
@@ -962,11 +795,9 @@ export default {
     text-overflow: ellipsis;
   }
   .father .child {
-    /*display: none;*/
     visibility: hidden;
   }
   .father:hover .child {
-    /*display: inline;*/
     visibility: visible;
   }
 
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 3b20bc15a0..63a6fe478b 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -6,7 +6,6 @@
     </de-aside-container>
 
     <de-main-container>
-      <!--<router-view/>-->
       <component :is="component" ref="dynamic_component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
     </de-main-container>
   </de-container>
@@ -24,9 +23,9 @@ import AddDB from './add/AddDB'
 import AddSQL from './add/AddSQL'
 import AddExcel from './add/AddExcel'
 import AddCustom from './add/AddCustom'
+import AddUnion from '@/views/dataset/add/AddUnion'
 import FieldEdit from './data/FieldEdit'
 import { removeClass } from '@/utils'
-// import bus from '@/utils/bus'
 export default {
   name: 'DataSet',
   components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom },
@@ -39,31 +38,11 @@ export default {
   },
   mounted() {
     removeClass(document.body, 'showRightPanel')
-    // bus.$on('to-msg-dataset', params => {
-    //   this.toMsgShare(params)
-    // })
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
     const routerParam = this.$router.currentRoute.params
     this.toMsgShare(routerParam)
-    // if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
-    //   // 说明是从消息通知跳转过来的
-    //   if (routerParam.msgType === 1) { // 是数据集同步
-    //     if (routerParam.sourceParam) {
-    //       try {
-    //         const msgParam = JSON.parse(routerParam.sourceParam)
-    //         this.param = msgParam.tableId
-    //         this.component = ViewTable
-    //         this.$nextTick(() => {
-    //           this.$refs.dynamic_component.msg2Current(routerParam.sourceParam)
-    //         })
-    //       } catch (error) {
-    //         console.error(error)
-    //       }
-    //     }
-    //   }
-    // }
   },
   methods: {
     switchComponent(c) {
@@ -84,6 +63,9 @@ export default {
         case 'AddCustom':
           this.component = AddCustom
           break
+        case 'AddUnion':
+          this.component = AddUnion
+          break
         case 'FieldEdit':
           this.component = FieldEdit
           break