react+antd 主表和子表table+form验证添加

import React, { useEffect, useState } from 'react'
import backImg from '@/assets/images/back.png'
import './index.less'
import { useGetDic } from '@/hooks/dic';
import { useRequest } from 'ahooks';
import service from '@/api/axios';
import { stretchApi } from '@/api/greenyh/standard/stretch';
import { Button, Form, Input, InputNumber, Popconfirm, Select, Space, Table, message } from 'antd';
import { fontSize } from '@/utils';
import { ColumnsType } from 'antd/lib/table';
import { cloneDeep, divide } from 'lodash-es'
import ColumnGroup from 'antd/es/table/ColumnGroup';
import Column from 'antd/es/table/Column';
interface Props {
    onBack?: Function;
    select: IStretch;
    levelData: string[];
    townData: string[];
    refresh: Function;
}



export default function StretchForm(props: Props) {
    const { onBack, select, townData, levelData, refresh } = props;
    const [form] = Form.useForm();
    const [subData, setSubData] = useState<ILDInfo>();
    const { runAsync: addRunAsync } = useRequest(async (params: any) => {
        const result: IResult<IStretch> = await service.post(stretchApi.AddUpdateRoad, params);
        if (result) {
            if (result.code == '200') {
                message.success('操作成功')
                refresh();
            } else {
                message.success(result.message)
            }
        }
    })
    const { data, run } = useRequest(async (aid = '') => {
        const id = aid ? aid : select.id
        const result: IResult<ILDInfo> = await service.get(`${stretchApi.GetRoadDetail}?id=${id}`);
        const arr = result.data;

        setSubData(arr)
        return arr
    }, { refreshDeps: [select], ready: select.id ? true : false })
    const [editRow, setEditRow] = useState<RoadSublist | null>(null)


    const { data: bdata } = useRequest(async () => {
        const result: IResult<IBDList[]> = await service.get(stretchApi.GetBidCandidate)
        return result.data
    })
    useEffect(() => {
        if (subData) {
            form.setFieldsValue(subData)
        } else {
            const temp = {
                roadMainInfo: { id: "" },
                roadSublist: []
            }
            form.setFieldsValue(temp)
        }

    }, [subData])

    const back = () => {
        onBack && onBack()
    }

    const save = async () => {
        if (editRow) {
            message.warning('请先保存数据!')
            return
        }
        try {
            const value = await form.validateFields();
            const params = value.roadMainInfo;



            const result: IResult<IStretch> = await service.post(stretchApi.AddUpdateRoad, params);
            if (result) {
                if (result.code == '200') {
                    message.success('操作成功')
                    refresh();
                } else {
                    message.success(result.message)
                }
            }

        } catch (e) {

        }


    }
    const rowEdit = (record: RoadSublist) => {

        form.setFieldsValue(record)
        setEditRow(record)
    }
    const rowSave = async (record: RoadSublist) => {

        console.log(record, 'record');

        try {
            const value = await form.validateFields();
            const rows = value.roadSublist[0]
            let id = record.id;
            const zbid = value.roadMainInfo.id
            if (typeof id === 'number') {
                id = ''
            }
            console.log(value, 'value');

            const params = {
                lb: rows.lb,
                id,
                tjz: Number(rows.tjz),
                dw: rows.dw,
                zbid: zbid
            }


            const result: IResult<RoadSublist> = await service.post(stretchApi.AddUpdateRoadSub, params)
            if (result.code == '200') {
                message.success('操作成功!')
                setEditRow(null)
                run();
            } else {
                message.success(result.message)
            }

        }
        catch (e) { }
    }
    const addRowData = (value: any) => {
        if (!subData) return;
        const temp = cloneDeep({ ...subData, ...value })
        const id = new Date().getTime()
        const obj = { id, lb: "", tjz: "", dw: "" } as unknown as RoadSublist;
        temp.roadSublist.unshift(obj)
        setSubData(temp)
        setEditRow(obj)
    }
    const addRow = async () => {
        try {
            const value = await form.validateFields();
            if (!select.id) {

            } else {
                addRowData(value);
            }


        } catch (e) {

        }



    }
    const deleteRow = async (record: RoadSublist) => {
        const result: IResult<any> = await service.get(`${stretchApi.DeleteRoadSub}?id=${record.id}`);
        if (result.code == '200') {
            message.success('操作成功')
            run();
            return true
        } else {
            message.warning(result.message)
            return false
        }
    }
    const columns: ColumnsType<RoadSublist> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (_, r, index) => {
                return index + 1;
            }
        },
        {
            title: '类别',
            dataIndex: 'lb',
            key: 'lb',
            render: (text, r, index) => {
                if (editRow && editRow.id === r.id) {
                    return <>
                        <Form.Item name={['roadSublist', index, 'lb']} rules={[{ required: true, message: "请输入类别" }]}>
                            <Input placeholder='请输入类别' />
                        </Form.Item>
                    </>
                } else {
                    return text;
                }
            }
        },
        {
            title: '单位',
            dataIndex: 'dw',
            key: 'dw',
            render: (text, r, index) => {
                if (editRow && editRow.id === r.id) {
                    return <Form.Item name={['roadSublist', index, 'dw']} rules={[{ required: true, message: "请输入单位" }]}>
                        <Input placeholder='请输入单位' />
                    </Form.Item>
                } else {
                    return text;
                }
            }
        },
        {
            title: '数值',
            dataIndex: 'tjz',
            key: 'tjz',
            render: (text, r, index) => {
                if (editRow && editRow.id === r.id) {
                    return <Form.Item name={['roadSublist', index, 'tjz']} rules={[{ required: true, message: "请输入数值" }]}>
                        <Input placeholder='请输入数值' />
                    </Form.Item>
                } else {
                    return text;
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, r,) => {
                if (editRow && editRow.id === r.id) {
                    return <Space>

                        <a onClick={() => rowSave(r)}>保存</a>
                        <a onClick={() => setEditRow(null)}>取消</a>
                    </Space>
                } else {
                    return <Space>
                        <a onClick={() => rowEdit(r)}>编辑</a>
                        <Popconfirm
                            title="是否删除?" onConfirm={() => deleteRow(r)} okText="是" cancelText="否">
                            <a >删除</a>
                        </Popconfirm>


                    </Space>
                }

            }
        },
    ];
    return (
        <div className='StretchForm'>
            <div className="back-wrap"  >
                <span onClick={back}><img src={backImg} alt="" />返回上一页</span>
            </div>
            <div className="form-wrap">
                <Form className='custom-form' form={form} labelCol={{ span: 4 }} labelAlign='left' >
                    <Form.Item name={['roadMainInfo', 'id']} hidden> </Form.Item>
                    <Form.Item label="街道" name={['roadMainInfo', 'jd']} rules={[{ required: true, message: "请选择街道!" }]}>
                        <Select placeholder='请选择街道'  >
                            {townData.map(item => {
                                return <Select.Option key={item}>{item}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item label="名称" name={['roadMainInfo', 'mc']} rules={[{ required: true, message: "请输入路段名称!" }]}>
                        <Input placeholder='请输入路段名称' />
                    </Form.Item>
                    <Form.Item label="面积" name={['roadMainInfo', 'mj']} rules={[{ required: true, message: "请输入面积!" }]}>
                        <InputNumber placeholder='请输入面积' style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item label="养护等级" name={['roadMainInfo', 'yhdj']} rules={[{ required: true, message: "请选择养护等级!" }]}>
                        <Select placeholder='请选择养护等级'  >
                            {levelData.map(item => {
                                return <Select.Option key={item}>{item}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item label="养护标段" name={['roadMainInfo', 'dqbdid']} rules={[{ required: true, message: "请选择养护标段!" }]}>
                        <Select placeholder='请选择养护标段'  >
                            {bdata?.map(item => {
                                return <Select.Option key={item.id}>{item.bdh}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                    <div className="  action-sub">
                        <Button type='primary' onClick={() => addRow()}>添加</Button>
                    </div>
                    <div className="table">
                        <Form.Item name="roadSublist">
                            <Table dataSource={subData?.roadSublist} columns={columns} rowKey="id" pagination={false} scroll={{ y: fontSize(300) }} >

                            </Table>
                        </Form.Item>
                        <div className="action" >
                            <Button type='primary' onClick={save}>确定</Button>
                        </div>
                    </div>
                </Form>

            </div>

        </div>
    )
}