Skip to content

M
merchant-manage-ui
Commit 3f5ac61a authored by FE-安焕焕's avatar FE-安焕焕 👣
Browse files
Options

优化订单查询

parent 870a14a2
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 181 deletions
.eslintrc.js
View file @ 3f5ac61a
......@@ -7,5 +7,6 @@ module.exports = {
},
rules: {
'max-len': ['error', { code: 200 }],
'@typescript-eslint/camelcase': ['off'],
},
};
config/config.js
View file @ 3f5ac61a
import slash from 'slash2';
import defaultSettings from './defaultSettings'; // https://umijs.org/config/
import slash from 'slash2';
import webpackPlugin from './plugin.config';
const { pwa, primaryColor } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
......@@ -91,6 +92,11 @@ export default {
name: 'pendingDeliveryOrder',
component: './orderManage/pendingDeliveryOrder',
},
{
path: '/orderManage/deliveryOrder',
name: 'deliveryOrder',
component: './orderManage/deliveryOrder',
},
{
component: './404',
},
......
src/pages/orderManage/deliveryOrder/index.jsx 0 → 100644
View file @ 3f5ac61a
import React from 'react';
import DeliverOrder from '../pendingDeliveryOrder';
const TableList = () => <DeliverOrder type={2} />;
export default TableList;
src/pages/orderManage/pendingDeliveryOrder/components/LogisticsForm.jsx
View file @ 3f5ac61a
......@@ -8,33 +8,33 @@ const { Option } = Select;
const LogisticsForm = props => {
const { modalVisible, onCancel, companys = [], skuList, onSubmit } = props;
const { getFieldDecorator, resetFields } = props.form;
const [result, setResult] = useState([{}]);
const { getFieldDecorator } = props.form;
const [result, setResult] = useState(() => props.value);
const formData = async (formDataList, fieldsValue, suffixes) => {
// 数据聚合
suffixes.forEach(suffixe => {
const formObj = {};
for(let key in fieldsValue) {
// eslint-disable-next-line no-restricted-syntax
for (const key in fieldsValue) {
if (key.startsWith(suffixe)) {
formObj[key.split('-')[1]] = fieldsValue[key];
formObj[key.split('-')[1]] = fieldsValue[key];
}
}
formDataList.push(formObj);
});
// 参数整合
const result = [];
const resultData = [];
formDataList.forEach(data => {
data.selectedGoods.forEach(orderSkuId => {
result.push({
orderSkuId: orderSkuId,
resultData.push({
orderSkuId,
expressCompanyCode: data.selectedCompany.split('-')[0],
expressCompanyName: data.selectedCompany.split('-')[1],
deliveryNo: data.orderNum,
})
})
})
});
});
});
// 校验重复商品
let orderSkuIds = [];
formDataList.forEach(data => {
......@@ -49,36 +49,34 @@ const LogisticsForm = props => {
notification.open({ message: '该订单下的所有商品必须设置物流信息！' });
return;
}
console.log(result);
await updateExpress(result);
await updateExpress(resultData);
onSubmit();
}
};
const handleSubmit = () => {
props.form.validateFields((err, fieldsValue) => {
let suffixes = [], formDataList = [];
const suffixes = [];
const formDataList = [];
if (err) return;
for(const key in fieldsValue) {
Object.keys(fieldsValue).forEach(key => {
const suffixe = key.split('-')[0];
if(!suffixes.includes(suffixe)) suffixes.push(suffixe);
}
if (!suffixes.includes(suffixe)) suffixes.push(suffixe);
});
formData(formDataList, fieldsValue, suffixes);
});
}
};
const addForm = () => {
setResult([...result, {}])
}
setResult([...result, {}]);
};
const rmForm = () => {
if (result.length === 1) return;
setResult(result.slice(0, result.length - 1))
}
const reset = () => {
setResult([{}]);
}
setResult(result.slice(0, result.length - 1));
};
useEffect(() => {
setResult(props.value);
}, props.value);
return (
<Modal
......@@ -90,63 +88,65 @@ const LogisticsForm = props => {
afterClose={() => setResult([{}])}
>
<Form>
{result && result.length &&
{result &&
result.length &&
result.map((v, i) => (
<Card key={i}>
<FormItem>
{getFieldDecorator(`${i}-selectedGoods`, {
rules: [
{
required: true,
message: '请选择该订单下的商品!',
},
],
})(
<Select
mode="multiple"
placeholder="请选择该订单下的商品"
>
{skuList.map(item => (
<Option value={item.orderSkuId} key={item.orderSkuId}>
{item.skuName + (item.skuAttr || '')}
</Option>
))}
</Select>,
)}
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-selectedCompany`, {
rules: [
{
required: true,
message: '请选择物流公司!',
},
],
})(
<Select
showSearch
placeholder="请选择物流公司"
// eslint-disable-next-line react/no-array-index-key
<Card key={i}>
<FormItem>
{getFieldDecorator(`${i}-selectedGoods`, {
initialValue: v.selectedGoods,
rules: [
{
required: true,
message: '请选择该订单下的商品!',
},
],
})(
<Select mode="multiple" placeholder="请选择该订单下的商品">
{skuList.map(item => (
<Option value={item.orderSkuId} key={item.orderSkuId}>
{item.skuName + (item.skuAttr || '')}
</Option>
))}
</Select>,
)}
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-selectedCompany`, {
initialValue: v.selectedCompany,
rules: [
{
required: true,
message: '请选择物流公司!',
},
],
})(
<Select showSearch placeholder="请选择物流公司">
{companys.map(item => (
<Option
value={`${item.expressCompanyCode}-${item.expressCompanyName}`}
key={item.expressCompanyCode}
>
{companys.map(item => (
<Option value={item.expressCompanyCode + '-' + item.expressCompanyName} key={item.expressCompanyCode}>
{item.expressCompanyName}
</Option>
))}
</Select>,
)}
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-orderNum`, {
rules: [
{
required: true,
message: '请填写物流单号!',
},
],
})(<Input placeholder="请填写物流单号" />)}
</FormItem>
</Card>)
)}
{item.expressCompanyName}
</Option>
))}
</Select>,
)}
</FormItem>
<FormItem>
{getFieldDecorator(`${i}-orderNum`, {
initialValue: v.orderNum,
rules: [
{
required: true,
message: '请填写物流单号!',
},
],
})(<Input placeholder="请填写物流单号" />)}
</FormItem>
</Card>
))}
<div className={style.logistics}>
<Icon className={style.logisticsIcon} onClick={addForm} type="plus-circle" />
<Icon className={style.logisticsIcon} onClick={rmForm} type="minus-circle" />
......
src/pages/orderManage/pendingDeliveryOrder/components/OrderDetail.jsx
View file @ 3f5ac61a
import React from 'react';
import { Modal, Form, Select, Input, Table } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
import { Table } from 'antd';
const LogisticsForm = props => {
const { modalVisible, onCancel, value } = props;
const { value } = props;
const columns = [
{
title: '商品自编码',
dataIndex: 'orderSkuId',
key: 'orderSkuId',
width: 250,
},
{
title: '商品名称',
dataIndex: 'skuName',
......@@ -15,45 +17,33 @@ const LogisticsForm = props => {
width: 250,
},
{
title: '商品属性',
title: '商品规格',
dataIndex: 'skuAttr',
key: 'skuAttr',
width: 200,
width: 250,
},
{
title: '商品件数（件）',
title: '商品数量',
dataIndex: 'count',
key: 'count',
width: 150
width: 150,
},
{
title: '物流公司',
dataIndex: 'expressCompanyName',
key: 'expressCompanyName',
width: 150
width: 150,
},
{
title: '物流单号',
dataIndex: 'deliveryNo',
key: 'deliveryNo',
width: 150
}
width: 150,
},
];
const style = {
width: '900px'
};
return (
<Modal
title="订单详情"
visible={modalVisible}
onCancel={() => onCancel()}
onOk={() => onCancel()}
bodyStyle={style}
width={900}
>
<Table columns={columns} dataSource={value} />
</Modal>
<Table columns={columns} dataSource={value} rowKey={r => r.orderSkuId} pagination={false} />
);
};
export default Form.create()(LogisticsForm);
export default LogisticsForm;
src/pages/orderManage/pendingDeliveryOrder/index.jsx
View file @ 3f5ac61a
import { Button, Divider, Dropdown, Icon, Menu, message, Table } from 'antd';
import { Button, Upload, message } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import LogisticsForm from './components/LogisticsForm';
import OrderDetail from './components/OrderDetail';
import { queryToSend, queryExpress, getGoods } from './service';
import {
queryToSend,
queryExpress,
getGoods,
uploadFile,
getLogistics,
downTemplate,
downOrder,
} from './service';
const TableList = () => {
const TableList = props => {
const [companys, setCompanys] = useState([]);
const [LogisticsModalVisible, handleModalVisible] = useState(false);
const [detailModalVisible, handleDetailModalVisible] = useState(false);
const [skuList, setSkuList] = useState([]);
const [rowKeys, setRowKeys] = useState([]);
const [LogisticsData, setLogisticsData] = useState([{}]);
const [QueryData, setQueryData] = useState({});
const actionRef = useRef();
const columns = [
{
......@@ -20,10 +30,11 @@ const TableList = () => {
order: 6,
},
{
title: '商品渠道',
dataIndex: 'skuSource.desc',
key: 'skuSource.desc',
hideInSearch: true,
title: '商品名称',
dataIndex: 'skuName',
key: 'skuName',
order: 6,
hideInTable: true,
},
{
title: '交易时间',
......@@ -51,16 +62,15 @@ const TableList = () => {
width: 160,
},
{
title: '物流状态',
dataIndex: 'logisticsStatus',
key: 'logisticsStatus',
filters: false,
title: '订单状态',
dataIndex: 'orderStatus',
key: 'orderStatus',
width: 200,
valueEnum: {
'_3': '全部',
'_1': '未发货',
'_2': '已发货',
12: '待发货',
13: '待收货',
21: '订单完成',
},
order: 5,
},
{
title: '订单开始时间',
......@@ -85,39 +95,37 @@ const TableList = () => {
render: (_, record) => (
<React.Fragment>
{
record.skuSource.value !== 2 && record.logisticsStatus === '_1' ? (
<Button
type="primary"
style={
{
marginBottom: '10px',
}
}
onClick={async () => {
const skuList = await getGoods(record.orderId);
setSkuList(skuList);
handleModalVisible(true);
}}
>
更新物流信息
</Button>
) : null
<Button
type="primary"
style={{
marginBottom: '10px',
}}
onClick={async () => {
const skuListData = await getGoods(record.orderId);
let logisticsData = [{}];
setSkuList(skuListData);
if (props.type === 2) {
const data = await getLogistics(record.orderId);
logisticsData = data.map(item => ({
selectedGoods: item.skus.map(sku => sku.orderSkuId),
selectedCompany: `${item.expressCompanyCode}-${item.expressCompanyName}`,
orderNum: item.deliveryNo,
}));
}
setLogisticsData(logisticsData);
handleModalVisible(true);
}}
>
更新物流信息
</Button>
}
<Button
type="primary"
onClick={async () => {
const skuList = await getGoods(record.orderId);
console.log('skuList', skuList);
setSkuList(skuList);
handleDetailModalVisible(true);
}}>查看订单详情</Button>
</React.Fragment>
),
},
];
const reload = () => {
handleModalVisible(false)
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
......@@ -130,19 +138,131 @@ const TableList = () => {
};
getCompanys();
}, []);
const expandedRowRender = record => <OrderDetail value={record.mchOrderSkuVoList} />;
const getExpandId = data => {
const tableData = data.map(item => {
const temp = item;
temp.mchOrderSkuVoList = temp.mchOrderSkuVoList?.map(order => ({
...order,
orderStatus: item.orderStatus,
}));
return temp;
});
setRowKeys(data.map(item => item.orderId));
return tableData;
};
const updateExpandId = (b, r) => {
const newExp = b ? [...rowKeys, r.orderId] : rowKeys.filter(i => i !== r.orderId);
setRowKeys(newExp);
};
const uploadProps = {
name: 'file',
customRequest(info) {
uploadFile(info.file);
},
accept: '.xlsx',
showUploadList: false,
onChange(info) {
if (info.file.status === 'done') {
message.success(`${info.file.name}导入成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name}导入失败`);
}
},
};
const queryToSendFn = params => {
const transformedParam = {
...params,
logisticsStatus: props.type || 1,
startTime: params.beginTime,
pageNo: params.current,
pageSize: params.pageSize || 20,
};
setQueryData(transformedParam);
return queryToSend(transformedParam);
};
const searchRender = ({ searchText, resetText }, { form }) => {
const exportBtn = [
<Upload {...uploadProps}>
<Button type="primary" style={{ marginRight: '10px' }} key="export">
导入
</Button>
</Upload>,
<Button
type="primary"
key="exportTemplate"
onClick={downTemplate}
style={{ marginRight: '10px' }}
>
导入模板下载
</Button>,
];
return [
<Button
key="search"
type="primary"
style={{ marginRight: '10px' }}
onClick={() => {
// eslint-disable-next-line no-unused-expressions
form?.submit();
}}
>
{searchText}
</Button>,
<Button
key="rest"
style={{ marginRight: '10px' }}
onClick={() => {
// eslint-disable-next-line no-unused-expressions
form?.resetFields();
}}
>
{resetText}
</Button>,
props.type === 2 ? null : [...exportBtn],
];
};
const toolBarRenderFn = () => [
props.type === 2 ? null : (
<Button
type="primary"
onClick={() => {
downOrder(QueryData);
}}
>
导出数据
</Button>
),
];
return (
<PageHeaderWrapper>
<ProTable
actionRef={actionRef}
request={(params, sorter, filter) => queryToSend({ ...params })}
request={params => queryToSendFn({ ...params })}
columns={columns}
search={{ collapsed: false, collapseRender: () => null }}
postData={getExpandId}
expandedRowRender={expandedRowRender}
expandedRowKeys={rowKeys}
rowKey={r => r.orderId}
onExpand={updateExpandId}
toolBarRender={toolBarRenderFn}
search={{
collapsed: false,
optionRender: searchRender,
}}
/>
<LogisticsForm
onSubmit={reload}
skuList={skuList}
companys={companys}
onCancel={() => handleModalVisible(false)}
modalVisible={LogisticsModalVisible}
value={LogisticsData}
/>
<LogisticsForm onSubmit={reload} skuList={skuList} companys={companys} onCancel={() => handleModalVisible(false)} modalVisible={LogisticsModalVisible} />
<OrderDetail value={skuList} onCancel={() => handleDetailModalVisible(false)} modalVisible={detailModalVisible} />
</PageHeaderWrapper>
)
);
};
export default TableList;
src/pages/orderManage/pendingDeliveryOrder/service.js
View file @ 3f5ac61a
......@@ -5,41 +5,35 @@ import config from '../../../../config/env.config';
// 待发货订单
export async function queryToSend(params) {
const transformedParam = {
...params,
logisticsStatus: params.logisticsStatus ? params.logisticsStatus.slice(1) : '',
startTime: params.beginTime,
pageNo: params.current,
pageSize: params.pageSize || 20,
};
const { data: { current, records, total, size } } = await request.post('/api/kdsp/op/mch-order/list', {
const {
data: { current, records, total, size },
} = await request.post('/api/kdsp/op/mch-order/list-v2', {
prefix: config.kdspApi,
data: stringify(_.omitBy(transformedParam, v => !v)),
data: stringify(_.omitBy(params, v => !v)),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
},
});
return {
current: current,
data: records.map(v => ({...v, logisticsStatus: `_${v.logisticsStatus}`})),
total: total,
pageSize: size
}
current,
data: records.map(v => ({ ...v, logisticsStatus: `_${v.logisticsStatus}` })),
total,
pageSize: size,
};
}
// 快递公司
export async function queryExpress() {
const { data } = await request.get('/api/kdsp/op/express/list', {
prefix: config.kdspApi,
});
return data;
const { data = [] } = await request.get('/api/kdsp/op/express/list', {
prefix: config.kdspApi,
});
return data;
}
export async function updateExpress(params) {
return request.post('/api/kdsp/op/mch-order/update-express-info', {
prefix: config.kdspApi,
data: params
data: params,
});
}
......@@ -48,4 +42,29 @@ export async function getGoods(orderId) {
prefix: config.kdspApi,
});
return data;
}
\ No newline at end of file
}
export async function getLogistics(orderId) {
const { data } = await request.get(`/api/kdsp/op/mch-order/logistics-skus?orderId=${orderId}`, {
prefix: config.kdspApi,
});
return data;
}
export async function uploadFile(file) {
const params = new FormData();
params.append('file', file);
request.post('/api/kdsp/op/mch-order/order-logistics-batch-import', {
data: params,
prefix: config.kdspApi,
// headers: {
// 'Content-Type': 'multipart/form-data',
// },
});
}
export function downTemplate() {
window.location.href = `${config.kdspApi}/api/kdsp/op/mch-order/import-mould-download`;
}
export function downOrder(params) {
window.location.href = `${config.kdspApi}/api/kdsp/op/mch-order/order-export?${stringify(
params,
)}`;
}
src/utils/request.js
View file @ 3f5ac61a
......@@ -84,7 +84,7 @@ request.interceptors.request.use(async (url, options) => {
const header = {
...headers,
'Access-Token': token,
'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
// 'Content-Type': headers['Content-Type'] ? headers['Content-Type'] : 'application/json',
};
return {
url,
......
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