import {
postOrderErpOrderStagesAdd,
postOrderErpOrderStagesPayWaySaveOrUpdate,
postOrderErpOrderStagesSearch,
postOrderErpOrderStagesUpload,
} from '@/services';
import { PlusOutlined } from '@ant-design/icons';
import {
ModalForm,
ProCard,
ProForm,
ProFormDatePicker,
ProFormText,
ProFormTextArea,
ProFormUploadButton,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import { RcFile } from 'antd/es/upload';
import { useEffect, useState } from 'react';
import PayWayDetail from '../payWayDetail/payWayDetail';
import ProductDetail from '../productDetail/productDetail';
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] = 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 setSave(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) => {
totalPay += Number(item);
});
}
if (totalPay !== 100) {
message.warning('比例总和不为100!');
} else {
message.success('输入有效!');
payValue.forEach((item) => {
body.push({
proportion: item + '%',
payPrice: (Number(item) * total) / 100,
});
});
setPayWayBody(body);
}
} else {
payValue.forEach((item) => {
totalPay += Number(item);
});
payValue.forEach((item) => {
body.push({
proportion: item + '%',
payPrice: (Number(item) * priceNow) / 100,
});
});
setPayWayBody(body);
}
}
};
function getEditProductBody(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 refresh() {
setEditProductBody([]);
setContextBody({
id: undefined,
contract: undefined,
dateRange: undefined,
terminal: undefined,
orderStagesDeviceVoList: [],
totalPrice: undefined,
payWay: '30/30/30/10',
annex: undefined,
remark: undefined,
});
handleInputChange('30/30/30/10', 0, 0);
}
return (
<ModalForm<OrderStagesWithListItem>
title="新建"
trigger={
<Button
key="button"
icon={<PlusOutlined />}
type="primary"
onClick={() => refresh()}
>
新增
</Button>
}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
}}
submitTimeout={2000}
onFinish={async (values) => {
if (editProductBody.length === 0) {
message.error('请填写产品数据');
return false;
}
let remakeValue = [];
const formData = new FormData();
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,
createByName: null,
};
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;
}
}
toSendEdit.createByName = JSON.parse(
localStorage.getItem('userInfo'),
).username;
const isSaveOrUpdate = await postOrderErpOrderStagesAdd({
data: { ...toSendEdit },
});
if (isSaveOrUpdate) {
const promises = [];
otherBody.forEach((item) => {
let remakeItem = {
ossId: contextBody.id,
number: item.id,
dateRange: item.payDate,
fileName: item.fileName,
fileUrl: item.fileUrl,
};
// 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 },
});
if (returnOssID) {
makeEnd = remakeValue.map((item) => {
return { ...item, ossId: returnOssID.data.data[0].id };
});
}
};
promises.push(getRetrunIDPromise());
Promise.all(promises).then(async () => {
await postOrderErpOrderStagesPayWaySaveOrUpdate({
data: makeEnd,
});
});
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}
label="合同附件"
/>
<ProFormText
width="md"
name="totalPrice"
label="合同金额"
placeholder="请输入"
disabled={isDis}
initialValue={'0'}
/>
</ProForm.Group>
</ProCard>
<ProCard
title={
<>
<span style={{ color: 'red' }}>*</span>产品明细
</>
}
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>
);
};