import { postOrderErpOrderStagesPayWaySaveOrUpdate, postOrderErpOrderStagesSaveOrUpdate, postOrderErpOrderStagesSearch, postOrderErpOrderStagesUpload, } from '@/services'; import { ModalForm, ProCard, ProForm, ProFormDatePicker, ProFormText, ProFormTextArea, } from '@ant-design/pro-components'; import { Form, message } from 'antd'; import { RcFile } from 'antd/es/upload'; import { useEffect, useState } from 'react'; import PayWayDetail from './readPayWay'; import ProductDetail from './readProduct'; 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 [, setEditProductBody] = useState([]); const [total, setTotal] = useState(0); const [payWayBody, setPayWayBody] = useState([]); const [otherBody, setOtherBody] = 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 refresh() { const res = await postOrderErpOrderStagesSearch({ data: { contract: currentContract }, }); const context = res?.data?.data[0]; if (context?.contract !== null) { setContextBody(context); setTotal(context?.totalPrice); form.setFieldValue('totalPrice', context?.totalPrice); } } function setSave(value) { setOtherBody(value); } useEffect(() => { setContextBody({ ...contextBody, totalPrice: total }); form.setFieldValue('totalPrice', total); }, [total]); 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) => { totalPay += Number(item); }); } if (totalPay !== 100) { message.warning('比例总和不为100!'); } else { message.success('输入有效!'); const price = total; payValue.forEach((item) => { body.push({ proportion: item + '%', payPrice: (Number(item) * price) / 100, }); }); setPayWayBody(body); } } else { payValue.forEach((item) => { totalPay += Number(item); }); payValue.forEach((item) => { body.push({ proportion: item + '%', payPrice: (Number(item) * priceNow) / 100, }); }); setPayWayBody(body); } }; async function getBody() { const res = await postOrderErpOrderStagesSearch({ data: { contract: currentContract }, }); const context = res.data.data[0]; if (context?.contract !== null) { setContextBody(context); setTotal(context?.totalPrice); form.setFieldValue('totalPrice', context?.totalPrice); } handleInputChange(context?.payWay, 0, context?.totalPrice); } useEffect(() => { getBody(); }, []); function getEditProductBody(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); } return ( <ModalForm<OrderStagesWithListItem> title="查看" trigger={<a onClick={refresh}>查看</a>} form={form} autoFocusFirstInput modalProps={{ destroyOnClose: true, }} submitter={{ resetButtonProps: {}, submitButtonProps: { style: { display: 'none', }, }, }} submitTimeout={2000} onFinish={async (values) => { let remakeValue = []; // 创建一个用于存储所有异步操作的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 () => { 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) { toSendEdit.annex = res.data; } } const isSaveOrUpdate = await postOrderErpOrderStagesSaveOrUpdate({ data: { ...toSendEdit }, }); if (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> ); };