diff --git a/src/api/etl/etl.js b/src/api/etl/etl.js
index 026b10c..8219219 100644
--- a/src/api/etl/etl.js
+++ b/src/api/etl/etl.js
@@ -38,4 +38,11 @@ export function extractDataName() {
   })
 }
 
+export function selectByTableName(tableName) {
+  return request({
+    url: '/integration/task/selectByTableName?tableName='+tableName,
+    method: 'post',
+  })
+}
+
 
diff --git a/src/views/components/task/index.vue b/src/views/components/task/index.vue
new file mode 100644
index 0000000..8380a5e
--- /dev/null
+++ b/src/views/components/task/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="30%"
+      >
+      <span>
+          <el-radio-group v-model="labelPosition" size="small">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
+        </el-radio-group>
+        <div style="margin: 20px;"></div>
+        <el-form :label-position="labelPosition" label-width="80px" :model="tableMsg">
+          <el-form-item label="任务id">
+            <el-input v-model="tableMsg.id" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="数据库id">
+            <el-input v-model="tableMsg.databaseId" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item label="数据表">
+                  <el-cascader
+                    v-model="tableMsg.tableName"
+                    :options="tables"
+                    :props="{ expandTrigger: 'hover',value:'id',label:'name',children:'tableNames' }"
+                    @change="handleChange"></el-cascader>
+          </el-form-item>
+          <el-form-item label="表别名">
+            <el-input v-model="tableMsg.tableAsField"></el-input>
+          </el-form-item>
+        </el-form>
+      </span>
+        <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {extractDataName} from "../../../api/etl/etl";
+
+export default {
+  name: "task",
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      labelPosition: 'right',
+      dialogVisible:false,
+      tableMsg:{},
+      tables:{}
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+    getDatabaseMessage(){
+      this.dialogVisible = true
+      extractDataName().then(res => {
+        console.log(res);
+        this.tables = res.data
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/etl/task/taskInfo.vue b/src/views/etl/task/taskInfo.vue
index fca9c14..52385c0 100644
--- a/src/views/etl/task/taskInfo.vue
+++ b/src/views/etl/task/taskInfo.vue
@@ -48,7 +48,44 @@
       </span>
       <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    <el-button type="primary" @click="nextOne()">下一步</el-button>
+  </span>
+    </el-dialog>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible1"
+      width="30%"
+      >
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          label="日期"
+          width="120">
+          <template slot-scope="scope">{{ scope.row.date }}</template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="姓名"
+          width="120">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          show-overflow-tooltip>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible1 = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
   </span>
     </el-dialog>
   </div>
@@ -56,14 +93,19 @@
 
 <script>
 import { Graph } from "@antv/x6";
-import {extractDataName} from "../../../api/etl/etl";
+import {extractDataName, selectByTableName} from "../../../api/etl/etl";
 
 export default {
   name: "antvX6",
   data() {
     return {
+      tableData:[],
+      dialogVisible1: false,
       tables:{},
-      tableMsg:{},
+      tableMsg:{
+        tableName:"",
+        tableAsField:""
+      },
       labelPosition: 'right',
       dialogVisible:false,
       curSelectNode: "",
@@ -93,8 +135,22 @@ export default {
     };
   },
   methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    nextOne(){
+      let tableAsField = this.tableMsg.tableAsField;
+      let tableName = this.tableMsg.tableName;
+      selectByTableName(tableName).then(res => {
+          this.dialogVisible1 = true
+          this.tableData = res.data
+          console.log(res);
+      })
+      this.dialogVisible = false
+    },
     handleChange(value) {
-      console.log(value);
+
+      this.tableMsg.tableName = value[1]
     },
     getDatabaseMessage(){
         this.dialogVisible = true