#10 任务构建页面，选择数据源之后页面的模板切换了，但是上一步选择的数据源没有带过来，需要重新选择 #10

Author: Zhuyundong

src/views/datax/json-build/busWriter.js

@@ -0,0 +1,9 @@
+// 公共的组件，来做为中间传达的工具
+import Vue from 'vue'
+export default new Vue({
+  data() {
+    return {
+      dataSourceId: ''
+    }
+  }
+})

src/views/datax/json-build/writer.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-container">
-    <RDBMSWriter v-if="dataSource!=='hive' && dataSource!=='hbase' && dataSource!=='mongodb'" ref="rdbmswriter" @selectDataSource="showDataSource" />
-    <HiveWriter v-if="dataSource==='hive'" ref="hivewriter" @selectDataSource="showDataSource" />
-    <HBaseWriter v-if="dataSource==='hbase'" ref="hbasewriter" @selectDataSource="showDataSource" />
-    <MongoDBWriter v-if="dataSource==='mongodb'" ref="mongodbwriter" @selectDataSource="showDataSource" />
+    <RDBMSWriter v-show="dataSource!=='hive' && dataSource!=='hbase' && dataSource!=='mongodb'" ref="rdbmswriter" @selectDataSource="showDataSource" />
+    <HiveWriter v-show="dataSource==='hive'" ref="hivewriter" @selectDataSource="showDataSource" />
+    <HBaseWriter v-show="dataSource==='hbase'" ref="hbasewriter" @selectDataSource="showDataSource" />
+    <MongoDBWriter v-show="dataSource==='mongodb'" ref="mongodbwriter" @selectDataSource="showDataSource" />
 
   </div>
 </template>
@@ -49,6 +49,7 @@ export default {
     },
     showDataSource(data) {
       this.dataSource = data
+      this.getData()
     },
     sendTableNameAndColumns(fromTableName, fromColumnList) {
       this.$refs.hivewriter.fromTableName = fromTableName

src/views/datax/json-build/writer/HBaseWriter.vue

@@ -63,6 +63,7 @@
 <script>
 import * as dsQueryApi from '@/api/ds-query'
 import { list as jdbcDsList } from '@/api/datax-jdbcDatasource'
+import Bus from '../busWriter'
 export default {
   name: 'HBaseWriter',
   data() {
@@ -121,6 +122,11 @@ export default {
       readerForm: this.getReaderData()
     }
   },
+  watch: {
+    'writerForm.datasourceId': function(oldVal, newVal) {
+      this.getTables('reader')
+    }
+  },
   created() {
     this.getJdbcDs()
   },
@@ -153,6 +159,7 @@ export default {
           this.dataSource = item.datasource
         }
       })
+      Bus.dataSourceId = e
       this.$emit('selectDataSource', this.dataSource)
       // 获取可用表
       this.getTables()
@@ -194,6 +201,9 @@ export default {
       this.writerForm.isIndeterminate = false
     },
     getData() {
+      if (Bus.dataSourceId) {
+        this.writerForm.datasourceId = Bus.dataSourceId
+      }
       return this.writerForm
     },
     getReaderData() {

src/views/datax/json-build/writer/HiveWriter.vue

@@ -76,6 +76,7 @@
 <script>
 import * as dsQueryApi from '@/api/ds-query'
 import { list as jdbcDsList } from '@/api/datax-jdbcDatasource'
+import Bus from '../busWriter'
 export default {
   name: 'HiveWriter',
   data() {
@@ -120,6 +121,11 @@ export default {
       ]
     }
   },
+  watch: {
+    'writerForm.datasourceId': function(oldVal, newVal) {
+      this.getTables('reader')
+    }
+  },
   created() {
     this.getJdbcDs()
   },
@@ -152,6 +158,7 @@ export default {
           this.dataSource = item.datasource
         }
       })
+      Bus.dataSourceId = e
       this.$emit('selectDataSource', this.dataSource)
       // 获取可用表
       this.getTables()
@@ -193,6 +200,9 @@ export default {
       this.writerForm.isIndeterminate = false
     },
     getData() {
+      if (Bus.dataSourceId) {
+        this.writerForm.datasourceId = Bus.dataSourceId
+      }
       return this.writerForm
     },
     getReaderData() {

src/views/datax/json-build/writer/MongoDBWriter.vue

@@ -57,6 +57,7 @@
 <script>
 import * as dsQueryApi from '@/api/ds-query'
 import { list as jdbcDsList } from '@/api/datax-jdbcDatasource'
+import Bus from '../busWriter'
 export default {
   name: 'MongoDBWriter',
   data() {
@@ -90,6 +91,11 @@ export default {
       readerForm: this.getReaderData()
     }
   },
+  watch: {
+    'writerForm.datasourceId': function(oldVal, newVal) {
+      this.getTables()
+    }
+  },
   created() {
     this.getJdbcDs()
   },
@@ -122,6 +128,7 @@ export default {
           this.dataSource = item.datasource
         }
       })
+      Bus.dataSourceId = e
       this.$emit('selectDataSource', this.dataSource)
       // 获取可用表
       this.getTables()
@@ -163,6 +170,9 @@ export default {
       this.writerForm.isIndeterminate = false
     },
     getData() {
+      if (Bus.dataSourceId) {
+        this.writerForm.datasourceId = Bus.dataSourceId
+      }
       return this.writerForm
     },
     getReaderData() {

src/views/datax/json-build/writer/RDBMSWriter.vue

@@ -51,6 +51,7 @@
 <script>
 import * as dsQueryApi from '@/api/ds-query'
 import { list as jdbcDsList } from '@/api/datax-jdbcDatasource'
+import Bus from '../busWriter'
 export default {
   name: 'RDBMSWriter',
   data() {
@@ -76,6 +77,11 @@ export default {
       }
     }
   },
+  watch: {
+    'writerForm.datasourceId': function(oldVal, newVal) {
+      this.getTables('reader')
+    }
+  },
   created() {
     this.getJdbcDs()
   },
@@ -108,6 +114,7 @@ export default {
           this.dataSource = item.datasource
         }
       })
+      Bus.dataSourceId = e
       this.$emit('selectDataSource', this.dataSource)
       // 获取可用表
       this.getTables()
@@ -149,6 +156,9 @@ export default {
       this.writerForm.isIndeterminate = false
     },
     getData() {
+      if (Bus.dataSourceId) {
+        this.writerForm.datasourceId = Bus.dataSourceId
+      }
       return this.writerForm
     },
     getReaderData() {