feat: 添加构建添加按扭状态

src/module/datasource/component/SyncTaskAdd.jsx

@@ -28,10 +28,14 @@ export default function SyncTaskAdd() {
   // 初始化数据源列表数据 constructor
   const [dataSourceList, setDataSourceList] = useState([])
 
-  // 上一步/下一步
-  const changeStep = num => {
-    setCurrentStep(currentStep + num)
-  }
+  // 构建loading状态
+  const [building, setBuilding] = useState(false)
+
+  // 提交loading状态
+  const [submiting, setSubmiting] = useState(false)
+
+  // 完成状态
+  const [isfinishBuild, setIsFinishBuild] = useState(false)
 
   // 配置提取源表单
   const [drawDataForm] = Form.useForm()
@@ -42,8 +46,18 @@ export default function SyncTaskAdd() {
   // 同步参数表单
   const [syncDataForm] = Form.useForm()
 
+  // 当前表单
   const [currentForm, setCurrentForm] = useState(drawDataForm)
 
+
+  // 上一步/下一步
+  const changeStep = num => {
+    if (num === -1) {
+      setIsFinishBuild(false)
+    }
+    setCurrentStep(currentStep + num)
+  }
+
   // 监听步骤设置当前表单
   useEffect(() => {
     switch (currentStep) {
@@ -53,16 +67,14 @@ export default function SyncTaskAdd() {
       case 1:
         setCurrentForm(loadDataForm)
         break;
+      case 3:
+        setCurrentForm(syncDataForm)
+        break;
       default:
         break;
     }
   }, [currentStep])
 
-  // 提交表单
-  const submit = drawDataForm => {
-    console.log('submit')
-  }
-
   // 右侧表结构可视
   const [visible, setVisible] = useState(false)
 
@@ -95,6 +107,7 @@ export default function SyncTaskAdd() {
     fetchDataSourceList()
   }, [])
 
+  // 下一步
   const nextStep = () => {
     currentForm.validateFields().then(() => {
       changeStep(1)
@@ -103,6 +116,41 @@ export default function SyncTaskAdd() {
     })
   }
 
+  // 完成构建
+  const finishBuild = async () => {
+    setBuilding(true)
+    setTimeout(() => {
+      message.success('构建成功')
+      setBuilding(false)
+      setIsFinishBuild(true)
+    }, 2000)
+  }
+
+  // 构建表单
+  const build = () => {
+    currentForm.validateFields().then(() => {
+      console.log('build')
+      finishBuild()
+    }).catch((err) => {
+      message.error('请检查表单数据是否完整')
+    })
+  }
+
+  // 完成提交
+  const finishSubmit = async () => {
+    setSubmiting(true)
+    setTimeout(() => {
+      message.success('提交成功')
+      setSubmiting(false)
+    }, 2000)
+  }
+
+  // 提交表单
+  const submit = () => {
+    console.log('submit');
+    finishSubmit()
+  }
+
   return (
     <SyncTask>
       {/* 步骤条 */}
@@ -171,16 +219,16 @@ export default function SyncTaskAdd() {
           onClick={() => {
             changeStep(-1)
           }}
-          disabled={currentStep === 0}>
+          disabled={currentStep === 0 || building}>
           上一步
         </Button>
         {currentStep === 3 ? (
           <Button
             type="primary"
-            onClick={() => {
-              submit(drawDataForm)
-            }}>
-            构建
+            onClick={isfinishBuild ? submit : build}
+            loading={isfinishBuild ? submiting : building }
+          >
+            {finishSubmit ? '提交' : '构建'}
           </Button>
         ) : (
           <Button