样单订单
parent
ca50e33f8f
commit
b9452f9e20
@ -0,0 +1,170 @@
|
||||
import Constants from '@/constants';
|
||||
import { orderDetailForAdminUsingGet } from '@/services/pop-b2b2c/pbcOrderController';
|
||||
import { isNumeric } from '@/utils/utils';
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { useParams } from '@umijs/max';
|
||||
import { Button, Descriptions, Table, Tag, Timeline } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const Detail: React.FC<any> = () => {
|
||||
const params = useParams();
|
||||
|
||||
const [info, setInfo] = useState<API.PbcOrder_>({});
|
||||
|
||||
const getInfo = () => {
|
||||
if (params.id) {
|
||||
orderDetailForAdminUsingGet({ orderId: parseInt(params.id) }).then((res) => {
|
||||
if (res.retcode && res.data) {
|
||||
setInfo(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '商品名',
|
||||
dataIndex: 'pbcProductName',
|
||||
key: 'pbcProductName',
|
||||
render: (text: string, item: API.PbcOrderItem_) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.pbcProductImage && (
|
||||
<img
|
||||
src={item.pbcProductImage}
|
||||
alt={item.pbcProductName}
|
||||
style={{ width: 60, height: 60, marginRight: 12, objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold' }}>{text}</div>
|
||||
<div>颜色: {item.pbcSkuColorName || '默认'}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'pbcSkuPrice',
|
||||
key: 'pbcSkuPrice',
|
||||
render: (text: any) => typeof text === 'number' || (typeof text === 'string' && isNumeric(text)) ? `¥${text}` : text,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'pbcSkuCnt',
|
||||
key: 'pbcSkuCnt',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
key: 'totalPrice',
|
||||
render: (_: any, item: API.PbcOrderItem_) => typeof item.pbcSkuPrice === 'number' || (typeof item.pbcSkuPrice === 'string' && isNumeric(item.pbcSkuPrice)) ? `¥${Number(item.pbcSkuPrice) * (item.pbcSkuCnt || 0)}` : item.pbcSkuPrice,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
key: 'actualPrice',
|
||||
render: () => `-`,
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getInfo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
}}
|
||||
footer={[
|
||||
<Button
|
||||
key="back"
|
||||
onClick={() => {
|
||||
history.back();
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<ProCard style={{ marginBottom: 12 }}>
|
||||
<Descriptions
|
||||
bordered
|
||||
title={
|
||||
<>
|
||||
<span style={{ marginRight: 20 }}>订单信息</span>
|
||||
<Tag color={Constants.orderStateEnum[String(info.pbcOrderState || 1)]?.status}>
|
||||
{Constants.orderStateEnum[String(info.pbcOrderState || 1)]?.text}
|
||||
</Tag>
|
||||
</>
|
||||
}
|
||||
column={3}
|
||||
>
|
||||
<Descriptions.Item label="订单编号">{info.pbcOrderNo}</Descriptions.Item>
|
||||
<Descriptions.Item label="订单类型">
|
||||
{Constants.orderTypeEnum[info.pbcOrderType || 1]?.text}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="下单时间">{info.pbcCreateAt}</Descriptions.Item>
|
||||
<Descriptions.Item label="所属商户">{info.pbcBusinessName}</Descriptions.Item>
|
||||
<Descriptions.Item label="商户联系人">{info.pbcBusinessContact}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系电话">{info.pbcBusinessContactMobile}</Descriptions.Item>
|
||||
<Descriptions.Item label="收货人">{info.pbcOrderReceiverName}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系电话">{info.pbcOrderReceiverPhone}</Descriptions.Item>
|
||||
<Descriptions.Item label="收货地址">
|
||||
{`${info.pbcOrderReceiverProvince || ''}${info.pbcOrderReceiverCity || ''}${info.pbcOrderReceiverArea || ''}${info.pbcOrderReceiverStreet || ''}${info.pbcOrderReceiverAddress || ''}`}
|
||||
</Descriptions.Item>
|
||||
{info.pbcOrderType === 2 && (
|
||||
<>
|
||||
<Descriptions.Item label="快递公司">{info.pbcOrderExpressCompanyName}</Descriptions.Item>
|
||||
<Descriptions.Item label="快递单号">{info.pbcOrderExpressNo}</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
</Descriptions>
|
||||
</ProCard>
|
||||
|
||||
<ProCard title="商品信息" style={{ marginBottom: 12 }}>
|
||||
<Table
|
||||
dataSource={info.orderItemList || []}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
rowKey={(item) => item.pbcId || Math.random().toString(36).slice(2)}
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<ProCard title="物流信息">
|
||||
<Timeline
|
||||
mode="left"
|
||||
items={[
|
||||
{
|
||||
label: info.pbcCreateAt,
|
||||
children: '订单创建',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
label: info.pbcDistributionCompletionTime,
|
||||
children: '商品已发货',
|
||||
show: info.pbcOrderState && info.pbcOrderState >= 2
|
||||
},
|
||||
{
|
||||
label: info.pbcOrderCompletionTime,
|
||||
children: '订单已完成',
|
||||
show: info.pbcOrderState === 4
|
||||
},
|
||||
{
|
||||
label: info.pbcOrderCancelTime,
|
||||
children: '订单已取消',
|
||||
show: info.pbcOrderState === 3
|
||||
},
|
||||
].filter(item => item.show)}
|
||||
/>
|
||||
</ProCard>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
@ -0,0 +1,14 @@
|
||||
.ant-list-item-action {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ant-list-item-action li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ant-pro-list-row-title {
|
||||
cursor: unset;
|
||||
}
|
||||
.ant-pro-list-row-title:hover {
|
||||
color: unset;
|
||||
}
|
||||
@ -0,0 +1,300 @@
|
||||
import Constants from '@/constants';
|
||||
import {
|
||||
getOrderPageForAdminUsingPost,
|
||||
exportOrderPageForAdminUsingPost,
|
||||
deliverGoodForOrderAdminUsingGet,
|
||||
confirmReceiveForOrderAdminUsingGet
|
||||
} from '@/services/pop-b2b2c/pbcOrderController';
|
||||
import { isNumeric } from '@/utils/utils';
|
||||
import { ActionType, ProFormInstance, ProList } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Access, history, useAccess } from '@umijs/max';
|
||||
import { Button, message, Tag, Table } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import './index.less';
|
||||
|
||||
/**
|
||||
* 查询表格
|
||||
* @param param0
|
||||
*/
|
||||
const fetchData = async (params: any) => {
|
||||
const msg = await getOrderPageForAdminUsingPost(params);
|
||||
return {
|
||||
data: msg.data?.records,
|
||||
total: msg.data?.total,
|
||||
success: msg.retcode,
|
||||
} as any;
|
||||
};
|
||||
|
||||
const handleExport = async (values?: API.PbcOrder_) => {
|
||||
|
||||
const hide = message.loading('正在处理', 0);
|
||||
try {
|
||||
await exportOrderPageForAdminUsingPost(
|
||||
{ ...values },
|
||||
{
|
||||
responseType: 'blob',
|
||||
getResponse: true,
|
||||
parseResponse: false,
|
||||
data: { ...values, fileName: '导出' },
|
||||
},
|
||||
);
|
||||
hide();
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
hide();
|
||||
message.error('处理失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
const TableList: React.FC<{}> = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const access: any = useAccess();
|
||||
const ref = useRef<ProFormInstance<API.PbcOrder_>>();
|
||||
const [tabActiveKey, setTabActiveKey] = useState<string>('0'); // 默认显示全部样单
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
breadcrumb: {},
|
||||
}}
|
||||
tabActiveKey={tabActiveKey}
|
||||
onTabChange={(key) => setTabActiveKey(key)}
|
||||
tabList={[
|
||||
{
|
||||
tab: "全部",
|
||||
key: "0"
|
||||
},
|
||||
{
|
||||
tab: "预订单",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
tab: "已配货",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
tab: "已完成",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
tab: "已取消",
|
||||
key: "3"
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ProList<API.PbcOrder_>
|
||||
rowKey="pbcId"
|
||||
actionRef={actionRef}
|
||||
formRef={ref}
|
||||
itemLayout='vertical'
|
||||
request={(param: any) => {
|
||||
const queryParam = {
|
||||
...param,
|
||||
pbcOrderState: tabActiveKey !== '0' ? parseInt(tabActiveKey) : undefined
|
||||
};
|
||||
return fetchData(queryParam);
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
}}
|
||||
params={{ pbcOrderState: tabActiveKey !== '0' ? parseInt(tabActiveKey) : undefined }}
|
||||
dateFormatter="string"
|
||||
toolBarRender={() => [
|
||||
<Access key="export" accessible={access.orderExport}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
const params = ref.current?.getFieldsValue();
|
||||
handleExport(params);
|
||||
}}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Access>,
|
||||
]}
|
||||
metas={{
|
||||
pbcOrderNo: {
|
||||
title: '订单编号',
|
||||
},
|
||||
productName: {
|
||||
title: '商品名称',
|
||||
},
|
||||
pbcOrderReceiverName: {
|
||||
title: '买家姓名',
|
||||
},
|
||||
pbcOrderReceiverPhone: {
|
||||
title: '买家手机号',
|
||||
},
|
||||
pbcBusinessName: {
|
||||
title: '所属商户',
|
||||
},
|
||||
pbcUpdateAt: {
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
expectedStartTime: value[0],
|
||||
expectedEndTime: value[1] + ' 23:59:59',
|
||||
};
|
||||
},
|
||||
},
|
||||
valueType: 'dateRange',
|
||||
title: '期望交货时间',
|
||||
},
|
||||
pbcCreateAt: {
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
startTime: value[0],
|
||||
endTime: value[1] + ' 23:59:59',
|
||||
};
|
||||
},
|
||||
},
|
||||
valueType: 'dateRange',
|
||||
title: '下单时间',
|
||||
},
|
||||
title: {
|
||||
search: false,
|
||||
render: (_, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', width: '100%', fontSize: 14 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
|
||||
<Tag color={Constants.orderStateEnum[String(record.pbcOrderState || 1)]?.status} style={{ marginRight: '8px' }}>
|
||||
{Constants.orderStateEnum[String(record.pbcOrderState || 1)]?.text}
|
||||
</Tag>
|
||||
<Tag style={{ marginRight: '8px' }}>{Constants.orderTypeEnum[record.pbcOrderType || 1]?.text}</Tag>
|
||||
<span style={{ marginRight: '16px' }}>订单编号: {record.pbcOrderNo}</span>
|
||||
<span style={{ marginRight: '16px' }}>买家姓名: {record.pbcOrderReceiverName}</span>
|
||||
<span style={{ marginRight: '16px' }}>买家手机号: {record.pbcOrderReceiverPhone}</span>
|
||||
<span style={{ marginRight: '16px' }}>期望交货日期: {record.pbcExpectedDeliveryDate || '无'}</span>
|
||||
<span style={{ marginRight: '16px' }}>下单时间: {record.pbcCreateAt}</span>
|
||||
<span style={{ marginLeft: 'auto' }}>所属商户: {record.pbcBusinessName}</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
content: {
|
||||
search: false,
|
||||
render: (_, record) => {
|
||||
const columns1 = [
|
||||
{
|
||||
title: '商品名',
|
||||
dataIndex: 'pbcProductName',
|
||||
key: 'pbcProductName',
|
||||
render: (text: string, item: API.PbcOrderItem_) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.pbcProductImage && (
|
||||
<img
|
||||
src={item.pbcProductImage}
|
||||
alt={item.pbcProductName}
|
||||
style={{ width: 60, height: 60, marginRight: 12, objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold' }}>{text}</div>
|
||||
<div>颜色: {item.pbcSkuColorName || '默认'}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'pbcSkuPrice',
|
||||
key: 'pbcSkuPrice',
|
||||
render: (text: any) => typeof text === 'number' || (typeof text === 'string' && isNumeric(text)) ? `¥${text}` : text,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'pbcSkuCnt',
|
||||
key: 'pbcSkuCnt',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
key: 'totalPrice',
|
||||
render: (_: any, item: API.PbcOrderItem_) => typeof item.pbcSkuPrice === 'number' || (typeof item.pbcSkuPrice === 'string' && isNumeric(item.pbcSkuPrice)) ? `¥${Number(item.pbcSkuPrice) * (item.pbcSkuCnt || 0)}` : item.pbcSkuPrice,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
key: 'actualPrice',
|
||||
render: () => `-`,
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
dataSource={record.orderItemList || []}
|
||||
columns={columns1}
|
||||
pagination={false}
|
||||
rowKey={(item) => item.pbcId || Math.random().toString(36).slice(2)}
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
render: (_, record) => [
|
||||
<Button key="detail" onClick={() => history.push(`/order/detail/${record.pbcId}`)}>详情</Button>,
|
||||
<Access key="manage" accessible={access.orderManage}>
|
||||
{record.pbcOrderState === 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
deliverGoodForOrderAdminUsingGet({ orderId: record.pbcId || 0 }).then(
|
||||
(res) => {
|
||||
if (res.retcode) {
|
||||
message.success('已配货完成');
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error(res.retmsg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
配货完成
|
||||
</Button>
|
||||
)}
|
||||
{record.pbcOrderState === 2 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
confirmReceiveForOrderAdminUsingGet({ orderId: record.pbcId || 0 }).then(
|
||||
(res) => {
|
||||
if (res.retcode) {
|
||||
message.success('已完成交易');
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error(res.retmsg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
完成交易
|
||||
</Button>
|
||||
)}
|
||||
</Access>
|
||||
],
|
||||
},
|
||||
}}
|
||||
headerTitle=""
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
@ -0,0 +1,170 @@
|
||||
import Constants from '@/constants';
|
||||
import { orderDetailForAdminUsingGet } from '@/services/pop-b2b2c/pbcOrderController';
|
||||
import { isNumeric } from '@/utils/utils';
|
||||
import { ProCard } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { useParams } from '@umijs/max';
|
||||
import { Button, Descriptions, Table, Tag, Timeline } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const Detail: React.FC<any> = () => {
|
||||
const params = useParams();
|
||||
|
||||
const [info, setInfo] = useState<API.PbcOrder_>({});
|
||||
|
||||
const getInfo = () => {
|
||||
if (params.id) {
|
||||
orderDetailForAdminUsingGet({ orderId: parseInt(params.id) }).then((res) => {
|
||||
if (res.retcode && res.data) {
|
||||
setInfo(res.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '商品名',
|
||||
dataIndex: 'pbcProductName',
|
||||
key: 'pbcProductName',
|
||||
render: (text: string, item: API.PbcOrderItem_) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.pbcProductImage && (
|
||||
<img
|
||||
src={item.pbcProductImage}
|
||||
alt={item.pbcProductName}
|
||||
style={{ width: 60, height: 60, marginRight: 12, objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold' }}>{text}</div>
|
||||
<div>颜色: {item.pbcSkuColorName || '默认'}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'pbcSkuPrice',
|
||||
key: 'pbcSkuPrice',
|
||||
render: (text: any) => typeof text === 'number' || (typeof text === 'string' && isNumeric(text)) ? `¥${text}` : text,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'pbcSkuCnt',
|
||||
key: 'pbcSkuCnt',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
key: 'totalPrice',
|
||||
render: (_: any, item: API.PbcOrderItem_) => typeof item.pbcSkuPrice === 'number' || (typeof item.pbcSkuPrice === 'string' && isNumeric(item.pbcSkuPrice)) ? `¥${Number(item.pbcSkuPrice) * (item.pbcSkuCnt || 0)}` : item.pbcSkuPrice,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
key: 'actualPrice',
|
||||
render: () => `-`,
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getInfo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
}}
|
||||
footer={[
|
||||
<Button
|
||||
key="back"
|
||||
onClick={() => {
|
||||
history.back();
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<ProCard style={{ marginBottom: 12 }}>
|
||||
<Descriptions
|
||||
bordered
|
||||
title={
|
||||
<>
|
||||
<span style={{ marginRight: 20 }}>订单信息</span>
|
||||
<Tag color={Constants.orderStateEnum[String(info.pbcOrderState || 1)]?.status}>
|
||||
{Constants.orderStateEnum[String(info.pbcOrderState || 1)]?.text}
|
||||
</Tag>
|
||||
</>
|
||||
}
|
||||
column={3}
|
||||
>
|
||||
<Descriptions.Item label="订单编号">{info.pbcOrderNo}</Descriptions.Item>
|
||||
<Descriptions.Item label="订单类型">
|
||||
{Constants.orderTypeEnum[info.pbcOrderType || 1]?.text}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="下单时间">{info.pbcCreateAt}</Descriptions.Item>
|
||||
<Descriptions.Item label="所属商户">{info.pbcBusinessName}</Descriptions.Item>
|
||||
<Descriptions.Item label="商户联系人">{info.pbcBusinessContact}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系电话">{info.pbcBusinessContactMobile}</Descriptions.Item>
|
||||
<Descriptions.Item label="收货人">{info.pbcOrderReceiverName}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系电话">{info.pbcOrderReceiverPhone}</Descriptions.Item>
|
||||
<Descriptions.Item label="收货地址">
|
||||
{`${info.pbcOrderReceiverProvince || ''}${info.pbcOrderReceiverCity || ''}${info.pbcOrderReceiverArea || ''}${info.pbcOrderReceiverStreet || ''}${info.pbcOrderReceiverAddress || ''}`}
|
||||
</Descriptions.Item>
|
||||
{info.pbcOrderType === 2 && (
|
||||
<>
|
||||
<Descriptions.Item label="快递公司">{info.pbcOrderExpressCompanyName}</Descriptions.Item>
|
||||
<Descriptions.Item label="快递单号">{info.pbcOrderExpressNo}</Descriptions.Item>
|
||||
</>
|
||||
)}
|
||||
</Descriptions>
|
||||
</ProCard>
|
||||
|
||||
<ProCard title="商品信息" style={{ marginBottom: 12 }}>
|
||||
<Table
|
||||
dataSource={info.orderItemList || []}
|
||||
columns={columns}
|
||||
pagination={false}
|
||||
rowKey={(item) => item.pbcId || Math.random().toString(36).slice(2)}
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
</ProCard>
|
||||
|
||||
<ProCard title="物流信息">
|
||||
<Timeline
|
||||
mode="left"
|
||||
items={[
|
||||
{
|
||||
label: info.pbcCreateAt,
|
||||
children: '订单创建',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
label: info.pbcDistributionCompletionTime,
|
||||
children: '商品已发货',
|
||||
show: info.pbcOrderState && info.pbcOrderState >= 2
|
||||
},
|
||||
{
|
||||
label: info.pbcOrderCompletionTime,
|
||||
children: '订单已完成',
|
||||
show: info.pbcOrderState === 4
|
||||
},
|
||||
{
|
||||
label: info.pbcOrderCancelTime,
|
||||
children: '订单已取消',
|
||||
show: info.pbcOrderState === 3
|
||||
},
|
||||
].filter(item => item.show)}
|
||||
/>
|
||||
</ProCard>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Detail;
|
||||
@ -0,0 +1,14 @@
|
||||
.ant-list-item-action {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ant-list-item-action li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.ant-pro-list-row-title {
|
||||
cursor: unset;
|
||||
}
|
||||
.ant-pro-list-row-title:hover {
|
||||
color: unset;
|
||||
}
|
||||
@ -0,0 +1,291 @@
|
||||
import Constants from '@/constants';
|
||||
import {
|
||||
getOrderPageForAdminUsingPost,
|
||||
confirmReceiveForAdminUsingGet,
|
||||
deliverGoodForAdminUsingGet,
|
||||
exportOrderPageForAdminUsingPost
|
||||
} from '@/services/pop-b2b2c/pbcOrderController';
|
||||
import { isNumeric } from '@/utils/utils';
|
||||
import { ActionType, ProFormInstance, ProList } from '@ant-design/pro-components';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Access, history, useAccess } from '@umijs/max';
|
||||
import { Button, message, Tag, Table } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import './index.less';
|
||||
|
||||
/**
|
||||
* 查询表格
|
||||
* @param param0
|
||||
*/
|
||||
const fetchData = async (params: any) => {
|
||||
const msg = await getOrderPageForAdminUsingPost(params);
|
||||
return {
|
||||
data: msg.data?.records,
|
||||
total: msg.data?.total,
|
||||
success: msg.retcode,
|
||||
} as any;
|
||||
};
|
||||
|
||||
const handleExport = async (values?: API.PbcOrder_) => {
|
||||
|
||||
const hide = message.loading('正在处理', 0);
|
||||
try {
|
||||
await exportOrderPageForAdminUsingPost(
|
||||
{ ...values },
|
||||
{
|
||||
responseType: 'blob',
|
||||
getResponse: true,
|
||||
parseResponse: false,
|
||||
data: { ...values, fileName: '导出' },
|
||||
},
|
||||
);
|
||||
hide();
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
hide();
|
||||
message.error('处理失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
const TableList: React.FC<{}> = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const access: any = useAccess();
|
||||
const ref = useRef<ProFormInstance<API.PbcOrder_>>();
|
||||
const [tabActiveKey, setTabActiveKey] = useState<string>('0'); // 默认显示全部样单
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: '',
|
||||
breadcrumb: {},
|
||||
}}
|
||||
tabActiveKey={tabActiveKey}
|
||||
onTabChange={(key) => setTabActiveKey(key)}
|
||||
tabList={[
|
||||
{
|
||||
tab: "全部",
|
||||
key: "0"
|
||||
},
|
||||
{
|
||||
tab: "待出样",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
tab: "已发货",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
tab: "已完成",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
tab: "已取消",
|
||||
key: "3"
|
||||
},
|
||||
]}
|
||||
>
|
||||
<ProList<API.PbcOrder_>
|
||||
rowKey="pbcId"
|
||||
actionRef={actionRef}
|
||||
formRef={ref}
|
||||
itemLayout='vertical'
|
||||
request={(param: any) => {
|
||||
const queryParam = {
|
||||
...param,
|
||||
pbcOrderState: tabActiveKey !== '0' ? parseInt(tabActiveKey) : undefined
|
||||
};
|
||||
return fetchData(queryParam);
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
}}
|
||||
params={{ pbcOrderState: tabActiveKey !== '0' ? parseInt(tabActiveKey) : undefined }}
|
||||
dateFormatter="string"
|
||||
toolBarRender={() => [
|
||||
<Access key="export" accessible={access.sampleExport}>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
const params = ref.current?.getFieldsValue();
|
||||
handleExport(params);
|
||||
}}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Access>,
|
||||
]}
|
||||
metas={{
|
||||
pbcOrderNo: {
|
||||
title: '样单编号',
|
||||
},
|
||||
productName: {
|
||||
title: '商品名称',
|
||||
},
|
||||
pbcOrderReceiverName: {
|
||||
title: '买家姓名',
|
||||
},
|
||||
pbcOrderReceiverPhone: {
|
||||
title: '买家手机号',
|
||||
},
|
||||
pbcBusinessName: {
|
||||
title: '所属商户',
|
||||
},
|
||||
pbcOrderType: {
|
||||
title: '发货方式',
|
||||
render: (text: any) => Constants.orderTypeEnum[text]?.text,
|
||||
},
|
||||
pbcCreateAt: {
|
||||
search: {
|
||||
transform: (value) => {
|
||||
return {
|
||||
startTime: value[0],
|
||||
endTime: value[1] + ' 23:59:59',
|
||||
};
|
||||
},
|
||||
},
|
||||
valueType: 'dateRange',
|
||||
title: '下单时间',
|
||||
},
|
||||
title: {
|
||||
search: false,
|
||||
render: (_, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', width: '100%', fontSize: 14 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
|
||||
<Tag color={Constants.sampleStateEnum[String(record.pbcOrderState || 1)]?.status} style={{ marginRight: '8px' }}>
|
||||
{Constants.sampleStateEnum[String(record.pbcOrderState || 1)]?.text}
|
||||
</Tag>
|
||||
<Tag style={{ marginRight: '8px' }}>{Constants.orderTypeEnum[record.pbcOrderType || 1]?.text}</Tag>
|
||||
<span style={{ marginRight: '16px' }}>样单编号: {record.pbcOrderNo}</span>
|
||||
<span style={{ marginRight: '16px' }}>买家姓名: {record.pbcOrderReceiverName}</span>
|
||||
<span style={{ marginRight: '16px' }}>买家手机号: {record.pbcOrderReceiverPhone}</span>
|
||||
<span style={{ marginRight: '16px' }}>下单时间: {record.pbcCreateAt}</span>
|
||||
<span style={{ marginLeft: 'auto' }}>所属商户: {record.pbcBusinessName}</span>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
content: {
|
||||
search: false,
|
||||
render: (_, record) => {
|
||||
const columns1 = [
|
||||
{
|
||||
title: '商品名',
|
||||
dataIndex: 'pbcProductName',
|
||||
key: 'pbcProductName',
|
||||
render: (text: string, item: API.PbcOrderItem_) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.pbcProductImage && (
|
||||
<img
|
||||
src={item.pbcProductImage}
|
||||
alt={item.pbcProductName}
|
||||
style={{ width: 60, height: 60, marginRight: 12, objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<div style={{ fontWeight: 'bold' }}>{text}</div>
|
||||
<div>颜色: {item.pbcSkuColorName || '默认'}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'pbcSkuPrice',
|
||||
key: 'pbcSkuPrice',
|
||||
render: (text: any) => typeof text === 'number' || (typeof text === 'string' && isNumeric(text)) ? `¥${text}` : text,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'pbcSkuCnt',
|
||||
key: 'pbcSkuCnt',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
key: 'totalPrice',
|
||||
render: (_: any, item: API.PbcOrderItem_) => typeof item.pbcSkuPrice === 'number' || (typeof item.pbcSkuPrice === 'string' && isNumeric(item.pbcSkuPrice)) ? `¥${Number(item.pbcSkuPrice) * (item.pbcSkuCnt || 0)}` : item.pbcSkuPrice,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
key: 'actualPrice',
|
||||
render: () => `-`,
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Table
|
||||
dataSource={record.orderItemList || []}
|
||||
columns={columns1}
|
||||
pagination={false}
|
||||
rowKey={(item) => item.pbcId || Math.random().toString(36).slice(2)}
|
||||
size="small"
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
render: (_, record) => [
|
||||
<Button key="detail" onClick={() => history.push(`/sample/detail/${record.pbcId}`)}>详情</Button>,
|
||||
<Access key="manage" accessible={access.sampleManage}>
|
||||
{record.pbcOrderState === 1 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
deliverGoodForAdminUsingGet({ orderId: record.pbcId || 0 }).then(
|
||||
(res) => {
|
||||
if (res.retcode) {
|
||||
message.success('发货成功');
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error(res.retmsg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
发货
|
||||
</Button>
|
||||
)}
|
||||
{record.pbcOrderState === 2 && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
confirmReceiveForAdminUsingGet({ orderId: record.pbcId || 0 }).then(
|
||||
(res) => {
|
||||
if (res.retcode) {
|
||||
message.success('已出样完成');
|
||||
actionRef.current?.reload();
|
||||
} else {
|
||||
message.error(res.retmsg);
|
||||
}
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
出样完成
|
||||
</Button>
|
||||
)}
|
||||
</Access>
|
||||
],
|
||||
},
|
||||
}}
|
||||
headerTitle=""
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
Loading…
Reference in New Issue