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

frontend/src/icons/svg/ds-union.svg

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

frontend/src/icons/svg/no-join.svg

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

frontend/src/lang/en.js

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

frontend/src/lang/tw.js

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

frontend/src/lang/zh.js

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

frontend/src/styles/index.scss

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

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

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

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

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

frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue

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

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

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