Merge branch 'master' of http://gogsb.soaringnova.com/liutao/ai-proj-demo

src/module/datasource/component/DataTableStruct.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { message, Table } from "antd";
-import { getTableSchema } from '../services'
+import React from "react";
+import { Table } from "antd";
 import styled from 'styled-components'
 
 const DataTable = styled.div`
@@ -15,41 +14,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 +33,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,11 +100,14 @@ export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
               message: '请选择表',
             },
           ]}>
-          <Select options={tableList} allowClear />
+          <Select options={tableList} allowClear onSelect={selectTable} />
         </Form.Item>
         {datasourceType === 'mysql' ? (
           <>
-            <Form.Item label="preSql" name="preSql" wrapperCol={{ span: 10 }}>
+            <Form.Item label="pre_sql" name="pre_sql" wrapperCol={{ span: 10 }}>
+              <Input.TextArea rows={5} />
+            </Form.Item>
+            <Form.Item label="post_sql" name="post_sql" wrapperCol={{ span: 10 }}>
               <Input.TextArea rows={5} />
             </Form.Item>
           </>
@@ -145,6 +154,24 @@ export default function LoadFormConfig({ loadDataForm, dataSourceList }) {
                 placeholder="文件的类型"
               />
             </Form.Item>
+            <Form.Item
+              label="写入模式"
+              name="write_mode"
+              rules={[
+                {
+                  required: true,
+                  message: '请选择写入模式',
+                },
+              ]}>
+              <Select
+                options={[
+                  { label: '追加', value: 'append' },
+                  { label: '覆盖', value: 'cover' },
+                ]}
+                allowClear
+                placeholder="写入模式"
+              />
+            </Form.Item>
             <Form.Item label="分隔符" name="datasource_partition">
               <Input placeholder="读取字段的分隔符" />
             </Form.Item>

src/module/datasource/component/SyncTaskAdd.jsx

@@ -7,7 +7,7 @@ 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'
 
 const { Step } = Steps
 
@@ -22,8 +22,9 @@ const SyncTask = styled.div`
 `
 
 export default function SyncTaskAdd() {
-  //
+  // 步骤三ref
   const stepThreeRef = React.createRef()
+
   // 步骤数
   const [currentStep, setCurrentStep] = useState(0)
 
@@ -39,12 +40,42 @@ 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()
 
   // 配置加载源表单
   const [loadDataForm] = Form.useForm()
 
+  // 规则表单
+  const [ruleForm] = Form.useForm()
+
   // 同步参数表单
   const [syncDataForm] = Form.useForm()
 
@@ -68,6 +99,9 @@ export default function SyncTaskAdd() {
       case 1:
         setCurrentForm(loadDataForm)
         break
+      case 2:
+        setCurrentForm(ruleForm)
+        break;
       case 3:
         setCurrentForm(syncDataForm)
         break
@@ -135,15 +169,8 @@ export default function SyncTaskAdd() {
 
   // 构建表单
   const build = () => {
-    currentForm
-      .validateFields()
-      .then(() => {
-        console.log('build')
-        finishBuild()
-      })
-      .catch(err => {
-        message.error('请检查表单数据是否完整')
-      })
+    console.log('loadDataForm.getFieldsValue()', loadDataForm.getFieldValue());
+    // finishBuild()
   }
 
   // 完成提交
@@ -157,8 +184,15 @@ export default function SyncTaskAdd() {
 
   // 提交表单
   const submit = () => {
-    console.log('submit')
-    finishSubmit()
+    currentForm
+      .validateFields()
+      .then(() => {
+        console.log('submit')
+        finishSubmit()
+      })
+      .catch(err => {
+        message.error('请检查表单数据是否完整')
+      })
   }
 
   return (
@@ -173,35 +207,26 @@ 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 ? (
+      {currentStep === 2 &&
         <StepThree
           onRef={stepThreeRef}
           drawDataForm={drawDataForm}
           loadDataForm={loadDataForm}
+          ruleForm={ruleForm}
         />
-      ) : (
-        ''
-      )}
+      }
 
       {/* 设置同步参数 */}
-      {currentStep === 3 ? <StepFour syncDataForm={syncDataForm} /> : ''}
+      {currentStep === 3 && <StepFour syncDataForm={syncDataForm} />}
 
       {/* 按扭操作 */}
       {/* 表结构预览 */}
-      {currentStep === 0 || currentStep === 1 ? (
+      {(currentStep === 0 || currentStep === 1 ) && 
         <>
           <Button
             type="primary"
@@ -219,17 +244,12 @@ export default function SyncTaskAdd() {
             width={600}
             mask={false}
             destroyOnClose={true}
-            closeIcon={<MenuUnfoldOutlined style={{ color: '#1881DA' }} />}>
-            {currentStep === 0 ? (
-              <DataTableStruct formData={drawDataForm} />
-            ) : (
-              <DataTableStruct formData={loadDataForm} />
-            )}
+            closeIcon={<MenuUnfoldOutlined style={{ color: '#1881DA' }} />}
+          >
+            <DataTableStruct formData={currentForm}  tableData={currentStep === 0 ? drawDataStruct : loadDataStruct}/>
           </Drawer>
         </>
-      ) : (
-        ''
-      )}
+      }
 
       {/* 按扭操作 */}
       <Space style={{ margin: '20px' }}>
@@ -237,7 +257,8 @@ export default function SyncTaskAdd() {
           onClick={() => {
             changeStep(-1)
           }}
-          disabled={currentStep === 0 || building}>
+          disabled={currentStep === 0 || building}
+        >
           上一步
         </Button>
         {currentStep === 3 ? (