功能：破损信息展示

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