#yyds干货盘点# react笔记之学习之完成删除功能

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

代码案例LogItem.js

import React, { useState, useEffect, useCallback, memo } from 'react';
import {
    Modal,
    Input,
    message,
    Form,
    Select,
    Table,
    Button,
    Row,
    Col,
    Card,
    DatePicker,
    Cascader,
    Tabs,
    Typography, InputNumber
} from 'antd';
import { Menu } from '../service';
import {
    useQueryOrderDetailMutation, useManufactureAddMutation
} from '@/restapi/service/order/order'
import {
    useLazyQueryBaseCustomerQuery,
    useLazyQueryCategoryListQuery, useLazyQueryColorTypeListQuery, useLazyQuerySizeTypeListQuery,
    useLazyQueryStyleDataListQuery
} from "@/restapi/service/commonselect/tablerestapi";
import styles from "./indexOrder.module.less";
import { SingleValueType } from 'rc-cascader/lib/Cascader';
import { useQueryRegionListMutation } from "@/restapi/service/factory/factory";
import moment from "moment";
import { useNavigate } from "react-router";
const { Option } = Select
const { TabPane } = Tabs;
interface AddOrEditMenuFormProps {
    id?: number;
}
export interface AddOrEditMenuProps {
    visible: boolean;
    menu: Menu | null;
    onClose: () => void;
    onConfirm: (obj: any) => void;
    list: any[]
}
type ListItemType = {
    code?: string | number;
    id?: string;
    name?: string;
}
interface Option {
    id?: string;
    name?: string;
    children?: Option[];
}
const isEditing = (record: any) => {
    return record.editable;
};
type ValueType = SingleValueType | SingleValueType[]
const AddScModel: React.FC<any> = (props) => {
    const { addData } = props
    const navigate = useNavigate()
    const [form] = Form.useForm();
    const [formKuan] = Form.useForm();
    const [data, setData] = useState<any>([]); //存放表格内容
    const [disFlag, setDisFlag] = useState<boolean>(false)
    const [region, setRegion] = useState<Array<Option>>()
    const [regionData, setRegionData] = useState<ValueType>()
    const [customeList, setCustomList] = useState<ListItemType[]>([])
    const [styleList, setStyleList] = useState<Array<ListItemType>>([])
    const [styleList2, setStyleList2] = useState<Array<ListItemType>>([])
    //存储数据
    const [styleList3, setStyleList3] = useState<Array<ListItemType>>([])
    const [sizeList, setSizeList] = useState<ListItemType[]>([])
    const [getStyle, setGetStyle] = useState<any>("");
    const [queryBaseCustomer] = useLazyQueryBaseCustomerQuery();
    const [queryRegionList] = useQueryRegionListMutation()
    const [queryCategoryList] = useLazyQueryCategoryListQuery()
    const [queryColorList] = useLazyQueryColorTypeListQuery()
    const [querySizeList] = useLazyQuerySizeTypeListQuery()
    const [queryOrderDetailList] = useQueryOrderDetailMutation()
    const [queryStyleDataList] = useLazyQueryStyleDataListQuery()
    const [manufactureAdd] = useManufactureAddMutation()
    const [activeKey, setActiveKey] = useState<string>();
    const [editingKey, setEditingKey] = useState("");
    const columnsTab = [
        {
            title: '颜色',
            dataIndex: 'colorId',
            width: 300,
            editable: false,
            componentType: 'select',
            message: '请输入颜色',
            render: (text: any) => {
                return getColor(text)
            }
        },
        {
            title: '尺码',
            editable: false,
            dataIndex: 'sizeId',
            width: 300,
            componentType: 'select',
            message: '请输入尺码',
            render: (text: any) => {
                return getSize(text)
            }
        },
        {
            title: '合同数量',
            editable: false,
            dataIndex: 'ordCount',
            width: 300,
            componentType: 'input',
            message: '请输入合同数量'
        },
        {
            title: '生产数量',
            editable: true,
            dataIndex: 'count',
            width: 300,
            componentType: 'input',
            message: '请输入生产数量'
        },
        {
            title: '操作',
            dataIndex: '',
            width: 300,
            fixed: 'right',
            render: (text: any, record: any, index: number) => {
                // 判断是否进入编辑状态
                const editable = isEditing(record);
                return editable ? (
                    <span>
                        <a
                            onClick={() => save(record.id, record)}
                            style={{
                                marginRight: 8
                            }}
                        >
                            保存
                        </a>
                        <a onClick={() => cancel(record.id)}>取消</a>
                    </span>
                ) : (
                    <div>
                        <Typography.Link
                            disabled={editingKey !== ""}
                            onClick={() => edit(record)}
                        >
                            编辑
                        </Typography.Link>
                        <Button type="link" onClick={() => delInfo(record, index)}>删除</Button>
                    </div>

                );
            }
        }

    ]
    //行编辑
    const getColor = (value: any) => {
        let text: any = ''
        styleList.forEach((item) => {
            if (value == item.id) {
                text = item.name
            }
        })
        return text
    }
    const getSize = (value: any) => {
        let text: any = ''
        sizeList.forEach((item) => {
            if (value == item.id) {
                text = item.name
            }
        })
        return text
    }
    const delInfo = useCallback((record: any, index: number) => {
        console.log(record, index, "data")
        const list = [...data]
        console.log(list)
        list.splice(index, 1)
        setData(list)
    }, [data])
    const save = async (key: any, record: any) => {
        try {
            const row: any = await formKuan.validateFields();
            if (record.ordCount < row.count) {
                message.warning('生产数量不能大于合同数量,请重新输入!')
                return false
            }
            const newData = [...data];
            const index = newData.findIndex((item: any) => key === item.id);
            if (index > -1) {
                const item: any = newData[index];
                item.editable = false;
                newData.splice(index, 1, { ...item, ...row });
                setData(newData);
                setEditingKey("");
            } else {
                newData.push(row);
                setData(newData);
                setEditingKey("");
            }
        } catch (errInfo) {
            console.log("保存失败", errInfo);
        }
    };
    const edit = async (record: any) => {
        formKuan.setFieldsValue({
            editable: true,
            ...record
        });
        setEditingKey(record.id);
        //切换成编辑状态
        const newData: any = [...data];
        const index = newData.findIndex((item: any) => record.id === item.id);
        if (index > -1) {
            const item = { ...newData[index], editable: true };
            newData.splice(index, 1, { ...item });
            setData(newData)
        }
    };
    const cancel = (id: any) => {
        const newData = [...data];
        const index = newData.findIndex((item: any) => id === item.id);
        if (index > -1) {
            const item: any = newData[index];
            item.editable = false;
            newData.splice(index, 1, { ...item });
            setData(newData);
            setEditingKey("");
        }
    };
    const EditableCell = ({
        editing,
        dataIndex,
        title,
        inputType,
        record,
        index,
        children,
        ...restProps
    }: {
        editing: any,
        dataIndex: any,
        title: any,
        inputType: any,
        record: any,
        index: any,
        children: any
    }) => {
        const inputNode = <InputNumber min={1} style={{ width: "300px" }} autoComplete="off" />

        const selectNode = dataIndex == 'sizeId' ? <Select
            style={{ width: "300px" }}
            placeholder="请选择尺寸"
            optionFilterProp="children"
        >
            {sizeList && sizeList.map((item: any) => (
                <Option value={item.id}>{item.name}</Option>
            ))}
        </Select> : <Select
            style={{ width: "300px" }}
            placeholder="请选择颜色"
            optionFilterProp="children"
        >
            {styleList && styleList.map((item: any) => (
                <Option value={item.id}>{item.name}</Option>
            ))}
        </Select>
        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item
                        name={dataIndex}
                        style={{
                            margin: 0
                        }}
                        rules={[
                            {
                                required: false,
                                message: `请输入${title}!`
                            }
                        ]}
                    >
                        {inputType == 'input' ? inputNode : selectNode}
                    </Form.Item>
                ) : (
                    children
                )}
            </td>
        );
    };
    // 依据是否可编辑返回不同元素
    const mergedColumns = columnsTab.map((col: any) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: any) => ({
                record,
                inputType: col.componentType,
                dataIndex: col.dataIndex,
                title: col.title,
                editing: isEditing(record)
            })
        };
    });
    const onOk = () => {
        if (data.length == 0) {
            message.warning('请添加款式!')
        } else {
            form.validateFields().then(res => {
                console.log(res, "res")
                const values = res
                const info: any = {
                    ...values,
                };
                console.log(info, "info")
                if (info.id) {
                } else {
                    info.orderId = form.getFieldValue("id")
                    info.itemList = data.filter((item: any) => {
                        return item.styleId === getStyle
                    })
                    manufactureAdd(info)
                        .unwrap()
                        .then((response: any) => {
                            if (response.code === 200) {
                                // navigate("/productionOrder")
                                message.success('添加成功')

                            }
                        });
                }
            });
        }
    }

    const onClose = () => {
        form.resetFields()
        props.onClose()
    };
    useEffect(() => {
        querySizeList("t_sys_institution")
            .unwrap()
            .then((response: any) => {
                console.log(response, "response")
                let arr: ListItemType[] = []
                response.data && response.data.map((item: any) => {
                    arr.push({ code: item.code, id: item.id, name: item.name })
                })
                console.log(arr, "arr")
                setSizeList(arr)
            });
    }, [])
    //查看款式得接口
    useEffect(() => {
        queryColorList("")
            .unwrap()
            .then((response: any) => {
                if (response.code === 200) {
                    let arr: ListItemType[] = []
                    response.data && response.data.map((item: any) => {
                        arr.push({ code: item.code, id: item.id, name: item.name })
                    })
                    setStyleList(arr)
                }
            });
    }, []);

    //查看省市区的接口
    useEffect(() => {
        queryRegionList("/style/type/getComboBox")
            .unwrap()
            .then((response: any) => {
                if (response.code === 200) {
                    setRegion(response.data)
                }
            });
    }, []);
    //查看款式
    useEffect(() => {
        queryBaseCustomer("t_sales_order")
            .unwrap()
            .then((response: any) => {
                console.log(response, "response")
                let arr: ListItemType[] = []
                response.data && response.data.map((item: any) => {
                    arr.push({ code: item.code, id: item.id, name: item.name })
                })
                setCustomList(arr)
            });
    }, [])
    const setFormValue = (value: any) => {
        form.setFieldsValue({
            ...value,
            areaAll: [value.province, value.city, value.area]
        })
    }
    const queryDetail = (obj: any) => {
        queryOrderDetailList({ orderId: obj.id })
            .unwrap()
            .then((response: any) => {
                if (response.code == 200) {
                    let arr: ListItemType[] = []
                    const list: any = [...response.data.typeList]
                    list && list.map((item: any) => {
                        arr.push({ code: item.code, id: item.styleId, name: item.styleName })
                    })
                    setStyleList2(arr)
                    setStyleList3(arr)
                    const newDate = [...response.data.itemList]
                    setData(
                        newDate.map((item: any) => {
                            return { ...item, editable: false, ordCount: item.count }
                        })
                    )
                    setActiveKey(arr[0].id)
                }
            })
            ;
    }

    const makeStyle = (value: any) => {
        setGetStyle(value)
    }
    const remove = (targetKey: string) => {
        let newActiveKey = activeKey;
        let lastIndex = -1;
        styleList2.forEach((item, i) => {
            if (item.id == targetKey) {
                lastIndex = i - 1;
            }
        });
        console.log(lastIndex, "lastIndex")
        const newPanes = styleList2.filter(item => item.id != targetKey);
        if (newPanes.length > 0) {
            setStyleList2(newPanes);
            setActiveKey(newPanes[0].id);
        } else {
            setStyleList2([]);
            setActiveKey("");
        }
        // console.log([...data].filter((item: any) => {
        //     return targetKey != item.styleId
        // }), targetKey)
        // setData([...data].filter((item: any) => {
        //     return targetKey != item.styleId
        // }))
        // console.log(newPanes,"newPanes")
        // setStyleList2(newPanes);
        // setActiveKey(newActiveKey);
    };


    const onChange = (newActiveKey: string) => {
        console.log(data, "data")
        setActiveKey(newActiveKey);
    };
    const onEdit = (targetKey: any, action: 'add' | 'remove') => {
        if (action === 'add') {
            // add();
        } else {
            remove(targetKey);
        }
    };

    useEffect(() => {
        const dataObj = { ...props.addData }
        dataObj.planDate = moment(dataObj.planDate)
        setFormValue(dataObj)
        queryDetail(props.addData)
        console.log(props)
    }, [props.addData])
    const handleRecover = () => {
        setStyleList2(styleList3)
        setActiveKey(styleList3[0].id)
    }
    console.log(addData,"addDataaddDataaddData")
    return (
        <div>
            <div className={styles['fontFlag']}>
                基本信息
            </div>
            <Card style={{ marginTop: "20px" }}>
                <Row style={{ marginTop: "20px" }} gutter={24}>
                    <Col span={6}>
                        客户名称:{addData?.customerName}
                    </Col>
                    <Col span={6}>
                        订单号:{addData?.orderCode}
                    </Col>
                    <Col span={6}>
                        合同号:{addData?.contractNumber}
                    </Col>
                    {/* <Col span={6}>
                        交货日期:{croppData?.plan_date}
                    </Col> */}
                    {/* <Col span={6}>
                        款式名称:{croppData?.style_name}
                    </Col> */}
                    {/* <Col span={6}>
                        款式编码:{croppData?.style_number}
                    </Col> */}
                </Row>
            </Card>

            {/* <Card className={styles['marginTen']}>
                <Form
                    disabled
                    form={form}
                    labelCol={{
                        sm: { span: 5 },
                    }}
                    wrapperCol={{
                        sm: { span: 16 },
                    }}
                >
                    <Row gutter={24}>
                        <Col span={7}>
                            <Form.Item
                                label="客户名称"
                                name="customerId"
                                rules={[{ required: false, message: '请输入客户名称' }]}
                            >
                                <Select
                                    showSearch
                                    style={{ width: 200 }}
                                    placeholder="请输入客户名称"
                                    optionFilterProp="children"
                                >
                                    {customeList && customeList.map((item: any) => (
                                        <Option value={item.id}>{item.name}</Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                  
                        <Col span={7}>
                            <Form.Item
                                label="合同号"
                                name="contractNumber"
                                rules={[{ required: false, message: '请输入合同号' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={7}>
                            <Form.Item
                                label="订单编号"
                                name="orderCode"
                                rules={[{ required: false, message: '请输入订单编号' }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                   
                </Form>
            </Card> */}

            <div className={styles['kuanFlag']}>
                <div>
                    款式信息
                </div>
            </div>
            <div className={styles['kuanFlag']}>
                <Button onClick={handleRecover} type='primary'>恢复</Button>
            </div>
            <div className={styles['marginTopHeight']}>
                {/* <Select
                    style={{ width: 200 }}
                    placeholder="请选择所属款式"
                    optionFilterProp="children"
                    key={getStyle}
                    defaultValue={getStyle}
                    onChange={makeStyle}
                >
                    {styleList2 && styleList2.map((item: any) => (
                        <Option value={item.id}>{item.name}</Option>
                    ))}
                </Select> */}
                <Tabs
                    hideAdd
                    onChange={onChange}
                    activeKey={activeKey}
                    type="editable-card"
                    onEdit={onEdit}
                >
                    {styleList2 && styleList2.map((pane, index) => (
                        <TabPane closable tab={pane.name} key={pane.id}>
                        </TabPane>
                    ))}

                </Tabs>
            </div>
            <div className={styles['marginBack']}>
                <Form form={formKuan} component={false}>
                    <Table
                        className="user-table"
                        rowKey="id"
                        components={{
                            body: {
                                cell: EditableCell
                            }
                        }}
                        dataSource={data.filter((item: any) => item.styleId == activeKey)}
                        columns={mergedColumns}
                        pagination={false}
                        summary={data => {
                            let totalCount = 0;
                            data.forEach((item: any) => {
                                if (item.styleId === activeKey) {
                                    totalCount += parseInt(item.count);
                                }
                            });
                            return (
                                <>
                                    <Table.Summary.Row>
                                        <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                                        <Table.Summary.Cell index={1}>
                                        </Table.Summary.Cell>
                                        <Table.Summary.Cell index={2}>
                                        </Table.Summary.Cell>
                                        <Table.Summary.Cell index={3}>
                                            <span>{totalCount}</span>
                                        </Table.Summary.Cell>
                                    </Table.Summary.Row>
                                </>
                            );
                        }}
                    />
                </Form>
            </div>
            <Card>
                <div className={styles['bottomBtn']}>
                    <Button onClick={onClose} className={styles['kuanButtonContent']}>取消</Button>
                    <Button type={"primary"} className={styles['kuanButtonContent']} onClick={onOk}>保存</Button>
                </div>
            </Card>
        </div>
    );
}

export default memo(AddScModel);