Skip to content

A
admin
提交 41cc802b 作者: 龚洪江
操作

功能：破损信息展示

上级 d91b2c60
正在显示 包含 196 行增加 和 27 行删除
src/api/interface/orderManageType.ts
......@@ -1716,6 +1716,41 @@ type rentReqType = {
*/
status?: number;
};
storeDamageOrder?: {
/**
* 创建时间
*/
createTime?: Date;
/**
* 物流编号
*/
expressCode?: string;
/**
* 快递单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
leaseOrderId?: number;
/**
* 退款原因
*/
reason?: string;
/**
* 归还状态：0已归还 1无需归还
*/
status?: number;
modifiedDeposit?: number;
};
confirmReceipt?: {
/**
* 创建时间
......@@ -2017,6 +2052,26 @@ export type rentPfConfirmOrderWareType = InterFunction<
*/
damage?: number;
/**
* 扣除的押金
*/
deductionAmount?: number;
/**
* 物流编码
*/
expressCode?: string;
/**
* 物流单号
*/
expressNum?: string;
/**
* 图片文件
*/
file?: string;
/**
* id
*/
id?: number;
/**
* 订单id
*/
orderId?: number;
......@@ -2027,6 +2082,7 @@ export type rentPfConfirmOrderWareType = InterFunction<
/**
* 归还状态 0已归还 1无需归还(注：发货后申请退款需要传，归还商品的时候不需要)
*/
status?: number;
},
any
>;
src/pages/orderManage/equipmentOrder/comp/confirmReturn/index.tsx
import { Form, Input, Modal, ModalProps, Radio, RadioChangeEvent, Button, message } from 'antd';
import {
Form,
Input,
Modal,
ModalProps,
Radio,
RadioChangeEvent,
Button,
message,
InputNumber,
} 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';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/es/upload/interface';
import { Uploader } from '~/components/uploader';
import { isEmptyBol } from '~/utils/validateUtils';
// 租赁订单详情返回类型
type detailType = InterDataType<rentOrderDetailType>;
......@@ -23,11 +37,12 @@ const ConfirmReturn: FC<ModalProps & selfProps> = ({
modalTitle,
}) => {
const [form] = Form.useForm<{ damage: number; reason: string }>();
const [isShowReason, setIsShowReason] = useState<boolean>(false);
const [isDilapidation, setIsDilapidation] = useState<boolean>(false);
const [logisticsStepModalShow, setLogisticsStepModalShow] = useState<boolean>(false);
const [dilapidationImgList, setDilapidationImgList] = useState<UploadFile[]>([]);
const radioChangeEvent = (e: RadioChangeEvent) => {
setIsShowReason(!!e.target.value);
setIsDilapidation(!!e.target.value);
};
// 物流弹窗
const logisticsStepModalShowClick = () => {
......@@ -46,7 +61,8 @@ const ConfirmReturn: FC<ModalProps & selfProps> = ({
if (code === '200') {
message.success('确认归还成功');
form.resetFields();
setIsShowReason(false);
setDilapidationImgList([]);
setIsDilapidation(false);
onOk();
}
});
......@@ -55,7 +71,31 @@ const ConfirmReturn: FC<ModalProps & selfProps> = ({
const handleCancel = () => {
onCancel();
form.resetFields();
setIsShowReason(false);
setDilapidationImgList([]);
setIsDilapidation(false);
};
// 破损图片上传
const uploadDilapidationImg = (value: any) => {
setDilapidationImgList(value);
form.setFieldValue('file', JSON.stringify(value.map((v: any) => v.url)));
};
// 破损金额限制
const priceValidator = (_rule: any, value: any, callback: any) => {
if (isEmptyBol(value)) {
return callback(new Error('金额不能为空'));
}
if (value < 0) {
return callback(new Error('金额不能小于0'));
}
if (value > (currentOrderItem?.deposit || 0) * (currentOrderItem?.wareNum || 0)) {
return callback(
new Error(
`金额不能大于${(currentOrderItem?.deposit || 0) * (currentOrderItem?.wareNum || 0)}`,
),
);
}
callback();
};
return (
......@@ -67,10 +107,37 @@ const ConfirmReturn: FC<ModalProps & selfProps> = ({
<Radio value={1}>破损</Radio>
</Radio.Group>
</Form.Item>
{isShowReason ? (
<Form.Item label='原因' name='reason'>
<Input.TextArea placeholder='请输入原因' maxLength={70} showCount rows={3} />
</Form.Item>
{isDilapidation ? (
<>
<Form.Item
label='扣除金额'
name='deductionAmount'
rules={[{ required: true, validator: priceValidator }]}
>
<InputNumber placeholder='请输入抵扣金额' style={{ width: '200px' }} />
</Form.Item>
<Form.Item
label='破损图片'
name='file'
rules={[{ required: true, message: '请上传破损图片' }]}
>
<Uploader
listType='picture-card'
fileUpload
onChange={uploadDilapidationImg}
defaultFileList={dilapidationImgList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='破损描述'
name='reason'
rules={[{ required: true, message: '请输入破损描述' }]}
>
<Input.TextArea placeholder='请输入破损描述' maxLength={70} showCount rows={3} />
</Form.Item>
</>
) : (
''
)}
......
src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx
......@@ -92,22 +92,27 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
</div>
</>
)}
{detail?.confirmReceipt?.file ? (
{detail?.confirmReceipt ? (
<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>
))}
{detail?.confirmReceipt.file ? (
<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} width={50} height={50} />
</div>
))}
</div>
</div>
</div>
) : (
''
)}
<div className='detail-text'>描述：{detail?.confirmReceipt.reason}</div>
</div>
) : (
''
......@@ -132,7 +137,34 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
) : (
''
)}
{detail?.storeDamageOrder ? (
<div>
<div className='detail-title'>破损信息</div>
{detail?.storeDamageOrder.file ? (
<div className='detail-text' style={{ display: 'flex' }}>
<span>图片：</span>
<div
className='image-file'
style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}
>
{JSON.parse(detail?.storeDamageOrder.file).map((v: any, index: number) => (
<div style={{ marginRight: '10px', marginBottom: '10px' }} key={index}>
<Image src={v} width={50} height={50} />
</div>
))}
</div>
</div>
) : (
''
)}
<div className='detail-text'>
扣除金额：￥{detail?.storeDamageOrder.modifiedDeposit.toLocaleString()}
</div>
<div className='detail-text'>描述：{detail?.storeDamageOrder.reason}</div>
</div>
) : (
''
)}
<LogisticsStepModal
open={logisticsStepModalShow}
onCancel={logisticsStepModalCancel}
......
src/pages/orderManage/equipmentOrder/index.tsx
import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, Image, Table } from 'antd';
import { Button, Image, Table, Tooltip } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
......@@ -13,6 +13,7 @@ import TableItem from '~/components/order/selfTableItem';
import './index.scss';
import { filterObjAttr } from '~/utils';
import dayjs from 'dayjs';
import { CommentOutlined } from '@ant-design/icons';
// 表格数据类型
type TableType = InterListType<rentOrderListType>;
......@@ -226,7 +227,19 @@ function EquipmentOrderView() {
<TableItem
tr={
<div>
<div>{record.userName}</div>
<div>
{record.userName || record.nickname}({record.userAccountId})
</div>
<div>{record.phoneNum}</div>
{record.userRemark ? (
<div>
<Tooltip placement='top' title={record.userRemark}>
<Button icon={<CommentOutlined />}></Button>
</Tooltip>
</div>
) : (
''
)}
</div>
}
/>
......@@ -236,6 +249,7 @@ function EquipmentOrderView() {
title: '订单状态',
dataIndex: 'statusCode',
align: 'center',
width: '10%',
render: (text: number) => (
<TableItem tr={tranStatusList.find((v) => v.value === String(text))?.label} />
),
......@@ -402,8 +416,8 @@ function EquipmentOrderView() {
<ShipmentsOrder
open={deliverVisible}
currentOrderItem={currentOrderItem}
onCancel={shipmentsOrderOk}
onOk={shipmentsOrderCancel}
onCancel={shipmentsOrderCancel}
onOk={shipmentsOrderOk}
/>
{/*确认归还*/}
<ConfirmReturn
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论