import { RESPONSE_CODE } from '@/constants/enum';
import {
postServiceOrderProcureSend,
postServiceOrderSendProduct,
postServiceOrderSupplierSendOrder,
} from '@/services';
import { enumToSelect } from '@/utils';
import {
ProColumns,
ProForm,
ProFormSelect,
ProFormText,
ProTable,
} from '@ant-design/pro-components';
import {
Button,
Col,
Flex,
Input,
InputNumber,
Modal,
Row,
Select,
message,
} from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { CHECK_TYPE, LOGISTICS_STATUS_OPTIONS } from '../constant';
const DeliverModal = ({
data: propsData,
isSendProduct,
setVisible,
sendType,
onClose,
}) => {
const [data, setData] = useState(propsData || {});
const form = useRef();
/**
* 是供应商发货还是普通发货
* @param typeString
* @returns
*/
function optType(typeString: string) {
if (sendType === typeString) {
return true;
}
return false;
}
useEffect(() => {
setData(propsData);
}, [propsData]);
const handleChange = (key: string, index: number, obj: any) => {
const newData = cloneDeep(data);
if (typeof obj !== 'object') {
newData[index][key] = obj;
} else {
newData[index][key] = obj.target?.value;
}
setData(newData);
};
const columns: ProColumns<any>[] = [
{
title: 'ID',
dataIndex: 'id',
width: 120,
render: (_, record) => <Input value={record.id} disabled />,
},
{
title: '商品编号',
dataIndex: 'productCode',
width: 120,
render: (_, record) => <Input value={record.productCode} disabled />,
},
{
title: '商品名称',
dataIndex: 'productName',
width: 120,
render: (_, record) => <Input value={record.productName} disabled />,
},
{
title: '商品参数',
dataIndex: 'parameters',
width: 80,
render: (_, record) => <Input value={record.parameters} disabled />,
},
{
title: '商品数量',
dataIndex: 'status',
render: (_, record) => <InputNumber value={record.quantity} disabled />,
},
{
title: '包裹数量',
dataIndex: 'packageNumber',
render: (_, record, index) => (
<InputNumber
min={1}
value={record.packageNumber}
defaultValue={1}
onChange={(value) => handleChange('packageNumber', index, value)}
/>
),
},
{
title: '物流方式',
key: 'logisticsMethod',
render: (_, record, index) => (
<Select
style={{ minWidth: 150 }}
placeholder="请输入物流方式"
value={record.logisticsMethod}
options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
onChange={(value) => {
handleChange('logisticsMethod', index, value); //修改时更改record数据
if (value === 'OTHER_LOGISTICS') {
message.info(
'您选择的是[其他物流方式]，请将该物流方式写在备注中',
);
}
}}
/>
),
},
{
title: '物流单号',
key: 'serialNumber',
render: (_, record, index) => (
<Input
placeholder="请输入物流单号"
value={record.serialNumber}
onChange={(value) => {
handleChange('serialNumber', index, value);
}}
/>
),
},
{
title: '物流备注',
dataIndex: 'packageNumber',
render: (_, record, index) => (
<Input.TextArea
value={record.logisticsNotes}
onChange={(value) => handleChange('logisticsNotes', index, value)}
/>
),
},
];
return (
<Modal
open
width={1000}
title={isSendProduct ? '发货' : '修改发货信息'}
onOk={async () => {
//请求体封装
let list = data.map((item) => {
return {
id: item.id,
logisticsMethod: item.logisticsMethod,
serialNumber: item.serialNumber,
packageNumber:
item.packageNumber === null || item.packageNumber === undefined
? 1
: item.packageNumber,
logisticsNotes: item.logisticsNotes,
};
});
for (let item of list) {
let method = item.logisticsMethod;
let notes = item.logisticsNotes;
if (
method === 'OTHER_LOGISTICS' &&
(notes === '' || notes === undefined)
) {
message.error(
'请检查：物流方式为[其他物流方式]的记录中，物流备注不能为空！请将实际的物流方式填写在备注中！',
);
return;
}
}
let body = { id: data[0].mainOrderId, list: list, flag: false };
if (isSendProduct) {
body.flag = true;
}
//发货请求
let res;
if (optType(CHECK_TYPE.SUPPLIER)) {
res = await postServiceOrderSupplierSendOrder({ data: body });
} else if (optType(CHECK_TYPE.PROCURE)) {
res = await postServiceOrderProcureSend({ data: body });
} else {
res = await postServiceOrderSendProduct({ data: body });
}
if (res.result === RESPONSE_CODE.SUCCESS) {
message.success(res.message);
onClose();
}
}}
onCancel={() => {
setVisible(false);
}}
footer={[
<Button
key="back"
onClick={() => {
setVisible(false);
}}
>
取消
</Button>,
<Button
key="selfDeliver"
type="primary"
onClick={async () => {
//请求体封装
let list = data.map((item) => {
return {
id: item.id,
deliverType: 'SELF_DELIVER',
};
});
let body = { id: data[0].mainOrderId, list: list, flag: false };
if (isSendProduct) {
body.flag = true;
}
//发货请求
let res;
if (optType(CHECK_TYPE.SUPPLIER)) {
res = await postServiceOrderSupplierSendOrder({ data: body });
} else if (optType(CHECK_TYPE.PROCURE)) {
res = await postServiceOrderProcureSend({ data: body });
} else {
res = await postServiceOrderSendProduct({ data: body });
}
if (res.result === RESPONSE_CODE.SUCCESS) {
message.success(res.message);
onClose();
}
}}
>
自行派送
</Button>,
<Button
key="submit"
type="primary"
onClick={async () => {
//请求体封装
let list = data.map((item) => {
return {
id: item.id,
logisticsMethod: item.logisticsMethod,
serialNumber: item.serialNumber,
packageNumber:
item.packageNumber === null ||
item.packageNumber === undefined
? 1
: item.packageNumber,
logisticsNotes: item.logisticsNotes,
};
});
for (let item of list) {
let method = item.logisticsMethod;
let notes = item.logisticsNotes;
if (
method === 'OTHER_LOGISTICS' &&
(notes === '' || notes === undefined)
) {
message.error(
'请检查：物流方式为[其他物流方式]的记录中，物流备注不能为空！请将实际的物流方式填写在备注中！',
);
return;
}
}
let body = { id: data[0].mainOrderId, list: list, flag: false };
if (isSendProduct) {
body.flag = true;
}
//发货请求
let res;
if (optType(CHECK_TYPE.SUPPLIER)) {
res = await postServiceOrderSupplierSendOrder({ data: body });
} else if (optType(CHECK_TYPE.PROCURE)) {
res = await postServiceOrderProcureSend({ data: body });
} else {
res = await postServiceOrderSendProduct({ data: body });
}
if (res.result === RESPONSE_CODE.SUCCESS) {
message.success(res.message);
onClose();
}
}}
>
确认
</Button>,
]}
>
<Flex vertical>
<strong>将物流方式和物流单号更新到下方所有订单</strong>
<span className="text-[red] py-1">
选择【其他物流方式】时，需要将对应的物流方式填写在备注中。例如：如果发圆通快递，系统上没有这个选项，就需要选【其他物流方式】，然后把“圆通快递”填在备注上。
</span>
</Flex>
<ProForm
layout="inline"
submitter={false}
className="mb-8"
formRef={form}
>
<Row gutter={[0, 6]}>
<Col>
<ProFormSelect
placeholder="请输入物流方式"
name="logisticsMethod"
width="sm"
label="物流方式"
options={enumToSelect(LOGISTICS_STATUS_OPTIONS)}
/>
<ProFormText name="logisticsNotes" label="物流备注"></ProFormText>
</Col>
<Col>
<ProFormText name="serialNumber" label="物流单号"></ProFormText>
</Col>
</Row>
<Button
type="primary"
onClick={() => {
const values = form.current.getFieldsValue();
if (values.logisticsMethod === 'OTHER_LOGISTICS') {
message.info(
'自动填充成功！您选择的是其他物流方式，请将物流方式写在物流备注中！',
);
}
let newData = cloneDeep(data);
newData = newData.map((item) => ({
...item,
logisticsMethod: values.logisticsMethod,
serialNumber: values.serialNumber,
logisticsNotes: values.logisticsNotes,
}));
setData(newData);
}}
>
批量更新
</Button>
</ProForm>
<ProTable<any>
className="px-0"
dataSource={data}
rowKey="id"
pagination={false}
columns={columns}
search={false}
dateFormatter="string"
options={false}
scroll={{ x: 1400 }}
/>
</Modal>
);
};
export default DeliverModal;