feat: 取消订单
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user