feat: 取消订单

This commit is contained in:
2025-10-31 16:04:17 +08:00
parent d9117c7675
commit a15bda739a
29 changed files with 767 additions and 93 deletions

View File

@@ -12,9 +12,8 @@ import {
message,
Space,
Statistic,
Typography,
} from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ConfigurableDrawerForm, {
type ConfigurableDrawerFormRef,
} from '@/components/DrawerForm';
@@ -29,14 +28,18 @@ import PopconfirmForm, {
} from '@/components/PopconfirmForm';
import {
mapOrderStatusToBadgeStatus,
type OrderStatus,
OrderStatus,
OrderStatusLabels,
} from '@/constants/trade';
import {
getTradeOrderPage,
getTradeSummary,
type TradeOrderPageRespVO,
type TradeReq,
type TradeSummaryRespVO,
updateOrderRemark,
} from '@/services/trade/order';
import CancleOrderModal from './components/cancleOrderModal';
import DetailCom from './detail';
const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
@@ -46,6 +49,16 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
const [modalData, setModalData] = useState<TradeOrderPageRespVO>();
const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
const [summary, setSummary] = useState<TradeSummaryRespVO>();
const [cancleOrderVisible, setCancleOrderVisible] = useState<boolean>(false);
const fetchSummary = async () => {
const res = await getTradeSummary();
setSummary(res);
};
useEffect(() => {
fetchSummary();
}, []);
const onFetch = async (
params: TradeReq & {
pageSize: number;
@@ -74,14 +87,24 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
[modalData],
);
const handleOrder = useCallback((id?: number) => {
console.log(id, '取消订单');
// await updateTradeOrder(values.id);
}, []);
const handleUpdate = async (_values: TradeOrderPageRespVO) => {
try {
const handleOrder = useCallback(
(type: string, record?: TradeOrderPageRespVO) => {
setModalData(record);
if (type === 'order') {
setCancleOrderVisible(true);
}
if (type === 'order') {
setCancleOrderVisible(true);
}
// await updateTradeOrder(values.id);
},
[],
);
const handleUpdate = async (values: TradeOrderPageRespVO, id?: number) => {
try {
await updateOrderRemark({ remark: values.userRemark || '', id: id });
tableRef.current?.reload();
return true;
} finally {
message.success('更新成功');
@@ -105,37 +128,56 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
}}
key={record.id}
>
<a key="cancel" onClick={() => handleOrder(record.id)}>
</a>
<a key="order" onClick={() => handleOrder(record.id)}>
</a>
<a key="sale" onClick={() => handleOrder(record.id)}>
</a>
{record.orderStatus !== OrderStatus.Cancelled && (
<a key="cancel" onClick={() => handleOrder('order', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingService && (
<a key="order" onClick={() => handleOrder('service', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingConfirmation && (
<a key="order" onClick={() => handleOrder('service', record)}>
</a>
)}
{(record.orderStatus as number) > OrderStatus.PendingPayment &&
record.orderStatus !== OrderStatus.Cancelled && (
<a key="sale" onClick={() => handleOrder('sales', record)}>
</a>
)}
{record.orderStatus === OrderStatus.PendingAcceptance && (
<a key="sale" onClick={() => handleOrder('sales', record)}>
</a>
)}
<a key="detail" onClick={() => handleDetail(record)}>
</a>
<PopconfirmForm
ref={popconfirmFormRef}
columns={[
{
title: '备注',
name: 'userRemark',
valueType: 'textarea',
fieldProps: { rows: 4, autoFocus: false },
},
]}
onSubmit={handleUpdate}
>
<a
key="remark"
onClick={() => popconfirmFormRef.current?.open(record)}
{record.orderStatus === OrderStatus.PendingPayment && (
<PopconfirmForm
ref={popconfirmFormRef}
columns={[
{
title: '备注',
name: 'merchantRemark',
valueType: 'textarea',
fieldProps: { rows: 4, autoFocus: false },
},
]}
onSubmit={(value) => handleUpdate(value, record.id)}
>
</a>
</PopconfirmForm>
<a
key="remark"
onClick={() => popconfirmFormRef.current?.open(record)}
>
</a>
</PopconfirmForm>
)}
</div>,
],
};
@@ -251,13 +293,25 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
{isShowTotal && (
<ProCard.Group direction="row" style={{ marginBottom: 18 }}>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="订单数量" value={79.0} precision={2} />
<Statistic
title="订单数量"
value={summary?.orderCount}
precision={2}
/>
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实付金额" value={112893.0} precision={2} />
<Statistic
title="实付金额"
value={summary?.payPrice}
precision={2}
/>
</ProCard>
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
<Statistic title="实收金额" value={93} suffix="/ 100" />
<Statistic
title="实收金额"
value={summary?.livePrice}
precision={2}
/>
</ProCard>
</ProCard.Group>
)}
@@ -286,8 +340,13 @@ const OrderListItem: React.FC<{ orderStatus: number }> = (props) => {
>
<DetailCom data={modalData} />
</ConfigurableDrawerForm>
<CancleOrderModal
open={cancleOrderVisible}
onClose={() => setCancleOrderVisible(false)}
id={modalData?.id}
/>
</>
);
};
export default OrderListItem;
export default React.memo(OrderListItem);