fix: 修复表单数据项异常

src/module/datasource/component/DrawFormConfig.jsx

@@ -1,10 +1,17 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Form, Select, Input } from "antd";
 
 const DATASOURCE_TYPE_MYSQL = 'mysql'
 
 export default function DrawFormConfig ({drawDataForm}) {
   const [datasourceType, setDatasourceType] = useState(DATASOURCE_TYPE_MYSQL)
+  
+  useEffect(() => {
+    if (drawDataForm.getFieldValue('datasource_name')) {
+      setDatasourceType(drawDataForm.getFieldValue('datasource_name'))
+    }
+  }, [])
+
   return (
     <>
     <p style={{fontWeight: 600, borderLeft: '3px solid #1881DA', paddingLeft: '12px'}}>配置提取源</p>
@@ -100,7 +107,7 @@ export default function DrawFormConfig ({drawDataForm}) {
           >
             <Select options={[]} allowClear placeholder="文件的类型" />
           </Form.Item>
-          <Form.Item label="分隔符" name="datasource_hdfs">
+          <Form.Item label="分隔符" name="datasource_partition">
             <Input placeholder="读取字段的分隔符" />
           </Form.Item>
         </>

src/module/datasource/component/LoadFormConfig.jsx

@@ -1,10 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Form, Select, Input } from "antd";
 
 const DATASOURCE_TYPE_MYSQL = 'mysql'
 
 export default function LoadFormConfig ({loadDataForm}) {
   const [datasourceType, setDatasourceType] = useState(DATASOURCE_TYPE_MYSQL)
+    
+  useEffect(() => {
+    if (loadDataForm.getFieldValue('datasource_name')) {
+      setDatasourceType(loadDataForm.getFieldValue('datasource_name'))
+    }
+  }, [])
   return (
     <>
     <p style={{fontWeight: 600, borderLeft: '3px solid #1881DA', paddingLeft: '12px'}}>配置加载源源</p>
@@ -94,7 +100,7 @@ export default function LoadFormConfig ({loadDataForm}) {
           >
             <Select options={[]} allowClear placeholder="文件的类型" />
           </Form.Item>
-          <Form.Item label="分隔符" name="datasource_hdfs">
+          <Form.Item label="分隔符" name="datasource_partition">
             <Input placeholder="读取字段的分隔符" />
           </Form.Item>
         </>

src/module/datasource/component/SyncTaskAdd.jsx

@@ -1,4 +1,4 @@
-import { Steps, Button, Space, Form } from 'antd'
+import { Steps, Button, Space, Form, Card } from 'antd'
 import DrawFormConfig from './DrawFormConfig'
 import LoadFormConfig from './LoadFormConfig'
 import React, { useState } from 'react'
@@ -7,7 +7,8 @@ import styled from 'styled-components'
 const { Step } = Steps
 
 const SyncTask = styled.div`
-  padding: 40px;
+  padding: 20px;
+  background: rgb(242,242,246)
 `
 
 export default function SyncTaskAdd() {
@@ -31,47 +32,50 @@ export default function SyncTaskAdd() {
 
   return (
     <SyncTask>
-      {/* 步骤条 */}
-      <Steps current={currentStep} labelPlacement="vertical" size="small">
-        <Step title="步骤1: 配置提取源" />
-        <Step title="步骤2: 配置加载源" />
-        <Step title="步骤3: 配置转换规则" />
-        <Step title="步骤4: 设置同步参数" />
-      </Steps>
+      <Card bordered={false}>
+        {/* 步骤条 */}
+        <Steps current={currentStep} labelPlacement="vertical" size="small">
+          <Step title="步骤1: 配置提取源" />
+          <Step title="步骤2: 配置加载源" />
+          <Step title="步骤3: 配置转换规则" />
+          <Step title="步骤4: 设置同步参数" />
+        </Steps>
 
-      {/* 表单项 */}
-      {/* 配置提取源 */}
-      {currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
-      {/* 配置加载源 */}
-      {currentStep === 1 ? <LoadFormConfig loadDataForm={loadDataForm} /> : ''}
+        {/* 表单项 */}
+        {/* 配置提取源 */}
+        {currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
+        {/* 配置加载源 */}
+        {currentStep === 1 ? <LoadFormConfig loadDataForm={loadDataForm} /> : ''}
 
-      {/* 按扭操作 */}
-      <Space style={{ margin: '20px' }}>
-        <Button
-          onClick={() => {
-            changeStep(-1)
-          }}
-          disabled={currentStep === 0}>
-          上一步
-        </Button>
-        {currentStep === 3 ? (
+        {/* 按扭操作 */}
+        <Space style={{ margin: '20px' }}>
           <Button
-            type="primary"
             onClick={() => {
-              submit(drawDataForm)
-            }}>
-            提交
+              changeStep(-1)
+            }}
+            disabled={currentStep === 0}>
+            上一步
           </Button>
-        ) : (
-          <Button
-            type="primary"
-            onClick={() => {
-              changeStep(1)
-            }}>
-            下一步
-          </Button>
-        )}
-      </Space>
+          {currentStep === 3 ? (
+            <Button
+              type="primary"
+              onClick={() => {
+                submit(drawDataForm)
+              }}>
+              提交
+            </Button>
+          ) : (
+            <Button
+              type="primary"
+              onClick={() => {
+                changeStep(1)
+              }}>
+              下一步
+            </Button>
+          )}
+        </Space>
+      </Card>
+      
     </SyncTask>
   )
 }