功能：采购订单，商城订单，确认订单对接

src/api/interface/orderManageType.ts

@@ -965,7 +965,7 @@ type mallOrderType = {
     /**
      * 支付凭证
      */
-    payImgList?: string;
+    payImgList: string;
     /**
      * 备注信息
      */
@@ -1251,3 +1251,275 @@ export type confirmOrderType = InterFunction<
   },
   any
 >;
+// 根据用户id获取钱包信息
+export type walletAmountType = InterFunction<
+  { userAccountId?: number },
+  {
+    /**
+     * 云享金余额
+     */
+    cashAmt?: number;
+    /**
+     * 已冻结云享金
+     */
+    cashFreeze?: number;
+    /**
+     * id
+     */
+    id?: number;
+    /**
+     * 已提现的金额
+     */
+    rebateWdl?: number;
+    /**
+     * 佣金余额
+     */
+    salaryAmt?: number;
+    /**
+     * 已冻结佣金
+     */
+    salaryFreeze?: number;
+    /**
+     * 总金额
+     */
+    totalAmount?: number;
+    /**
+     * 云享金总金额
+     */
+    totalCash?: number;
+    /**
+     * 冻结总额
+     */
+    totalFreeze?: number;
+    /**
+     * 佣金总额度
+     */
+    totalSalary?: number;
+    /**
+     * 用户ID
+     */
+    userAccountId?: number;
+    /**
+     * 用户姓名
+     */
+    userName?: string;
+    /**
+     * 提现冻结金额
+     */
+    wdlFreeze?: number;
+  }
+>;
+// 商城订单-凭证审批
+export type approvalOrderType = InterFunction<
+  {
+    /**
+     * 审核状态，0待审批，1通过，2未通过
+     */
+    checkStatus: number;
+    /**
+     * 支付凭证
+     */
+    payImgList?: string;
+    /**
+     * 未通过原因
+     */
+    refuseReason?: string;
+    /**
+     * 订单id
+     */
+    uavOrderId: number;
+    id: number;
+  },
+  any
+>;
+
+// 采购订单-列表
+export type listPurchaseOrderType = InterListFunction<
+  {
+    /**
+     * 结束时间
+     */
+    endTime?: string;
+    /**
+     * 关键字-订单编号
+     */
+    keyword?: string;
+    /**
+     * 开始时间
+     */
+    startTime?: string;
+    /**
+     * 订单状态码
+     */
+    statusCode?: number;
+    /**
+     * 商家id
+     */
+    thirdBackUserAccountId?: number;
+    /**
+     * 用户uid
+     */
+    uid?: string;
+  },
+  {
+    id: number;
+    orderNo: string;
+    backUserAccountId: number;
+    thirdUserAccountId: number;
+    uavOrderId: number;
+    orderAmount: number;
+    statusCode: number;
+    createTime: string;
+    userRemark: null;
+    sellerRemark: null;
+    skuDTOList: {
+      /**
+       * 下单时间
+       */
+      createTime?: Date;
+      /**
+       * 订单规格id
+       */
+      id?: number;
+      /**
+       * 商品id
+       */
+      mallGoodsId?: number;
+      /**
+       * 购买数量
+       */
+      orderNum: number;
+      /**
+       * 商品规格id
+       */
+      priceStockId?: number;
+      /**
+       * 商品规格
+       */
+      productSpec: string;
+      /**
+       * 商品规格图片
+       */
+      skuImage?: string;
+      /**
+       * 商品规格编号
+       */
+      skuNo?: string;
+      /**
+       * 商品名称
+       */
+      tradeName?: string;
+      /**
+       * 订单id
+       */
+      uavOrderId?: number;
+      /**
+       * 单价
+       */
+      unitPrice?: number;
+    }[];
+    uavOrderExpressDTO: null;
+    uavOrderPayDTOS: null;
+    contractInfoDTO: null;
+  }
+>;
+// 采购订单-详情
+export type purchaseOrderDetailType = InterFunction<
+  {
+    /**
+     * id
+     */
+    id: number;
+  },
+  {
+    id: number;
+    orderNo: string;
+    backUserAccountId: number;
+    thirdUserAccountId: number;
+    uavOrderId: number;
+    orderAmount: number;
+    statusCode: number;
+    createTime: number;
+    userRemark: null;
+    sellerRemark: null;
+    skuDTOList: {
+      /**
+       * 下单时间
+       */
+      createTime?: Date;
+      /**
+       * 订单规格id
+       */
+      id?: number;
+      /**
+       * 商品id
+       */
+      mallGoodsId?: number;
+      /**
+       * 购买数量
+       */
+      orderNum: number;
+      /**
+       * 商品规格id
+       */
+      priceStockId?: number;
+      /**
+       * 商品规格
+       */
+      productSpec: string;
+      /**
+       * 商品规格图片
+       */
+      skuImage?: string;
+      /**
+       * 商品规格编号
+       */
+      skuNo?: string;
+      /**
+       * 商品名称
+       */
+      tradeName?: string;
+      /**
+       * 订单id
+       */
+      uavOrderId?: number;
+      /**
+       * 单价
+       */
+      unitPrice?: number;
+    }[];
+    uavOrderExpressDTO: {
+      id: number;
+      uavOrderId: number;
+      sendExpNo: string;
+      sendExpCode: string;
+      takeName: string;
+      takePhone: string;
+      takeRegion: string;
+      takeAddress: string;
+      sendTime: number;
+      receiveTime: null;
+      receive: number;
+    };
+    uavOrderPayDTOS: Array<unknown>;
+    contractInfoDTO: null;
+  }
+>;
+// 采购订单-确认
+export type confirmPOrderType = InterFunction<
+  {
+    /**
+     * 采购订单id
+     */
+    id?: number;
+    /**
+     * 订单金额
+     */
+    orderAmount?: number;
+    /**
+     * 平台备注
+     */
+    userRemark?: string;
+  },
+  any
+>;

src/api/modules/orderManage.ts

 import axios from '../request';
 import {
+  approvalOrderType,
   confirmOrderType,
+  confirmPOrderType,
   disputeType,
   flowDictionaryAndTimeType,
   flowDictionaryType,
@@ -9,6 +11,7 @@ import {
   listOfRentalOrdersType,
   listPageManagerVerOne,
   listPcWechatOrderType,
+  listPurchaseOrderType,
   listTranStatusType,
   logisticsDynamicsType,
   mallOrderDetailType,
@@ -20,6 +23,7 @@ import {
   orderListStatus,
   pfConfirmOrderWareType,
   platFormCloseOrderType,
+  purchaseOrderDetailType,
   refundOrderType,
   renterTakeOrderType,
   sellerRemarkType,
@@ -28,6 +32,7 @@ import {
   serviceOrderFormListType,
   serviceOrderStatusType,
   serviceOrderType,
+  walletAmountType,
 } from '~/api/interface/orderManageType';
 
 export class OrderManageAPI {
@@ -124,4 +129,17 @@ export class OrderManageAPI {
     axios.get('/oms/uav-order/sellerRemark', { params });
   //   商城订单-确认订单
   static confirmOrder: confirmOrderType = (data) => axios.post('/oms/uav-order/confirmOrder', data);
+  // 根据用户id获取钱包信息
+  static getWalletAmount: walletAmountType = (params) =>
+    axios.get('/userapp/pay/getPayWalletInfo', { params });
+  //   商城订单-审批凭证
+  static approvalOrder: approvalOrderType = (data) => axios.post('/oms/uav-order/checkPay', data);
+  //   采购订单-列表
+  static getListPurchaseOrder: listPurchaseOrderType = (data) =>
+    axios.post('/oms/uav-po/listPurchaseOrder', data);
+  //   采购订单-详情
+  static getPurchaseOrderDetail: purchaseOrderDetailType = (params) =>
+    axios.get('/oms/uav-po/getPurchaseOrder', { params });
+  //   采购订单-确认
+  static confirmPOrder: confirmPOrderType = (data) => axios.post('/oms/uav-po/confirmPOrder', data);
 }

src/components/order/selfTableItem/index.scss

+.order-table-item {
+  .item-td {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 40px;
+    width: 100%;
+    background: rgba(22, 119, 255, 0.1);
+    line-height: 40px;
+  }
+
+  .item-tr {
+    min-height: 50px;
+    width: 100%;
+    margin-top: 50px;
+  }
+}

src/components/order/selfTableItem/index.tsx

+import './index.scss';
+const TableItem: React.FC<{
+  td?: React.ReactNode;
+  tr?: React.ReactNode;
+  // eslint-disable-next-line react/prop-types
+}> = ({ td, tr }) => {
+  return (
+    <div className='order-table-item'>
+      <div className='item-td'>{td}</div>
+      <div className='item-tr'>{tr}</div>
+    </div>
+  );
+};
+export default TableItem;

src/pages/orderManage/procurementOrder/orderDetail/index.scss

+.procurement-order-detail{
+  .procurement-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/procurementOrder/orderDetail/index.tsx

-import { Button, Descriptions, Table } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { Button, Descriptions, Image, Table } from 'antd';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { OrderManageAPI } from '~/api';
+import React, { useEffect, useState } from 'react';
+import { purchaseOrderDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import dayjs from 'dayjs';
+import { ColumnsType } from 'antd/es/table';
+import './index.scss';
+
+// 采购订单详情返回类型
+type detailType = InterDataType<purchaseOrderDetailType>;
 
 const ProcurementOrderDetail = () => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [purchaseOrderDetail, setPurchaseOrderDetail] = useState<detailType>();
+  // 订单状态
+  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
+  const columns: ColumnsType<detailType['skuDTOList'][0]> = [
+    {
+      title: '商品',
+      align: 'center',
+      width: '20%',
+      render: (_text, record) => (
+        <div className='mall-sku-item'>
+          <Image src={record.skuImage} className='sku-img' />
+          <div className='sku-info'>
+            <div className='info-name'>{record.tradeName}</div>
+            <div className='info-spec'>
+              {Object.entries(JSON.parse(record.productSpec)).map((v, index) => (
+                <span key={index}>{v.join('：')}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '单价（元）',
+      dataIndex: 'unitPrice',
+      align: 'center',
+      render: (text) => `￥${text?.toLocaleString()}`,
+    },
+    {
+      title: '数量',
+      dataIndex: 'orderNum',
+      align: 'center',
+    },
+    {
+      title: '订单状态',
+      align: 'center',
+      render: () => orderStatusList.find((v) => v.value === purchaseOrderDetail?.statusCode)?.label,
+    },
+    {
+      title: '订单金额（元）',
+      align: 'center',
+      render: () => `￥${purchaseOrderDetail?.orderAmount}`,
+    },
+  ];
+
+  // 获取采购订单详情
+  const getPurchaseOrderDetail = (id: number) => {
+    OrderManageAPI.getPurchaseOrderDetail({ id }).then(({ result }) => {
+      if (result) {
+        setPurchaseOrderDetail(result);
+      }
+    });
+  };
+  // 获取订单状态
+  const getOrderStatusList = () => {
+    OrderManageAPI.getMallOrderStatusList().then(({ result }) => {
+      if (result) {
+        const list = result.map((item) => ({ value: item.code, label: item.status }));
+        setOrderStatusList(list);
+      }
+    });
+  };
 
   const backRoute = () => {
     navigate(-1);
   };
+  useEffect(() => {
+    getPurchaseOrderDetail(Number(searchParams.get('id')));
+    getOrderStatusList();
+  }, []);
+
   return (
     <div className='procurement-order-detail'>
       <Descriptions
@@ -24,24 +102,42 @@ const ProcurementOrderDetail = () => {
       </Descriptions>
       <Descriptions title='订单' style={{ marginTop: '10px' }} column={3}>
         <Descriptions.Item label='订单编号：' labelStyle={{ color: '#000' }}>
-          1
+          {purchaseOrderDetail?.orderNo}
         </Descriptions.Item>
-        <Descriptions.Item label='创建时间：' labelStyle={{ color: '#000' }}>
-          2
-        </Descriptions.Item>
-        <Descriptions.Item label='合同编号：' labelStyle={{ color: '#000' }}>
-          3
+        <Descriptions.Item label='创建时间：' labelStyle={{ color: '#000' }} span={2}>
+          {dayjs(purchaseOrderDetail?.createTime).format('YYYY-MM-DD HH:mm:ss')}
         </Descriptions.Item>
+        {/*<Descriptions.Item label='合同编号：' labelStyle={{ color: '#000' }}>*/}
+        {/*  3*/}
+        {/*</Descriptions.Item>*/}
         <Descriptions.Item span={3}>
-          <Table bordered style={{ width: '100%' }} />
+          <Table
+            size='small'
+            dataSource={purchaseOrderDetail?.skuDTOList || []}
+            columns={columns}
+            rowKey='id'
+            bordered
+            pagination={false}
+            style={{ width: '100%' }}
+            // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+          />
         </Descriptions.Item>
       </Descriptions>
       <Descriptions title='物流' bordered style={{ marginTop: '10px' }}>
-        <Descriptions.Item label='收货人：'>供应商名称：</Descriptions.Item>
-        <Descriptions.Item label='手机号：'>供应商电话：</Descriptions.Item>
-        <Descriptions.Item label='收货地址：'>Hangzhou, Zhejiang</Descriptions.Item>
-        <Descriptions.Item label='物流单号：'>Hangzhou, Zhejiang</Descriptions.Item>
-        <Descriptions.Item label='物流进度：'>Hangzhou, Zhejiang</Descriptions.Item>
+        <Descriptions.Item label='收货人：'>
+          {purchaseOrderDetail?.uavOrderExpressDTO.takeName}
+        </Descriptions.Item>
+        <Descriptions.Item label='手机号：'>
+          {purchaseOrderDetail?.uavOrderExpressDTO.takePhone}
+        </Descriptions.Item>
+        <Descriptions.Item label='收货地址：'>
+          {purchaseOrderDetail?.uavOrderExpressDTO.takeRegion.split('/').join('') ||
+            '' + purchaseOrderDetail?.uavOrderExpressDTO.takeAddress}
+        </Descriptions.Item>
+        <Descriptions.Item label='物流单号：'>
+          {purchaseOrderDetail?.uavOrderExpressDTO.sendExpNo || '--'}
+        </Descriptions.Item>
+        <Descriptions.Item label='物流进度：'>--</Descriptions.Item>
       </Descriptions>
       <Descriptions title='凭证' bordered style={{ marginTop: '10px' }}>
         <Descriptions.Item label='付款凭证：'>供应商名称：</Descriptions.Item>

src/pages/orderManage/procurementOrder/orderList/index.scss

+.procurement-order-list{
+  .goods-text {
+    height: 60px;
+    width: 100%;
+    text-align: center;
+    line-height: 60px;
+  }
+  .procurement-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/procurementOrder/orderList/index.tsx

 import SearchBox from '~/components/search-box';
-import { Button, Table } from 'antd';
+import { Button, Image, Table } from 'antd';
 import { useEffect, useState } from 'react';
 import { OrderManageAPI } from '~/api';
 import { ColumnsType } from 'antd/es/table/InternalTable';
 import { useNavigate } from 'react-router-dom';
+import { InterListType, InterReqListType, PaginationProps } from '~/api/interface';
+import { listPurchaseOrderType } from '~/api/interface/orderManageType';
+import TableItem from '~/components/order/selfTableItem';
+import './index.scss';
+import { filterObjAttr } from '~/utils';
+import dayjs from 'dayjs';
+import qs from 'query-string';
+
+// 采购订单列表返回类型
+type procurementOrderListType = InterListType<listPurchaseOrderType>;
+// 采购订单列表请求类型
+type procurementOrderParamsType = InterReqListType<listPurchaseOrderType>;
 
 const ProcurementOrderList = () => {
   const navigate = useNavigate();
 
+  // 订单操作按钮列表
+  const operateBtnList = [
+    {
+      btnStr: '确认订单',
+      status: 200,
+      btnClick: (record: procurementOrderListType[0]) => {},
+    },
+    {
+      btnStr: '凭证审批',
+      status: 420,
+      btnClick: (record: procurementOrderListType[0]) => {},
+    },
+    {
+      btnStr: '发货',
+      status: 500,
+      btnClick: (record: procurementOrderListType[0]) => {},
+    },
+  ];
   // 订单状态
   const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
   // 订单状态搜索列表
@@ -18,77 +48,171 @@ const ProcurementOrderList = () => {
   const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
 
   // 表格数据
-  const [tableData, setTableData] = useState<any>([{ id: 1 }]);
-  const tableColumns: ColumnsType<any> = [
+  const [tableData, setTableData] = useState<procurementOrderListType>([]);
+  const [query, setQuery] = useState<procurementOrderParamsType>();
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    pageNo: 1,
+    pageSize: 10,
+    totalCount: 0,
+  });
+  const tableColumns: ColumnsType<procurementOrderListType[0]> = [
     {
       title: '商品',
+      dataIndex: 'userName',
+      width: 280,
       align: 'center',
+      fixed: 'left',
+      render: (_text, record) => (
+        <TableItem
+          td={
+            <div>
+              <span>订单编号：</span>
+              <span>{record.orderNo}</span>
+            </div>
+          }
+          tr={record?.skuDTOList?.map((v) => (
+            <div key={v.id} className='procurement-sku-item'>
+              <Image src={v.skuImage} className='sku-img' />
+              <div className='sku-info'>
+                <div className='info-name'>{v.tradeName}</div>
+                <div className='info-spec'>
+                  {Object.entries(JSON.parse(v.productSpec)).map((v, index) => (
+                    <span key={index}>{v.join('：')}</span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        />
+      ),
     },
     {
       title: '订单金额(元)',
+      dataIndex: 'orderAmount',
       align: 'center',
+      render: (text, record) => (
+        <TableItem
+          tr={<div className='goods-text'>￥{text?.toLocaleString()}</div>}
+          td={
+            <div>
+              <span>创建时间:</span>
+              <span>{dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')}</span>
+            </div>
+          }
+        />
+      ),
     },
     {
-      title: '买家',
+      title: '供应商信息',
       align: 'center',
+      render: () => <TableItem />,
     },
     {
       title: '订单状态',
       align: 'center',
-    },
-    {
-      title: '实收款',
-      align: 'center',
-    },
-    {
-      title: '推荐人',
-      align: 'center',
-    },
-    {
-      title: '订单交期',
-      align: 'center',
+      dataIndex: 'statusCode',
+      render: (text) => (
+        <TableItem
+          tr={
+            <div className='goods-text'>
+              {orderStatusList.find((i) => i.value === text)?.label || text}
+            </div>
+          }
+        />
+      ),
     },
     {
       title: '备注',
       align: 'center',
+      render: () => <TableItem tr={<Button type='link'>--</Button>} />,
     },
     {
       title: '操作',
       align: 'center',
-      render: () => (
-        <Button type='link' onClick={toProcurementOrderDetail}>
-          详情
-        </Button>
+      render: (_text: any, record) => (
+        <TableItem
+          tr={
+            <>
+              {getCurrentOperateBtn ? (
+                <Button
+                  type={'link'}
+                  onClick={() => getCurrentOperateBtn(record.statusCode)?.btnClick(record)}
+                >
+                  {getCurrentOperateBtn(record.statusCode)?.btnStr}
+                </Button>
+              ) : (
+                ''
+              )}
+              <Button type='link' onClick={() => toProcurementOrderDetail(record)}>
+                详情
+              </Button>
+            </>
+          }
+        />
       ),
     },
   ];
 
+  // 获取当前操作按钮
+  const getCurrentOperateBtn = (status: number) => {
+    return operateBtnList.find((v) => v.status === status);
+  };
   // 获取订单状态
-  const getOrderStatus = () => {
-    OrderManageAPI.orderListStatus({}).then(({ result }) => {
-      const list = 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]);
+  const getOrderStatusList = () => {
+    OrderManageAPI.getMallOrderStatusList().then(({ result }) => {
+      if (result) {
+        const list = result.map((item) => ({ value: item.code, label: item.status }));
+        setOrderStatusList(list);
+        setTranStatusList([{ label: '全部', value: undefined }, ...list]);
+      }
+    });
+  };
+  // 采购订单列表
+  const getListPurchaseOrder = (query?: procurementOrderParamsType) => {
+    OrderManageAPI.getListPurchaseOrder({
+      pageSize: pagination.pageSize,
+      pageNo: pagination.pageNo,
+      ...query,
+    }).then(({ result }) => {
+      pagination.totalCount = result.totalCount;
+      setPagination({ ...pagination });
+      setTableData(result.list || []);
     });
   };
+  // 分页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    pagination.pageNo = pageNo;
+    pagination.pageSize = pageSize;
+    getListPurchaseOrder(query);
+  };
   // 订单状态筛选
   const statusChangeEvent = (i: number) => {
-    if (i === statusCodeButtonIndex) {
-      setStatusCodeButtonIndex(0);
-    } else {
-      setStatusCodeButtonIndex(i);
-    }
+    pagination.pageNo = 1;
+    pagination.pageSize = 10;
+    setStatusCodeButtonIndex(i);
+    const req = { ...query, statusCode: tranStatusList[i].value };
+    setQuery(req);
+    getListPurchaseOrder(req);
+  };
+  // 筛选
+  const searchSuccess = (value: any) => {
+    pagination.pageNo = 1;
+    pagination.pageSize = 10;
+    const reqData = filterObjAttr(value, ['rangeTime']);
+    setQuery({ ...reqData });
+    getListPurchaseOrder(reqData);
   };
   // 采购订单详情
-  const toProcurementOrderDetail = () => {
-    navigate('/orderManage/procurementOrder/detail');
+  const toProcurementOrderDetail = (record: procurementOrderListType[0]) => {
+    navigate({
+      pathname: '/orderManage/procurementOrder/detail',
+      search: qs.stringify({ id: record.id }),
+    });
   };
 
   useEffect(() => {
-    getOrderStatus();
+    getOrderStatusList();
+    getListPurchaseOrder();
   }, []);
   return (
     <div className='procurement-order-list'>
@@ -101,12 +225,6 @@ const ProcurementOrderList = () => {
             placeholder: '请输入订单编号',
           },
           {
-            label: '买家账号',
-            name: 'keyword2',
-            type: 'input',
-            placeholder: '请输入用户账号',
-          },
-          {
             label: '时间',
             name: 'rangeTime',
             type: 'rangePicker',
@@ -129,8 +247,22 @@ const ProcurementOrderList = () => {
             })}
           </>
         }
+        searchData={searchSuccess}
+      />
+      <Table
+        columns={tableColumns}
+        dataSource={tableData}
+        rowKey='id'
+        pagination={{
+          total: pagination.totalCount,
+          pageSize: pagination.pageSize,
+          current: pagination.pageNo,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
       />
-      <Table bordered columns={tableColumns} dataSource={tableData} />
     </div>
   );
 };

src/pages/orderManage/productOrder/orderDetail/comp/detailPurchaser/index.scss

-.remark{
-  display: flex;
-  .label{
-    white-space: nowrap;
+.detail-purchaser{
+  .remark{
+    display: flex;
+    .label{
+      white-space: nowrap;
+    }
+    .value{
+      line-height: 15px;
+    }
   }
-  .value{
-    line-height: 15px;
+  .pay-img-wrap{
+    display: flex;
+    .detail-image {
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 10px;
+      flex-wrap: wrap;
+      .image {
+        width: 68px;
+        height: 68px;
+        margin-right: 10px;
+        margin-bottom: 10px;
+      }
+    }
   }
-
 }
+

src/pages/orderManage/productOrder/orderDetail/comp/detailPurchaser/index.tsx

 import React from 'react';
-import { Button } from 'antd';
+import { Button, Image } from 'antd';
 import { mallOrderDetailType } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
 import { contractStatusList } from '~/utils/dictionary';
@@ -74,34 +74,34 @@ const DetailPurchaser: React.FC<PropsType> = ({ detail }) => {
       ) : (
         ''
       )}
-      {/*<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>*/}
+      {detail?.payDTOList ? (
+        <>
+          <div className='detail-title'>付款凭证</div>
+          {detail?.payDTOList.map((v, index) => (
+            <div key={index} className='pay-img-wrap'>
+              <div className='detail-text'>
+                第{index + 1}次上传
+                <span style={{ color: 'red' }}>
+                  ({v.checkStatus === 0 ? '待审批' : v.checkStatus === 1 ? '已通过' : '未通过'})
+                </span>
+                ：
+              </div>
+              <div className='detail-image'>
+                {JSON.parse(v.payImgList).map((i: any, j: number) => (
+                  <Image key={j} className='image' src={i.filePath} alt='付款凭证' />
+                ))}
+              </div>
+            </div>
+          ))}
+
+          <div className='detail-text remark'>
+            <div className='label'>凭证备注：</div>
+            <div className='value'>{detail?.payDTOList[0].payRemark}</div>
+          </div>
+        </>
+      ) : (
+        ''
+      )}
     </div>
   );
 };

src/pages/orderManage/productOrder/orderDetail/index.scss

@@ -43,23 +43,5 @@
         margin-right: 20px;
       }
     }
-
-    .detail-image {
-      display: flex;
-      justify-content: flex-start;
-      margin-left: 56px;
-      margin-top: -20px;
-      margin-bottom: 10px;
-
-      .image {
-        width: 68px;
-        height: 68px;
-        //margin-right: 10px;
-      }
-
-      .ant-image {
-        margin-right: 10px;
-      }
-    }
   }
 }

src/pages/orderManage/productOrder/orderList/components/approvalOrder/index.scss

+.pay-img-wrap{
+  display: flex;
+  flex-wrap: wrap;
+  .ant-image{
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+}

src/pages/orderManage/productOrder/orderList/components/approvalOrder/index.tsx

-import { FC } from 'react';
-import { Form, Modal, ModalProps, Radio } from 'antd';
+import { FC, useState } from 'react';
+import {
+  Form,
+  Modal,
+  ModalProps,
+  Radio,
+  Image,
+  Row,
+  Col,
+  Input,
+  RadioChangeEvent,
+  message,
+} from 'antd';
+import { mallOrderListType } from '~/api/interface/orderManageType';
+import { InterListType } from '~/api/interface';
+import './index.scss';
+import { OrderManageAPI } from '~/api';
 
 interface selfProps {
   onCancel: () => void;
   onOk: () => void;
+  mallOrderItem: mallOrderItemType | undefined;
 }
+// 订单对象类型
+type mallOrderItemType = InterListType<mallOrderListType>[0];
+
+const ApprovalOrder: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, mallOrderItem }) => {
+  const [form] = Form.useForm<{ checkStatus: number; refuseReason: string }>();
+  const [checkStatus, setCheckStatus] = useState<number>(1);
+  const radioChange = (e: RadioChangeEvent) => {
+    setCheckStatus(e.target.value);
+  };
+  // 获取需要审批的凭证
+  const getApproveObj = () => {
+    return mallOrderItem?.payDTOList?.find((v) => v.checkStatus === 0);
+  };
 
-const ApprovalOrder: FC<ModalProps & selfProps> = ({ open, onCancel, onOk }) => {
   const handleOk = () => {
-    onOk();
+    if (mallOrderItem) {
+      form.validateFields().then((values) => {
+        OrderManageAPI.approvalOrder({
+          uavOrderId: mallOrderItem?.id,
+          checkStatus: values.checkStatus,
+          refuseReason: values.refuseReason || undefined,
+          id: getApproveObj()?.id || 0,
+        }).then(({ code }) => {
+          if (code === '200') {
+            message.success('审批成功');
+            form.resetFields();
+            onOk();
+          }
+        });
+      });
+    }
   };
   const handleCancel = () => {
+    form.resetFields();
     onCancel();
   };
   return (
     <Modal open={open} title='凭证审批' onOk={handleOk} onCancel={handleCancel}>
-      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 12 }}>
-        <Form.Item label='状态'>
-          <Radio.Group>
+      <Form
+        labelCol={{ span: 2 }}
+        wrapperCol={{ span: 19 }}
+        initialValues={{ checkStatus: 1 }}
+        form={form}
+      >
+        <Form.Item label='状态' name='checkStatus'>
+          <Radio.Group onChange={radioChange}>
             <Radio value={1}>通过</Radio>
             <Radio value={2}>驳回</Radio>
           </Radio.Group>
         </Form.Item>
-        <Form.Item label='凭证'></Form.Item>
+        {checkStatus === 2 ? (
+          <Form.Item name='refuseReason' label='原因'>
+            <Input.TextArea placeholder='请输入驳回原因' rows={4} showCount maxLength={70} />
+          </Form.Item>
+        ) : (
+          ''
+        )}
       </Form>
+      {
+        <Row>
+          <Col span={2}>凭证：</Col>
+          <Col span={19}>
+            <div className='pay-img-wrap'>
+              {JSON.parse(getApproveObj()?.payImgList || '[]').map((i: any, j: number) => (
+                <Image src={i.filePath} key={j} width={100} height={100} />
+              ))}
+            </div>
+          </Col>
+        </Row>
+      }
     </Modal>
   );
 };

src/pages/orderManage/productOrder/orderList/components/shipmentsOrder/index.tsx

@@ -9,7 +9,9 @@ import { mallOrderListType, mallOrderSendType } from '~/api/interface/orderManag
 type locationType = InterDataType<getSecondDistrictInfoType>;
 type mallOrderType = InterListType<mallOrderListType>[0];
 // 发货请求类型
-type sendMallType = InterReqType<mallOrderSendType>;
+type sendMallType = Omit<Exclude<InterReqType<mallOrderSendType>, undefined>, 'takeRegion'> & {
+  takeRegion: string[];
+};
 
 interface selfProps {
   currentOrderItem: mallOrderType | undefined;
@@ -40,6 +42,7 @@ const ShipmentsOrder: FC<ModalProps & selfProps> = ({ onOk, onCancel, open, curr
         ...value,
         uavOrderId: currentOrderItem?.id,
         id: currentOrderItem?.uavOrderExpressDTO.id,
+        takeRegion: value?.takeRegion?.join('/'),
       }).then(({ code }) => {
         if (code === '200') {
           message.success('发货成功');
@@ -65,7 +68,7 @@ const ShipmentsOrder: FC<ModalProps & selfProps> = ({ onOk, onCancel, open, curr
       form.setFieldsValue({
         takeName: currentOrderItem.uavOrderExpressDTO.takeName,
         takePhone: currentOrderItem.uavOrderExpressDTO.takePhone,
-        takeRegion: currentOrderItem.uavOrderExpressDTO.takeRegion,
+        takeRegion: currentOrderItem.uavOrderExpressDTO.takeRegion.split('/'),
         takeAddress: currentOrderItem.uavOrderExpressDTO.takeAddress,
       });
     }

src/pages/orderManage/productOrder/orderList/components/sureOrder/index.tsx

@@ -32,7 +32,12 @@ interface selfProps {
 }
 
 const SureOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel, mallOrderItem }) => {
-  const [orderInfoForm] = Form.useForm<{ orderTotalAmount: number; deliveryTime: string }>();
+  const [orderInfoForm] = Form.useForm<{
+    orderTotalAmount: number;
+    deliveryTime: string;
+    totalSalary: number;
+    cashAmt: number;
+  }>();
   const [contractForm] = Form.useForm<{ contractUrl: string; contractTitle: string }>();
   const tableColumns: ColumnsType<mallOrderItemType['skuDTOList'][0]> = [
     {
@@ -106,7 +111,19 @@ const SureOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel, mallOrder
   const iframeModalCancel = () => {
     setIframeModalShow(false);
   };
-
+  // 用户钱包信息
+  const getWalletAmount = () => {
+    OrderManageAPI.getWalletAmount({ userAccountId: mallOrderItem?.userAccountId }).then(
+      ({ result }) => {
+        if (result) {
+          orderInfoForm.setFieldsValue({
+            cashAmt: result.cashAmt,
+            totalSalary: result.totalSalary,
+          });
+        }
+      },
+    );
+  };
   const handleOk = () => {
     if (mallOrderItem) {
       Promise.all([orderInfoForm.validateFields(), contractForm.validateFields()])
@@ -139,7 +156,7 @@ const SureOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel, mallOrder
 
   useEffect(() => {
     if (mallOrderItem) {
-      orderInfoForm.setFieldValue('orderTotalAmount', mallOrderItem.orderTotalAmount);
+      getWalletAmount();
     }
   }, [mallOrderItem]);
   return (
@@ -218,10 +235,10 @@ const SureOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel, mallOrder
                   >
                     <Input placeholder='请输入实付总额' suffix='元' maxLength={30} />
                   </Form.Item>
-                  <Form.Item label='云享金'>
+                  <Form.Item label='云享金' name='cashAmt'>
                     <Input placeholder='请输入抵扣云享金' suffix='元' />
                   </Form.Item>
-                  <Form.Item label='佣金'>
+                  <Form.Item label='佣金' name='totalSalary'>
                     <Input placeholder='请输入抵扣佣金' suffix='元' />
                   </Form.Item>
                   <Form.Item

src/pages/orderManage/productOrder/orderList/index.scss

-.order-table-item {
-  .item-td {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 40px;
-    width: 100%;
-    background: rgba(22, 119, 255, 0.1);
-    line-height: 40px;
-  }
-
-  .item-tr {
-    min-height: 50px;
-    width: 100%;
-    margin-top: 50px;
-    .mall-sku-item{
-      display: flex;
-      align-items: center;
-      margin-bottom: 10px;
-      .sku-img{
-        width: 48px;
-        height: 48px;
+.product-order{
+  .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
       }
-      .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: '；';
-              }
+      .info-spec{
+        margin-top: 10px;
+        span:not(:last-child){
+          &:after{
+            content: '；';
           }
         }
       }

src/pages/orderManage/productOrder/orderList/index.tsx

@@ -3,17 +3,18 @@ import SearchBox from '~/components/search-box';
 import { Button, Table, Image, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useNavigate } from 'react-router-dom';
-import qs from 'query-string';
+import { CommentOutlined } from '@ant-design/icons';
 import { OrderManageAPI } from '~/api';
 import { mallOrderListType } from '~/api/interface/orderManageType';
 import { InterListType, InterReqType } from '~/api/interface';
 import SureOrder from './components/sureOrder';
 import ApprovalOrder from './components/approvalOrder';
 import ShipmentsOrder from './components/shipmentsOrder';
-import './index.scss';
-import { filterObjAttr } from '~/utils';
 import RemarkModal from '~/pages/orderManage/productOrder/orderList/components/remarkModal';
-import { CommentOutlined } from '@ant-design/icons';
+import TableItem from '~/components/order/selfTableItem';
+import { filterObjAttr } from '~/utils';
+import './index.scss';
+import qs from 'query-string';
 
 // 表格数据类型
 type TableType = InterListType<mallOrderListType>;
@@ -40,11 +41,6 @@ function ProductOrderView() {
       },
     },
     {
-      btnStr: '凭证审批',
-      status: 420,
-      btnClick: () => {},
-    },
-    {
       btnStr: '发货',
       status: 500,
       btnClick: (record: TableType[0]) => {
@@ -76,20 +72,6 @@ function ProductOrderView() {
   const [shipmentsOrderShow, setShipmentsOrderShow] = useState<boolean>(false); //发货
   const [remarkModalShow, setRemarkModalShow] = useState<boolean>(false);
 
-  // 封装表格行样式
-  const TableItem: React.FC<{
-    td?: React.ReactNode;
-    tr?: React.ReactNode;
-    // eslint-disable-next-line react/prop-types
-  }> = ({ td, tr }) => {
-    return (
-      <div className='order-table-item'>
-        <div className='item-td'>{td}</div>
-        <div className='item-tr'>{tr}</div>
-      </div>
-    );
-  };
-
   // 加载列表
   const getTableList = (value = {}) => {
     setLoading(true);
@@ -124,11 +106,16 @@ function ProductOrderView() {
   // 表单提交
   const onFinish = (data: ReqType) => {
     pagination.current = 1;
-    query = filterObjAttr(data, ['rangeTime']);
+    query = {
+      ...filterObjAttr(data, ['rangeTime']),
+      statusCode: tranStatusList[statusCodeButtonIndex].value,
+    };
     getTableList();
   };
   // 订单状态筛选
   const statusChangeEvent = (i: number) => {
+    pagination.current = 1;
+    pagination.pageSize = 10;
     setStatusCodeButtonIndex(i);
     query = { ...query, statusCode: tranStatusList[i].value };
     getTableList();
@@ -152,12 +139,17 @@ function ProductOrderView() {
     setSureOrderShow(false);
   };
   const sureOrderOk = () => {
-    getTableList(query);
     setSureOrderShow(false);
+    getTableList(query);
   };
   // 凭证审批
+  const showApprovalModalClick = (record: TableType[0]) => {
+    getMallOrderDetail(record.id);
+    setApprovalOrderShow(true);
+  };
   const approvalOrderOk = () => {
     setApprovalOrderShow(false);
+    getTableList(query);
   };
   const approvalOrderCancel = () => {
     setApprovalOrderShow(false);
@@ -187,6 +179,10 @@ function ProductOrderView() {
   const getCurrentOperateBtn = (status: number) => {
     return operateBtnList.find((v) => v.status === status);
   };
+  // 判断是否还要审批付款凭证
+  const isContinueApprove = (record: TableType[0]) => {
+    return record.payDTOList?.some((v) => v.checkStatus === 0);
+  };
 
   // componentDidMount
   useEffect(() => {
@@ -404,7 +400,13 @@ function ProductOrderView() {
               ) : (
                 ''
               )}
-
+              {[420].includes(record.statusCode) || isContinueApprove(record) ? (
+                <Button type='link' onClick={() => showApprovalModalClick(record)}>
+                  凭证审批
+                </Button>
+              ) : (
+                ''
+              )}
               <Button type={'link'} onClick={() => handleDetail(record)}>
                 详情
               </Button>
@@ -415,7 +417,7 @@ function ProductOrderView() {
     },
   ];
   return (
-    <>
+    <div className='product-order'>
       <SearchBox
         search={[
           {
@@ -465,7 +467,6 @@ function ProductOrderView() {
           onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
           showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
         }}
-        // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
       />
       {/*确认订单*/}
       <SureOrder
@@ -479,6 +480,7 @@ function ProductOrderView() {
         open={approvalOrderShow}
         onCancel={approvalOrderCancel}
         onOk={approvalOrderOk}
+        mallOrderItem={currentOrderItem}
       />
       {/*发货*/}
       <ShipmentsOrder
@@ -494,7 +496,7 @@ function ProductOrderView() {
         onCancel={remarkModalCancel}
         mallOrderItem={currentOrderItem}
       />
-    </>
+    </div>
   );
 }