功能：商城订单列表

src/api/interface/orderManageType.ts

@@ -403,3 +403,77 @@ export type refundOrderType = InterFunction<
   },
   NonNullable<unknown>
 >;
+// 商城订单-订单状态-字典
+export type orderListStatus = InterFunction<
+  NonNullable<unknown>,
+  {
+    code: number;
+    nextCode: number;
+    status: string;
+  }[]
+>;
+// v1.0.0订单管理-分页查询（改版后）
+export type listPageManagerVerOne = InterListFunction<
+  {
+    endTime?: string;
+    keyword?: string;
+    keyword2?: string;
+    saleId?: number;
+    showType?: number;
+    signStatus?: Array<number>;
+    startTime?: string;
+    statusCode?: Array<number>;
+  },
+  {
+    contractNo: string;
+    contractSignedWay: number;
+    createTime: string;
+    creditPeriod: string;
+    deductAmount: number;
+    deliveryTime: string;
+    discountAmount: number;
+    entName: string;
+    id: number;
+    mallOrderProdListDTOList: Array<{
+      id: number;
+      goodsInfoId: number;
+      productName: string;
+      model: string;
+      prodSkuSpecName: string;
+      prodSkuSpecImage: string;
+      partNo: string;
+      versionDesc: string;
+      buyNum: number;
+      unitPrice: number;
+      skuSpecAmount: number;
+    }>;
+    mremark: string;
+    ogSkuSpecDTOList: null;
+    operationId: number;
+    operationName: string;
+    orderAmount: number;
+    orderMainImg: string;
+    orderName: string;
+    orderNo: string;
+    payMethod: number;
+    phoneNum: string;
+    realNameAuth: number;
+    realPayAmount: number;
+    realityAmount: number;
+    recMallUserName: string;
+    remark: string;
+    saleId: number;
+    saleName: string;
+    shareId: number;
+    shareStatus: number;
+    shutReason: string;
+    signStatus: number;
+    statusCode: number;
+    subAmount: number;
+    tagName: string;
+    totalBuyNum: number;
+    uid: string;
+    userAccountId: number;
+    userName: string;
+  }
+>;

src/api/modules/orderManage.ts

@@ -2,10 +2,12 @@ import axios from '../request';
 import {
   listExpressInfoType,
   listOfRentalOrdersType,
+  listPageManagerVerOne,
   listPcWechatOrderType,
   listTranStatusType,
   orderDetailType,
   orderImageDetailType,
+  orderListStatus,
   pfConfirmOrderWareType,
   platFormCloseOrderType,
   refundOrderType,
@@ -56,4 +58,12 @@ export class OrderManageAPI {
 
   // 后台管理——驳回/同意退款
   static refundOrder: refundOrderType = (params) => axios.post('/oms/refund/refund', params);
+
+  // 商城订单-订单状态-字典
+  static orderListStatus: orderListStatus = (params) =>
+    axios.get('/oms/mallorder/listStatus', { params });
+
+  // v1.0.0订单管理-分页查询（改版后）
+  static listPageManagerVerOne: listPageManagerVerOne = (params) =>
+    axios.post('/oms/pmorderVerOne/listPageManagerVerOne', params);
 }

src/pages/orderManage/productOrder/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 } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { useNavigate } from 'react-router-dom';
 import qs from 'query-string';
+import { OrderManageAPI } from '~/api';
+import { listPageManagerVerOne } from '~/api/interface/orderManageType';
+import { InterListType, InterReqType } from '~/api/interface';
 
 // 表格数据类型
-type TableType = any;
-
-// 订单状态搜索列表
-const statusCodeButtonList = [
-  { value: -1, label: '全部订单' },
-  { value: 0, label: '沟通意向' },
-  { value: 1, label: '签约付款' },
-  { value: 2, label: '待发货' },
-  { value: 3, label: '待收货' },
-  { value: 4, label: '已完成' },
-  { value: 5, label: '已关闭' },
-];
+type TableType = InterListType<listPageManagerVerOne>;
+// 请求数据的类型
+type ReqType = InterReqType<listPageManagerVerOne>;
+// 搜索表单的数据
+let query: ReqType = {};
 
 function ProductOrderView() {
   // 路由钩子
   const navigate = useNavigate();
+  // 订单状态搜索列表
+  const [tranStatusList, setTranStatusList] = useState<
+    { value: number | undefined; label: string }[]
+  >([]);
+  // 订单状态
+  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
   // 当前选择的是第几个按钮
   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 [editData, setEditData] = useState<TableType[0]>(); // 用于编辑
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await OrderManageAPI.listPageManagerVerOne({
+      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);
-    setStatusCodeButtonIndex(i);
+    if (i === statusCodeButtonIndex) {
+      setStatusCodeButtonIndex(0);
+    } else {
+      setStatusCodeButtonIndex(i);
+    }
+    // query = { ...query, statusCode: tranStatusList[i].value };
+    // getTableList().then();
   };
   // 跳转订单详情
   const handleDetail = (record: TableType[0]) => {
     console.log('跳转订单详情 --->', record.id);
     navigate(`/orderManage/productOrder/detail?${qs.stringify({ id: record.id })}`);
   };
+  // 获取订单状态
+  const getOrderStatus = async () => {
+    const res = await OrderManageAPI.orderListStatus({});
+    if (res && res.code === '200') {
+      const list = res.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]);
+    }
+  };
+  // componentDidMount
+  useEffect(() => {
+    query = {};
+    getOrderStatus().then();
+    getTableList().then();
+  }, []);
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [
     {
       title: '商品',
       dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
-    },
-    {
-      title: '单价(元)',
-      dataIndex: 'userName',
-      align: 'center',
-      render: (_text, _record) => `--`,
+      width: 280,
+      render: (_text, record) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Image src={record.orderMainImg} style={{ width: 48, height: 48 }} />
+          <div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
+            <div style={{ color: '#1677ff' }}>{record.orderName}</div>
+            <div>{record.mallOrderProdListDTOList.map((i) => i.prodSkuSpecName).join(' + ')}</div>
+            <div>订单编号：{record.orderNo}</div>
+            <div>创建时间：{record.createTime}</div>
+          </div>
+        </div>
+      ),
     },
     {
-      title: '数量',
-      dataIndex: 'userName',
+      title: '订单金额(元)',
+      dataIndex: 'orderAmount',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => text.toLocaleString(),
     },
+    // {
+    //   title: '数量',
+    //   dataIndex: 'userName',
+    //   align: 'center',
+    // },
     {
       title: '买家',
-      dataIndex: 'userName',
+      dataIndex: 'uid',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text, record) => (
+        <>
+          <div>{text}</div>
+          <div>{record.userName}</div>
+          <div>{record.entName}</div>
+        </>
+      ),
     },
     {
       title: '订单状态',
-      dataIndex: 'userName',
+      dataIndex: 'statusCode',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => orderStatusList.find((i) => i.value === text)?.label || text,
     },
     {
       title: '实收款',
-      dataIndex: 'userName',
+      dataIndex: 'realPayAmount',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => text?.toLocaleString() || 0,
     },
     {
       title: '相关运营',
       dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (_text) => `--`,
     },
     {
       title: '推荐人',
       dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (_text) => `--`,
     },
     {
       title: '订单交期',
       dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (_text) => `--`,
     },
     {
       title: '备注',
       dataIndex: 'remark',
       align: 'center',
-      render: (_text, _record) => `--`,
+      width: 150,
+      ellipsis: true,
     },
     {
       title: '操作',
@@ -144,15 +219,15 @@ function ProductOrderView() {
           },
           {
             label: '时间',
-            name: 'time',
+            name: 'rangeTime',
             type: 'rangePicker',
             placeholder: '请选择创建时间',
           },
         ]}
-        searchData={(e: any) => console.log('提交数据 --->', e)}
+        searchData={onFinish}
         sufFixBtn={
           <>
-            {statusCodeButtonList?.map((i, j) => {
+            {tranStatusList?.map((i, j) => {
               return (
                 <Button
                   key={j}
@@ -179,8 +254,7 @@ function ProductOrderView() {
           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 }}
@@ -190,3 +264,17 @@ function ProductOrderView() {
 }
 
 export default ProductOrderView;
+
+// <div style={{ textAlign: 'left', lineHeight: '16px' }}>
+//   <div style={{ color: '#1677ff', marginBottom: '10px' }}>{record.orderName}</div>
+//   {record.mallOrderProdListDTOList.map((i, j) => (
+//     <div style={{ display: 'flex', marginBottom: '10px', alignItems: 'center' }} key={j}>
+//       <Image src={i.prodSkuSpecImage} style={{ width: 48, height: 48 }} />
+//       <div style={{ marginLeft: '20px' }}>{i.prodSkuSpecName}</div>
+//       <div style={{ marginLeft: '20px' }}>{`x${i.buyNum}`}</div>
+//       <div style={{ marginLeft: '20px' }}>{`￥${i.unitPrice?.toLocaleString()}`}</div>
+//     </div>
+//   ))}
+//   <div>订单编号：{record.orderNo}</div>
+//   <div>创建时间：{record.createTime}</div>
+// </div>