feat: json展示

package-lock.json

@@ -2458,6 +2458,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@sphinxxxx/color-conversion": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+      "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -3452,6 +3457,11 @@
         "negotiator": "0.6.3"
       }
     },
+    "ace-builds": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.9.6.tgz",
+      "integrity": "sha512-M/Li4hPruMSbkkg35LgdbsIBq0WuwrV4ztP2pKaww47rC/MvDc1bOrYxwJrfgxdlzyLKrja5bn+9KwwuzqB2xQ=="
+    },
     "acorn": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
@@ -7255,6 +7265,11 @@
         }
       }
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
     "jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
@@ -8630,6 +8645,11 @@
         }
       }
     },
+    "jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8698,6 +8718,11 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/json-source-map/-/json-source-map-0.6.1.tgz",
+      "integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
+    },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -8716,6 +8741,30 @@
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
     },
+    "jsoneditor": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-9.9.0.tgz",
+      "integrity": "sha512-NHJhyaqcc5U33ah6dEcd0S9b14Auocpe9nydvC9ui7Uq/vjEFnsd7ot6O9Jqwv53B7DmHFUWq5cT4qeWh4MEoA==",
+      "requires": {
+        "ace-builds": "^1.6.0",
+        "ajv": "^6.12.6",
+        "javascript-natural-sort": "^0.7.1",
+        "jmespath": "^0.16.0",
+        "json-source-map": "^0.6.1",
+        "jsonrepair": "^2.2.1",
+        "mobius1-selectr": "^2.4.13",
+        "picomodal": "^3.0.0",
+        "vanilla-picker": "^2.12.1"
+      }
+    },
+    "jsoneditor-react": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jsoneditor-react/-/jsoneditor-react-3.1.2.tgz",
+      "integrity": "sha512-XqU8BMdIhrlS5HUnn7rGhgZw315bdJGQrf6NG5UH40FSw2xNirQrxnM05aeAplHkp8FNkzN2WX0tfvEWdl2UUA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -8730,6 +8779,11 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
     },
+    "jsonrepair": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-2.2.1.tgz",
+      "integrity": "sha512-o9Je8TceILo872uQC9fIBJm957j1Io7z8Ca1iWIqY6S5S65HGE9XN7XEEw7+tUviB9Vq4sygV89MVTxl+rhZyg=="
+    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -9082,6 +9136,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "mobius1-selectr": {
+      "version": "2.4.13",
+      "resolved": "https://registry.npmjs.org/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz",
+      "integrity": "sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw=="
+    },
     "moment": {
       "version": "2.29.4",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -9486,6 +9545,11 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "picomodal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/picomodal/-/picomodal-3.0.0.tgz",
+      "integrity": "sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw=="
+    },
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -12560,6 +12624,14 @@
         "source-map": "^0.7.3"
       }
     },
+    "vanilla-picker": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.12.1.tgz",
+      "integrity": "sha512-2qrEP9VYylKXbyzXKsbu2dferBTvqnlsr29XjHwFE+/MEp0VNj6oEUESLDtKZ7DWzGdSv1x/+ujqFZF+KsO3cg==",
+      "requires": {
+        "@sphinxxxx/color-conversion": "^2.2.2"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -11,6 +11,8 @@
     "add": "^2.0.6",
     "antd": "^4.22.4",
     "axios": "^0.27.2",
+    "jsoneditor": "^9.9.0",
+    "jsoneditor-react": "^3.1.2",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/module/datasource/component/DataTableStruct.jsx

@@ -1,6 +1,8 @@
-import React from "react";
-import { Table } from "antd";
+import React, { useEffect, useState } from 'react'
+import { Table } from 'antd'
 import styled from 'styled-components'
+import { JsonEditor as Editor } from 'jsoneditor-react'
+import 'jsoneditor-react/es/editor.min.css'
 
 const DataTable = styled.div`
   .table-style {
@@ -14,7 +16,8 @@ const DataTable = styled.div`
   }
 `
 
-export default function DataTableStruct({formData, tableData}) {
+export default function DataTableStruct({ currentStep, tableData, datax }) {
+  const [jsonData, setjsonData] = useState(null)
   const columns = [
     {
       title: '序号',
@@ -33,9 +36,20 @@ export default function DataTableStruct({formData, tableData}) {
     },
   ]
 
-  return (
-    <DataTable>
-      <Table columns={columns} dataSource={tableData} className={'table-style'} />
-    </DataTable>
+  const changeJson = value => {
+    setjsonData(value)
+  }
+
+  useEffect(() => {
+    setjsonData(datax)
+  }, [datax])
+
+  let content = (
+    <Table columns={columns} dataSource={tableData} className={'table-style'} />
   )
-}
+  if (currentStep === 3) {
+    content = <Editor value={jsonData} onChange={changeJson} />
+  }
+
+  return <DataTable>{content}</DataTable>
+}

src/module/datasource/component/LogWatcher.jsx

@@ -13,6 +13,7 @@ const LogWrapper = styled.div`
     height: 100%;
     overflow-y: scroll;
     color: #638691;
+    padding: 8px 10px;
   }
 `
 

src/module/datasource/component/SyncTaskAdd.jsx

@@ -42,15 +42,19 @@ export default function SyncTaskAdd() {
 
   // 提取源表单表结构
   const [drawDataStruct, setDrawDataStruct] = useState([])
-  const updateDrawDataStruct = async (ds_id, table_name) => {await updateTableStruct(ds_id, table_name, setDrawDataStruct)}
+  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 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})
+    const { data } = await getTableSchema({ id, table_name })
     if (data.code === 200) {
       const tableList = data.data.map(item => {
         const splitData = item.split(':')
@@ -58,7 +62,7 @@ export default function SyncTaskAdd() {
           key: splitData[0],
           id: splitData[0],
           field: splitData[1],
-          type: splitData[2]
+          type: splitData[2],
         }
       })
       setFunc(tableList)
@@ -163,7 +167,8 @@ export default function SyncTaskAdd() {
 
   // 构建表单
   const build = () => {
-    console.log('loadDataForm.getFieldsValue()', loadDataForm.getFieldValue());
+    console.log('loadDataForm.getFieldsValue()', loadDataForm.getFieldValue())
+    showDrawer()
     // finishBuild()
   }
 
@@ -201,48 +206,65 @@ export default function SyncTaskAdd() {
 
       {/* 表单项 */}
       {/* 配置提取源 */}
-      {currentStep === 0 && <StepOne drawDataForm={drawDataForm} dataSourceList={dataSourceList} updateTableStruct={updateDrawDataStruct}/>}
+      {currentStep === 0 && (
+        <StepOne
+          drawDataForm={drawDataForm}
+          dataSourceList={dataSourceList}
+          updateTableStruct={updateDrawDataStruct}
+        />
+      )}
       {/* 配置加载源 */}
-      {currentStep === 1 && <StepTwo loadDataForm={loadDataForm} dataSourceList={dataSourceList} updateTableStruct={updateLoadDataStruct}/>}
+      {currentStep === 1 && (
+        <StepTwo
+          loadDataForm={loadDataForm}
+          dataSourceList={dataSourceList}
+          updateTableStruct={updateLoadDataStruct}
+        />
+      )}
 
       {/* 配置转换规则 */}
-      {currentStep === 2 &&
+      {currentStep === 2 && (
         <StepThree
           onRef={stepThreeRef}
           drawDataForm={drawDataForm}
           loadDataForm={loadDataForm}
         />
-      }
+      )}
 
       {/* 设置同步参数 */}
       {currentStep === 3 && <StepFour syncDataForm={syncDataForm} />}
 
       {/* 按扭操作 */}
       {/* 表结构预览 */}
-      {(currentStep === 0 || currentStep === 1 ) && 
+      {(currentStep === 0 || currentStep === 1 || currentStep === 3) && (
         <>
-          <Button
-            type="primary"
-            onClick={showDrawer}
-            className="check__btn"
-            size="large"
-            icon={<MenuFoldOutlined />}>
-            表结构预览
-          </Button>
+          {currentStep !== 3 && (
+            <Button
+              type="primary"
+              onClick={showDrawer}
+              className="check__btn"
+              size="large"
+              icon={<MenuFoldOutlined />}>
+              表结构预览
+            </Button>
+          )}
           <Drawer
-            title="表结构预览"
+            title={currentStep === 3 ? '构建' : '表结构预览'}
             placement="right"
             onClose={onClose}
             visible={visible}
             width={600}
             mask={false}
             destroyOnClose={true}
-            closeIcon={<MenuUnfoldOutlined style={{ color: '#1881DA' }} />}
-          >
-            <DataTableStruct formData={currentForm}  tableData={currentStep === 0 ? drawDataStruct : loadDataStruct}/>
+            closeIcon={<MenuUnfoldOutlined style={{ color: '#1881DA' }} />}>
+            <DataTableStruct
+              currentStep={currentStep}
+              tableData={currentStep === 0 ? drawDataStruct : loadDataStruct}
+              datax={{ data: '1', value: '2' }}
+            />
           </Drawer>
         </>
-      }
+      )}
 
       {/* 按扭操作 */}
       <Space style={{ margin: '20px' }}>
@@ -250,8 +272,7 @@ export default function SyncTaskAdd() {
           onClick={() => {
             changeStep(-1)
           }}
-          disabled={currentStep === 0 || building}
-        >
+          disabled={currentStep === 0 || building}>
           上一步
         </Button>
         {currentStep === 3 ? (