import React, { Fragment, useState, useEffect, forwardRef, useRef } from 'react';
import HeaderTable from './headerTable';

const BasicForm = forwardRef((props, ref) => {
? const { record } = props;
? const [ form ] = Form.useForm();

? ? <Form
? ? ? ? ? name="taskForm"
? ? ? ? ? ref={ref}
? ? ? ? ? form={form}
? ? ? ? >
? ? ? ? <Row gutter={20}>
? ? ? ? ? ? <Col span={24}>
? ? ? ? ? ? ? <Form.Item ?name="headers" label={'Header'}>
? ? ? ? ? ? ? ? <HeaderTable ref={headerTableRef} record={record} />
? ? ? ? ? ? ? </Form.Item>
? ? ? ? ? ? </Col>
? ? ? ? ? </Row>
? ? </Form>
export default BasicForm;

import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef} from 'react';
import { Transfer, Divider, Table, Button, Input, message, Select } from 'antd';
import AddRowTable from '@components/AddRowTable';//Table組件

const { Option } = Select;

const DATATYPE = [
?? ?{
?? ??? ?id: 1,
?? ??? ?name: 'int'
?? ?}, {
?? ??? ?id: 2,
?? ??? ?name: 'varchar'
?? ?}
]

const HeaderTable = ( props, ref ) => {
?? ?const { record, isLook, onChange } = props;
?? ?const addRowTable = useRef();
?? ?const [ sourceData, setSourceData ] = useState([]);
?? ?const [ columns, setColumns ] = useState([]);
?? ?const [ targetKeys, setTargetKeys ] = useState([]);
?? ?const [ headerList, setHeaderList ] = useState([]);

?? ?useEffect(() => {
?? ??? ?if (record && record.id) {//當(dāng)編輯時(shí)將傳來(lái)的數(shù)據(jù)賦值
?? ??? ??? ?setHeaderList(record.sourceInfoMap.headers)
?? ??? ?}
?? ?}, [record])
? ? ? ??
? ? ? ? //設(shè)置columns表頭
? ? ? ? useEffect(() => {
? ? ? ? const columns = [
?? ?{
? ? ? ? ? ? title: '參數(shù)名稱',
? ? ? ? ? ? dataIndex: 'name',
? ? ? ? ? ? render: (text, record) => {
?? ??? ?return (
?? ??? ??? ?<Input value={text} onChange={tableItemChange.bind(this, record, 'name')} />
?? ??? ??? ?);
?? ??? ?}
?? ?},
? ? ? ? {
? ? ? ? ? ? title: '操作',
? ? ? ? ? ? dataIndex: 'operation',
? ? ? ? ? ? align: 'center',
? ? ? ? ? ? render: (text, record, index) => {
?? ??? ?return (
? ? ? ? ? ? ? ? ? ? <a onClick={delHandle.bind(this, record, index)}>'Delete'</a>
? ? ? ? ? ? ? ? ? ? ? ? );
?? ??? ?}
?? ?}];
? ? ? ??
? ? ? ? setColumns(columns);
? ? ? ??
? ? ? ? },[])

?? ?// 添加一行
?? ?const handleAddTableRow = () => {
?? ??? ?setHeaderList(headerList => [...headerList, {}]);
?? ??? ?onChange(headerList => [...headerList, {}])
?? ?};


?? ?// 刪除一行
?? ?const delHandle = (record, index) => {
?? ??? ?setHeaderList(headerList => {
?? ??? ??? ?headerList.splice(index, 1);
?? ??? ??? ?onChange(headerList)
?? ??? ??? ?return [...headerList];
?? ??? ?});
?? ?};

?? ?// 表格中數(shù)據(jù)更改
?? ?const tableItemChange = (data, keyField, evt) => {
?? ??? ?const value = evt.target ? evt.target.value : evt;
?? ??? ?data[keyField] = value;
?? ??? ?onChange(headerList)
?? ?};

?? ?return <div>
?? ??? ?<AddRowTable
?? ??? ??? ?ref={addRowTable}
?? ??? ??? ?dataSource={headerList}
?? ??? ??? ?columns={columns}
?? ??? ??? ?isCanAdd={isLook}
? ? ? disabled={isLook}
?? ??? ??? ?addItem={handleAddTableRow.bind(this)}
?? ??? ?/>
?? ?</div>
}

export default HeaderTable;

<Form.Item label="周期" labelAlign="right">
    {getFieldDecorator('cycle', {
        rules: [{ required: true, validator: checkCycle }],
        initialValue: cycle,
    })(<CycleInput cycleOptions={cycleOptions} />)}
</Form.Item>

/** 校驗(yàn)生命周期輸入內(nèi)容 */
const checkCycle = useCallback((_, value) => {
     const format = value?.split(' ');
     if (!format) return Promise.reject(new Error('周期不可為空!'));

     /** always 永久保存選項(xiàng) */
     if (format.length < 2 && format[0] === 'always') {
         return Promise.resolve();
     }
     if (format[1] === 'undefined') {
         return Promise.reject(new Error('請(qǐng)選擇周期!'));
     }
     const num = +format[0];
     if (num > 0 && format[1]) {
         return Promise.resolve();
     }
     return Promise.reject(new Error('請(qǐng)輸入大于 0 的數(shù)字!'));
 }, []);

const CycleInput = ({ value, onChange, cycleOptions }) => {
    const format = value?.split?.(' ');
    const num = format?.[0];
    const type = format?.[1];

    const triggerChange = changedValue => {
        onChange && onChange(changedValue);
    };

    /** 根據(jù)后端接口返回的數(shù)據(jù)，type 有值，則為 day、week、month、year 其一 */
    /** type 若為 undefined，則 num 為 always */
    const [cycleOption, setCycleOption] = useState(type ?? num);
    const [cycleInputValue, setCycleInputValue] = useState(
        (typeof +num === 'number' && !_.isNaN(+num) && num) || '',
    );

    const onCycleChange = cycleOption => {
        setCycleOption(cycleOption);
        triggerChange(
            cycleOption === 'always'
                ? cycleOption
                : `${cycleInputValue} ${cycleOption}`,
        );
    };

    const onInputChange = e => {
        const newNumber = parseInt(e.target.value || '0', 10);
        if (_.isNaN(newNumber)) {
            return;
        }
        setCycleInputValue(newNumber);
        triggerChange(
            cycleOption === 'always' ? cycleOption : `${newNumber} ${cycleOption}`,
        );
    };

    return (
        <Input.Group>
            {cycleOption === 'always' ? (
                <Select
                    onChange={onCycleChange }
                    defaultValue={cycleOption}
                    style={{ width: 240 }}
                >
                    {cycleOptions.map(item => (
                        <Select.Option key={item.value} value={item.value}>
                            {item.label}
                        </Select.Option>
                    ))}
                </Select>
            ) : (
                <span>
                    <Input
                        value={cycleInputValue}
                        style={{ width: 156 }}
                        onChange={onInputChange}
                    />
                    <Select
                        onChange={onCycleChange}
                        defaultValue={cycleOption}
                        style={{ width: 84 }}
                    >
                        {cycleOptions.map(item => (
                            <Select.Option key={item.value} value={item.value}>
                                {item.label}
                            </Select.Option>
                        ))}
                    </Select>
                </span>
            )}
        </Input.Group>
    );
};