功能：租赁订单列表

src/api/index.ts

+import { CommonAPI } from './modules/common';
+import { OrderManageAPI } from './modules/orderManage';
 import { PointManageAPI } from './modules/pointManageAPI';
 import { ProduceManageAPI } from './modules/produceManageAPI';
 import { IndustryManageAPI } from './modules/industryManageAPI';
 import { ActivityManageAPI } from './modules/activityManage';
 import { CouponManageAPI } from './modules/couponManage';
-import { CommonAPI } from './modules/common';
 import { MakeManageAPI } from './modules/makeManage';
 import { CategoryManageAPI } from './modules/categoryManage';
 import { SystemManageAPI } from './modules/systemManage';
 
 export {
+  CommonAPI,
+  OrderManageAPI,
   PointManageAPI,
   ProduceManageAPI,
   IndustryManageAPI,
   ActivityManageAPI,
-  CommonAPI,
   CouponManageAPI,
   MakeManageAPI,
   CategoryManageAPI,

src/api/interface/orderManageType.ts

+import { InterListFunction } from '~/api/interface';
+// web 租赁订单-分页-列表
+export type listOfRentalOrdersType = InterListFunction<
+  {
+    buyerAccount?: string;
+    endTime?: string;
+    orderNo?: string;
+    startTime?: string;
+    tranStatus?: string;
+    wareNo?: string;
+    wareTitle?: string;
+  },
+  {
+    id: number;
+    orderNo: string;
+    createTime: string;
+    wareInfoId: null;
+    wareNo: string;
+    wareTitle: string;
+    wareImg: string;
+    skuInfoId: null;
+    skuTitle: null;
+    repoAccountId: null;
+    uid: string;
+    buyerName: string;
+    buyerPhone: string;
+    unitPrice: number;
+    wareNum: number;
+    shouldPay: number;
+    actualPay: number;
+    orderType: null;
+    deposit: number;
+    rentPrice: null;
+    startDate: null;
+    endDate: null;
+    payDay: null;
+    tranStatus: string;
+    exWare: null;
+    remark: string;
+    pfRemark: null;
+    shutReason: null;
+    payNo: null;
+    payTime: null;
+    sendWareTime: null;
+    receipt: {
+      id: number;
+      receiptMethod: number;
+      takeName: string;
+      takePhone: string;
+      region: string;
+      detailAddress: string;
+      repoName: null;
+      repoAddress: null;
+      bookPhone: null;
+      sendExCode: null;
+      sendExNo: null;
+      sendAddress: null;
+      renMethod: null;
+      renPhone: null;
+      renName: null;
+      renExCode: null;
+      renExNo: null;
+      renAddress: null;
+      renRepoName: null;
+      renRepoAddr: null;
+      renRepoPhone: null;
+    };
+    orderRefund: null;
+    express: null;
+    refundExpress: null;
+    vcus: null;
+    returnTime: null;
+    couponId: null;
+    specsId: null;
+    balance: null;
+    doing: string;
+    waiting: string;
+    leaseOrderStatus: string;
+    nickName: string;
+  }
+>;

src/api/modules/orderManage.ts

+import axios from '../request';
+import { listOfRentalOrdersType } from '~/api/interface/orderManageType';
+
+export class OrderManageAPI {
+  // web 租赁订单-分页-列表
+  static listOfRentalOrders: listOfRentalOrdersType = (params) =>
+    axios.post('/oms/RentalOrders/listOfRentalOrders', params);
+}

src/components/search-box/index.tsx

@@ -66,8 +66,9 @@ const Index: React.FC<propsType> = (props) => {
     // console.log("提交数据 --->", data);
     if (data.startTime) {
       data.startTime = moment(data.startTime).format('YYYY-MM-DD');
-    } else {
-      data.startTime = undefined;
+    }
+    if (data.endTime) {
+      data.endTime = moment(data.endTime).format('YYYY-MM-DD');
     }
     Object.keys(data).forEach((k) => {
       const isRangPicker: boolean | undefined =
@@ -77,6 +78,8 @@ const Index: React.FC<propsType> = (props) => {
           `${moment(data[k][0]).format('YYYY-MM-DD')} 00:00:00`,
           `${moment(data[k][1]).format('YYYY-MM-DD')} 23:59:59`,
         ];
+        data.startTime = data[k][0];
+        data.endTime = data[k][1];
       }
     });
     props.searchData(data);

src/pages/orderManage/equipmentOrder/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, Tooltip } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useNavigate } from 'react-router-dom';
 import qs from 'query-string';
+import { InterListType, InterReqType } from '~/api/interface';
+import { listOfRentalOrdersType } from '~/api/interface/orderManageType';
+import { OrderManageAPI } from '~/api';
 
 // 表格数据类型
-type TableType = any;
+type TableType = InterListType<listOfRentalOrdersType>;
+// 请求数据的类型
+type ReqType = InterReqType<listOfRentalOrdersType>;
+// 搜索表单的数据
+let query: ReqType = {};
 
 // 订单状态搜索列表
 const statusCodeButtonList = [
@@ -25,14 +32,45 @@ function EquipmentOrderView() {
   // 当前选择的是第几个按钮
   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 getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await OrderManageAPI.listOfRentalOrders({
+      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);
@@ -43,43 +81,65 @@ function EquipmentOrderView() {
     console.log('跳转订单详情 --->', record.id);
     navigate(`/orderManage/equipmentOrder/detail?${qs.stringify({ id: record.id })}`);
   };
+  // componentDidMount
+  useEffect(() => {
+    query = {};
+    getTableList().then();
+  }, []);
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [
     {
       title: '商品',
-      dataIndex: 'userName',
+      dataIndex: 'wareTitle',
       align: 'center',
-      render: (_text, _record) => `--`,
+      width: 250,
+      render: (_text, record) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Image src={record.wareImg} style={{ width: 48, height: 48 }} />
+          <div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
+            <div style={{ color: '#1677ff' }}>{record.wareTitle}</div>
+            <div>{record.wareNo}</div>
+            <div>订单编号：{record.orderNo}</div>
+            <div>创建时间：{record.createTime}</div>
+          </div>
+        </div>
+      ),
     },
     {
       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',
       align: 'center',
-      render: (_text, _record) => `--`,
+      width: '130px',
+      render: (_text, record) => (
+        <>
+          <div>{record.uid}</div>
+          <div>
+            {record.buyerName || record.nickName}({record.buyerPhone})
+          </div>
+        </>
+      ),
     },
     {
       title: '订单状态',
-      dataIndex: 'userName',
+      dataIndex: 'leaseOrderStatus',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
       title: '实收款',
-      dataIndex: 'userName',
+      dataIndex: 'shouldPay',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => `￥${text.toLocaleString()}`,
     },
     {
       title: '相关运营',
@@ -103,7 +163,13 @@ function EquipmentOrderView() {
       title: '备注',
       dataIndex: 'remark',
       align: 'center',
-      render: (_text, _record) => `--`,
+      ellipsis: true,
+      width: '100px',
+      render: (text) => (
+        <Tooltip placement='top' title={text}>
+          <div className='remark-wrap'>{text}</div>
+        </Tooltip>
+      ),
     },
     {
       title: '操作',
@@ -125,13 +191,13 @@ function EquipmentOrderView() {
         search={[
           {
             label: '订单编号',
-            name: 'keyword',
+            name: 'orderNo',
             type: 'input',
             placeholder: '请输入订单编号',
           },
           {
             label: '买家账号',
-            name: 'keyword2',
+            name: 'buyerAccount',
             type: 'input',
             placeholder: '请输入用户账号',
           },
@@ -144,12 +210,12 @@ function EquipmentOrderView() {
           },
           {
             label: '时间',
-            name: 'time',
+            name: 'rangeTime',
             type: 'rangePicker',
             placeholder: '请选择创建时间',
           },
         ]}
-        searchData={(e: any) => console.log('提交数据 --->', e)}
+        searchData={onFinish}
         sufFixBtn={
           <>
             {statusCodeButtonList?.map((i, j) => {
@@ -179,8 +245,7 @@ function EquipmentOrderView() {
           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 }}