前端项目实战218-ant design table单元格编辑

 
import React, { useState, useEffect } from 'react';
import { Form, Input, InputNumber, Popconfirm, Table, Typography, message, DatePicker, Select } from 'antd';
import { Menu, MenuSearchParams } from './service';
import { PageResponseData } from '@/component/basicTable/type';
import { useCutPlanCreateMutation, useLazyComputeTotalLayerListQuery, useCutPlanProcessCreateMutation, useCutPlanDetailListMutation } from '@/restapi/service/cropListManage/cropListManage';
import moment from 'moment';
import postGrest from "@/redux/postgrest"
import CroppModel from '@/views/orderManagement/productionList/model/CroppModel';
import { filter } from 'lodash';
const { Option } = Select
interface Item {
    id?: any,
    sew_date?: any,
    cut_date?: any,
    target_capacity?: any,
    today_cut_qty?: any,
    style_number?: any,
    po?: any,
    key?: any,
    materielId?:any
}
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
    editing: boolean;
    dataIndex: string | number;
    title: any;
    inputType: 'number' | 'text' | 'input';
    record: any;
    index: number;
    children: React.ReactNode;
}
const MenuManage: React.FC<any> = (props) => {
    const { drawerData } = props
    const [customerId, setCustomerId] = useState('');
    const [CutPlanDetailList] = useCutPlanDetailListMutation()
    const onchangeBed = (e: any) => {
        console.log(e, "value")
        form.setFieldsValue({ bedQty: Math.ceil(Number(form.getFieldValue("totalLayer")) / Number(e.target.value)) })
    }
    const onChangeValue = (value: any) => {
        computeTotalLayerList({ cutPlanId: drawerData.id, cutSchemeId: value })
            .unwrap()
            .then((response: any) => {
                if (response.code === 200) {
                    setCustomerId(value)
 
                    form.setFieldsValue({ totalLayer: response.data })
                    // message.success("查看铺布层数")
                    initPageList();
                }
            });
    }
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
    const isEditing = (record: Item) => record.id === editingKey;
    const [materieList, setMaterieList] = useState<any[]>([])
    const [cutPlanDetailId, setCutPlanDetailId] = useState<any>("")
    const [cutPlanCreate] = useCutPlanCreateMutation()
    const [cutPlanProcessCreate] = useCutPlanProcessCreateMutation()
    const edit = (record: any) => {
        // console.log(record, "")
        postGrest().getSelect('search_cut_scheme', "id,name", { manufacture_id: `eq.${record.manufactureId}`,materiel_id:`eq.${record.materielId}` }).then((response: any) => {
            if (!response.code) {
                setMaterieList(response.data)
            } else {
                message.warning(response.message)
            }
        })
        setCutPlanDetailId(record.setCutPlanDetailId)
 
        let obj: any = {}
        obj.cutSchemeName = record.cutSchemeName
        obj.layer = record.layer
        console.log({ ...obj }, "objobjobjobjobj")
        form.setFieldsValue({ ...obj });
        setEditingKey(record.id);
    };
 
    const EditableCell: React.FC<EditableCellProps> = ({
        editing,
        dataIndex,
        title,
        inputType,
        record,
        index,
        children,
        ...restProps
    }) => {
        const selectNode = (dataIndex == 'layer' || dataIndex == 'totalLayer' || dataIndex == 'bedQty') ? <Input onChange={onchangeBed} disabled={dataIndex == 'totalLayer' || dataIndex == 'bedQty'} /> :
            <Select
                style={{ width: "300px" }}
                placeholder="请选择尺寸"
                optionFilterProp="children"
                onChange={onChangeValue}
            >
                {materieList && materieList.map((item: any) => (
                    <Option value={item.id}>{item.name}</Option>
                ))}
            </Select>
        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item
                        name={dataIndex}
                        style={{ margin: 0 }}
                        rules={[
                            {
                                required: true,
                                message: `请输入${title}!`,
                            },
                        ]}
                    >
                        {selectNode}
                    </Form.Item>
                ) : (
                    children
                )}
            </td>
        );
    };
    const cancel = () => {
        setEditingKey('');
    };
    const [loading, setLoading] = useState<boolean>(false);
    const [computeTotalLayerList] = useLazyComputeTotalLayerListQuery()
    const [page, setPage] = useState<{ pageIndex: number; pageSize: number }>({ pageIndex: 1, pageSize: 10 });
    const [menuData, setMenuData] = useState<{ list: Menu[]; page: PageResponseData }>({
        list: [],
        page: {},
    });
    const initPageList = async (params?: MenuSearchParams) => {
        setLoading(true);
        try {
            let text = {
                ...page,
                ...{ cutPlanId: drawerData.id }
            }
            CutPlanDetailList(text)
                .unwrap()
                .then((response: any) => {
                    if (response.code === 200) {
                        setMenuData({
                            list: response.data, page: {
                                dataTotal: response.total,
                                pageTotal: response.pages,
                                size: response.size,
                                page: response.current
                            }
                        });
                    }
                });
        } catch (error) {
        } finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        initPageList();
    }, [page]);
    const save = async (key: React.Key) => {
        console.log(key, "keykeykey")
        try {
            const row = await form.validateFields();
            cutPlanProcessCreate({
                materielId: key, cutSchemeId: customerId, cutPlanId: drawerData.id,
                totalLayer: form.getFieldValue("totalLayer"),
                bedQty: form.getFieldValue("bedQty"),
                layer: form.getFieldValue("layer"),
                
            })
                .unwrap()
                .then((response: any) => {
                    if (response.code === 200) {
                        message.success("编辑成功")
                        initPageList();
                    }
                });
            // cutPlanProcessCreate({ materielId: key,  })
            //     .unwrap()
            //     .then((response: any) => {
            //         if (response.code === 200) {
            //             message.success("编辑成功")
            //             initPageList();
            //         }
            //     });
            console.log(row, "rowrowrowrow")
            const newData = [...menuData.list];
            const index = newData.findIndex(item => key === item.id);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row
                });
                console.log(newData, "newData22222")
                setEditingKey('');
            } else {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row
                });
                setEditingKey('');
            }
        } catch (errInfo) {
            console.log('Validate Failed:', errInfo);
        }
    };
 
    const columns = [
        {
            title: '款式',
            dataIndex: 'styleNumber',
            editable: false,
 
        },
        {
            title: '物料代码',
            dataIndex: 'materielCode',
            editable: false,
 
        },
        {
            title: '物料名称',
            dataIndex: 'materielName',
            editable: false,
            inputType: "text",
        },
 
        {
            title: '裁剪方案',
            dataIndex: 'cutSchemeName',
            editable: true,
            inputType: "input",
        },
        {
            title: '铺布总数',
            dataIndex: 'totalLayer',
            editable: true,
            inputType: "input",
 
        },
        {
            title: '铺布层数',
            dataIndex: 'layer',
            editable: true,
 
        },
        {
            title: '床数',
            dataIndex: 'bedQty',
            editable: true,
 
        },
 
        {
            title: 'operation',
            dataIndex: 'operation',
            render: (_: any, record: Item) => {
                const editable = isEditing(record);
                return editable ? (
                    <span>
                        <Typography.Link onClick={() => save(record.materielId)} style={{ marginRight: 8 }}>
                            保存
                        </Typography.Link>
                        <Popconfirm title="确定取消?" onConfirm={cancel}>
                            <a>取消</a>
                        </Popconfirm>
                    </span>
                ) : (
                    <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
                        修改
                    </Typography.Link>
                );
            },
        },
    ];
 
    const mergedColumns = columns.map(col => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: Item) => ({
                record,
                inputType: col.dataIndex === 'age' ? 'number' : 'text',
                dataIndex: col.dataIndex,
                title: col.title,
                editing: isEditing(record),
            }),
        };
    });
    return (
        <Form form={form} component={false}>
            <Table
                rowKey="id"
                components={{
                    body: {
                        cell: EditableCell,
                    },
                }}
                bordered
                dataSource={menuData.list}
                columns={mergedColumns}
                rowClassName="editable-row"
                pagination={false}
            />
        </Form>
    );
}
 
export default MenuManage;