feat: 调整数据源表单结构

packages/yili-dag/src/DatasourceNodeInfo.tsx

@@ -1,14 +1,17 @@
 import React from 'react'
-import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Space, Select, message } from 'antd';
+// import { PlusCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Space, Select, message, Checkbox } from 'antd';
 import { getDebugTable } from './request';
 
 export default class DatasourceNodeInfo extends React.Component<any, any> {
+  
+  formRef = React.createRef()
 
   constructor(props: any) {
     super(props)
     this.state = {
-      debugTable: []
+      debugTable: [],
+      inputFields: []
     }
   }
 
@@ -24,35 +27,77 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
     }
   }
 
+  componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any){
+    (this.formRef.current as any).setFieldsValue({
+      inputDatasource: this.state.inputFields
+    })
+    this.props.nodeInfo.inputSource = this.state.inputFields
+  }
+
   render() {
     return (
       <div className='node-datasource'>
         <Form
+          ref={this.formRef as any}
           name="datasourceInfo"
           autoComplete="off"
           initialValues={{
             inputDatasource: this.props.nodeInfo.inputSource,
             dataTable: this.props.nodeInfo.dataTable
           }}
-          onValuesChange={(changedValue, values) => {
-            const dataSource = values.inputDatasource?.filter((item: any) => {
-              return item && item.dataField && item.dataType
-            })
-            this.props.nodeInfo.inputSource = dataSource
-          }}
         >
+          <p>添加调试数据表</p>
+          <Form.Item name='dataTable' style={{width: '80%', marginTop: '5px'}}>
+            <Select options={this.state.debugTable.map((item: any) => {
+              return {label: item.name, value: item.id}
+            })} placeholder='选择调试数据表' onSelect={(val: any) => {
+              this.props.nodeInfo.dataTable = val
+              switch(val) {
+                case 4:
+                  this.setState({inputFields: [
+                    {dataSelect: true, dataField: 'name', dataType: 'string'},
+                    {dataSelect: true, dataField: 'address', dataType: 'string'},
+                    {dataSelect: false, dataField: 'age', dataType: 'int'},
+                  ]})
+                  break
+                case 5:
+                  this.setState({inputFields: [
+                    {dataSelect: false, dataField: 'name', dataType: 'string'},
+                    {dataSelect: true, dataField: 'address', dataType: 'string'},
+                  ]})
+                  break
+                case 6:
+                  this.setState({inputFields: [
+                    {dataSelect: true, dataField: 'name', dataType: 'string'},
+                  ]})
+                  break
+                case 7:
+                  this.setState({inputFields: [
+                    {dataSelect: false, dataField: 'name', dataType: 'string'},
+                  ]})
+                  break
+              }
+            }}/>
+          </Form.Item>
           <p>输入源:</p>
           <Form.List name="inputDatasource">
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }) => (
                   <Space key={key} style={{ display: 'flex', margin: '10px 0 -20px'}} align="baseline">
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'dataSelect']}
+                      valuePropName="checked"
+                    >
+                      <Checkbox/>
+                    </Form.Item>
                     <Form.Item
                       {...restField}
                       name={[name, 'dataField']}
                       rules={[{required: true, message: '请填写字段'}]}
                     >
-                      <Input placeholder="字段名"/>
+                      <Input placeholder="字段名" disabled/>
                     </Form.Item>
                     <Form.Item
                       {...restField}
@@ -65,29 +110,20 @@ export default class DatasourceNodeInfo extends React.Component<any, any> {
                         {label: 'text', value: 'text'},
                         {label: 'float', value: 'float'},
                         {label: 'double', value: 'double'},
-                      ]} placeholder='请选择字段类型'/>
+                      ]} placeholder='请选择字段类型' disabled/>
                     </Form.Item>
-                    <MinusCircleOutlined onClick={() => remove(name)}  style={{color:'#147BD1'}}/>
                   </Space>
                 ))}
-                <Form.Item>
+                {/* <Form.Item>
                   <Button type="link" onClick={() => {
                     add()
                   }} icon={<PlusCircleOutlined />} style={{paddingLeft: 0, paddingRight: 0}}>
                     添加字段
                   </Button>
-                </Form.Item>
+                </Form.Item> */}
               </>
             )}
           </Form.List>
-          <p>添加调试数据表</p>
-          <Form.Item name='dataTable' style={{width: '80%', marginTop: '5px'}}>
-            <Select options={this.state.debugTable.map((item: any) => {
-              return {label: item.name, value: item.id}
-            })} placeholder='选择调试数据表' onSelect={(val: any) => {
-              this.props.nodeInfo.dataTable = val
-            }}/>
-          </Form.Item>
         </Form>
       </div>
     )