react+antd表格编辑

import { PlusOutlined } from '@ant-design/icons'
import { Button, Form, Input, InputNumber, Popconfirm, Space, Table, Typography, message } from 'antd'
import React, { useEffect, useState } from 'react'
import './index.less'
import { useRecoilValue } from 'recoil'
import { selectAdminProAtom } from '@/store/view'
import { useRequest } from 'ahooks'
import service from '@/api/axios'
import { adminApi } from '@/api/admin'
import icon_check from "@/assets/images/system/icon_check.png";
import icon_delete from "@/assets/images/system/icon_delete.png";
import icon_edit from "@/assets/images/system/icon_edit.png";
import { TablePaginationConfig } from 'antd/lib/table/interface'
import BuildModals from './Modals'
import { ColumnsType } from 'antd/es/table'
const initParams = {
    projectId: "",

    jcxmId: '',
    pageIndex: 1,
    pageSize: 10,
}
const TableHeader = () => {
    return <div className='table-header'>
        <div className="th-left">
            <div className="th-left-top">
                <div className="t-wrap">
                    <div className="t-name">上次监测日期：</div>
                    <div className="t-value">2023年1月10日</div>
                </div>
                <div className="t-wrap  bc-time">
                    <div className="t-name">本次监测日期：</div>
                    <div className="t-value">2023年1月10日</div>
                </div>
            </div>
        </div>
        <div className="th-right">
            <div className="th-name">仪器名称：徕卡LS10</div>
            <div className="th-value">仪器编号：703836</div>
        </div>
    </div>
}
export default function Build() {
    const select = useRecoilValue(selectAdminProAtom)
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [rows, setRows] = useState<IBuildList | null>(null);
    const [params, setParams] = useState(initParams)
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
    const isEditing = (record: IBuildList) => record.id === editingKey;
    const { data, loading, run } = useRequest(async () => {
        const result: IResult<IResultPage<IBuildList[]>> = await service.post(adminApi.cjList, params, {
            headers: {
                pageIndex: params.pageIndex,
                pageSize: params.pageSize
            }
        })


        return result.response
    }, { ready: params.projectId ? true : false, refreshDeps: [params] })


    useEffect(() => {
        if (select) {
            const obj = { ...params }
            obj.projectId = select.id;
            setParams(obj)
        }
    }, [select])
    const edit = (record: IBuildList) => {
        console.log(record, 'record');

        form.setFieldsValue({ ...record });
        setEditingKey(record.id)

    }
    const see = (record: IBuildList) => {
        console.log(record);
    }
    const deleteHandle = (record: IBuildList) => {
        console.log(record);
    }
    const save = async (record: IBuildList) => {
        const validate = await form.validateFields();
        const data = { ...record, ...validate, }
        const result: IResult<any> = await service.post(adminApi.addcj, data);
        if (result.success) {
            message.success('操作成功');
            run();
        } else {
            message.warning(result.msg)
        }


    }
    const cancel = () => {
        form.resetFields();
        setEditingKey('')
    }
    const columns: any[] = [
        {
            title: "测点编号",
            dataIndex: "cdbh",
            key: "cdbh",
            width: 100,
            align: "center",
            onCell: (record: IBuildList) => {
                return {
                    record,
                    inputType: 'text',
                    dataIndex: 'cdbh',
                    title: '测点编号',
                    editable: true,
                    editing: isEditing(record),

                }
            },

        },
        {
            title: "变化速率(mm/d)",
            dataIndex: "bhsl",
            key: "bhsl",
            width: 100,
            align: "center",
            onCell: (record: IBuildList) => {
                return {
                    record,
                    inputType: 'text',
                    dataIndex: 'bhsl',
                    title: '变化速率',
                    editable: true,
                    editing: isEditing(record),

                }
            },
        },

        {
            title: "沉降变化量（mm）",
            dataIndex: "chenJiangLiang",
            key: "chenJiangLiang",
            width: 200,
            align: "center",
            editable: true,
            children: [
                {
                    title: "本次变量",
                    dataIndex: "bccjbhl",
                    key: "bccjbhl",
                    width: 100,
                    align: "center",
                    editable: true,
                    onCell: (record: IBuildList) => {
                        return {
                            record,
                            inputType: 'text',
                            dataIndex: 'bccjbhl',
                            title: '本次变量',
                            editable: true,
                            editing: isEditing(record),

                        }
                    },
                },
                {
                    title: "累计变量",
                    dataIndex: "ljcjbhl",
                    key: "ljcjbhl",
                    width: 100,
                    align: "center",
                    onCell: (record: IBuildList) => {
                        return {
                            record,
                            inputType: 'text',
                            dataIndex: 'ljcjbhl',
                            title: '累计变量',
                            editable: true,
                            editing: isEditing(record),

                        }
                    },
                },
            ],
        },
        {
            title: "上次高程",
            align: "center",
            editable: true,
            children: [
                {
                    title: "（m）",
                    dataIndex: "scgc",
                    key: "scgc",
                    width: 100,
                    align: "center",
                    onCell: (record: IBuildList) => {
                        return {
                            record,
                            inputType: 'text',
                            dataIndex: 'scgc',
                            title: '上次高程',
                            editable: true,
                            editing: isEditing(record),

                        }
                    },
                },
            ],
        },
        {
            title: "本次高程(m)",
            align: "center",

            children: [
                {
                    title: "（m）",
                    dataIndex: "bcgc",
                    key: "bcgc",
                    width: 100,
                    align: "center",
                    onCell: (record: IBuildList) => {
                        return {
                            record,
                            inputType: 'text',
                            dataIndex: 'bcgc',
                            title: '本次高程',
                            editable: true,
                            editing: isEditing(record),

                        }
                    },
                },
            ],
        },
        {
            title: "备注",
            dataIndex: "bz",
            key: "bz",
            width: 100,
            align: "center",
            onCell: (record: IBuildList) => {
                return {
                    record,
                    inputType: 'text',
                    dataIndex: 'bz',
                    title: '备注',
                    editable: true,
                    editing: isEditing(record),
                    require: false,

                }
            },

        },
        {
            title: "操作",
            dataIndex: "tableAction",
            key: "tableAction",
            width: 200,
            align: "center",
            render: (text: any, record: IBuildList) => {
                const editable = isEditing(record);
                if (editable) {
                    return <Space>
                        <a onClick={() => save(record)}>
                            保存
                        </a>
                        <Popconfirm title="是否取消?" onConfirm={cancel}>
                            <a>取消</a>
                        </Popconfirm>
                    </Space>
                } else {
                    return <Space size="middle">
                        <img className='icon-img' src={icon_edit} onClick={() => edit(record)} />
                        <img className='icon-img' src={icon_check} onClick={() => see(record)} />
                        <img className='icon-img' src={icon_delete} onClick={() => deleteHandle(record)} />


                    </Space>
                }

            },
        },
    ];
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const pagination: TablePaginationConfig = {
        current: params.pageIndex,
        pageSize: params.pageSize,
        total: data?.dataCount,
        onChange(page, pageSize) {
            const obj = { ...params }
            obj.pageIndex = page;
            obj.pageSize = pageSize;
            setParams(obj)
        },
    }
    const add = () => {
        setRows({ id: "", type: "新增" } as any)
    }

    const EditableCell = (props: any) => {
        const { editing, dataIndex, title, children } = props;
        return <td >
            {editing ? (
                <Form.Item
                    name={dataIndex}
                    style={{ margin: 0 }}
                    rules={[{ required: true, message: `请输入${title}!`, },]}
                >
                    <Input />
                </Form.Item>
            ) : (
                children
            )}
        </td>
    }

    return (
        <>
            <div className="action-wrap">
                <Space>
                    <Button className='tab-sure' type="primary"  >确定</Button>
                    <Button className='tab-add' icon={<PlusOutlined />} onClick={add}>新增</Button>


                </Space>
            </div>
            <div className="table-tab">
                <Form form={form} component={false}>


                    <Table
                        components={{
                            body: {
                                cell: EditableCell,
                            },
                        }}
                        rowSelection={rowSelection}

                        columns={columns}
                        loading={loading}
                        dataSource={data?.data}
                        bordered
                        size="middle"
                        scroll={{ y: "calc(100vh - 30.625rem)" }}
                        pagination={pagination}
                        title={() => <TableHeader />}
                        rowKey="id"
                        className='custom-form-table'
                    />
                </Form>
            </div>
            <BuildModals select={rows} setSelect={setRows} />
        </>
    )
}