canrd-main / canrd-erp-front · Files

import { PlusOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProCard,
    ProForm,
    ProFormDatePicker,
    ProFormDateRangePicker,
    ProFormDependency,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
} from '@ant-design/pro-components';
import ProductDetail from './readProduct';
import PayWayDetail from './readPayWay'
import { Button, Form, UploadProps, message } from 'antd';
import Item from 'antd/es/list/Item';
import { useEffect, useRef, useState } from 'react';
import { postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesPayWayUploadForPayWay, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload, postServiceOrderFileProcess } from '@/services';
import { context } from '@/.umi/core/helmetContext';
import { RcFile } from 'antd/es/upload';

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

export default ({ currentContract }) => {
    const [form] = Form.useForm<{ name: string; company: string }>();
    const [contextBody, setContextBody] = useState({});
    const [editProductBody, setEditProductBody] = useState([]);
    const [total, setTotal] = useState(0);
    const [payWayBody, setPayWayBody] = useState([])
    const [otherBody, setOtherBody] = useState([])
    const [isOnlyRead, setisOnlyRead] = useState()

    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;
    }

    async function getBody() {
        const res = await postOrderErpOrderStagesSearch({
            data: { contract: currentContract },
        });
        const context = res.data[0];
        // console.log(context);

        if (context.contract != null) {
            setContextBody(context);
            setTotal(context.totalPrice)
            form.setFieldValue('totalPrice', context.totalPrice);
        }
        handleInputChange(context.payWay, 0, context.totalPrice)
    }

    async function refresh() {
        const res = await postOrderErpOrderStagesSearch({
            data: { contract: currentContract },
        });
        const context = res.data[0];
        // console.log(context);

        if (context.contract != null) {
            setContextBody(context);
            setTotal(context.totalPrice)
            form.setFieldValue('totalPrice', context.totalPrice);
        }
    }

    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 })
        handleInputChange(contextBody.payWay, 0, price)
    }
    []
    function setSave(value) {
        // console.log(value);
        setOtherBody(value)
    }

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

    useEffect(() => {
        getBody()
    }, [])

    const handleInputChange = (value: string, no: number, priceNow?: number) => {
        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('输入有效!');
                const price = total
                payValue.forEach((item, index) => {
                    body.push({ proportion: item + "%", payPrice: Number(item) * price / 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={
                <a onClick={refresh}>查看</a>
            }
            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                // onCancel: () => console.log('run'),
            }}
            submitTimeout={2000}
            onFinish={async (values) => {
                // console.log(values);
                // console.log(otherBody);
                let remakeValue = [];
                let remakeItem = {}
                // 创建一个用于存储所有异步操作的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);
                });

                // 使用Promise.all等待所有异步操作完成后再执行保存操作
                Promise.all(promises).then(async () => {
                    const resp = await postOrderErpOrderStagesPayWaySaveOrUpdate({
                        data: remakeValue
                    });
                });
                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) {
                    // console.log(isSaveOrUpdate);
                    getBody()
                }
                await waitTime(2000);
                message.success('提交成功');
                return true;
            }}
        >
            <ProCard
                title="基本信息"
                headerBordered
                bordered
            >
                <ProForm.Group>
                    <ProFormText
                        width="md"
                        name="vendor"
                        label="供应商名称"
                        placeholder="请输入"
                        initialValue={contextBody.vendor}
                        readonly
                    />

                    <ProFormText
                        width="md"
                        name="terminal"
                        label="终端名称"
                        placeholder="请输入"
                        initialValue={contextBody.terminal}
                        readonly
                    />

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

                    <ProFormText
                        width="md"
                        name="payWay"
                        label="付款比例"
                        placeholder="请输入"
                        initialValue={contextBody.payWay}
                        readonly
                        onBlur={(e) => {
                            handleInputChange(e.target.value, 1);
                        }}
                    />

                    <ProFormText
                        width="md"
                        name="contract"
                        label="合同编号"
                        placeholder="请输入"
                        initialValue={contextBody.contract}
                        readonly
                    />

                    {/* <ProFormText
                        width="md"
                        name="annex"
                        label="合同附件"
                        placeholder="请输入"
                        initialValue={contextBody.fileUrl}
                        readonly
                    /> */}


                    <ProFormText
                        width="md"
                        name="totalPrice"
                        label="合同金额"
                        placeholder="请输入"
                        disabled
                        readonly
                        // rules={[{ required: true, message: '此项为必填项' }]}
                        // value={contextBody.totalPrice}
                        initialValue={contextBody.totalPrice}
                    />
                </ProForm.Group>
            </ProCard>
            <ProCard
                title="产品明细"
                style={{ marginTop: 10 }}
                headerBordered
                bordered
            >
                <ProductDetail productBody={contextBody.orderStagesDeviceVoList} EditProductBody={getEditProductBody}></ProductDetail>
            </ProCard>

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

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