feat: 配置转换规则

src/module/datasource/component/StepThree.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, use, 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'
@@ -78,7 +79,7 @@ const StepThreeDiv = styled.div`
   }
 `
 
-const datasourceFields = [
+const datasource = [
   {
     key: '1',
     value: '字段',
@@ -96,7 +97,7 @@ const datasourceFields = [
   },
 ]
 
-const syncFields = [
+const syncs = [
   {
     key: '1',
     value: '字段',
@@ -117,6 +118,36 @@ const syncFields = [
 const StepThree = () => {
   // 映射管理
   const [syncMappings, setSyncMappings] = useState([])
+  const [datasourceFields, setDatasourceFields] = useState(datasource)
+  const [syncFields, setSyncFields] = useState(syncs)
+
+  // 拖拽
+  const drapDrop = () => {
+    const datasourceEl = document.querySelector('.sortableDatasource')
+    const datasourceSortable = new Sortable(datasourceEl, {
+      animation: 150,
+      onEnd: evt => {
+        const { oldIndex, newIndex } = evt
+        const changedItem = datasourceFields.splice(oldIndex, 1)[0]
+        datasourceFields.splice(newIndex, 0, changedItem)
+        setDatasourceFields([...datasourceFields])
+      },
+    })
+    const syncEl = document.querySelector('.sortableSync')
+    const syncSortable = new Sortable(syncEl, {
+      animation: 150,
+      onEnd: evt => {
+        const { oldIndex, newIndex } = evt
+        const changedItem = syncFields.splice(oldIndex, 1)[0]
+        syncFields.splice(newIndex, 0, changedItem)
+        setSyncFields([...syncFields])
+      },
+    })
+  }
+
+  useEffect(() => {
+    drapDrop()
+  }, [])
 
   const syncFieldData = index => {
     setSyncMappings([
@@ -141,7 +172,7 @@ const StepThree = () => {
             <span>加载源：{'表2'}</span>
           </div>
           <div className="table__content">
-            <div>
+            <div className="sortableDatasource">
               {datasourceFields.map(item => {
                 return (
                   <p className="field__wrapper field__sync" key={item.key}>
@@ -172,7 +203,7 @@ const StepThree = () => {
                 )
               })}
             </div>
-            <div>
+            <div className="sortableSync">
               {syncFields.map(item => {
                 return (
                   <p className="field__wrapper" key={item.key}>