Skip to content

A
admin
提交 e7efd2d5 作者: 翁进城
操作

Merge branch 'develop' into csf-develop

上级 602093e1 8b9b3b60
正在显示 包含 836 行增加 和 341 行删除
src/api/interface.ts
......@@ -79,3 +79,10 @@ export type InterItemType<T extends (...args: any) => any> = (
// 获取参数类型封装
// eslint-disable-next-line no-unused-vars
export type InterReqType<T extends (...args: any) => any> = Parameters<T>[0];
// 获取参数类型封装(分页)
// eslint-disable-next-line no-unused-vars
export type InterReqListType<T extends (...args: any) => any> = Omit<
Parameters<T>[0],
'pageSize' | 'pageNo'
>;
src/api/interface/orderManageType.ts
import { InterFunction, InterListFunction } from '~/api/interface';
import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
// web 租赁订单-分页-列表
export type listOfRentalOrdersType = InterListFunction<
{
......@@ -403,3 +403,202 @@ export type refundOrderType = InterFunction<
},
NonNullable<unknown>
>;
//服务-订单
export type serviceOrderType = InterItemFunction<
{ startTime?: string; endTime?: string; orderStatus?: number; orderNameOrNo?: string },
{
id: number;
orderName: string;
orderNo: string;
orderStatus: number;
images: string[];
orderAmt: number;
phoneNum: string;
uid: string;
createdTime: string;
userName: string;
}[]
>;
// 服务-订单字典
export type serviceOrderStatusType = InterFunction<
any,
{ flyerPort: string; orderStatus: number; managePort: string; userPort: string }[]
>;
// 商城订单-订单状态-字典
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;
}
>;
// v1.0.0订单管理-详情（改版后）
export type getMallOrderDetailById = InterFunction<
{
orderId: number;
},
{
archiveDate: string;
companyName: string;
contractNo: string;
contractSignedWay: number;
cooperationTagId: number;
couponDiscountAmount: number;
createTime: string;
creditPeriod: string;
deductAmount: number;
deliveryTime: string;
discountAmount: number;
exp: {
orderId: number;
sendExpCode: string;
sendExpNo: string;
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
};
goodsNum: number;
id: number;
kdn: {
logisticCode: string;
shipperCode: string;
stateEx: string;
traces: Array<{
acceptStation: string;
acceptTime: string;
action: string;
location: string;
}>;
};
mallOrderProdListDTOList: Array<{
id: number;
goodsInfoId: number;
productName: string;
model: string;
prodSkuSpecName: string;
prodSkuSpecImage: string;
partNo: string;
versionDesc: string;
buyNum: number;
unitPrice: number;
skuSpecAmount: number;
}>;
manualDiscountAmount: number;
mremark: string;
nickName: string;
ogSkuSpecDTOList: Array<{
id: number;
directoryId: number;
shopCarId: null;
skuSpecName: string;
}>;
operationId: number;
operationName: string;
orderAmount: number;
orderCouponDTOS: Array<{
couponName: string;
couponType: number;
couponUserId: number;
createTime: string;
id: number;
orderId: number;
useAmount: number;
useType: number;
}>;
orderName: string;
orderNo: string;
payErrInfo: string;
payMethod: number;
phoneNum: string;
realityAmount: number;
recMallUserName: string;
remark: string;
serviceNames: Array<string>;
shareId: number;
shareStatus: number;
shopCarAmount: number;
shutReason: string;
signStatus: number;
statusCode: number;
tagName: string;
uid: string;
userAccountId: number;
userAddress: {
id: number;
takeAddress: string;
takeName: string;
takePhone: string;
takeRegion: string;
type: number;
};
userAddressId: number;
userName: string;
}
>;
src/api/modules/orderManage.ts
import axios from '../request';
import {
getMallOrderDetailById,
listExpressInfoType,
listOfRentalOrdersType,
listPageManagerVerOne,
listPcWechatOrderType,
listTranStatusType,
orderDetailType,
orderImageDetailType,
orderListStatus,
pfConfirmOrderWareType,
platFormCloseOrderType,
refundOrderType,
renterTakeOrderType,
sendOrderWareType,
serviceOrderStatusType,
serviceOrderType,
} from '~/api/interface/orderManageType';
export class OrderManageAPI {
......@@ -56,4 +61,22 @@ 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);
// v1.0.0订单管理-详情（改版后）
static getMallOrderDetailById: getMallOrderDetailById = (params) =>
axios.get('/oms/pmorderVerOne/getMallOrderDetailById', { params });
// 服务-订单
static getServiceOrderList: serviceOrderType = (data) =>
axios.post('/oms/serviceOrderTask/queryOrderTaskList', data);
// 服务-订单字典
static getServiceStatusList: serviceOrderStatusType = () =>
axios.post('/oms/serviceOrderTask/getServiceOrderStatus');
}
src/api/request.ts
......@@ -9,7 +9,7 @@ export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/videoO
export const uploadFileURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/oss`;
const service = axios.create({
baseURL: VITE_REQUEST_BASE_URL,
timeout: 6000,
timeout: 3600000,
});
service.interceptors.request.use(
(config: any) => {
......
src/components/goods/commonAddOrEdit/addOrEditSkuModal/index.tsx
......@@ -450,7 +450,7 @@ const AddOrEditSkuModal: React.FC<ModalProps & selfProps> = ({
name='goodsSpecName'
rules={[{ required: true, message: '请输入规格名称' }]}
>
<Input placeholder='请输入规格名称' />
<Input placeholder='请输入规格名称' maxLength={30} />
</Form.Item>
{currentDesc != 2 && (
<Form.Item label='规格来源' name='flag'>
......
src/components/goods/commonAddOrEdit/baseInfo/index.tsx
......@@ -286,6 +286,7 @@ const BaseInfo: React.FC<selfProps> = forwardRef(
placeholder='请选择所属目录'
style={{ width: '400px' }}
onChange={directorySelectChange}
disabled={!!goodsDetail}
>
{directoryList.map((v) => (
<Select.Option value={v.id} key={v.id}>
......
src/pages/categoryManage/category/index.scss
......@@ -20,8 +20,9 @@
.table-option-wrap {
display: flex;
justify-content: flex-end;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.share-code {
text-align: center;
......
src/pages/categoryManage/category/index.tsx
......@@ -54,7 +54,7 @@ const Category: FC = (props: any) => {
title: '分类名称',
dataIndex: 'classifyName',
key: 'classifyName',
// align: "center",
align: 'center',
width: '12%',
editable: true,
ellipsis: true,
......@@ -89,7 +89,7 @@ const Category: FC = (props: any) => {
return record.icon ? (
<img
src={record.icon}
style={{ width: '50px', height: '50px' }}
style={{ width: '25px', height: '25px' }}
onClick={() => imgClick(record.icon)}
/>
) : (
......@@ -647,6 +647,7 @@ const Category: FC = (props: any) => {
style={{ marginRight: '10px' }}
onClick={() => addCayDailogShow()}
icon={<PlusOutlined />}
disabled={tabList.length == 0}
>
新增分类
</Button>
......@@ -683,7 +684,7 @@ const Category: FC = (props: any) => {
>
<Form form={form} component={false}>
<Table
size='small'
size='large'
columns={mergedColumns}
dataSource={categoryList}
rowSelection={rowSelection}
......
src/pages/categoryManage/directoryManage/components/addOrEditDec/index.tsx
......@@ -140,7 +140,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
)} */}
<Form.Item label='目录名称' name='directoryName' rules={[{ required: true }]}>
<Input placeholder='请输入目录名称' allowClear={true}></Input>
<Input placeholder='请输入目录名称' allowClear={true} maxLength={20}></Input>
</Form.Item>
{form.getFieldValue('type') == '0' && (
<Form.Item
......
src/pages/mallManage/courseManage/comp/addEditModal/index.tsx
......@@ -151,7 +151,7 @@ const AddEditModal: React.FC<propType> = (props) => {
<Form.Item
label='课程封面'
name='surfaceUrl'
rules={[{ required: true, message: '请上传质检照片' }]}
rules={[{ required: true, message: '请上传课程封面' }]}
style={{ marginBottom: '-40px' }}
>
<Uploader
......@@ -173,7 +173,7 @@ const AddEditModal: React.FC<propType> = (props) => {
<Form.Item
label='课程上传'
name='videoUrl'
rules={[{ required: false, message: '请上传质检视频' }]}
rules={[{ required: false, message: '请上传课程上传' }]}
style={{ marginBottom: '-40px' }}
>
<Uploader
......
src/pages/mallManage/mallGoods/goodsList/index.tsx
......@@ -97,6 +97,7 @@ const GoodsList = () => {
},
];
const [tableData, setTableData] = useState<goodsType>([]);
const [loading, setLoading] = useState<boolean>(false);
//分页
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
......@@ -128,12 +129,14 @@ const GoodsList = () => {
};
//商品列表
const getGoodsList = (query?: goodsSearchParameters) => {
setLoading(true);
GoodsAPI.getGoodsList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
goodsType: 0,
...query,
}).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
......@@ -251,6 +254,7 @@ const GoodsList = () => {
selectedRowKeys,
onChange: onSelectChange,
}}
loading={loading}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
......
src/pages/mallManage/produceManage/produceList/index.tsx
......@@ -9,6 +9,7 @@ import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { addProductType, productListType } from '~/api/interface/produceManageType';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage';
import { PlusOutlined } from '@ant-design/icons';
//产品列表返回类型
type produceListType = InterDataType<productListType>['list'];
......@@ -218,8 +219,8 @@ function ProduceManage() {
<div className='header-view'>
<Form name='basic' layout='inline' onFinish={onFinish}>
<Form.Item>
<Button type='primary' onClick={handleAdd}>
新增
<Button type='primary' onClick={handleAdd} icon={<PlusOutlined />}>
新增产品
</Button>
</Form.Item>
<Form.Item name='productName' label='产品名称'>
......
src/pages/mallManage/rentGoods/rentList/index.tsx
......@@ -96,6 +96,7 @@ const RentList = () => {
},
];
const [tableData, setTableData] = useState<goodsType>([]);
const [loading, setLoading] = useState<boolean>(false);
//分页
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
......@@ -127,12 +128,14 @@ const RentList = () => {
};
//商品列表
const getGoodsList = (query?: goodsSearchParameters) => {
setLoading(true);
GoodsAPI.getGoodsList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
goodsType: 1,
...query,
}).then(({ result }) => {
setLoading(false);
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
......@@ -250,6 +253,7 @@ const RentList = () => {
selectedRowKeys,
onChange: onSelectChange,
}}
loading={loading}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
......
src/pages/orderManage/equipmentOrder/comp/detailDelivery/index.tsx
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
function DetailDelivery() {
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
// 列表的类型
type ListType = InterDataType<orderImageDetailType>;
// 设备状态列表
const vcuSatusList = [
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
];
// 0:发货 1:收货 2:归还 3:平台收货
const vcuTypeList = [
{ label: '发货验收', value: 0 },
{ label: '收货验收', value: 1 },
{ label: '归还验收', value: 2 },
{ label: '平台收货', value: 3 },
{ label: '退货申请', value: 4 },
];
const DetailDelivery: React.FC<PropsType> = (props) => {
const { detail } = props;
// 验收信息列表
const [orderImageList, setOrderImageList] = useState<ListType>([]);
// 获取订单验收信息
const getOrderImageDetail = async () => {
const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
if (res && res.code === '200') {
setOrderImageList(res.result);
console.log('获取订单验收信息 --->', res.result);
}
};
// 转换设备状态
const getVcuSatus = (code: number) => {
return vcuSatusList.find((item) => item.value === code)?.label || code;
};
// 转换标题
const getVcuType = (code: number) => {
return vcuTypeList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderImageDetail().then();
}, [detail]);
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>收货信息</div>
<div className={'detail-text'}>收货人：测试</div>
<div className={'detail-text'}>手机号：15889328503</div>
<div className={'detail-text'}>
收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
</div>
<div className={'detail-title'}>物流信息</div>
<div className={'detail-text'}>物流单号：YT6732436785799</div>
<div className={'detail-text'}>物流进度：--</div>
<div className={'detail-title'}>验收信息</div>
<div className={'detail-text'}>验收状态：已验收</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
{orderImageList.map((i, j) => (
<div key={j}>
<div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
<div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
<div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{i.imgs?.map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{!i.imgs && <div style={{ height: '30px' }}></div>}
</div>
</div>
))}
</div>
);
}
};
export default DetailDelivery;
src/pages/orderManage/equipmentOrder/comp/detailInformation/index.tsx
import { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
import dayjs from 'dayjs';
// 表格数据类型
type TableType = any;
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
function DetailInformation() {
const DetailInformation: React.FC<PropsType> = (props) => {
const { detail } = props;
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
const [tableData, setTableData] = useState<TableType>([]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
dataIndex: 'wareTitle',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
dataIndex: 'unitPrice',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => `￥${text.toLocaleString()}`,
},
{
title: '数量',
dataIndex: 'userName',
dataIndex: 'wareNum',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
dataIndex: 'waiting',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
title: '应收款',
dataIndex: 'shouldPay',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => `￥${text.toLocaleString()}`,
},
];
useEffect(() => {
if (!detail) return;
setTableData([
{
id: 1,
wareTitle: detail?.wareTitle,
unitPrice: detail?.unitPrice,
wareNum: detail?.wareNum,
waiting: detail?.waiting,
shouldPay: detail?.shouldPay,
},
]);
}, [detail]);
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号：UD202302181041156087</span>
<span className={'item'}>创建时间：2023-02-18 10:41:16</span>
<span className={'item'}>合同编号：UAV202334741131</span>
<span className={'item'}>订单编号：{detail?.orderNo}</span>
<span className={'item'} style={{ display: 'none' }}>
合同编号：UAV202334741131
</span>
<span className={'item'}>
订单租期：
{dayjs(detail?.startDate).format('YYYY-MM-DD')}
{' ~ '}
{dayjs(detail?.endDate).format('YYYY-MM-DD')}
</span>
<span className={'item'}>创建时间：{detail?.createTime}</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
......@@ -59,8 +87,11 @@ function DetailInformation() {
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<div className='detail-price'>
实收款<span className={'num'}>￥ {detail?.actualPay}</span>元
</div>
</div>
);
}
};
export default DetailInformation;
src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx
import React from 'react';
import React, { useEffect } from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
function DetailPurchaser() {
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
getListExpressInfo().then();
}, []);
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID： UID4460817</div>
<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
<div className={'detail-text'}>备注： 测试单，不用管</div>
<div className={'detail-text'}>UID：{detail?.uid}</div>
<div className={'detail-text'}>姓名： {detail?.buyerName}</div>
<div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
{/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注： {detail?.remark}</div>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div style={{ display: 'none' }}>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
</div>
);
}
};
export default DetailPurchaser;
src/pages/orderManage/equipmentOrder/detail/index.tsx
......@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
import DetailDelivery from '~/pages/orderManage/equipmentOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
import { OrderManageAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
......
src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx
import React, { useEffect, useState } from 'react';
import { Image } from 'antd';
import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Button } from 'antd';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<getMallOrderDetailById>;
// 参数类型
type PropsType = {
detail: DataType;
};
// 列表的类型
type ListType = InterDataType<orderImageDetailType>;
// 设备状态列表
const vcuSatusList = [
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
];
// 0:发货 1:收货 2:归还 3:平台收货
const vcuTypeList = [
{ label: '发货验收', value: 0 },
{ label: '收货验收', value: 1 },
{ label: '归还验收', value: 2 },
{ label: '平台收货', value: 3 },
{ label: '退货申请', value: 4 },
];
const DetailDelivery: React.FC<PropsType> = (props) => {
const { detail } = props;
// 验收信息列表
const [orderImageList, setOrderImageList] = useState<ListType>([]);
// 获取订单验收信息
const getOrderImageDetail = async () => {
const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setOrderImageList(res.result);
console.log('获取订单验收信息 --->', res.result);
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换设备状态
const getVcuSatus = (code: number) => {
return vcuSatusList.find((item) => item.value === code)?.label || code;
};
// 转换标题
const getVcuType = (code: number) => {
return vcuTypeList.find((item) => item.value === code)?.label || code;
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderImageDetail().then();
}, [detail]);
getListExpressInfo().then();
}, []);
return (
<div className={'detail-delivery detail-half'}>
{orderImageList.map((i, j) => (
<div key={j}>
<div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
<div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
<div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{i.imgs?.map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
{!i.imgs && <div style={{ height: '30px' }}></div>}
</div>
</div>
))}
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
</div>
);
};
......
src/pages/orderManage/productOrder/comp/detailInformation/index.tsx
......@@ -29,7 +29,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
title: '单价(元)',
dataIndex: 'unitPrice',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString()}`,
},
{
title: '数量',
......@@ -45,7 +45,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
title: '应收款',
dataIndex: 'shouldPay',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString()}`,
},
];
useEffect(() => {
......
src/pages/orderManage/productOrder/comp/detailPurchaser/index.tsx
import React, { useEffect } from 'react';
import React from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<getMallOrderDetailById>;
// 参数类型
type PropsType = {
detail: DataType;
......@@ -13,30 +12,13 @@ type PropsType = {
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
const getListExpressInfo = async () => {
const res = await OrderManageAPI.listExpressInfo({});
if (res && res.code === '200') {
setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
// console.log(res);
}
};
// 转换物流信息
const getExpressInfo = (code: string | undefined | null) => {
return expressList.find((item) => item.value === code)?.label || code;
};
// componentDidMount
useEffect(() => {
getListExpressInfo().then();
}, []);
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID：{detail?.uid}</div>
<div className={'detail-text'}>姓名： {detail?.buyerName}</div>
<div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
<div className={'detail-text'}>姓名： {detail?.userName}</div>
<div className={'detail-text'}>手机号： {detail?.phoneNum}</div>
{/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注： {detail?.remark}</div>
......@@ -52,55 +34,33 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
</div>
</div>
<div style={{ display: 'none' }}>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>发货信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-title'}>归还信息</div>
<div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
<div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
<div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
<div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
<div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
<div className={'detail-text'}>
物流进度：-- <Button type={'link'}>查看详情</Button>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
......
src/pages/orderManage/productOrder/detail/index.tsx
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
import { getMallOrderDetailById } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
// 接口返回的类型
type DataType = InterDataType<getMallOrderDetailById>;
function ProductOrderDetail() {
// 路由钩子
......@@ -13,25 +19,53 @@ function ProductOrderDetail() {
const [searchParams] = useSearchParams();
// 接收到的参数
const id = searchParams.get('id');
// 订单状态
const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// 订单详情
const [orderDetail, setOrderDetail] = useState<DataType>(null!);
// 获取订单详情
const getOrderDetail = async () => {
const res = await OrderManageAPI.getMallOrderDetailById({
orderId: Number(id),
});
if (res && res.code === '200') {
setOrderDetail(res.result);
console.log('获取订单详情 --->', res.result);
}
};
// 获取订单状态
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);
}
};
// componentDidMount
useEffect(() => {
console.log('拿到的id是 --->', id);
getOrderStatus().then();
getOrderDetail().then();
// console.log('拿到的id是 --->', id);
}, [id]);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：R2023051916330461</span>
<span>合同编号：UAV202334741131</span>
<span>订单编号：{orderDetail?.orderNo}</span>
{/*<span>合同编号：UAV202334741131</span>*/}
</div>
<div>
<span>当前状态：交易完成</span>
<span>创建时间：2023-02-18 10:41:16</span>
<span>
当前状态：
{orderStatusList?.find((i) => i.value === orderDetail?.statusCode)?.label ||
orderDetail?.statusCode}
</span>
<span>创建时间：{orderDetail?.createTime}</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
......@@ -39,9 +73,9 @@ function ProductOrderDetail() {
</Button>
</div>
<div className={'detail-wrap'}>
<DetailPurchaser />
<DetailDelivery />
<DetailInformation />
<DetailPurchaser detail={orderDetail} />
<DetailDelivery detail={orderDetail} />
<DetailInformation detail={orderDetail} />
</div>
</div>
);
......
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);
setStatusCodeButtonIndex(i);
if (i === statusCodeButtonIndex) {
setStatusCodeButtonIndex(0);
} else {
setStatusCodeButtonIndex(i);
}
if (i === 0) return;
query = { ...query, statusCode: [Number(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 +220,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 +255,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 +265,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>
src/pages/orderManage/serviceOrder/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 { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { serviceOrderStatusType, serviceOrderType } from '~/api/interface/orderManageType';
import { filterObjAttr } from '~/utils';
// 表格数据类型
type TableType = any;
type TableType = InterDataType<serviceOrderType>['list'];
//服务-订单请求参数类型
type serviceOrderTypeParameters = Omit<InterReqType<serviceOrderType>, 'pageSize' | 'pageNo'>;
//字典返回类型
type serviceStatusType = InterDataType<serviceOrderStatusType>;
// 订单状态搜索列表
const statusCodeButtonList = [
{ value: -1, label: '全部订单' },
{ value: 0, label: '沟通意向' },
{ value: 1, label: '签约付款' },
{ value: 2, label: '待发货' },
{ value: 3, label: '待收货' },
{ value: 4, label: '已完成' },
{ value: 5, label: '已关闭' },
{ value: 0, label: '待付款' },
{ value: 1, label: '待验收' },
{ value: 2, label: '已完成' },
{ value: 3, label: '已取消' },
];
function ServiceOrderView() {
......@@ -25,123 +31,178 @@ function ServiceOrderView() {
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 表格分页配置
const [pagination] = useState({
total: 0,
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
totalCount: 0,
pageSize: 10,
current: 1,
totalPage: 0,
pageNo: 1,
});
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 订单状态筛选
const statusChangeEvent = (i: number) => {
console.log('订单状态筛选 --->', i);
setStatusCodeButtonIndex(i);
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
console.log('跳转订单详情 --->', record.id);
navigate(`/orderManage/serviceOrder/detail?${qs.stringify({ id: record.id })}`);
};
const [tableData, setTableData] = useState<TableType>([]);
//服务订单-字典
const [serviceStatusList, setServiceStatusList] = useState<serviceStatusType>([]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
width: 250,
render: (_text, record) => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{/*<Image src={record.images[0]} style={{ width: 48, height: 48 }} />*/}
<div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
<div style={{ color: '#1677ff' }}>{record.orderName}</div>
<div>订单编号：{record.orderNo}</div>
<div>创建时间：{record.createdTime}</div>
</div>
</div>
),
},
{
title: '单价(元)',
dataIndex: 'userName',
dataIndex: 'orderAmt',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => `￥${text.toLocaleString()}`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '买家',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
width: '130px',
render: (_text, record) => (
<>
<div>{record.uid}</div>
<div>
{record.userName}({record.phoneNum})
</div>
</>
),
},
{
title: '订单状态',
dataIndex: 'userName',
dataIndex: 'orderStatus',
align: 'center',
render: (_text, _record) => `--`,
render: (text) => serviceStatusList.find((v) => v.orderStatus === text)?.managePort || '',
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '相关运营',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
render: (_text, record) => (
<>
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
</>
),
},
// {
// title: '操作',
// align: 'center',
// fixed: 'right',
// render: (_text, record) => (
// <>
// <Button type={'link'} onClick={() => handleDetail(record)}>
// 详情
// </Button>
// </>
// ),
// },
];
//筛选数据
const [query, setQuery] = useState<serviceOrderTypeParameters>();
// 订单状态筛选
const statusChangeEvent = (i: number) => {
setStatusCodeButtonIndex(i);
pagination.pageNo = 1;
setQuery({
...query,
orderStatus: statusCodeButtonList[i].value === -1 ? undefined : statusCodeButtonList[i].value,
});
getServiceOrderList({
...query,
orderStatus: statusCodeButtonList[i].value === -1 ? undefined : statusCodeButtonList[i].value,
});
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
navigate(`/orderManage/serviceOrder/detail?${qs.stringify({ id: record.id })}`);
};
//服务订单列表
const getServiceOrderList = (query?: serviceOrderTypeParameters) => {
OrderManageAPI.getServiceOrderList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...query,
}).then(({ result }) => {
setTableData(result.list || []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
//服务-订单字典
const getServiceStatusList = () => {
OrderManageAPI.getServiceStatusList().then(({ result }) => {
setServiceStatusList(result);
});
};
//分页
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
pagination.pageSize = pageSize;
getServiceOrderList(query);
};
//筛选
const searchSuccess = (value: any) => {
setQuery(filterObjAttr(value, ['time']));
pagination.pageNo = 1;
getServiceOrderList(filterObjAttr(value, ['time']));
};
useEffect(() => {
getServiceStatusList();
getServiceOrderList();
}, []);
return (
<>
<SearchBox
search={[
{
label: '订单编号',
name: 'keyword',
name: 'orderNameOrNo',
type: 'input',
placeholder: '请输入订单编号',
},
{
label: '买家账号',
name: 'keyword2',
type: 'input',
placeholder: '请输入用户账号',
},
{
label: '相关销售',
name: 'saleId',
type: 'Select',
placeholder: '请选择相关销售',
options: [],
},
// {
// label: '买家账号',
// name: 'keyword2',
// type: 'input',
// placeholder: '请输入用户账号',
// },
// {
// label: '相关销售',
// name: 'saleId',
// type: 'Select',
// placeholder: '请选择相关销售',
// options: [],
// },
{
label: '时间',
name: 'time',
......@@ -149,7 +210,7 @@ function ServiceOrderView() {
placeholder: '请选择创建时间',
},
]}
searchData={(e: any) => console.log('提交数据 --->', e)}
searchData={searchSuccess}
sufFixBtn={
<>
{statusCodeButtonList?.map((i, j) => {
......@@ -174,13 +235,12 @@ function ServiceOrderView() {
rowKey='id'
scroll={{ x: 1200 }}
pagination={{
total: pagination.total,
total: pagination.totalCount,
pageSize: pagination.pageSize,
current: pagination.current,
current: pagination.pageNo,
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 }}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论