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

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

@@ -28,15 +28,15 @@
       </div>
       <!--数据集关联树型结构-->
       <div v-else class="union-container">
-        <node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" />
+        <node-item :current-node="dataset[0]" :node-index="0" @deleteNode="deleteNode" @notifyParent="calc" />
         <div v-if="dataset.length > 0">
-          <union-node v-for="(item,index) in dataset[0].childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="dataset[0].childrenDs" />
+          <union-node v-for="(item,index) in dataset[0].childrenDs" :key="index" :node-index="index" :children-node="item" :children-list="dataset[0].childrenDs" @notifyParent="calc" />
         </div>
       </div>
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
+    <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>
@@ -72,17 +72,19 @@ export default {
             currentDsField: [],
             childrenDs: [],
             unionToParent: {
-              unionType: '',
+              unionType: '', // left join,right join,inner join
               unionFields: [
                 {
                   parentField: {},
                   currentField: {}
                 }
               ]
-            }
+            },
+            allChildCount: 0
           }
         ],
-        unionToParent: {}
+        unionToParent: {},
+        allChildCount: 0
       }],
       // union data
       dataset: [],
@@ -94,7 +96,8 @@ export default {
         unionToParent: {
           unionType: '',
           unionFields: []
-        }
+        },
+        allChildCount: 0
       },
       name: '',
       customType: ['db', 'sql', 'excel'],
@@ -127,9 +130,26 @@ export default {
       ds.currentDs = this.tempDs
       this.dataset.push(ds)
       this.closeSelectDs()
+      this.calc('union')
     },
     deleteNode(index) {
       this.dataset.splice(index, 1)
+      this.calc('delete')
+    },
+    calc(param) {
+      if (param.type === 'union') {
+        if (param.grandParentAdd) {
+          this.dataset[0] && this.dataset[0].allChildCount++
+        }
+      } else if (param.type === 'delete') {
+        if (param.grandParentSub) {
+          if (param.subCount > 1) {
+            this.dataset[0] && (this.dataset[0].allChildCount -= param.subCount)
+          } else {
+            this.dataset[0] && this.dataset[0].allChildCount--
+          }
+        }
+      }
     }
   }
 }

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

@@ -28,7 +28,7 @@
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css">
+    <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>
@@ -62,7 +62,8 @@ export default {
         unionToParent: {
           unionType: '',
           unionFields: []
-        }
+        },
+        allChildCount: 0
       },
       customType: ['db', 'sql', 'excel'],
       selectDsDialog: false,
@@ -77,7 +78,6 @@ export default {
       console.log('node click to edit')
     },
     nodeMenuClick(param) {
-      console.log(param)
       switch (param.type) {
         case 'union':
           this.unionNode(param)
@@ -105,11 +105,13 @@ export default {
     },
     deleteNode(param) {
       this.$emit('deleteNode', this.nodeIndex)
+      this.notifyFirstParent('delete')
     },
 
     selectDs() {
       this.selectDsDialog = true
     },
+    // 弹框中选择数据集
     firstDs(val) {
       this.tempDs = val
     },
@@ -122,6 +124,10 @@ export default {
       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 })
     }
   }
 }

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

 <template>
-  <div class="children-node node-container" :style="{height:'40px'}">
+  <div class="children-node node-container" :style="{height:nodeHeight}">
     <div class="node-line">
       <svg-icon icon-class="inner-join" class="join-icon" @click="unionConfig" />
       <svg class="join-svg-container">
-        <path fill="none" stroke="#dcdfe6" :d="pathExt" />
+        <path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
       </svg>
     </div>
-    <node-item :current-node="childrenNode" :node-index="nodeIndex" @deleteNode="deleteNode" />
-    <!--递归调用自身-->
+    <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" />
+      <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>
@@ -38,17 +38,85 @@ export default {
   data() {
     return {
       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'
+      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',
+      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)
     }
   }
 }