Skip to content

M
merchant-manage-ui
Commit 93dae43d authored by 李腾's avatar 李腾
Browse files
Options

feat: 完善多物流发货逻辑

parent 0752b7b3
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 104 deletions
src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal/index.jsx
View file @ 93dae43d
...@@ -6,29 +6,64 @@ import styles from './index.less'; ...@@ -6,29 +6,64 @@ import styles from './index.less';
const FormComponent = (props, ref) => { const FormComponent = (props, ref) => {
const { record = {}, companys = [] } = props; const { record = {}, companys = [] } = props;
const { mchOrderSkuVoList } = record; const { mchOrderSkuVoList, packageList } = record;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [skuInfoList, setSkuInfoList] = useState(mchOrderSkuVoList.map(item => ({}))); const [addPackageList, setAddPackageList] = useState({
expressCompanyCode: null,
expressCompanyName: '',
expressNo: '',
serialNumber: '',
skuInfoList: mchOrderSkuVoList.map(item => ({})),
});
const [initPackageList, setInitPackageList] = useState(() => {
if (packageList.length === 0) {
return [
{
skuInfoList: mchOrderSkuVoList.map(item => ({ skuNo: [item.skuNo], quantity: 1 })),
},
];
}
return packageList.map(item => ({
...item,
skuInfoList: mchOrderSkuVoList.map((skuInfo, index) => {
console.log(item.skuInfoList);
const editData = item.skuInfoList[index];
if (editData) {
return {
...editData,
};
}
return {};
}),
}));
});
// eslint-disable-next-line consistent-return
const onCheckSkuInfoList = async (_, names) => {
const count = names.filter(item => {
console.log('sku', item.skuNo);
return item.skuNo && item.skuNo.length;
}).length;
if (count === 0) {
return Promise.reject(new Error('至少选择一个商品'));
}
};
const formLayout = { const formLayout = {
labelCol: { span: 0 }, labelCol: { span: 0 },
wrapperCol: { span: 24 }, wrapperCol: { span: 24 },
}; };
const formRules = { const formRules = {
skuInfoList: [{ validator: onCheckSkuInfoList }],
expressCompanyCode: [{ required: true, message: '请选择物流公司' }], expressCompanyCode: [{ required: true, message: '请选择物流公司' }],
expressNo: [{ required: true, message: '请填写物流单号' }], expressNo: [{ required: true, message: '请填写物流单号' }],
serialNumber: [{ required: true, message: '请填写序列号' }], serialNumber: [{ required: true, message: '请填写序列号' }],
}; };
useEffect(() => { useEffect(() => {
console.log(companys, record.mchOrderSkuVoList); console.log(initPackageList);
console.log(companys, mchOrderSkuVoList);
// setSkuInfoList(mchOrderSkuVoList.map(item=>{
// return {
// skuId: item.orderSkuId,
// quantity: 1
// }
// }))
}, [record]); }, [record]);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
...@@ -36,37 +71,31 @@ const FormComponent = (props, ref) => { ...@@ -36,37 +71,31 @@ const FormComponent = (props, ref) => {
})); }));
const getSkuOptions = (index, parentIndex) => { const getSkuOptions = (index, parentIndex) => {
const { skuId, skuName } = mchOrderSkuVoList[index]; const { skuNo, skuName } = mchOrderSkuVoList[index];
const packageList = form.getFieldValue('packageList');
const updateFormValue = value => {
packageList[parentIndex].skuInfoList[index].skuId = value;
console.log(packageList);
// form.setFieldsValue({
// packageList,
// })
};
return ( return (
<Checkbox onChange={() => updateFormValue(skuId)} value={skuId}> <Checkbox.Group>
{skuName} <Checkbox value={skuNo}>{skuName}</Checkbox>
</Checkbox> </Checkbox.Group>
); );
}; };
const SkuFormList = skuProps => { const SkuFormList = skuProps => {
const { skuFields, parentFields } = skuProps; const { skuFields, parentFields, errors } = skuProps;
return skuFields.map(field => { return (
console.log(111111111, field, parentFields); <div className={styles['sku-list-box']}>
return ( {skuFields.map(field => (
<div className={styles['sku-list']}> <div className={styles['sku-list']}>
<Form.Item className={styles['sku-list__goods-name']} name={[field.name, 'skuId']}> <Form.Item className={styles['sku-list__goods-name']} name={[field.name, 'skuNo']}>
{getSkuOptions(field.name, parentFields.name)} {getSkuOptions(field.name, parentFields.name)}
</Form.Item> </Form.Item>
<Form.Item className={styles['sku-list__goods-count']} name={[field.name, 'quantity']}> <Form.Item className={styles['sku-list__goods-count']} name={[field.name, 'quantity']}>
<Input type="number" placeholder="请输入数量" /> <Input type="number" placeholder="数量" />
</Form.Item> </Form.Item>
</div> </div>
); ))}
}); <Form.ErrorList errors={errors} />
</div>
);
}; };
return ( return (
...@@ -74,66 +103,50 @@ const FormComponent = (props, ref) => { ...@@ -74,66 +103,50 @@ const FormComponent = (props, ref) => {
form={form} form={form}
{...formLayout} {...formLayout}
initialValues={{ initialValues={{
packageList: [ packageList: initPackageList,
{
skuInfoList,
},
],
}} }}
> >
<Form.List name="packageList" rules={[]}> <Form.List name="packageList" rules={[]}>
{(fields, { add, remove }, { errors }) => ( {(fields, { add, remove }, { errors }) => (
<> <>
{fields.map((field, index) => ( {fields.map((field, index) => (
<> <div className={styles['sku-list-module']}>
<React.Fragment key={field.key}> <Form.List name={[field.name, 'skuInfoList']} rules={formRules.skuInfoList}>
<Form.List name={[field.name, 'skuInfoList']}> {(skuFields, actions, { errors: err }) => (
{skuFields => ( <SkuFormList
<SkuFormList key={index.toString()}
key={index.toString()} skuFields={skuFields}
skuFields={skuFields} parentFields={field}
parentFields={field} errors={err}
/> />
)} )}
</Form.List> </Form.List>
<Form.Item <Form.Item
name={[field.name, 'expressCompanyCode']} name={[field.name, 'expressCompanyCode']}
rules={formRules.expressCompanyCode} rules={formRules.expressCompanyCode}
> >
<Select <Select
placeholder="请选择物流公司" placeholder="请选择物流公司"
fieldNames={{ label: 'expressCompanyName', value: 'expressCompanyCode' }} fieldNames={{ label: 'expressCompanyName', value: 'expressCompanyCode' }}
options={companys} options={companys}
></Select> ></Select>
</Form.Item> </Form.Item>
<Form.Item name={[field.name, 'expressNo']} rules={formRules.expressNo}> <Form.Item name={[field.name, 'expressNo']} rules={formRules.expressNo}>
<Input placeholder="请填写物流单号" /> <Input placeholder="请填写物流单号" />
</Form.Item> </Form.Item>
<Form.Item name={[field.name, 'serialNumber']} rules={formRules.serialNumber}> <Form.Item name={[field.name, 'serialNumber']} rules={formRules.serialNumber}>
<Input placeholder="请填写序列号" /> <Input placeholder="请填写序列号" />
</Form.Item> </Form.Item>
</React.Fragment> </div>
</>
))} ))}
<div className={styles.operation}> <div className={styles.operation}>
<PlusCircleOutlined <PlusCircleOutlined
onClick={() => { onClick={() => {
const packageList = form.getFieldValue('packageList'); const currentPackageList = form.getFieldValue('packageList');
console.log(packageList); console.log(currentPackageList);
form.setFieldsValue({ form.setFieldsValue({
packageList: [ packageList: [...currentPackageList, addPackageList],
...packageList,
{
expressCompanyCode: '',
skuInfoList: [
{
skuId: '',
quantity: 1,
},
],
},
],
}); });
}} }}
/> />
...@@ -158,6 +171,20 @@ const UpdateStatusModal = (props, ref) => { ...@@ -158,6 +171,20 @@ const UpdateStatusModal = (props, ref) => {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [record, setRecord] = useState(); const [record, setRecord] = useState();
// 提交前处理数据结构将skuNo的值从[skuNo]=>skuNo
const onFilterParams = packageList => {
const currentPackageList = JSON.parse(JSON.stringify(packageList));
return currentPackageList.map(item => {
const { skuInfoList } = item;
return {
...item,
skuInfoList: skuInfoList
.filter(skuInfo => skuInfo.skuNo.length)
.map(skuInfo => ({ ...skuInfo, skuNo: skuInfo.skuNo[0] })),
};
});
};
const open = item => { const open = item => {
setVisible(true); setVisible(true);
setRecord(item); setRecord(item);
...@@ -171,7 +198,7 @@ const UpdateStatusModal = (props, ref) => { ...@@ -171,7 +198,7 @@ const UpdateStatusModal = (props, ref) => {
const onOk = () => { const onOk = () => {
formRef.current.form.validateFields().then(values => { formRef.current.form.validateFields().then(values => {
console.log('fieldsValue :>>', values); console.log('fieldsValue :>>', onFilterParams(values.packageList));
}); });
}; };
......
src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal/index.less
View file @ 93dae43d
.sku-list { .sku-list-module {
display: flex; margin-bottom: 20px;
&__goods-name { padding: 10px 20px;
flex: 1; border: 1px solid #f2f2f2;
} }
.sku-list-box {
padding-bottom: 10px;
.sku-list {
display: flex;
// padding-bottom: 19px;
&__goods-name {
flex: 1;
margin-bottom: 0 !important;
}
&__goods-count { &__goods-count {
width: 100px; width: 100px;
margin-bottom: 5px !important;
}
} }
} }
......
src/pages/orderManage/pendingDeliveryOrder/index.jsx
View file @ 93dae43d
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
getLogistics, getLogistics,
downOrder, downOrder,
getJDLogisticsInfo, getJDLogisticsInfo,
apiQueryOrderInfo,
} from './service'; } from './service';
const { confirm } = Modal; const { confirm } = Modal;
...@@ -403,20 +404,24 @@ const TableList = props => { ...@@ -403,20 +404,24 @@ const TableList = props => {
marginBottom: '10px', marginBottom: '10px',
}} }}
onClick={async () => { onClick={async () => {
const skuListData = await getGoods(record?.orderId); // const skuListData = await getGoods(record?.orderId);
let logisticsData = [{}]; // let logisticsData = [{}];
setSkuList(skuListData); // setSkuList(skuListData);
const data = await getLogistics(record?.orderId); // const data = await getLogistics(record?.orderId);
logisticsData = data.map(item => ({ // logisticsData = data.map(item => ({
selectedGoods: item?.skus?.map(sku => sku?.orderSkuId), // selectedGoods: item?.skus?.map(sku => sku?.orderSkuId),
selectedCompany: item.expressCompanyCode // selectedCompany: item.expressCompanyCode
? `${item?.expressCompanyCode}-${item?.expressCompanyName}` // ? `${item?.expressCompanyCode}-${item?.expressCompanyName}`
: null, // : null,
orderNum: item?.deliveryNo, // orderNum: item?.deliveryNo,
})); // }));
// setLogisticsData(logisticsData); // setLogisticsData(logisticsData);
// handleModalVisible(true); // handleModalVisible(true);
multiLogisticsModalRef.current.open(record); const res = await apiQueryOrderInfo({
orderNo: record.orderNo,
});
multiLogisticsModalRef.current.open({ ...record, packageList: res.packageList });
}} }}
> >
{props.type === 2 ? '更新物流信息' : '填写物流信息'} {props.type === 2 ? '更新物流信息' : '填写物流信息'}
......
src/pages/orderManage/pendingDeliveryOrder/service.js
View file @ 93dae43d
...@@ -151,3 +151,45 @@ export function apiDelayDeliverGoods(data) { ...@@ -151,3 +151,45 @@ export function apiDelayDeliverGoods(data) {
prefix: config.kdspApi, prefix: config.kdspApi,
}); });
} }
// 查询多物流订单信息
//
export function apiQueryOrderInfo(params) {
return new Promise(resolve => {
setTimeout(() => {
resolve({
packageList: [
{
expressCompanyCode: 'yunda',
expressCompanyName: '',
expressNo: 'YUNDA012345678',
serialNumber: '0011223344',
skuInfoList: [
{
skuNo: ['529355424931841'],
quantity: '2',
},
{
skuNo: ['530724210084865'],
quantity: '12',
},
],
},
{
expressCompanyCode: 'yunda',
expressCompanyName: '',
expressNo: 'YUNDA012345678',
serialNumber: '0011223344',
skuInfoList: [
{
skuNo: ['529355424931841'],
quantity: '2',
},
],
},
],
});
}, 1000);
});
// return request.get('/api/merchants/orders/deliveries/packages/detail', params)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment