feat: 配置转换规则

src/module/datasource/component/StepThree.jsx

@@ -1,10 +1,11 @@
-import React, { useState, use, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import Sortable from 'sortablejs'
 import arrowImgUrl from '../style/img/arrow.png'
 import syncImgUrl from '../style/img/sync.png'
 import warningImgUrl from '../style/img/warning.png'
 import deleteImgUrl from '../style/img/delete.png'
+import { getTableSchema } from '../services'
 
 const StepThreeDiv = styled.div`
   .title {
@@ -79,47 +80,11 @@ const StepThreeDiv = styled.div`
   }
 `
 
-const datasource = [
-  {
-    key: '1',
-    value: '字段',
-    type: 'string',
-  },
-  {
-    key: '2',
-    value: '字段2',
-    type: 'boolean',
-  },
-  {
-    key: '3',
-    value: '字段3',
-    type: 'boolean',
-  },
-]
-
-const syncs = [
-  {
-    key: '1',
-    value: '字段',
-    type: 'boolean',
-  },
-  {
-    key: '2',
-    value: '字段2',
-    type: 'boolean',
-  },
-  {
-    key: '3',
-    value: '字段3',
-    type: 'boolean',
-  },
-]
-
-const StepThree = () => {
+export default function StepThree({ drawDataForm, loadDataForm }) {
   // 映射管理
   const [syncMappings, setSyncMappings] = useState([])
-  const [datasourceFields, setDatasourceFields] = useState(datasource)
-  const [syncFields, setSyncFields] = useState(syncs)
+  const [datasourceFields, setDatasourceFields] = useState([])
+  const [syncFields, setSyncFields] = useState([])
 
   // 拖拽
   const drapDrop = () => {
@@ -144,6 +109,50 @@ const StepThree = () => {
       },
     })
   }
+  const fetchDatasource = async (id, table_name) => {
+    const { data } = await getTableSchema({ id, table_name })
+    if (data.code === 200) {
+      const list = formatData(data.data)
+      setDatasourceFields(list)
+      console.log('222', list, datasourceFields)
+    }
+  }
+
+  const fetchSyncData = async (id, table_name) => {
+    const { data } = await getTableSchema({ id, table_name })
+    if (data.code === 200) {
+      const list = formatData(data.data)
+      setSyncFields(list)
+    }
+  }
+  const formatData = data => {
+    const list = data.map(item => {
+      const splitData = item.split(':')
+      return {
+        key: splitData[0],
+        id: splitData[0],
+        value: splitData[1],
+        type: splitData[2],
+      }
+    })
+    return list
+  }
+
+  useEffect(() => {
+    const ds_id = drawDataForm.getFieldValue('datasource_name')
+    const table_name = drawDataForm.getFieldValue('datasource_table')
+    if (ds_id && table_name) {
+      fetchDatasource(ds_id, table_name)
+    }
+  }, [drawDataForm])
+
+  useEffect(() => {
+    const ds_id = loadDataForm.getFieldValue('datasource_name')
+    const table_name = loadDataForm.getFieldValue('datasource_table')
+    if (ds_id && table_name) {
+      fetchSyncData(ds_id, table_name)
+    }
+  }, [loadDataForm])
 
   useEffect(() => {
     drapDrop()
@@ -184,7 +193,9 @@ const StepThree = () => {
             <div>
               {datasourceFields.map((item, index) => {
                 const sameType =
-                  datasourceFields[index].type === syncFields[index].type
+                  index > syncFields.length - 1
+                    ? false
+                    : datasourceFields[index].type === syncFields[index].type
                 return (
                   <div className="sync__img" key={item.key}>
                     <img
@@ -262,5 +273,3 @@ const StepThree = () => {
     </StepThreeDiv>
   )
 }
-
-export default StepThree

src/module/datasource/component/SyncTaskAdd.jsx

@@ -100,7 +100,11 @@ export default function SyncTaskAdd() {
       )}
 
       {/* 配置转换规则 */}
-      {currentStep === 2 ? <StepThree /> : ''}
+      {currentStep === 2 ? (
+        <StepThree drawDataForm={drawDataForm} loadDataForm={loadDataForm} />
+      ) : (
+        ''
+      )}
 
       {/* 按扭操作 */}
       {/* 表结构预览 */}