Skip to content

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

feat: 新增多物流发货modal

parent e5995053
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 89 deletions
src/pages/GoodsManage/LogModal/index.jsx
View file @ 0752b7b3
......@@ -97,13 +97,16 @@ const LogModal = props => {
useEffect(() => {
if (!props.id) return;
handleSearch();
// 20221108 临时隐藏商品详情，默认切换到审核详情 by liteng
// handleSearch();
bundleOnTabChange('1');
}, [props.id]);
const { visible } = props;
return (
<Modal title="日志详情" visible={visible} footer={null} onCancel={bundleOnCancel} width="800px">
<Tabs type="card" onChange={bundleOnTabChange} activeKey={tabActiveKey}>
<Tabs.TabPane tab="商品详情" key="0">
{/* 20221108 临时隐藏商品详情 by liteng */}
{/* <Tabs.TabPane tab="商品详情" key="0">
<Table
dataSource={tableData.records}
bordered
......@@ -122,7 +125,7 @@ const LogModal = props => {
className={styles.pagination}
/>
)}
</Tabs.TabPane>
</Tabs.TabPane> */}
<Tabs.TabPane tab="审核详情" key="1">
<Table
dataSource={merchantList}
......
src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal.jsx deleted 100644 → 0
View file @ e5995053
import React, { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
import { Modal, Select, notification } from 'antd';
import { Form } from '@ant-design/compatible';
import { userEnabled, userDisabled, userDelete } from '@/pages/systemManage/service';
const FormComponent = props => {
const { record = {}, form } = props;
const { getFieldDecorator, setFieldsValue } = form;
const formLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
};
const formRules = {
status: [{ required: true, message: '' }],
};
useEffect(() => {
setFieldsValue(record);
}, [record]);
const rulesHandler = name => ({
rules: formRules[name],
});
return (
<Form {...formLayout}>
<Form.Item label="用户名">{record.name}</Form.Item>
</Form>
);
};
const FormWarpper = Form.create({})(forwardRef(FormComponent));
const UpdateStatusModal = (props, ref) => {
const { reload } = props;
const formRef = useRef();
const [visible, setVisible] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [record, setRecord] = useState({});
const open = item => {
setVisible(true);
const { name, status, id } = item;
// 初始化数据,currentStatus 用来判断状态选项
setRecord({
name,
status: status.value,
id,
currentStatus: status.value,
});
};
const onCancel = () => {
setVisible(false);
setConfirmLoading(false);
formRef.current.resetFields();
};
const onOk = () => {
formRef.current.validateFields(async (err, fieldsValue) => {
console.log('fieldsValue :>>', fieldsValue);
});
};
useImperativeHandle(ref, () => ({
open,
}));
const modalProps = {
title: 'xx',
visible,
confirmLoading,
onCancel,
onOk,
};
return (
<Modal {...modalProps}>
<FormWarpper ref={formRef} record={record} />
</Modal>
);
};
export default forwardRef(UpdateStatusModal);
src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal/index.jsx 0 → 100644
View file @ 0752b7b3
import React, { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
import { Modal, Select, notification, Form, Input, Button, Checkbox } from 'antd';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { userEnabled, userDisabled, userDelete } from '@/pages/systemManage/service';
import styles from './index.less';
const FormComponent = (props, ref) => {
const { record = {}, companys = [] } = props;
const { mchOrderSkuVoList } = record;
const [form] = Form.useForm();
const [skuInfoList, setSkuInfoList] = useState(mchOrderSkuVoList.map(item => ({})));
const formLayout = {
labelCol: { span: 0 },
wrapperCol: { span: 24 },
};
const formRules = {
expressCompanyCode: [{ required: true, message: '请选择物流公司' }],
expressNo: [{ required: true, message: '请填写物流单号' }],
serialNumber: [{ required: true, message: '请填写序列号' }],
};
useEffect(() => {
console.log(companys, record.mchOrderSkuVoList);
// setSkuInfoList(mchOrderSkuVoList.map(item=>{
// return {
// skuId: item.orderSkuId,
// quantity: 1
// }
// }))
}, [record]);
useImperativeHandle(ref, () => ({
form,
}));
const getSkuOptions = (index, parentIndex) => {
const { skuId, skuName } = mchOrderSkuVoList[index];
const packageList = form.getFieldValue('packageList');
const updateFormValue = value => {
packageList[parentIndex].skuInfoList[index].skuId = value;
console.log(packageList);
// form.setFieldsValue({
// packageList,
// })
};
return (
<Checkbox onChange={() => updateFormValue(skuId)} value={skuId}>
{skuName}
</Checkbox>
);
};
const SkuFormList = skuProps => {
const { skuFields, parentFields } = skuProps;
return skuFields.map(field => {
console.log(111111111, field, parentFields);
return (
<div className={styles['sku-list']}>
<Form.Item className={styles['sku-list__goods-name']} name={[field.name, 'skuId']}>
{getSkuOptions(field.name, parentFields.name)}
</Form.Item>
<Form.Item className={styles['sku-list__goods-count']} name={[field.name, 'quantity']}>
<Input type="number" placeholder="请输入数量" />
</Form.Item>
</div>
);
});
};
return (
<Form
form={form}
{...formLayout}
initialValues={{
packageList: [
{
skuInfoList,
},
],
}}
>
<Form.List name="packageList" rules={[]}>
{(fields, { add, remove }, { errors }) => (
<>
{fields.map((field, index) => (
<>
<React.Fragment key={field.key}>
<Form.List name={[field.name, 'skuInfoList']}>
{skuFields => (
<SkuFormList
key={index.toString()}
skuFields={skuFields}
parentFields={field}
/>
)}
</Form.List>
<Form.Item
name={[field.name, 'expressCompanyCode']}
rules={formRules.expressCompanyCode}
>
<Select
placeholder="请选择物流公司"
fieldNames={{ label: 'expressCompanyName', value: 'expressCompanyCode' }}
options={companys}
></Select>
</Form.Item>
<Form.Item name={[field.name, 'expressNo']} rules={formRules.expressNo}>
<Input placeholder="请填写物流单号" />
</Form.Item>
<Form.Item name={[field.name, 'serialNumber']} rules={formRules.serialNumber}>
<Input placeholder="请填写序列号" />
</Form.Item>
</React.Fragment>
</>
))}
<div className={styles.operation}>
<PlusCircleOutlined
onClick={() => {
const packageList = form.getFieldValue('packageList');
console.log(packageList);
form.setFieldsValue({
packageList: [
...packageList,
{
expressCompanyCode: '',
skuInfoList: [
{
skuId: '',
quantity: 1,
},
],
},
],
});
}}
/>
<MinusCircleOutlined
onClick={() => {
remove(fields[fields.length - 1].name);
}}
/>
</div>
</>
)}
</Form.List>
</Form>
);
};
const FormWarpper = forwardRef(FormComponent);
const UpdateStatusModal = (props, ref) => {
const { companys } = props;
const formRef = useRef();
const [visible, setVisible] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [record, setRecord] = useState();
const open = item => {
setVisible(true);
setRecord(item);
};
const onCancel = () => {
setVisible(false);
setConfirmLoading(false);
formRef.current.form.resetFields();
};
const onOk = () => {
formRef.current.form.validateFields().then(values => {
console.log('fieldsValue :>>', values);
});
};
useImperativeHandle(ref, () => ({
open,
}));
const modalProps = {
title: '填写物流信息',
height: 500,
visible,
confirmLoading,
onCancel,
onOk,
};
return (
<Modal {...modalProps}>
{record ? <FormWarpper ref={formRef} record={record} companys={companys} /> : ''}
</Modal>
);
};
export default forwardRef(UpdateStatusModal);
src/pages/orderManage/pendingDeliveryOrder/components/MultiLogisticsModal/index.less 0 → 100644
View file @ 0752b7b3
.sku-list {
display: flex;
&__goods-name {
flex: 1;
}
&__goods-count {
width: 100px;
}
}
.operation {
font-size: 24px;
text-align: center;
> * {
margin: 0 10px;
}
}
src/pages/orderManage/pendingDeliveryOrder/index.jsx
View file @ 0752b7b3
......@@ -12,6 +12,8 @@ import LogisticsForm from './components/LogisticsForm';
import PopoverDom from './components/PreviewImage';
import LogisticsCom from './components/LogisticsCom';
import DelayDeliverGoods from './components/DelayDeliverGoods';
import MultiLogisticsModal from './components/MultiLogisticsModal';
import {
queryToSend,
queryExpress,
......@@ -58,6 +60,7 @@ const TableList = props => {
// const endDisabledDate = current =>
// current && (current.diff(startTime, 'days') > 30 || current.diff(startTime, 'days') < 0);
const multiLogisticsModalRef = useRef();
const actionRef = useRef();
const ref = useRef(FormInstance);
const handleCom = async (record, skuItem) => {
......@@ -411,8 +414,9 @@ const TableList = props => {
: null,
orderNum: item?.deliveryNo,
}));
setLogisticsData(logisticsData);
handleModalVisible(true);
// setLogisticsData(logisticsData);
// handleModalVisible(true);
multiLogisticsModalRef.current.open(record);
}}
>
{props.type === 2 ? '更新物流信息' : '填写物流信息'}
......@@ -566,6 +570,8 @@ const TableList = props => {
orderId={delayOrderIDs}
onCancel={e => onCancelDelay(e)}
/>
<MultiLogisticsModal companys={companys} ref={multiLogisticsModalRef} />
</PageHeaderWrapper>
);
};
......
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