canrd-main / canrd-erp-front · Files

import { PlusOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProCard,
    ProForm,
    ProFormDatePicker,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
} from '@ant-design/pro-components';
import ProductDetail from '../productDetail/productDetail';
import PayWayDetail from '../payWayDetail/payWayDetail';
import { Button, Form,message } from 'antd';
import { useEffect,useState } from 'react';
import {  postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload } from '@/services';
import { RcFile } from 'antd/es/upload';

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

export default ({ toReload }) => {
    const [form] = Form.useForm<{ name: string; company: string }>();
    const [contextBody, setContextBody] = useState<OrderStagesWithListItem>({
        id:undefined,
        contract:undefined,
        dateRange:undefined,
        terminal:undefined,
        orderStagesDeviceVoList:[],
        totalPrice:undefined,
        payWay:"30/30/30/10",
        annex:undefined,
        remark:undefined
    });
    const [editProductBody, setEditProductBody] = useState([]);
    const [total, setTotal] = useState(0);
    const [payWayBody, setPayWayBody] = useState([])
    const [otherBody, setOtherBody] = useState([])
    const [isDis,setIsDis]=useState(true)


    type OrderStagesWithListItem = {
        //文件编号
        id?: number;
        //合同编号
        contract?: string;
        //供应商名称
        vendor?: string;
        //签合同日期
        dateRange?: Date;
        //终端名称
        terminal?: string;
        orderStagesDeviceVoList: orderStagesDevice[]
        //合同总金额
        totalPrice?: number;
        //付款方式
        payWay?: string;
        //附件
        annex?: string;
        //备注
        remark?: string;
    };

    type orderStagesDevice = {
        //设备id
        dId: number;
        //设备名称
        deviceName: string;
        //设备型号
        deviceModel: string;
        //数量
        count: number;
        //单价
        unitPrice: number;
        //总价
        price: number;
    }

    function getEditProductBody(value) {
        console.log(value);

        setEditProductBody(value)
        let price = 0;
        value.map(obj => (
            price += (obj.count * obj.unitPrice)
        ));
        setTotal(price);
        setContextBody({ ...contextBody, orderStagesDeviceVoList: value })
        if (contextBody.payWay==="") {
            handleInputChange("30/30/30/10", 0, price)
        }else{
            handleInputChange(contextBody.payWay, 0, price)
        }
    }
    []
    function setSave(value) {
        console.log(value);
        setOtherBody(value)
    }

    useEffect(() => {
        setContextBody({ ...contextBody, totalPrice: total })
        form.setFieldValue('totalPrice', total);
    }, [total])

    const handleInputChange = (value: string, no: number, priceNow?: number) => {
        if (value==="") {
            message.info("请输入比例!")
        }else{
            let totalPay = 0;
            const payValue: string[] = value.split("/")
            let body: ((prevState: never[]) => never[]) | { proportion: string; payPrice: number; }[] = [];
            if (no === 1) {
                if (payValue.length !== 4) {
                    message.warning('比例个数总和不为4个!');
                } else {
                    payValue.forEach((item, index) => {
                        totalPay += Number(item)
                    })
                }
                if (totalPay != 100) {
                    message.warning('比例总和不为100!');
                } else {
                    message.success('输入有效!');
                    payValue.forEach((item, index) => {
                        body.push({ proportion: item + "%", payPrice: Number(item) * total / 100 })
                    })
                    setPayWayBody(body)
                }
            } else {
                payValue.forEach((item, index) => {
                    totalPay += Number(item)
                })
                payValue.forEach((item, index) => {
                    body.push({ proportion: item + "%", payPrice: Number(item) * priceNow / 100 })
                })
                setPayWayBody(body)
            }
        }
    };

    return (
        <ModalForm<OrderStagesWithListItem>
            title="新建"
            trigger={
                <Button
                    key="button"
                    icon={<PlusOutlined />}
                    type="primary"
                >
                    新增
                </Button>
            }
            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}
            onChange={(value) => {
                console.log(value);
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
                console.log(values);
                console.log(otherBody);
                let remakeValue = [];
                let remakeItem = {}
                
                const formData = new FormData();
                // let toSendEdit={...values,orderStagesDeviceVoList:contextBody.orderStagesDeviceVoList};
                let toSendEdit = {
                    id: values.id || contextBody.id,
                    contract: values.contract || contextBody.contract,
                    vendor: values.vendor || contextBody.vendor,
                    dateRange: values.dateRange || contextBody.dateRange,
                    terminal: values.terminal || contextBody.terminal,
                    orderStagesDeviceDoList: values.orderStagesDeviceVoList || contextBody.orderStagesDeviceVoList,
                    totalPrice: values.totalPrice || contextBody.totalPrice,
                    payWay: values.payWay || contextBody.payWay,
                    annex: contextBody.annex,
                    remark: values.remark || contextBody.remark,
                };
                if (values.annex) {
                    formData.append('file', values.annex[0].originFileObj as RcFile);
                    const res = await postOrderErpOrderStagesUpload({
                        data: formData,
                        headers: {
                            'Content-Type':
                                'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
                        }
                    });
                    if (res.data) {
                        console.log(values)
                        console.log(contextBody);
                        toSendEdit.annex = res.data
                    }
                }
                const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({
                    data: { ...toSendEdit }
                })
                
                if (isSaveOrUpdate) {
                    // 创建一个用于存储所有异步操作的Promise数组
                const promises = [];

                otherBody.forEach(item => {
                    let remakeItem = { ossId: item.ossId, number: item.id, dataRange: item.payDate, fileName: item.fileName };
                    if (typeof item.fileUrl === 'object' && item.fileUrl instanceof File) {
                        const formData = new FormData();
                        formData.append('file', item.fileUrl as RcFile);
                        const uploadPromise = async () => {
                            const res = await postOrderErpOrderStagesUpload({
                                data: formData,
                                headers: {
                                    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq',
                                }
                            });
                            if (res.data) {
                                remakeItem.fileUrl = res.data;
                            }
                        };
                        promises.push(uploadPromise());
                    }
                    remakeValue.push(remakeItem);
                });

                let makeEnd=[]
                const getRetrunIDPromise=async()=>{
                    let returnOssID=await postOrderErpOrderStagesSearch({
                        data:{contract: values.contract || contextBody.contract,},
                    })
                    console.log(returnOssID.data);
                    
                    if (returnOssID) {
                        makeEnd = remakeValue.map(item => {
                            return { ...item, ossId: returnOssID.data[0].id };
                        });
                        
                        console.log(makeEnd);
                    }
                }

                promises.push(getRetrunIDPromise());

                // 使用Promise.all等待所有异步操作完成后再执行保存操作
                Promise.all(promises).then(
                    async () => {
                    console.log(makeEnd);
                    await postOrderErpOrderStagesPayWaySaveOrUpdate({
                        data: makeEnd
                    });
                });
                    console.log(isSaveOrUpdate);
                    toReload()
                }
                await waitTime(2000);
                message.success('提交成功');
                return true;
            }}
        >
            <ProCard
                title="基本信息"
                headerBordered
                bordered
            >
                <ProForm.Group>
                    <ProFormText
                        width="md"
                        name="vendor"
                        rules={[{ required: true, message: '此项为必填项' }]}
                        label="供应商名称"
                        placeholder="请输入"
                        initialValue={contextBody.vendor}
                    />

                    <ProFormText
                        width="md"
                        name="terminal"
                        rules={[{ required: true, message: '此项为必填项' }]}
                        label="终端名称"
                        placeholder="请输入"
                        initialValue={contextBody.terminal}
                    />

                    <ProFormDatePicker
                        name="dateRange"
                        width="md"
                        label="签合同日期"
                        placeholder="请选择日期"
                        fieldProps={{
                            format: (value) => value.format('YYYY-MM-DD'),
                        }}
                        initialValue={contextBody.dateRange}
                    />

                    <ProFormText
                        width="md"
                        name="payWay"
                        rules={[{ required: true, message: '此项为必填项' }]}
                        label="付款比例"
                        placeholder="请输入"
                        initialValue={contextBody.payWay}
                        disabled={!isDis}
                        // onBlur={(e) => {
                        //     setContextBody({...contextBody,payWay:e.target.value})
                        //     handleInputChange(e.target.value, 1);
                        // }}
                    />

                    <ProFormText
                        width="md"
                        name="contract"
                        rules={[{ required: true, message: '此项为必填项' }]}
                        label="合同编号"
                        placeholder="请输入"
                        initialValue={contextBody.contract}
                    />

                    <ProFormUploadButton width="md"
                        name="annex"
                        max={1}
                        onChange={(value) => {
                            console.log(value);
                        }}
                        label="合同附件" />

                    <ProFormText
                        width="md"
                        name="totalPrice"
                        label="合同金额"
                        placeholder="请输入"
                        // rules={[{ required: true, message: '此项为必填项' }]}
                        // value={contextBody.totalPrice}
                        // onBlur={(e) => {
                        //     if (e.target.value !== '0') {
                        //         setIsDis(false);
                        //         setTotal(e.target.value);
                        //     } else {
                        //         setIsDis(true);
                        //     }
                        // }}
                        disabled={isDis}
                        initialValue={"0"}
                    />
                </ProForm.Group>
            </ProCard>
            <ProCard
                title="产品明细"
                style={{ marginTop: 10 }}
                headerBordered
                bordered
            >
                <ProductDetail productBody={[]} EditProductBody={getEditProductBody}></ProductDetail>
            </ProCard>

            <ProCard
                title="付款信息"
                style={{ marginTop: 10 }}
                headerBordered
                bordered
            >
                <PayWayDetail payBody={payWayBody} thisId={null} currtSave={setSave}></PayWayDetail>
            </ProCard>

            <ProCard
                style={{ marginTop: 10 }}
                headerBordered
                bordered
            >
                <ProFormTextArea label="备注" name="remark" initialValue={contextBody.remark} />
            </ProCard>
        </ModalForm>
    );
};