Skip to content

A
admin
提交 a1c10727 作者: 龚洪江
操作

功能：租赁后台订单流程

上级 99ef2d92
正在显示 包含 314 行增加 和 703 行删除
src/api/interface/orderManageType.ts
......@@ -1667,6 +1667,17 @@ type rentReqType = {
location?: string;
}[];
};
returnKdnExpDTO?: {
logisticCode?: string;
shipperCode?: string;
stateEx?: string;
traces?: {
acceptStation?: string;
acceptTime?: string;
action?: string;
location?: string;
}[];
};
/**
* 租赁商品id
*/
......@@ -1705,6 +1716,40 @@ type rentReqType = {
*/
status?: number;
};
confirmReceipt?: {
/**
* 创建时间
*/
createTime?: string;
/**
* 物流编号
*/
expressCode?: string;
/**
* 快递单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
leaseOrderId?: number;
/**
* 退款原因
*/
reason?: string;
/**
* 归还状态：0已归还 1无需归还
*/
status?: number;
};
/**
* 运费
*/
......@@ -1964,3 +2009,24 @@ export type rentOrderSendType = InterFunction<
},
any
>;
// 租赁订单-平台确认归还
export type rentPfConfirmOrderWareType = InterFunction<
{
/**
* 商家确认商品是否破损 0:未破损 1:破损
*/
damage?: number;
/**
* 订单id
*/
orderId?: number;
/**
* 原因
*/
reason?: string;
/**
* 归还状态 0已归还 1无需归还(注：发货后申请退款需要传，归还商品的时候不需要)
*/
},
any
>;
src/api/modules/orderManage.ts
......@@ -42,6 +42,7 @@ import {
rentOrderDictType,
rentOrderSendType,
rentOrderDetailType,
rentPfConfirmOrderWareType,
} from '~/api/interface/orderManageType';
export class OrderManageAPI {
......@@ -172,4 +173,7 @@ export class OrderManageAPI {
// 租赁-订单详情
static getRentOrderDetail: rentOrderDetailType = (params) =>
axios.get('/oms/lease/order/detail', { params });
// 租赁订单-平台确认归还
static rentPfConfirmOrderWare: rentPfConfirmOrderWareType = (data) =>
axios.post('/oms/lease/order/pfConfirmOrderWare', data);
}
src/pages/orderManage/equipmentOrder/comp/confirmReturn/index.tsx
import { Form, Input, Modal, ModalProps, Radio } from 'antd';
import { FC } from 'react';
import { Form, Input, Modal, ModalProps, Radio, RadioChangeEvent, Button, message } from 'antd';
import React, { FC, useState } from 'react';
import { InterDataType } from '~/api/interface';
import { rentOrderDetailType } from '~/api/interface/orderManageType';
import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal';
import { OrderManageAPI } from '~/api';
// 租赁订单详情返回类型
type detailType = InterDataType<rentOrderDetailType>;
......@@ -10,33 +12,80 @@ interface selfProps {
onOk: () => void;
onCancel: () => void;
currentOrderItem: detailType | undefined;
modalTitle: string;
}
const ConfirmReturn: FC<ModalProps & selfProps> = ({ open, onOk, onCancel }) => {
const ConfirmReturn: FC<ModalProps & selfProps> = ({
open,
onOk,
onCancel,
currentOrderItem,
modalTitle,
}) => {
const [form] = Form.useForm<{ damage: number; reason: string }>();
const [isShowReason, setIsShowReason] = useState<boolean>(false);
const [logisticsStepModalShow, setLogisticsStepModalShow] = useState<boolean>(false);
const radioChangeEvent = (e: RadioChangeEvent) => {
setIsShowReason(!!e.target.value);
};
// 物流弹窗
const logisticsStepModalShowClick = () => {
setLogisticsStepModalShow(true);
};
const logisticsStepModalCancel = () => {
setLogisticsStepModalShow(false);
};
const handleOk = () => {
onOk();
form.validateFields().then((values) => {
OrderManageAPI.rentPfConfirmOrderWare({
...values,
orderId: currentOrderItem?.id,
}).then(({ code }) => {
if (code === '200') {
message.success('确认归还成功');
form.resetFields();
setIsShowReason(false);
onOk();
}
});
});
};
const handleCancel = () => {
onCancel();
form.resetFields();
setIsShowReason(false);
};
return (
<Modal open={open} title='确认归还' onOk={handleOk} onCancel={handleCancel}>
<Modal open={open} onOk={handleOk} onCancel={handleCancel} title={modalTitle}>
<Form initialValues={{ damage: 0 }} form={form}>
<Form.Item label='判定' name='damage'>
<Radio.Group>
<Radio.Group onChange={radioChangeEvent}>
<Radio value={0}>未破损</Radio>
<Radio value={1}>破损</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='原因' name='reason'>
<Input.TextArea placeholder='请输入原因' maxLength={70} showCount rows={3} />
</Form.Item>
<Form.Item label='图片'>
<div className='image-file'>{}</div>
{isShowReason ? (
<Form.Item label='原因' name='reason'>
<Input.TextArea placeholder='请输入原因' maxLength={70} showCount rows={3} />
</Form.Item>
) : (
''
)}
<Form.Item label='物流信息'>
<div>
<Button type='link' onClick={logisticsStepModalShowClick}>
查看详情
</Button>
</div>
</Form.Item>
<LogisticsStepModal
open={logisticsStepModalShow}
onCancel={logisticsStepModalCancel}
logisticsStep={currentOrderItem?.returnKdnExpDTO}
/>
</Form>
</Modal>
);
......
src/pages/orderManage/equipmentOrder/comp/detailDelivery/index.tsx deleted 100644 → 0
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';
// 接口返回的类型
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'}>
{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.scss 0 → 100644
.detail-information{
.mall-sku-item{
display: flex;
align-items: center;
margin-bottom: 10px;
.sku-img{
width: 48px;
height: 48px;
}
.sku-info{
margin-left: 10px;
line-height: 16px;
text-align: left;
.info-name{
color:#1677ff
}
.info-spec{
margin-top: 10px;
span:not(:last-child){
&:after{
content: '；';
}
}
}
}
}
}
src/pages/orderManage/equipmentOrder/comp/detailInformation/index.tsx
import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import React from 'react';
import { Image, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { InterDataType } from '~/api/interface';
import { orderDetailType } from '~/api/interface/orderManageType';
import { rentOrderDetailType, rentOrderDictType } from '~/api/interface/orderManageType';
import dayjs from 'dayjs';
import './index.scss';
// 表格数据类型
type TableType = any;
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<rentOrderDetailType>;
// 订单状态返回类型
type OrderStatusType = InterDataType<rentOrderDictType>;
// 参数类型
type PropsType = {
detail: DataType;
orderStatusList: OrderStatusType;
};
const DetailInformation: React.FC<PropsType> = (props) => {
const { detail } = props;
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
const DetailInformation: React.FC<PropsType> = ({ detail, orderStatusList }) => {
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'wareTitle',
align: 'center',
width: '20%',
render: (_text: any, record) => (
<div className='mall-sku-item'>
<Image src={record?.skuImg} className='sku-img' />
<div className='sku-info'>
<div className='info-name'>{record?.orderName}</div>
<div className='info-spec'>
{Object.entries(JSON.parse(record?.sku || '[]')).map((v, index) => (
<span key={index}>{v.join('：')}</span>
))}
</div>
</div>
</div>
),
},
{
title: '单价(元)',
dataIndex: 'unitPrice',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString() || 0}`,
},
{
title: '数量',
......@@ -38,58 +53,40 @@ const DetailInformation: React.FC<PropsType> = (props) => {
},
{
title: '订单状态',
dataIndex: 'waiting',
dataIndex: 'statusCode',
align: 'center',
render: (text: number) =>
orderStatusList.find((item) => item.status === text?.toString())?.waiting,
},
{
title: '应收款',
dataIndex: 'shouldPay',
dataIndex: 'orderTotalAmount',
align: 'center',
render: (text) => `￥${text.toLocaleString()}`,
render: (text) => `￥${text?.toLocaleString() || 0}`,
},
];
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'}>订单编号：{detail?.orderNo}</span>
<span className={'item'} style={{ display: 'none' }}>
合同编号：UAV202334741131
</span>
<span className={'item'}>
<div className='detail-information'>
<div className='detail-title'>订单明细</div>
<div className='detail-text'>
<span className='item'>订单编号：{detail?.orderNo}</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>
<span className='item'>{`创建时间：${detail?.createTime}`}</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
size='small'
dataSource={tableData}
dataSource={[detail]}
columns={columns}
rowKey='id'
bordered
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
<div className='detail-price'>
实收款<span className={'num'}>￥ {detail?.actualPay}</span>元
</div>
</div>
);
};
......
src/pages/orderManage/equipmentOrder/comp/detailMessageBox/index.tsx deleted 100644 → 0
import MessageBox from '~/components/messageBox';
function DetailMessageBox() {
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>订单动态</div>
<MessageBox />
</div>
);
}
export default DetailMessageBox;
src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx
import React, { useEffect } from 'react';
import { Button, Image } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import React, { useEffect, useState } from 'react';
import { Button, Steps, Image } from 'antd';
import { rentOrderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import { OrderManageAPI } from '~/api';
import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
type DataType = InterDataType<rentOrderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
......@@ -13,6 +14,7 @@ type PropsType = {
const DetailPurchaser: React.FC<PropsType> = (props) => {
const { detail } = props;
const [logisticsStepModalShow, setLogisticsStepModalShow] = useState<boolean>(false);
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 获取物流信息
......@@ -20,88 +22,107 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
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;
};
// 物流弹窗
const logisticsStepModalShowClick = () => {
setLogisticsStepModalShow(true);
};
const logisticsStepModalCancel = () => {
setLogisticsStepModalShow(false);
};
// 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'}>企业： 浙江科比特创新科技有限公司</div>*/}
<div className={'detail-text'}>备注： {detail?.remark}</div>
<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 className='detail-purchaser detail-half'>
<div className='detail-title'>买家信息</div>
<div className='detail-text'>UID：{detail?.userAccountId}</div>
<div className='detail-text'>姓名： {detail?.nickname}</div>
<div className='detail-text'>手机号： {detail?.phoneNum}</div>
<div className='detail-text'>备注： {detail?.userRemark}</div>
<div className='detail-title'>发货信息</div>
<div className='detail-text'>收货人：{detail?.uavOrderExpressDTO?.takeName}</div>
<div className='detail-text'>手机号：{detail?.uavOrderExpressDTO?.takePhone}</div>
<div className='detail-text'>
收货地址：
{(detail?.uavOrderExpressDTO?.takeRegion?.split('/').join('') || '') +
detail?.uavOrderExpressDTO?.takeAddress}
</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='付款凭证' />
))}
{detail?.uavOrderExpressDTO?.sendExpCode && (
<>
<div className='detail-text'>物流单号：{detail?.uavOrderExpressDTO?.sendExpNo}</div>
<div className='detail-text'>
物流公司：{getExpressInfo(detail?.uavOrderExpressDTO?.sendExpCode)}
</div>
<div className='detail-text' style={{ display: 'flex' }}>
<span>物流进度：</span>
<div>
<Steps
direction='vertical'
current={0}
progressDot
items={[
{
title: detail?.kdnExpDTO?.traces?.[0].acceptStation,
description: detail?.kdnExpDTO?.traces?.[0].acceptTime,
},
{
title: `送至${
(detail?.uavOrderExpressDTO?.takeRegion?.split('/').join('') || '') +
detail?.uavOrderExpressDTO?.takeAddress
}`,
},
]}
/>
</div>
<div>
<Button type='link' onClick={logisticsStepModalShowClick}>
查看详情
</Button>
</div>
</div>
</>
)}
{detail?.confirmReceipt?.file ? (
<div>
<div className='detail-title'>收货信息</div>
<div className='detail-text' style={{ display: 'flex' }}>
<span>图片：</span>
<div
className='image-file'
style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}
>
{JSON.parse(detail?.confirmReceipt.file).map((v: any, index: number) => (
<div style={{ marginRight: '10px', marginBottom: '10px' }} key={index}>
<Image src={v.filePath} width={50} height={50} />
</div>
))}
</div>
</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>
<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-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-title'>归还信息</div>
<div className='detail-text'>物流单号：{detail?.returnKdnExpDTO?.logisticCode}</div>
<div className='detail-text'>
物流公司：{getExpressInfo(detail?.returnKdnExpDTO?.shipperCode)}
</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'}>
<div className='detail-text'>
物流进度：-- <Button type={'link'}>查看详情</Button>
</div>
<LogisticsStepModal
open={logisticsStepModalShow}
onCancel={logisticsStepModalCancel}
logisticsStep={detail?.kdnExpDTO}
/>
</div>
);
};
......
src/pages/orderManage/equipmentOrder/comp/detailTimeLine/index.tsx deleted 100644 → 0
import { OrderManageAPI } from '~/api';
import React, { useEffect, useState } from 'react';
import { Timeline } from 'antd';
import { orderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
// 接口返回的类型
type DataType = InterDataType<orderDetailType>;
// 参数类型
type PropsType = {
detail: DataType;
};
const DetailTimeLine: React.FC<PropsType> = (props) => {
const { detail } = props;
// 流程列表
const [timeLineList, setTimeLineList] = useState<{ label: string; color: string }[]>([]);
// 获取订单流程
const getOrderStatus = async () => {
const res = await OrderManageAPI.listTranStatus({});
if (res && res.code === '200') {
// 转换列表数据（区分完成和未完）
const list = res.result.map((i) => {
if (Number(i.status) < Number(detail?.tranStatus)) {
return {
label: i.doing,
color: '#1890ff',
};
} else {
return {
label: i.waiting,
color: '#ccc',
};
}
});
// 将当前项目变绿
const current = list.findIndex((i) => i.color === '#ccc');
list[current].color = '#52c41a';
setTimeLineList(list);
}
};
// componentDidMount
useEffect(() => {
if (!detail) return;
getOrderStatus().then();
}, [detail]);
return (
<div className={'detail-timeline'} style={{ width: '200px' }}>
<div className={'detail-title'}>订单流程</div>
<Timeline items={timeLineList} mode={'right'} />
</div>
);
};
export default DetailTimeLine;
src/pages/orderManage/equipmentOrder/comp/orderClosed/index.tsx deleted 100644 → 0
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, platFormCloseOrderType } from '~/api/interface/orderManageType';
import React from 'react';
import { Form, message, Modal, Select } from 'antd';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<platFormCloseOrderType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderClosed: React.FC<propType> = (props) => {
OrderClosed.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
// console.log('确认事件 --->', values);
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await OrderManageAPI.platFormCloseOrder({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={400}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
>
<Form.Item
label='关闭理由'
name='shutReason'
rules={[{ required: true, message: '请选择关闭理由' }]}
>
<Select
placeholder={'请选择关闭理由'}
options={[
{ label: '未及时付款' },
{ label: '买家不想买' },
{ label: '买家信息填写错误，重新下单' },
{ label: '恶意买家，同行捣乱' },
{ label: '缺货' },
{ label: '买家拍错了' },
{ label: '其他原因' },
].map((i) => ({ label: i.label, value: i.label }))}
allowClear
/>
</Form.Item>
</Form>
</Modal>
);
};
export default OrderClosed;
src/pages/orderManage/equipmentOrder/comp/orderConfirm/index.tsx deleted 100644 → 0
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, pfConfirmOrderWareType } from '~/api/interface/orderManageType';
import React, { useEffect } from 'react';
import { Col, Form, Input, message, Modal, Radio, Row } from 'antd';
import { Uploader } from '~/components/uploader';
import { PlusOutlined } from '@ant-design/icons';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<pfConfirmOrderWareType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderConfirm: React.FC<propType> = (props) => {
OrderConfirm.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 物流列表
const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
// console.log('确认事件 --->', values);
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await OrderManageAPI.pfConfirmOrderWare({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// 获取物流信息
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(() => {
if (!open) return;
if (!data) return;
getListExpressInfo().then();
console.log('data --->', data);
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={600}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
autoComplete='new-password'
>
<Form.Item label='收货方式' labelCol={{ span: 4 }}>
物流归还
</Form.Item>
<Form.Item label='物流单号' labelCol={{ span: 4 }}>
{data?.receipt?.sendExNo}
</Form.Item>
<Form.Item label='物流公司' labelCol={{ span: 4 }}>
{getExpressInfo(data?.receipt?.sendExCode)}
</Form.Item>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='质检照片'
name='imgs'
rules={[{ required: true, message: '请上传质检照片' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={3}
onChange={(e) => {
form.setFieldValue(
'imgs',
e.map((item) => item.url),
);
}}
>
<PlusOutlined />
</Uploader>
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='质检视频'
name='videoUrl'
rules={[{ required: true, message: '请上传质检视频' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
fileSize={10}
onChange={(e) => {
form.setFieldValue('videoUrl', e[0].url);
}}
>
<PlusOutlined />
</Uploader>
</Form.Item>
</Col>
</Row>
<Row gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={11}>
<Form.Item
label='设备状态'
name='vcuSatus'
rules={[{ required: true, message: '请选择设备状态' }]}
initialValue={0}
>
<Radio.Group
options={[
{ label: '正常', value: 0 },
{ label: '故障', value: 1 },
]}
onChange={(e) => {
form.setFieldValue('vcuSatus', e.target.value);
}}
/>
</Form.Item>
</Col>
<Col span={11}>
<Form.Item
label='操作密码'
name='authPwd'
rules={[{ required: true, message: '请输入操作密码' }]}
>
<Input.Password
placeholder={'请输入操作密码'}
maxLength={20}
allowClear
autoComplete='new-password'
/>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
);
};
export default OrderConfirm;
src/pages/orderManage/equipmentOrder/comp/orderRefund/index.tsx deleted 100644 → 0
import { InterListType, InterReqType } from '~/api/interface';
import { listPcWechatOrderType, refundOrderType } from '~/api/interface/orderManageType';
import React from 'react';
import { Form, message, Modal, Radio } from 'antd';
import { OrderManageAPI } from '~/api';
// 表格数据类型
type TableType = InterListType<listPcWechatOrderType>;
// 请求数据的类型
type ReqType = InterReqType<refundOrderType>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
const OrderRefund: React.FC<propType> = (props) => {
OrderRefund.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
// console.log('确认事件 --->', values);
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await OrderManageAPI.refundOrder({
...values,
orderInfoId: Number(data?.id),
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={400}
>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 6 }}
wrapperCol={{ span: 12 }}
>
<Form.Item
label='是否同意'
name='refund'
rules={[{ required: true, message: '请选择是否同意' }]}
>
<Radio.Group
options={[
{ label: '同意退款', value: true },
{ label: '拒绝退款', value: false },
]}
/>
</Form.Item>
</Form>
</Modal>
);
};
export default OrderRefund;
src/pages/orderManage/equipmentOrder/detail/index.scss
......@@ -3,24 +3,7 @@
box-sizing: border-box;
.order-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.head-text {
font-size: 13px;
font-weight: 600;
color: #000000;
div {
margin-bottom: 10px;
span {
margin-right: 20px;
}
}
}
text-align: right;
}
.detail-wrap {
......
src/pages/orderManage/equipmentOrder/detail/index.tsx
......@@ -2,16 +2,16 @@ import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
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 { rentOrderDetailType } from '~/api/interface/orderManageType';
import DetailTimeLine from '~/pages/orderManage/equipmentOrder/comp/detailTimeLine';
import { rentOrderDetailType, rentOrderDictType } from '~/api/interface/orderManageType';
// 接口返回的类型
type DataType = InterDataType<rentOrderDetailType>;
// 订单状态返回类型
type OrderStatusType = InterDataType<rentOrderDictType>;
function EquipmentOrderDetail() {
// 路由钩子
......@@ -19,7 +19,10 @@ function EquipmentOrderDetail() {
// 参数钩子
const [searchParams] = useSearchParams();
// 订单id
const [orderId, setOrderId] = useState<number>(0);
// const [orderId, setOrderId] = useState<number>(0);
// 订单状态字典
const [orderStatusList, setOrderStatusList] = useState<OrderStatusType>([]);
// 返回上一页
const handleBack = () => {
navigate(-1);
......@@ -36,34 +39,29 @@ function EquipmentOrderDetail() {
}
});
};
// 获取订单状态
const getOrderStatus = () => {
OrderManageAPI.getRentOrderDict().then(({ result }) => {
setOrderStatusList(result || []);
});
};
// componentDidMount
useEffect(() => {
setOrderId(Number(searchParams.get('id') || 0));
// setOrderId(Number(searchParams.get('id') || 0));
getOrderDetail(Number(searchParams.get('id') || 0));
getOrderStatus();
}, []);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：{orderDetail?.orderNo}</span>
<span style={{ display: 'none' }}>合同编号：UAV202334741131</span>
</div>
<div>
<span>当前状态：{orderDetail?.waiting}</span>
<span>创建时间：{orderDetail?.createTime}</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
<div className='order-detail'>
<div className='order-head'>
<Button type='primary' onClick={() => handleBack()}>
返回
</Button>
</div>
<div className={'detail-wrap'}>
<div className='detail-wrap'>
<DetailPurchaser detail={orderDetail} />
<DetailDelivery detail={orderDetail} />
<DetailTimeLine detail={orderDetail} />
{/*<DetailMessageBox />*/}
<DetailInformation detail={orderDetail} />
<DetailInformation detail={orderDetail} orderStatusList={orderStatusList} />
</div>
</div>
);
......
src/pages/orderManage/equipmentOrder/index.tsx
......@@ -9,9 +9,6 @@ import { rentOrderListType } from '~/api/interface/orderManageType';
import { OrderManageAPI } from '~/api';
import ShipmentsOrder from './comp/shipmentsOrder';
import ConfirmReturn from './comp/confirmReturn';
import OrderConfirm from '~/pages/orderManage/equipmentOrder/comp/orderConfirm';
import OrderClosed from '~/pages/orderManage/equipmentOrder/comp/orderClosed';
import OrderRefund from '~/pages/orderManage/equipmentOrder/comp/orderRefund';
import TableItem from '~/components/order/selfTableItem';
import './index.scss';
import { filterObjAttr } from '~/utils';
......@@ -31,12 +28,6 @@ function EquipmentOrderView() {
const [deliverVisible, setDeliverVisible] = useState<boolean>(false);
// 确认归还
const [confirmReturnShow, setConfirmReturnShow] = useState<boolean>(false);
// 收货弹窗是否显示
const [confirmVisible, setConfirmVisible] = useState<boolean>(false);
// 关闭弹窗是否显示
const [closedVisible, setClosedVisible] = useState<boolean>(false);
// 退款弹窗是否显示
const [refundVisible, setRefundVisible] = useState<boolean>(false);
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 订单状态搜索列表
......@@ -142,7 +133,10 @@ function EquipmentOrderView() {
{
label: '确认退款',
status: 800,
onClick: (item: TableType[0]) => {},
onClick: (item: TableType[0]) => {
getRentDetail(item.id);
setConfirmReturnShow(true);
},
},
];
// 获取当前按钮对象
......@@ -163,6 +157,7 @@ function EquipmentOrderView() {
};
const confirmReturnOk = () => {
setConfirmReturnShow(false);
getTableList(query);
};
// 表格结构
......@@ -416,13 +411,8 @@ function EquipmentOrderView() {
onOk={confirmReturnOk}
onCancel={confirmReturnCancel}
currentOrderItem={currentOrderItem}
modalTitle={currentOrderItem?.statusCode === 500 ? '确认归还' : '确认退款'}
/>
{/*收货弹窗*/}
{/*<OrderConfirm open={confirmVisible} title={'确认收货'} data={editData} closed={} />*/}
{/*/!*关闭订单*!/*/}
{/*<OrderClosed open={closedVisible} title={'关闭订单'} data={editData} closed={} />*/}
{/*/!*退款弹窗*!/*/}
{/*<OrderRefund open={refundVisible} title={'退款审批'} data={editData} closed={} />*/}
</div>
);
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论