Skip to content

A
admin
提交 cdafae05 作者: ZhangLingKun
操作

功能：商城订单列表

上级 6851eb63
正在显示 包含 214 行增加 和 42 行删除
src/api/interface/orderManageType.ts
......@@ -403,3 +403,77 @@ export type refundOrderType = InterFunction<
},
NonNullable<unknown>
>;
// 商城订单-订单状态-字典
export type orderListStatus = InterFunction<
NonNullable<unknown>,
{
code: number;
nextCode: number;
status: string;
}[]
>;
// v1.0.0订单管理-分页查询（改版后）
export type listPageManagerVerOne = InterListFunction<
{
endTime?: string;
keyword?: string;
keyword2?: string;
saleId?: number;
showType?: number;
signStatus?: Array<number>;
startTime?: string;
statusCode?: Array<number>;
},
{
contractNo: string;
contractSignedWay: number;
createTime: string;
creditPeriod: string;
deductAmount: number;
deliveryTime: string;
discountAmount: number;
entName: string;
id: number;
mallOrderProdListDTOList: Array<{
id: number;
goodsInfoId: number;
productName: string;
model: string;
prodSkuSpecName: string;
prodSkuSpecImage: string;
partNo: string;
versionDesc: string;
buyNum: number;
unitPrice: number;
skuSpecAmount: number;
}>;
mremark: string;
ogSkuSpecDTOList: null;
operationId: number;
operationName: string;
orderAmount: number;
orderMainImg: string;
orderName: string;
orderNo: string;
payMethod: number;
phoneNum: string;
realNameAuth: number;
realPayAmount: number;
realityAmount: number;
recMallUserName: string;
remark: string;
saleId: number;
saleName: string;
shareId: number;
shareStatus: number;
shutReason: string;
signStatus: number;
statusCode: number;
subAmount: number;
tagName: string;
totalBuyNum: number;
uid: string;
userAccountId: number;
userName: string;
}
>;
src/api/modules/orderManage.ts
......@@ -2,10 +2,12 @@ import axios from '../request';
import {
listExpressInfoType,
listOfRentalOrdersType,
listPageManagerVerOne,
listPcWechatOrderType,
listTranStatusType,
orderDetailType,
orderImageDetailType,
orderListStatus,
pfConfirmOrderWareType,
platFormCloseOrderType,
refundOrderType,
......@@ -56,4 +58,12 @@ export class OrderManageAPI {
// 后台管理——驳回/同意退款
static refundOrder: refundOrderType = (params) => axios.post('/oms/refund/refund', params);
// 商城订单-订单状态-字典
static orderListStatus: orderListStatus = (params) =>
axios.get('/oms/mallorder/listStatus', { params });
// v1.0.0订单管理-分页查询（改版后）
static listPageManagerVerOne: listPageManagerVerOne = (params) =>
axios.post('/oms/pmorderVerOne/listPageManagerVerOne', params);
}
src/pages/orderManage/productOrder/index.tsx
import { useState } from 'react';
import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, Table } from 'antd';
import { Button, Image, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
import { OrderManageAPI } from '~/api';
import { listPageManagerVerOne } from '~/api/interface/orderManageType';
import { InterListType, InterReqType } from '~/api/interface';
// 表格数据类型
type TableType = any;
// 订单状态搜索列表
const statusCodeButtonList = [
{ value: -1, label: '全部订单' },
{ value: 0, label: '沟通意向' },
{ value: 1, label: '签约付款' },
{ value: 2, label: '待发货' },
{ value: 3, label: '待收货' },
{ value: 4, label: '已完成' },
{ value: 5, label: '已关闭' },
];
type TableType = InterListType<listPageManagerVerOne>;
// 请求数据的类型
type ReqType = InterReqType<listPageManagerVerOne>;
// 搜索表单的数据
let query: ReqType = {};
function ProductOrderView() {
// 路由钩子
const navigate = useNavigate();
// 订单状态搜索列表
const [tranStatusList, setTranStatusList] = useState<
{ value: number | undefined; label: string }[]
>([]);
// 订单状态
const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 表格分页配置
const [pagination] = useState({
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
const [tableData, setTableData] = useState<TableType>([]);
// 需要编辑的数据
// const [editData, setEditData] = useState<TableType[0]>(); // 用于编辑
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res = await OrderManageAPI.listPageManagerVerOne({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
...query,
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
current: pageNo,
pageSize,
totalPage,
});
setTableData(list);
// console.log('加载列表 --->', list);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 表单提交
const onFinish = (data: ReqType) => {
pagination.current = 1;
query = data;
getTableList(data).then();
};
// 订单状态筛选
const statusChangeEvent = (i: number) => {
console.log('订单状态筛选 --->', i);
if (i === statusCodeButtonIndex) {
setStatusCodeButtonIndex(0);
} else {
setStatusCodeButtonIndex(i);
}
// query = { ...query, statusCode: tranStatusList[i].value };
// getTableList().then();
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
console.log('跳转订单详情 --->', record.id);
navigate(`/orderManage/productOrder/detail?${qs.stringify({ id: record.id })}`);
};
// 获取订单状态
const getOrderStatus = async () => {
const res = await OrderManageAPI.orderListStatus({});
if (res && res.code === '200') {
const list = res.result.map((item) => ({ value: item.code, label: item.status }));
setOrderStatusList(list);
const arr = list
.filter((i) => [999, 800, 720, 300, 200, 100, 50].includes(i.value))
.reverse();
setTranStatusList([{ value: undefined, label: '全部订单' }, ...arr]);
}
};
// componentDidMount
useEffect(() => {
query = {};
getOrderStatus().then();
getTableList().then();
}, []);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
width: 280,
render: (_text, record) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Image src={record.orderMainImg} style={{ width: 48, height: 48 }} />
<div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
<div style={{ color: '#1677ff' }}>{record.orderName}</div>
<div>{record.mallOrderProdListDTOList.map((i) => i.prodSkuSpecName).join(' + ')}</div>
<div>订单编号：{record.orderNo}</div>
<div>创建时间：{record.createTime}</div>
</div>
</div>
),
},
{
title: '数量',
dataIndex: 'userName',
title: '订单金额(元)',
dataIndex: 'orderAmount',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => text.toLocaleString(),
},
// {
// title: '数量',
// dataIndex: 'userName',
// align: 'center',
// },
{
title: '买家',
dataIndex: 'userName',
dataIndex: 'uid',
align: 'center',
render: (_text, _record) => `--`,
render: (text, record) => (
<>
<div>{text}</div>
<div>{record.userName}</div>
<div>{record.entName}</div>
</>
),
},
{
title: '订单状态',
dataIndex: 'userName',
dataIndex: 'statusCode',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => orderStatusList.find((i) => i.value === text)?.label || text,
},
{
title: '实收款',
dataIndex: 'userName',
dataIndex: 'realPayAmount',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => text?.toLocaleString() || 0,
},
{
title: '相关运营',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
render: (_text) => `--`,
},
{
title: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
render: (_text) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
render: (_text) => `--`,
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
render: (_text, _record) => `--`,
width: 150,
ellipsis: true,
},
{
title: '操作',
......@@ -144,15 +219,15 @@ function ProductOrderView() {
},
{
label: '时间',
name: 'time',
name: 'rangeTime',
type: 'rangePicker',
placeholder: '请选择创建时间',
},
]}
searchData={(e: any) => console.log('提交数据 --->', e)}
searchData={onFinish}
sufFixBtn={
<>
{statusCodeButtonList?.map((i, j) => {
{tranStatusList?.map((i, j) => {
return (
<Button
key={j}
......@@ -179,8 +254,7 @@ function ProductOrderView() {
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
// onChange: (page: number, pageSize: number) =>
// paginationChange(page, pageSize),
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
......@@ -190,3 +264,17 @@ function ProductOrderView() {
}
export default ProductOrderView;
// <div style={{ textAlign: 'left', lineHeight: '16px' }}>
// <div style={{ color: '#1677ff', marginBottom: '10px' }}>{record.orderName}</div>
// {record.mallOrderProdListDTOList.map((i, j) => (
// <div style={{ display: 'flex', marginBottom: '10px', alignItems: 'center' }} key={j}>
// <Image src={i.prodSkuSpecImage} style={{ width: 48, height: 48 }} />
// <div style={{ marginLeft: '20px' }}>{i.prodSkuSpecName}</div>
// <div style={{ marginLeft: '20px' }}>{`x${i.buyNum}`}</div>
// <div style={{ marginLeft: '20px' }}>{`￥${i.unitPrice?.toLocaleString()}`}</div>
// </div>
// ))}
// <div>订单编号：{record.orderNo}</div>
// <div>创建时间：{record.createTime}</div>
// </div>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论