feat: 订单列表
This commit is contained in:
259
src/pages/trade/order/list.tsx
Normal file
259
src/pages/trade/order/list.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import {
|
||||
type ActionType,
|
||||
ProCard,
|
||||
type ProColumns,
|
||||
} from '@ant-design/pro-components';
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
Divider,
|
||||
Input,
|
||||
message,
|
||||
Space,
|
||||
Statistic,
|
||||
} from 'antd';
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import ConfigurableDrawerForm, {
|
||||
type ConfigurableDrawerFormRef,
|
||||
} from '@/components/DrawerForm';
|
||||
import EnhancedProTable from '@/components/EnhancedProTable';
|
||||
import { baseOrderColumns } from './config';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
import { DownOutlined, UpOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import PopconfirmForm, {
|
||||
type PopconfirmFormRef,
|
||||
} from '@/components/PopconfirmForm';
|
||||
import {
|
||||
getTradeOrderPage,
|
||||
type TradeOrderPageRespVO,
|
||||
type TradeReq,
|
||||
} from '@/services/trade/order';
|
||||
import DetailCom from './detail';
|
||||
|
||||
const OrderListItem: React.FC = () => {
|
||||
const tableRef = useRef<ActionType>(null);
|
||||
const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
|
||||
const [modalTitle, setModalTitle] = useState<string>('订单：BZ000548787');
|
||||
const [isShowTotal, setIsShowTotal] = useState<boolean>(false);
|
||||
const popconfirmFormRef = useRef<PopconfirmFormRef>(null);
|
||||
const onFetch = async (
|
||||
params: TradeReq & {
|
||||
pageSize?: number;
|
||||
current?: number;
|
||||
},
|
||||
) => {
|
||||
const data = await getTradeOrderPage({
|
||||
...params,
|
||||
pageNo: params.current,
|
||||
pageSize: params.pageSize,
|
||||
});
|
||||
|
||||
return {
|
||||
data: data.list,
|
||||
success: true,
|
||||
total: data.total,
|
||||
};
|
||||
};
|
||||
|
||||
const handleDetail = useCallback((record: TradeOrderPageRespVO) => {
|
||||
setModalTitle(`订单：${record.orderNum}`);
|
||||
configurableDrawerRef.current?.open();
|
||||
}, []);
|
||||
|
||||
const handleOrder = useCallback((id?: number) => {
|
||||
console.log(id, '取消订单');
|
||||
// await updateTradeOrder(values.id);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = async (_values: TradeOrderPageRespVO) => {
|
||||
try {
|
||||
// await updateTradeOrder(values.id);
|
||||
return true;
|
||||
} finally {
|
||||
message.success('更新成功');
|
||||
}
|
||||
// await updateTradeOrder(values.id);
|
||||
};
|
||||
|
||||
const actionColumns: ProColumns<TradeOrderPageRespVO> = {
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: (_text: React.ReactNode, record: TradeOrderPageRespVO) => [
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
key={record.id}
|
||||
>
|
||||
<a key="cancel" onClick={() => handleOrder(record.id)}>
|
||||
取消订单
|
||||
</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)}
|
||||
>
|
||||
添加备注
|
||||
</a>
|
||||
</PopconfirmForm>
|
||||
</div>,
|
||||
],
|
||||
};
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
configurableDrawerRef.current?.close();
|
||||
}, []);
|
||||
const handleRow = (record: TradeOrderPageRespVO) => {
|
||||
return {
|
||||
'data-record': JSON.stringify(record),
|
||||
className: 'order-row-with-info',
|
||||
};
|
||||
};
|
||||
const components = {
|
||||
body: {
|
||||
row: (props: any) => {
|
||||
const { children, ...restProps } = props;
|
||||
const record = props['data-record']
|
||||
? JSON.parse(props['data-record'])
|
||||
: {};
|
||||
return (
|
||||
<>
|
||||
{record && (
|
||||
<tr style={{ background: 'rgba(0, 0, 0, 0.06)' }}>
|
||||
<td
|
||||
colSpan={columns.length}
|
||||
style={{
|
||||
padding: '0px 8px',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<span>
|
||||
<Badge
|
||||
status="success"
|
||||
text={record.orderStatus}
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
<Divider />
|
||||
<span> {record.orderCategoryName}</span>
|
||||
<span> {record.createTime}</span>
|
||||
<span>{record.orderNum}</span>
|
||||
<span> {record.payType}</span>
|
||||
<Space>
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
{/* <Image src={record.picUrl} width={64} /> */}
|
||||
百业到家旗舰店
|
||||
</Space>
|
||||
<Space>
|
||||
{record.userAvatar ? (
|
||||
<Avatar src={record.userAvatar} />
|
||||
) : (
|
||||
<Avatar icon={<UserOutlined />} />
|
||||
)}
|
||||
{record.userNickName || record.userName}
|
||||
<span>{record.userMobile} </span>
|
||||
</Space>
|
||||
</Space>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr {...restProps}>{children}</tr>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
const columns = [...baseOrderColumns, actionColumns];
|
||||
|
||||
const handleIsTotal = useCallback(() => {
|
||||
setIsShowTotal(!isShowTotal);
|
||||
}, [isShowTotal]);
|
||||
|
||||
const handleSearch = useCallback((value: string) => {
|
||||
console.log('搜索', value);
|
||||
tableRef.current?.reload();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Space>
|
||||
<Search
|
||||
placeholder="商品名称/商品ID/订单号"
|
||||
enterButton
|
||||
onSearch={handleSearch}
|
||||
/>
|
||||
<Button
|
||||
icon={isShowTotal ? <DownOutlined /> : <UpOutlined />}
|
||||
onClick={handleIsTotal}
|
||||
>
|
||||
统计
|
||||
</Button>
|
||||
</Space>
|
||||
{isShowTotal && (
|
||||
<ProCard.Group direction="row" bordered style={{ marginTop: 16 }}>
|
||||
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
|
||||
<Statistic title="订单数量" value={79.0} precision={2} />
|
||||
</ProCard>
|
||||
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
|
||||
<Statistic title="实付金额" value={112893.0} precision={2} />
|
||||
</ProCard>
|
||||
<ProCard layout="center" style={{ background: '#f5f5f5' }}>
|
||||
<Statistic title="实收金额" value={93} suffix="/ 100" />
|
||||
</ProCard>
|
||||
</ProCard.Group>
|
||||
)}
|
||||
|
||||
<EnhancedProTable<TradeOrderPageRespVO>
|
||||
ref={tableRef}
|
||||
columns={columns}
|
||||
request={onFetch}
|
||||
headerTitle="销售管理"
|
||||
showIndex={false}
|
||||
showSelection={false}
|
||||
search={{ defaultCollapsed: true }}
|
||||
onRow={handleRow}
|
||||
components={components}
|
||||
/>
|
||||
|
||||
<ConfigurableDrawerForm
|
||||
ref={configurableDrawerRef}
|
||||
width="80vw"
|
||||
title={modalTitle}
|
||||
bodyStyle={{
|
||||
background: '#f5f5f5',
|
||||
paddingTop: 8,
|
||||
}}
|
||||
footer={<Button onClick={onClose}>关闭</Button>}
|
||||
>
|
||||
<DetailCom />
|
||||
</ConfigurableDrawerForm>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderListItem;
|
||||
Reference in New Issue
Block a user