更新表结构数据获取方式

src/module/datasource/component/DataTableStruct.jsx

@@ -15,41 +15,7 @@ const DataTable = styled.div`
   }
 `
 
-export default function DataTableStruct({formData}) {
-  // 表结构数据
-  const [tableData, setTableData] = useState([])
-
-  // Loading状态
-  const [loading, setLoading] = useState(false)
-
-  const fetchTableData = async (id, table_name) => {
-    setLoading(true)
-    const { data } = await getTableSchema({id, table_name})
-    if (data.code === 200) {
-      const tableList = data.data.map(item => {
-        const splitData = item.split(':')
-        return {
-          key: splitData[0],
-          id: splitData[0],
-          field: splitData[1],
-          type: splitData[2]
-        }
-      })
-      setTableData(tableList)
-    } else {
-      message.error('表结构数据加载失败')
-    }
-    setLoading(false)
-  }
-  useEffect(() => {
-    const ds_id = formData.getFieldValue('datasource_name')
-    const table_name = formData.getFieldValue('datasource_table')
-    if (ds_id && table_name) {
-      fetchTableData(ds_id, table_name)
-    } else {
-      message.error('请先选择数据源和表')
-    }
-  }, [formData])
+export default function DataTableStruct({formData, tableData}) {
   const columns = [
     {
       title: '序号',
@@ -68,29 +34,9 @@ export default function DataTableStruct({formData}) {
     },
   ]
 
-  const data = [
-    {
-      key: 1,
-      id: 1,
-      field: 'SCHED_NAME',
-      type: 'VARCHAR(120)'
-    },
-    {
-      key: 2,
-      id: 2,
-      field: 'SCHED_NAME',
-      type: 'VARCHAR(120)'
-    },
-    {
-      key: 3,
-      id: 3,
-      field: 'SCHED_NAME',
-      type: 'VARCHAR(120)'
-    },
-  ]
   return (
     <DataTable>
-      <Table columns={columns} dataSource={tableData} className={'table-style'} loading={loading} />
+      <Table columns={columns} dataSource={tableData} className={'table-style'} />
     </DataTable>
   )
 }

src/module/datasource/component/StepOne.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Select, Input, message } from 'antd'
 import { getTableNamesList } from '../services'
 
-export default function StepOne({ drawDataForm, dataSourceList }) {
+export default function StepOne({ drawDataForm, dataSourceList, updateTableStruct }) {
   const [datasourceType, setDatasourceType] = useState(null)
 
   const [datasources, setDatasources] = useState()
@@ -34,7 +34,6 @@ export default function StepOne({ drawDataForm, dataSourceList }) {
     drawDataForm.setFieldValue('datasource_table', null)
     const type = dataSourceList.find(item => item.key === val).datasource
     setDatasourceType(type)
-    console.log(val);
     const { data } = await getTableNamesList(val)
     if(data.code === 200) {
       const list = data.data.map(item => ({
@@ -47,6 +46,12 @@ export default function StepOne({ drawDataForm, dataSourceList }) {
     }
   }
 
+  // 选择表
+  const selectTable = (val) => {
+    const ds_id = drawDataForm.getFieldValue('datasource_name')
+    updateTableStruct(ds_id, val)
+  }
+
   return (
     <>
       <p
@@ -89,7 +94,7 @@ export default function StepOne({ drawDataForm, dataSourceList }) {
               message: '请选择表',
             },
           ]}>
-          <Select options={tableList} allowClear />
+          <Select options={tableList} allowClear onSelect={selectTable} />
         </Form.Item>
         {datasourceType === 'mysql' ? (
           <>

src/module/datasource/component/StepTwo.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { Form, Select, Input, message } from 'antd'
 import { getTableNamesList } from '../services'
 
-export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
+export default function LoadFormConfig({ loadDataForm, dataSourceList, updateTableStruct }) {
   const [datasourceType, setDatasourceType] = useState(null)
 
   const [datasources, setDatasources] = useState()
@@ -51,6 +51,12 @@ export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
     }
   }
 
+  // 选择表
+  const selectTable = (val) => {
+    const ds_id = loadDataForm.getFieldValue('datasource_name')
+    updateTableStruct(ds_id, val)
+  }
+
   return (
     <>
       <p
@@ -94,7 +100,7 @@ export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
               message: '请选择表',
             },
           ]}>
-          <Select options={tableList} allowClear />
+          <Select options={tableList} allowClear onSelect={selectTable} />
         </Form.Item>
         {datasourceType === 'mysql' ? (
           <>

src/module/datasource/component/SyncTaskAdd.jsx

@@ -7,7 +7,8 @@ import React, { useState, useEffect } from 'react'
 import DataTableStruct from './DataTableStruct'
 import styled from 'styled-components'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
-import { getDataSourceList } from '../services'
+import { getDataSourceList, getTableSchema } from '../services'
+import { useForm } from 'antd/es/form/Form'
 
 const { Step } = Steps
 
@@ -40,6 +41,33 @@ export default function SyncTaskAdd() {
   // 完成状态
   const [isfinishBuild, setIsFinishBuild] = useState(false)
 
+  // 提取源表单表结构
+  const [drawDataStruct, setDrawDataStruct] = useState([])
+  const updateDrawDataStruct = async (ds_id, table_name) => {await updateTableStruct(ds_id, table_name, setDrawDataStruct)}
+
+  // 加载源表单表结构
+  const [loadDataStruct, setLoadDataStruct] = useState([])
+  const updateLoadDataStruct = async (id, table_name) => {await updateTableStruct(id, table_name, setLoadDataStruct)}
+
+  // 更新表结构
+  const updateTableStruct = async (id, table_name, setFunc) => {
+    const { data } = await getTableSchema({id, table_name})
+    if (data.code === 200) {
+      const tableList = data.data.map(item => {
+        const splitData = item.split(':')
+        return {
+          key: splitData[0],
+          id: splitData[0],
+          field: splitData[1],
+          type: splitData[2]
+        }
+      })
+      setFunc(tableList)
+    } else {
+      message.error('表结构数据加载失败')
+    }
+  }
+
   // 配置提取源表单
   const [drawDataForm] = Form.useForm()
 
@@ -179,9 +207,9 @@ export default function SyncTaskAdd() {
 
       {/* 表单项 */}
       {/* 配置提取源 */}
-      {currentStep === 0 && <StepOne drawDataForm={drawDataForm} dataSourceList={dataSourceList} />}
+      {currentStep === 0 && <StepOne drawDataForm={drawDataForm} dataSourceList={dataSourceList} updateTableStruct={updateDrawDataStruct}/>}
       {/* 配置加载源 */}
-      {currentStep === 1 && <StepTwo loadDataForm={loadDataForm} dataSourceList={dataSourceList} />}
+      {currentStep === 1 && <StepTwo loadDataForm={loadDataForm} dataSourceList={dataSourceList} updateTableStruct={updateLoadDataStruct}/>}
 
       {/* 配置转换规则 */}
       {currentStep === 2 &&
@@ -218,7 +246,7 @@ export default function SyncTaskAdd() {
             destroyOnClose={true}
             closeIcon={<MenuUnfoldOutlined style={{ color: '#1881DA' }} />}
           >
-            <DataTableStruct formData={currentForm} />
+            <DataTableStruct formData={currentForm}  tableData={currentStep === 0 ? drawDataStruct : loadDataStruct}/>
           </Drawer>
         </>
       }