canrd-main / canrd-erp-front · Files

import type { ProColumns } from '@ant-design/pro-components';
import {
    EditableProTable,
    ProCard,
    ProFormField,
    ProFormRadio,
} from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import './productDetail.less'
import { countBy } from 'lodash';

const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

type DataSourceType = {
    count?: number;
    id: React.Key;
    deviceModel?: string;
    deviceName?: string;
    price?: number;
    unitPrice?: number;
};

const defaultData: DataSourceType[] = [
    // {
    //     id:1,
    //     deviceName: '高低温试验箱',
    //     deviceModel: 'CAN-TES36-0049ST',
    //     count: 1,
    //     unitPrice: 24500,
    //     price: 24500,
    // }
];

export default ({ productBody, EditProductBody }) => {
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
    const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
    const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>(
        'bottom',
    );
    function getDataSourece() {
        if (productBody.length!=0) {
            setDataSource(productBody)
        }
    }
    function setEditProductBody(value) {
        console.log(value);
        console.log(dataSource);
        
        const modifiedArray = value.map(obj => {
            if (obj.dId && Number(obj.dId) <= 1000) {
                return {
                    ...obj,
                    count:obj.count,
                    dId: null,
                    deviceModel:obj.deviceModel,
                    deviceName:obj.deviceName,
                    price:obj.price,
                    unitPrice:obj.unitPrice
                };
            } else {
                return obj;
            }
        });
        console.log(modifiedArray);

        EditProductBody(modifiedArray)
        setDataSource(value)
    }

    useEffect(() => {
        getDataSourece()
    }, [productBody])

    type DataSourceType = {
        id: React.Key,
        count: number,
        dId?: number,
        deviceModel: string,
        deviceName: string,
        price: number
        unitPrice: number,
    }


    const columns: ProColumns<DataSourceType>[] = [
        {
            title: '设备编号',
            dataIndex: 'dId',
            hideInTable: true
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules:
                        [{ required: true, message: '此项为必填项' }]
                };
            }
        },
        {
            title: '设备型号',
            dataIndex: 'deviceModel',
            width: '15%',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules:
                        [{ required: true, message: '此项为必填项' }]
                };
            }
        },
        {
            title: '数量',
            dataIndex: 'count',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules:
                        [{ required: true, message: '此项为必填项' }]
                };
            }
        },
        {
            title: '单价',
            dataIndex: 'unitPrice',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules:
                        [{ required: true, message: '此项为必填项' }]
                };
            }
        },
        {
            title: '总价',
            dataIndex: 'price',
            formItemProps: (form, { rowIndex }) => {
                return {
                    rules:
                        [{ required: true, message: '此项为必填项' }]
                };
            }
        },
        {
            title: '操作',
            valueType: 'option',
            width: 200,
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        if (record.dId) {
                            action?.startEditable?.(record.dId);
                        }
                    }}
                >
                    编辑
                </a>,
                <a
                    key="delete"
                    onClick={() => {
                        setDataSource(dataSource.filter((item) => item.dId !== record.dId));
                    }}
                >
                    删除
                </a>,
            ],
        },
    ];

    return (
        <>
            <EditableProTable<DataSourceType>
                className='product-detail-index'
                rowKey="dId"
                toolbar={{ style: { display: 'none' } }}
                ghost={true}
                scroll={{
                    x: 960,
                }}
                recordCreatorProps={
                    position !== 'hidden'
                        ? {
                            position: position as 'top',
                            record: () => ({ dId: (Math.random() * 1000).toFixed(0) }),
                        }
                        : false
                }
                loading={false}
                toolBarRender={() => [
                    <ProFormRadio.Group
                        key="render"
                        fieldProps={{
                            value: position,
                            onChange: (e) => setPosition(e.target.value),
                        }}
                    />,
                ]}
                columns={columns}
                request={dataSource}
                value={dataSource}
                onChange={setEditProductBody}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        await waitTime(2000);
                    },
                    onChange: setEditableRowKeys,
                }}
            />
        </>
    );
};