Merge branch 'master' of http://gogsb.soaringnova.com/liutao/ai-proj-demo

src/module/datasource/component/DataTableStruct.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Table } from "antd";
+import styled from 'styled-components'
+
+const DataTable = styled.div`
+  .table-style {
+    .ant-table-thead {
+      > tr {
+        > th {
+          background: #e3eefd !important;
+        }
+      }
+    }
+  }
+`
+
+export default function DataTableStruct() {
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '字段',
+      dataIndex: 'field',
+      key: 'field',
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '长度',
+      dataIndex: 'length',
+      key: 'length',
+    },
+  ]
+
+  const data = [
+    {
+      key: 1,
+      id: 1,
+      field: 'SCHED_NAME',
+      type: 'VARCHAR(120)',
+      length: 120
+    },
+    {
+      key: 2,
+      id: 2,
+      field: 'SCHED_NAME',
+      type: 'VARCHAR(120)',
+      length: 120
+    },
+    {
+      key: 3,
+      id: 3,
+      field: 'SCHED_NAME',
+      type: 'VARCHAR(120)',
+      length: 120
+    },
+  ]
+  return (
+    <DataTable>
+      <Table columns={columns} dataSource={data} className={'table-style'} />
+    </DataTable>
+  )
+}

src/module/datasource/component/SyncTaskAdd.jsx

@@ -1,20 +1,29 @@
-import { Steps, Button, Space, Form, Card } from 'antd'
+import { Steps, Button, Space, Form, Card, Drawer } from 'antd'
 import DrawFormConfig from './DrawFormConfig'
 import LoadFormConfig from './LoadFormConfig'
 import React, { useState, useEffect } from 'react'
+import DataTableStruct from './DataTableStruct'
 import styled from 'styled-components'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { getDataSourceList } from '../services'
 
 const { Step } = Steps
 
 const SyncTask = styled.div`
   padding: 20px;
-  background: rgb(242, 242, 246);
+  .check__btn {
+    position: absolute;
+    right: 0;
+    top: 20%;
+    border-radius: 0;
+  }
 `
 
 export default function SyncTaskAdd() {
+
   // 步骤数
   const [currentStep, setCurrentStep] = useState(0)
+
   // 初始化数据源列表数据 constructor
   const [dataSourceList, setDataSourceList] = useState([])
 
@@ -25,6 +34,7 @@ export default function SyncTaskAdd() {
 
   // 配置提取源表单
   const [drawDataForm] = Form.useForm()
+
   // 配置加载源表单
   const [loadDataForm] = Form.useForm()
 
@@ -33,6 +43,19 @@ export default function SyncTaskAdd() {
     console.log('submit')
   }
 
+  // 右侧表结构可视
+  const [visible, setVisible] = useState(false)
+
+  // 展示
+  const showDrawer = () => {
+    setVisible(true);
+  };
+
+  // 关闭
+  const onClose = () => {
+    setVisible(false);
+  };
+
   // 获取列表数据
   const fetchDataSourceList = async () => {
     const { data } = await getDataSourceList()
@@ -54,14 +77,13 @@ export default function SyncTaskAdd() {
 
   return (
     <SyncTask>
-      <Card bordered={false}>
-        {/* 步骤条 */}
-        <Steps current={currentStep} labelPlacement="vertical" size="small">
-          <Step title="步骤1: 配置提取源" />
-          <Step title="步骤2: 配置加载源" />
-          <Step title="步骤3: 配置转换规则" />
-          <Step title="步骤4: 设置同步参数" />
-        </Steps>
+      {/* 步骤条 */}
+      <Steps current={currentStep} labelPlacement="vertical" size="small">
+        <Step title="步骤1: 配置提取源" />
+        <Step title="步骤2: 配置加载源" />
+        <Step title="步骤3: 配置转换规则" />
+        <Step title="步骤4: 设置同步参数" />
+      </Steps>
 
         {/* 表单项 */}
         {/* 配置提取源 */}
@@ -84,33 +106,56 @@ export default function SyncTaskAdd() {
         )}
 
         {/* 按扭操作 */}
-        <Space style={{ margin: '20px' }}>
+        {/* 表结构预览 */}
+      {currentStep === 0 || currentStep === 1 ? <>
+        <Button type="primary"
+          onClick={showDrawer}
+          className="check__btn"
+          size='large'
+          icon={<MenuFoldOutlined />}
+        >
+          表结构预览
+        </Button>
+        <Drawer
+          title="表结构预览"
+          placement="right"
+          onClose={onClose}
+          visible={visible}
+          width={700}
+          mask={false}
+          closeIcon={<MenuUnfoldOutlined style={{color: '#1881DA'}}/> }
+        >
+          <DataTableStruct />
+        </Drawer>
+      </> : ''}
+
+      {/* 按扭操作 */}
+      <Space style={{ margin: '20px' }}>
+        <Button
+          onClick={() => {
+            changeStep(-1)
+          }}
+          disabled={currentStep === 0}>
+          上一步
+        </Button>
+        {currentStep === 3 ? (
+          <Button
+            type="primary"
+            onClick={() => {
+              submit(drawDataForm)
+            }}>
+            构建
+          </Button>
+        ) : (
           <Button
+            type="primary"
             onClick={() => {
-              changeStep(-1)
-            }}
-            disabled={currentStep === 0}>
-            上一步
+              changeStep(1)
+            }}>
+            下一步
           </Button>
-          {currentStep === 3 ? (
-            <Button
-              type="primary"
-              onClick={() => {
-                submit(drawDataForm)
-              }}>
-              提交
-            </Button>
-          ) : (
-            <Button
-              type="primary"
-              onClick={() => {
-                changeStep(1)
-              }}>
-              下一步
-            </Button>
-          )}
-        </Space>
-      </Card>
+        )}
+      </Space>
     </SyncTask>
   )
 }