Merge branch 'develop' into csf-develop

src/api/interface.ts

@@ -79,3 +79,10 @@ export type InterItemType<T extends (...args: any) => any> = (
 // 获取参数类型封装
 // eslint-disable-next-line no-unused-vars
 export type InterReqType<T extends (...args: any) => any> = Parameters<T>[0];
+
+// 获取参数类型封装(分页)
+// eslint-disable-next-line no-unused-vars
+export type InterReqListType<T extends (...args: any) => any> = Omit<
+  Parameters<T>[0],
+  'pageSize' | 'pageNo'
+>;

src/api/interface/orderManageType.ts

-import { InterFunction, InterListFunction } from '~/api/interface';
+import { InterFunction, InterItemFunction, InterListFunction } from '~/api/interface';
 // web 租赁订单-分页-列表
 export type listOfRentalOrdersType = InterListFunction<
   {
@@ -403,3 +403,202 @@ export type refundOrderType = InterFunction<
   },
   NonNullable<unknown>
 >;
+//服务-订单
+export type serviceOrderType = InterItemFunction<
+  { startTime?: string; endTime?: string; orderStatus?: number; orderNameOrNo?: string },
+  {
+    id: number;
+    orderName: string;
+    orderNo: string;
+    orderStatus: number;
+    images: string[];
+    orderAmt: number;
+    phoneNum: string;
+    uid: string;
+    createdTime: string;
+    userName: string;
+  }[]
+>;
+// 服务-订单字典
+export type serviceOrderStatusType = InterFunction<
+  any,
+  { flyerPort: string; orderStatus: number; managePort: string; userPort: string }[]
+>;
+// 商城订单-订单状态-字典
+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;
+  }
+>;
+// v1.0.0订单管理-详情（改版后）
+export type getMallOrderDetailById = InterFunction<
+  {
+    orderId: number;
+  },
+  {
+    archiveDate: string;
+    companyName: string;
+    contractNo: string;
+    contractSignedWay: number;
+    cooperationTagId: number;
+    couponDiscountAmount: number;
+    createTime: string;
+    creditPeriod: string;
+    deductAmount: number;
+    deliveryTime: string;
+    discountAmount: number;
+    exp: {
+      orderId: number;
+      sendExpCode: string;
+      sendExpNo: string;
+      takeAddress: string;
+      takeName: string;
+      takePhone: string;
+      takeRegion: string;
+    };
+    goodsNum: number;
+    id: number;
+    kdn: {
+      logisticCode: string;
+      shipperCode: string;
+      stateEx: string;
+      traces: Array<{
+        acceptStation: string;
+        acceptTime: string;
+        action: string;
+        location: string;
+      }>;
+    };
+    mallOrderProdListDTOList: Array<{
+      id: number;
+      goodsInfoId: number;
+      productName: string;
+      model: string;
+      prodSkuSpecName: string;
+      prodSkuSpecImage: string;
+      partNo: string;
+      versionDesc: string;
+      buyNum: number;
+      unitPrice: number;
+      skuSpecAmount: number;
+    }>;
+    manualDiscountAmount: number;
+    mremark: string;
+    nickName: string;
+    ogSkuSpecDTOList: Array<{
+      id: number;
+      directoryId: number;
+      shopCarId: null;
+      skuSpecName: string;
+    }>;
+    operationId: number;
+    operationName: string;
+    orderAmount: number;
+    orderCouponDTOS: Array<{
+      couponName: string;
+      couponType: number;
+      couponUserId: number;
+      createTime: string;
+      id: number;
+      orderId: number;
+      useAmount: number;
+      useType: number;
+    }>;
+    orderName: string;
+    orderNo: string;
+    payErrInfo: string;
+    payMethod: number;
+    phoneNum: string;
+    realityAmount: number;
+    recMallUserName: string;
+    remark: string;
+    serviceNames: Array<string>;
+    shareId: number;
+    shareStatus: number;
+    shopCarAmount: number;
+    shutReason: string;
+    signStatus: number;
+    statusCode: number;
+    tagName: string;
+    uid: string;
+    userAccountId: number;
+    userAddress: {
+      id: number;
+      takeAddress: string;
+      takeName: string;
+      takePhone: string;
+      takeRegion: string;
+      type: number;
+    };
+    userAddressId: number;
+    userName: string;
+  }
+>;

src/api/modules/orderManage.ts

 import axios from '../request';
 import {
+  getMallOrderDetailById,
   listExpressInfoType,
   listOfRentalOrdersType,
+  listPageManagerVerOne,
   listPcWechatOrderType,
   listTranStatusType,
   orderDetailType,
   orderImageDetailType,
+  orderListStatus,
   pfConfirmOrderWareType,
   platFormCloseOrderType,
   refundOrderType,
   renterTakeOrderType,
   sendOrderWareType,
+  serviceOrderStatusType,
+  serviceOrderType,
 } from '~/api/interface/orderManageType';
 
 export class OrderManageAPI {
@@ -56,4 +61,22 @@ 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);
+
+  // v1.0.0订单管理-详情（改版后）
+  static getMallOrderDetailById: getMallOrderDetailById = (params) =>
+    axios.get('/oms/pmorderVerOne/getMallOrderDetailById', { params });
+  //  服务-订单
+  static getServiceOrderList: serviceOrderType = (data) =>
+    axios.post('/oms/serviceOrderTask/queryOrderTaskList', data);
+  //  服务-订单字典
+  static getServiceStatusList: serviceOrderStatusType = () =>
+    axios.post('/oms/serviceOrderTask/getServiceOrderStatus');
 }

src/api/request.ts

@@ -9,7 +9,7 @@ export const uploadVideoURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/videoO
 export const uploadFileURL = `${VITE_REQUEST_BASE_URL}/ossservlet/upload/oss`;
 const service = axios.create({
   baseURL: VITE_REQUEST_BASE_URL,
-  timeout: 6000,
+  timeout: 3600000,
 });
 service.interceptors.request.use(
   (config: any) => {

src/components/goods/commonAddOrEdit/addOrEditSkuModal/index.tsx

@@ -450,7 +450,7 @@ const AddOrEditSkuModal: React.FC<ModalProps & selfProps> = ({
             name='goodsSpecName'
             rules={[{ required: true, message: '请输入规格名称' }]}
           >
-            <Input placeholder='请输入规格名称' />
+            <Input placeholder='请输入规格名称' maxLength={30} />
           </Form.Item>
           {currentDesc != 2 && (
             <Form.Item label='规格来源' name='flag'>

src/components/goods/commonAddOrEdit/baseInfo/index.tsx

@@ -286,6 +286,7 @@ const BaseInfo: React.FC<selfProps> = forwardRef(
                 placeholder='请选择所属目录'
                 style={{ width: '400px' }}
                 onChange={directorySelectChange}
+                disabled={!!goodsDetail}
               >
                 {directoryList.map((v) => (
                   <Select.Option value={v.id} key={v.id}>

src/pages/categoryManage/category/index.scss

@@ -20,8 +20,9 @@
 
 .table-option-wrap {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   flex-wrap: wrap;
+  align-items: center;
 }
 .share-code {
   text-align: center;

src/pages/categoryManage/category/index.tsx

@@ -54,7 +54,7 @@ const Category: FC = (props: any) => {
       title: '分类名称',
       dataIndex: 'classifyName',
       key: 'classifyName',
-      // align: "center",
+      align: 'center',
       width: '12%',
       editable: true,
       ellipsis: true,
@@ -89,7 +89,7 @@ const Category: FC = (props: any) => {
         return record.icon ? (
           <img
             src={record.icon}
-            style={{ width: '50px', height: '50px' }}
+            style={{ width: '25px', height: '25px' }}
             onClick={() => imgClick(record.icon)}
           />
         ) : (
@@ -647,6 +647,7 @@ const Category: FC = (props: any) => {
             style={{ marginRight: '10px' }}
             onClick={() => addCayDailogShow()}
             icon={<PlusOutlined />}
+            disabled={tabList.length == 0}
           >
             新增分类
           </Button>
@@ -683,7 +684,7 @@ const Category: FC = (props: any) => {
       >
         <Form form={form} component={false}>
           <Table
-            size='small'
+            size='large'
             columns={mergedColumns}
             dataSource={categoryList}
             rowSelection={rowSelection}

src/pages/categoryManage/directoryManage/components/addOrEditDec/index.tsx

@@ -140,7 +140,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
         )} */}
 
         <Form.Item label='目录名称' name='directoryName' rules={[{ required: true }]}>
-          <Input placeholder='请输入目录名称' allowClear={true}></Input>
+          <Input placeholder='请输入目录名称' allowClear={true} maxLength={20}></Input>
         </Form.Item>
         {form.getFieldValue('type') == '0' && (
           <Form.Item

src/pages/mallManage/courseManage/comp/addEditModal/index.tsx

@@ -151,7 +151,7 @@ const AddEditModal: React.FC<propType> = (props) => {
         <Form.Item
           label='课程封面'
           name='surfaceUrl'
-          rules={[{ required: true, message: '请上传质检照片' }]}
+          rules={[{ required: true, message: '请上传课程封面' }]}
           style={{ marginBottom: '-40px' }}
         >
           <Uploader
@@ -173,7 +173,7 @@ const AddEditModal: React.FC<propType> = (props) => {
         <Form.Item
           label='课程上传'
           name='videoUrl'
-          rules={[{ required: false, message: '请上传质检视频' }]}
+          rules={[{ required: false, message: '请上传课程上传' }]}
           style={{ marginBottom: '-40px' }}
         >
           <Uploader

src/pages/mallManage/mallGoods/goodsList/index.tsx

@@ -97,6 +97,7 @@ const GoodsList = () => {
     },
   ];
   const [tableData, setTableData] = useState<goodsType>([]);
+  const [loading, setLoading] = useState<boolean>(false);
   //分页
   const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
     pageNo: 1,
@@ -128,12 +129,14 @@ const GoodsList = () => {
   };
   //商品列表
   const getGoodsList = (query?: goodsSearchParameters) => {
+    setLoading(true);
     GoodsAPI.getGoodsList({
       pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
       goodsType: 0,
       ...query,
     }).then(({ result }) => {
+      setLoading(false);
       setTableData(result.list || []);
       pagination.totalCount = result.totalCount;
       setPagination(pagination);
@@ -251,6 +254,7 @@ const GoodsList = () => {
             selectedRowKeys,
             onChange: onSelectChange,
           }}
+          loading={loading}
           pagination={{
             total: pagination.totalCount,
             pageSize: pagination.pageSize,

src/pages/mallManage/produceManage/produceList/index.tsx

@@ -9,6 +9,7 @@ import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
 import { addProductType, productListType } from '~/api/interface/produceManageType';
 import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
 import { MakeListType } from '~/api/interface/makeManage';
+import { PlusOutlined } from '@ant-design/icons';
 
 //产品列表返回类型
 type produceListType = InterDataType<productListType>['list'];
@@ -218,8 +219,8 @@ function ProduceManage() {
       <div className='header-view'>
         <Form name='basic' layout='inline' onFinish={onFinish}>
           <Form.Item>
-            <Button type='primary' onClick={handleAdd}>
-              新增
+            <Button type='primary' onClick={handleAdd} icon={<PlusOutlined />}>
+              新增产品
             </Button>
           </Form.Item>
           <Form.Item name='productName' label='产品名称'>

src/pages/mallManage/rentGoods/rentList/index.tsx

@@ -96,6 +96,7 @@ const RentList = () => {
     },
   ];
   const [tableData, setTableData] = useState<goodsType>([]);
+  const [loading, setLoading] = useState<boolean>(false);
   //分页
   const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
     pageNo: 1,
@@ -127,12 +128,14 @@ const RentList = () => {
   };
   //商品列表
   const getGoodsList = (query?: goodsSearchParameters) => {
+    setLoading(true);
     GoodsAPI.getGoodsList({
       pageNo: pagination.pageNo,
       pageSize: pagination.pageSize,
       goodsType: 1,
       ...query,
     }).then(({ result }) => {
+      setLoading(false);
       setTableData(result.list || []);
       pagination.totalCount = result.totalCount;
       setPagination(pagination);
@@ -250,6 +253,7 @@ const RentList = () => {
             selectedRowKeys,
             onChange: onSelectChange,
           }}
+          loading={loading}
           pagination={{
             total: pagination.totalCount,
             pageSize: pagination.pageSize,

src/pages/orderManage/equipmentOrder/comp/detailDelivery/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Image } from 'antd';
+import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
 
-function DetailDelivery() {
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
+// 列表的类型
+type ListType = InterDataType<orderImageDetailType>;
+// 设备状态列表
+const vcuSatusList = [
+  { label: '正常', value: 0 },
+  { label: '故障', value: 1 },
+];
+// 0:发货 1:收货 2:归还 3:平台收货
+const vcuTypeList = [
+  { label: '发货验收', value: 0 },
+  { label: '收货验收', value: 1 },
+  { label: '归还验收', value: 2 },
+  { label: '平台收货', value: 3 },
+  { label: '退货申请', value: 4 },
+];
+const DetailDelivery: React.FC<PropsType> = (props) => {
+  const { detail } = props;
+  // 验收信息列表
+  const [orderImageList, setOrderImageList] = useState<ListType>([]);
+  // 获取订单验收信息
+  const getOrderImageDetail = async () => {
+    const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
+    if (res && res.code === '200') {
+      setOrderImageList(res.result);
+      console.log('获取订单验收信息 --->', res.result);
+    }
+  };
+  // 转换设备状态
+  const getVcuSatus = (code: number) => {
+    return vcuSatusList.find((item) => item.value === code)?.label || code;
+  };
+  // 转换标题
+  const getVcuType = (code: number) => {
+    return vcuTypeList.find((item) => item.value === code)?.label || code;
+  };
+  // componentDidMount
+  useEffect(() => {
+    if (!detail) return;
+    getOrderImageDetail().then();
+  }, [detail]);
   return (
     <div className={'detail-delivery detail-half'}>
-      <div className={'detail-title'}>收货信息</div>
-      <div className={'detail-text'}>收货人：测试</div>
-      <div className={'detail-text'}>手机号：15889328503</div>
-      <div className={'detail-text'}>
-        收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
-      </div>
-
-      <div className={'detail-title'}>物流信息</div>
-      <div className={'detail-text'}>物流单号：YT6732436785799</div>
-      <div className={'detail-text'}>物流进度：--</div>
-
-      <div className={'detail-title'}>验收信息</div>
-      <div className={'detail-text'}>验收状态：已验收</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>
+      {orderImageList.map((i, j) => (
+        <div key={j}>
+          <div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
+          <div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
+          <div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
+          <div className={'detail-text'}>验收凭证：</div>
+          <div className={'detail-image'}>
+            {i.imgs?.map((i, j) => (
+              <Image key={j} className={'image'} src={i} alt='付款凭证' />
+            ))}
+            {!i.imgs && <div style={{ height: '30px' }}></div>}
+          </div>
+        </div>
+      ))}
     </div>
   );
-}
+};
 
 export default DetailDelivery;

src/pages/orderManage/equipmentOrder/comp/detailInformation/index.tsx

-import { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import { InterDataType } from '~/api/interface';
+import { orderDetailType } from '~/api/interface/orderManageType';
+import dayjs from 'dayjs';
 
 // 表格数据类型
 type TableType = any;
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
 
-function DetailInformation() {
+const DetailInformation: React.FC<PropsType> = (props) => {
+  const { detail } = props;
   // 表格数据
-  const [tableData] = useState<TableType>([{ id: 1 }]);
+  const [tableData, setTableData] = useState<TableType>([]);
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [
     {
       title: '商品',
-      dataIndex: 'userName',
+      dataIndex: 'wareTitle',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
       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',
+      dataIndex: 'waiting',
       align: 'center',
-      render: (_text, _record) => `--`,
     },
     {
-      title: '实收款',
-      dataIndex: 'userName',
+      title: '应收款',
+      dataIndex: 'shouldPay',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => `￥${text.toLocaleString()}`,
     },
   ];
+  useEffect(() => {
+    if (!detail) return;
+    setTableData([
+      {
+        id: 1,
+        wareTitle: detail?.wareTitle,
+        unitPrice: detail?.unitPrice,
+        wareNum: detail?.wareNum,
+        waiting: detail?.waiting,
+        shouldPay: detail?.shouldPay,
+      },
+    ]);
+  }, [detail]);
   return (
     <div className={'detail-information'}>
       <div className={'detail-title'}>订单明细</div>
       <div className={'detail-text'}>
-        <span className={'item'}>订单编号：UD202302181041156087</span>
-        <span className={'item'}>创建时间：2023-02-18 10:41:16</span>
-        <span className={'item'}>合同编号：UAV202334741131</span>
+        <span className={'item'}>订单编号：{detail?.orderNo}</span>
+        <span className={'item'} style={{ display: 'none' }}>
+          合同编号：UAV202334741131
+        </span>
+        <span className={'item'}>
+          订单租期：
+          {dayjs(detail?.startDate).format('YYYY-MM-DD')}
+          {' ~ '}
+          {dayjs(detail?.endDate).format('YYYY-MM-DD')}
+        </span>
+        <span className={'item'}>创建时间：{detail?.createTime}</span>
       </div>
       <Table
         style={{ margin: '20px auto', width: '90%' }}
@@ -59,8 +87,11 @@ function DetailInformation() {
         pagination={false}
         // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
       />
+      <div className='detail-price'>
+        实收款<span className={'num'}>￥ {detail?.actualPay}</span>元
+      </div>
     </div>
   );
-}
+};
 
 export default DetailInformation;

src/pages/orderManage/equipmentOrder/comp/detailPurchaser/index.tsx

-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button, Image } from 'antd';
+import { orderDetailType } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
 
-function DetailPurchaser() {
+// 接口返回的类型
+type DataType = InterDataType<orderDetailType>;
+// 参数类型
+type PropsType = {
+  detail: DataType;
+};
+
+const DetailPurchaser: React.FC<PropsType> = (props) => {
+  const { detail } = props;
+  // 物流列表
+  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
+  // 获取物流信息
+  const getListExpressInfo = async () => {
+    const res = await OrderManageAPI.listExpressInfo({});
+    if (res && res.code === '200') {
+      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
+      // console.log(res);
+    }
+  };
+  // 转换物流信息
+  const getExpressInfo = (code: string | undefined | null) => {
+    return expressList.find((item) => item.value === code)?.label || code;
+  };
+  // componentDidMount
+  useEffect(() => {
+    getListExpressInfo().then();
+  }, []);
   return (
     <div className={'detail-purchaser detail-half'}>
       <div className={'detail-title'}>买家信息</div>
-      <div className={'detail-text'}>UID： UID4460817</div>
-      <div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
-      <div className={'detail-text'}>备注： 测试单，不用管</div>
+      <div className={'detail-text'}>UID：{detail?.uid}</div>
+      <div className={'detail-text'}>姓名： {detail?.buyerName}</div>
+      <div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
+      {/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
+      <div className={'detail-text'}>备注： {detail?.remark}</div>
 
-      <div className={'detail-title'}>合同信息</div>
-      <div className={'detail-text'}>合同编号： UAV202334741131</div>
-      <div className={'detail-text'}>合同状态： 已归档</div>
-      <div className={'detail-text'}>
-        合同操作：
-        <Button type={'link'}>平台签署</Button>
-        <Button type={'link'}>查看</Button>
-        <Button type={'link'}>下载</Button>
+      <div style={{ display: 'none' }}>
+        <div className={'detail-title'}>合同信息</div>
+        <div className={'detail-text'}>合同编号： UAV202334741131</div>
+        <div className={'detail-text'}>合同状态： 已归档</div>
+        <div className={'detail-text'}>
+          合同操作：
+          <Button type={'link'}>平台签署</Button>
+          <Button type={'link'}>查看</Button>
+          <Button type={'link'}>下载</Button>
+        </div>
       </div>
 
-      <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 style={{ display: 'none' }}>
+        <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>
       </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 className={'detail-title'}>发货信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
       </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 className={'detail-title'}>归还信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
       </div>
     </div>
   );
-}
+};
 
 export default DetailPurchaser;

src/pages/orderManage/equipmentOrder/detail/index.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from 'antd';
 import './index.scss';
-import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
-import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
-import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
+import DetailDelivery from '~/pages/orderManage/equipmentOrder/comp/detailDelivery';
+import DetailPurchaser from '~/pages/orderManage/equipmentOrder/comp/detailPurchaser';
+import DetailInformation from '~/pages/orderManage/equipmentOrder/comp/detailInformation';
 import { OrderManageAPI } from '~/api';
 import { InterDataType } from '~/api/interface';
 import { orderDetailType } from '~/api/interface/orderManageType';

src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx

-import React, { useEffect, useState } from 'react';
-import { Image } from 'antd';
-import { orderDetailType, orderImageDetailType } from '~/api/interface/orderManageType';
+import React, { useEffect } from 'react';
+import { Button } from 'antd';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
 import { OrderManageAPI } from '~/api';
 
 // 接口返回的类型
-type DataType = InterDataType<orderDetailType>;
+type DataType = InterDataType<getMallOrderDetailById>;
 // 参数类型
 type PropsType = {
   detail: DataType;
 };
-// 列表的类型
-type ListType = InterDataType<orderImageDetailType>;
-// 设备状态列表
-const vcuSatusList = [
-  { label: '正常', value: 0 },
-  { label: '故障', value: 1 },
-];
-// 0:发货 1:收货 2:归还 3:平台收货
-const vcuTypeList = [
-  { label: '发货验收', value: 0 },
-  { label: '收货验收', value: 1 },
-  { label: '归还验收', value: 2 },
-  { label: '平台收货', value: 3 },
-  { label: '退货申请', value: 4 },
-];
 const DetailDelivery: React.FC<PropsType> = (props) => {
   const { detail } = props;
-  // 验收信息列表
-  const [orderImageList, setOrderImageList] = useState<ListType>([]);
-  // 获取订单验收信息
-  const getOrderImageDetail = async () => {
-    const res = await OrderManageAPI.orderImageDetail({ orderInfoId: detail?.id });
+  // 物流列表
+  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
+  // 获取物流信息
+  const getListExpressInfo = async () => {
+    const res = await OrderManageAPI.listExpressInfo({});
     if (res && res.code === '200') {
-      setOrderImageList(res.result);
-      console.log('获取订单验收信息 --->', res.result);
+      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
+      // console.log(res);
     }
   };
-  // 转换设备状态
-  const getVcuSatus = (code: number) => {
-    return vcuSatusList.find((item) => item.value === code)?.label || code;
-  };
-  // 转换标题
-  const getVcuType = (code: number) => {
-    return vcuTypeList.find((item) => item.value === code)?.label || code;
+  // 转换物流信息
+  const getExpressInfo = (code: string | undefined | null) => {
+    return expressList.find((item) => item.value === code)?.label || code;
   };
   // componentDidMount
   useEffect(() => {
-    if (!detail) return;
-    getOrderImageDetail().then();
-  }, [detail]);
+    getListExpressInfo().then();
+  }, []);
   return (
     <div className={'detail-delivery detail-half'}>
-      {orderImageList.map((i, j) => (
-        <div key={j}>
-          <div className={'detail-title'}>{getVcuType(i.vcuType)}</div>
-          <div className={'detail-text'}>验收状态：{getVcuSatus(i.vcuSatus)}</div>
-          <div className={'detail-text'}>验收描述：{i.remark || '无'}</div>
-          <div className={'detail-text'}>验收凭证：</div>
-          <div className={'detail-image'}>
-            {i.imgs?.map((i, j) => (
-              <Image key={j} className={'image'} src={i} alt='付款凭证' />
-            ))}
-            {!i.imgs && <div style={{ height: '30px' }}></div>}
-          </div>
-        </div>
-      ))}
+      <div className={'detail-title'}>发货信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
+      </div>
+
+      <div className={'detail-title'}>归还信息</div>
+      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
+      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
+      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
+      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
+      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
+      <div className={'detail-text'}>
+        物流进度：-- <Button type={'link'}>查看详情</Button>
+      </div>
     </div>
   );
 };

src/pages/orderManage/productOrder/comp/detailInformation/index.tsx

@@ -29,7 +29,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
       title: '单价(元)',
       dataIndex: 'unitPrice',
       align: 'center',
-      render: (text) => `￥${text.toLocaleString()}`,
+      render: (text) => `￥${text?.toLocaleString()}`,
     },
     {
       title: '数量',
@@ -45,7 +45,7 @@ const DetailInformation: React.FC<PropsType> = (props) => {
       title: '应收款',
       dataIndex: 'shouldPay',
       align: 'center',
-      render: (text) => `￥${text.toLocaleString()}`,
+      render: (text) => `￥${text?.toLocaleString()}`,
     },
   ];
   useEffect(() => {

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

-import React, { useEffect } from 'react';
+import React from 'react';
 import { Button, Image } from 'antd';
-import { orderDetailType } from '~/api/interface/orderManageType';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
-import { OrderManageAPI } from '~/api';
 
 // 接口返回的类型
-type DataType = InterDataType<orderDetailType>;
+type DataType = InterDataType<getMallOrderDetailById>;
 // 参数类型
 type PropsType = {
   detail: DataType;
@@ -13,30 +12,13 @@ type PropsType = {
 
 const DetailPurchaser: React.FC<PropsType> = (props) => {
   const { detail } = props;
-  // 物流列表
-  const [expressList, setExpressList] = React.useState<{ label: string; value: string }[]>([]);
-  // 获取物流信息
-  const getListExpressInfo = async () => {
-    const res = await OrderManageAPI.listExpressInfo({});
-    if (res && res.code === '200') {
-      setExpressList(res.result.map((item) => ({ label: item.exName, value: item.exCode })));
-      // console.log(res);
-    }
-  };
-  // 转换物流信息
-  const getExpressInfo = (code: string | undefined | null) => {
-    return expressList.find((item) => item.value === code)?.label || code;
-  };
-  // componentDidMount
-  useEffect(() => {
-    getListExpressInfo().then();
-  }, []);
+
   return (
     <div className={'detail-purchaser detail-half'}>
       <div className={'detail-title'}>买家信息</div>
       <div className={'detail-text'}>UID：{detail?.uid}</div>
-      <div className={'detail-text'}>姓名： {detail?.buyerName}</div>
-      <div className={'detail-text'}>手机号： {detail?.buyerPhone}</div>
+      <div className={'detail-text'}>姓名： {detail?.userName}</div>
+      <div className={'detail-text'}>手机号： {detail?.phoneNum}</div>
       {/*<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>*/}
       <div className={'detail-text'}>备注： {detail?.remark}</div>
 
@@ -52,55 +34,33 @@ const DetailPurchaser: React.FC<PropsType> = (props) => {
         </div>
       </div>
 
-      <div style={{ display: 'none' }}>
-        <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>
+      <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-title'}>发货信息</div>
-      <div className={'detail-text'}>收货人：{detail?.receipt?.takeName}</div>
-      <div className={'detail-text'}>手机号：{detail?.receipt?.takePhone}</div>
-      <div className={'detail-text'}>收货地址：{detail?.receipt?.detailAddress}</div>
-      <div className={'detail-text'}>物流单号：{detail?.receipt?.sendExNo}</div>
-      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.sendExCode)}</div>
-      <div className={'detail-text'}>
-        物流进度：-- <Button type={'link'}>查看详情</Button>
+      <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-title'}>归还信息</div>
-      <div className={'detail-text'}>收货人：{detail?.receipt?.renName}</div>
-      <div className={'detail-text'}>手机号：{detail?.receipt?.renPhone}</div>
-      <div className={'detail-text'}>收货地址：{detail?.receipt?.renAddress}</div>
-      <div className={'detail-text'}>物流单号：{detail?.receipt?.renExNo}</div>
-      <div className={'detail-text'}>物流公司：{getExpressInfo(detail?.receipt?.renExCode)}</div>
-      <div className={'detail-text'}>
-        物流进度：-- <Button type={'link'}>查看详情</Button>
+      <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>
   );

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

-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from 'antd';
 import './index.scss';
 import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
 import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
 import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
+import { getMallOrderDetailById } from '~/api/interface/orderManageType';
+import { InterDataType } from '~/api/interface';
+import { OrderManageAPI } from '~/api';
+
+// 接口返回的类型
+type DataType = InterDataType<getMallOrderDetailById>;
 
 function ProductOrderDetail() {
   // 路由钩子
@@ -13,25 +19,53 @@ function ProductOrderDetail() {
   const [searchParams] = useSearchParams();
   // 接收到的参数
   const id = searchParams.get('id');
+  // 订单状态
+  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
   // 返回上一页
   const handleBack = () => {
     navigate(-1);
   };
+  // 订单详情
+  const [orderDetail, setOrderDetail] = useState<DataType>(null!);
+  // 获取订单详情
+  const getOrderDetail = async () => {
+    const res = await OrderManageAPI.getMallOrderDetailById({
+      orderId: Number(id),
+    });
+    if (res && res.code === '200') {
+      setOrderDetail(res.result);
+      console.log('获取订单详情 --->', res.result);
+    }
+  };
+  // 获取订单状态
+  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);
+    }
+  };
   // componentDidMount
   useEffect(() => {
-    console.log('拿到的id是 --->', id);
+    getOrderStatus().then();
+    getOrderDetail().then();
+    // console.log('拿到的id是 --->', id);
   }, [id]);
   return (
     <div className={'order-detail'}>
       <div className={'order-head'}>
         <div className='head-text'>
           <div>
-            <span>订单编号：R2023051916330461</span>
-            <span>合同编号：UAV202334741131</span>
+            <span>订单编号：{orderDetail?.orderNo}</span>
+            {/*<span>合同编号：UAV202334741131</span>*/}
           </div>
           <div>
-            <span>当前状态：交易完成</span>
-            <span>创建时间：2023-02-18 10:41:16</span>
+            <span>
+              当前状态：
+              {orderStatusList?.find((i) => i.value === orderDetail?.statusCode)?.label ||
+                orderDetail?.statusCode}
+            </span>
+            <span>创建时间：{orderDetail?.createTime}</span>
           </div>
         </div>
         <Button type={'primary'} onClick={() => handleBack()}>
@@ -39,9 +73,9 @@ function ProductOrderDetail() {
         </Button>
       </div>
       <div className={'detail-wrap'}>
-        <DetailPurchaser />
-        <DetailDelivery />
-        <DetailInformation />
+        <DetailPurchaser detail={orderDetail} />
+        <DetailDelivery detail={orderDetail} />
+        <DetailInformation detail={orderDetail} />
       </div>
     </div>
   );

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);
+    }
+    if (i === 0) return;
+    query = { ...query, statusCode: [Number(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 +220,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 +255,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 +265,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>

src/pages/orderManage/serviceOrder/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 { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
+import { serviceOrderStatusType, serviceOrderType } from '~/api/interface/orderManageType';
+import { filterObjAttr } from '~/utils';
 
 // 表格数据类型
-type TableType = any;
+type TableType = InterDataType<serviceOrderType>['list'];
+//服务-订单请求参数类型
+type serviceOrderTypeParameters = Omit<InterReqType<serviceOrderType>, 'pageSize' | 'pageNo'>;
+//字典返回类型
+type serviceStatusType = InterDataType<serviceOrderStatusType>;
 
 // 订单状态搜索列表
 const statusCodeButtonList = [
   { value: -1, label: '全部订单' },
-  { value: 0, label: '沟通意向' },
-  { value: 1, label: '签约付款' },
-  { value: 2, label: '待发货' },
-  { value: 3, label: '待收货' },
-  { value: 4, label: '已完成' },
-  { value: 5, label: '已关闭' },
+  { value: 0, label: '待付款' },
+  { value: 1, label: '待验收' },
+  { value: 2, label: '已完成' },
+  { value: 3, label: '已取消' },
 ];
 
 function ServiceOrderView() {
@@ -25,123 +31,178 @@ function ServiceOrderView() {
   // 当前选择的是第几个按钮
   const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
   // 表格分页配置
-  const [pagination] = useState({
-    total: 0,
+  const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
+    totalCount: 0,
     pageSize: 10,
-    current: 1,
-    totalPage: 0,
+    pageNo: 1,
   });
   // 表格数据
-  const [tableData] = useState<TableType>([{ id: 1 }]);
-  // 订单状态筛选
-  const statusChangeEvent = (i: number) => {
-    console.log('订单状态筛选 --->', i);
-    setStatusCodeButtonIndex(i);
-  };
-  // 跳转订单详情
-  const handleDetail = (record: TableType[0]) => {
-    console.log('跳转订单详情 --->', record.id);
-    navigate(`/orderManage/serviceOrder/detail?${qs.stringify({ id: record.id })}`);
-  };
+  const [tableData, setTableData] = useState<TableType>([]);
+  //服务订单-字典
+  const [serviceStatusList, setServiceStatusList] = useState<serviceStatusType>([]);
   // 表格结构
   const columns: ColumnsType<TableType[0]> = [
     {
       title: '商品',
       dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
+      width: 250,
+      render: (_text, record) => (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          {/*<Image src={record.images[0]} style={{ width: 48, height: 48 }} />*/}
+          <div style={{ marginLeft: 10, textAlign: 'left', lineHeight: '16px' }}>
+            <div style={{ color: '#1677ff' }}>{record.orderName}</div>
+            <div>订单编号：{record.orderNo}</div>
+            <div>创建时间：{record.createdTime}</div>
+          </div>
+        </div>
+      ),
     },
     {
       title: '单价(元)',
-      dataIndex: 'userName',
+      dataIndex: 'orderAmt',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => `￥${text.toLocaleString()}`,
     },
     {
       title: '数量',
-      dataIndex: 'userName',
       align: 'center',
       render: (_text, _record) => `--`,
     },
     {
       title: '买家',
-      dataIndex: 'userName',
       align: 'center',
-      render: (_text, _record) => `--`,
+      width: '130px',
+      render: (_text, record) => (
+        <>
+          <div>{record.uid}</div>
+          <div>
+            {record.userName}({record.phoneNum})
+          </div>
+        </>
+      ),
     },
     {
       title: '订单状态',
-      dataIndex: 'userName',
+      dataIndex: 'orderStatus',
       align: 'center',
-      render: (_text, _record) => `--`,
+      render: (text) => serviceStatusList.find((v) => v.orderStatus === text)?.managePort || '',
     },
     {
       title: '实收款',
-      dataIndex: 'userName',
       align: 'center',
       render: (_text, _record) => `--`,
     },
     {
       title: '相关运营',
-      dataIndex: 'userName',
       align: 'center',
       render: (_text, _record) => `--`,
     },
     {
       title: '推荐人',
-      dataIndex: 'userName',
       align: 'center',
       render: (_text, _record) => `--`,
     },
     {
       title: '订单交期',
-      dataIndex: 'userName',
       align: 'center',
       render: (_text, _record) => `--`,
     },
     {
       title: '备注',
-      dataIndex: 'remark',
       align: 'center',
       render: (_text, _record) => `--`,
     },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      align: 'center',
-      fixed: 'right',
-      render: (_text, record) => (
-        <>
-          <Button type={'link'} onClick={() => handleDetail(record)}>
-            详情
-          </Button>
-        </>
-      ),
-    },
+    // {
+    //   title: '操作',
+    //   align: 'center',
+    //   fixed: 'right',
+    //   render: (_text, record) => (
+    //     <>
+    //       <Button type={'link'} onClick={() => handleDetail(record)}>
+    //         详情
+    //       </Button>
+    //     </>
+    //   ),
+    // },
   ];
+  //筛选数据
+  const [query, setQuery] = useState<serviceOrderTypeParameters>();
+
+  // 订单状态筛选
+  const statusChangeEvent = (i: number) => {
+    setStatusCodeButtonIndex(i);
+    pagination.pageNo = 1;
+    setQuery({
+      ...query,
+      orderStatus: statusCodeButtonList[i].value === -1 ? undefined : statusCodeButtonList[i].value,
+    });
+    getServiceOrderList({
+      ...query,
+      orderStatus: statusCodeButtonList[i].value === -1 ? undefined : statusCodeButtonList[i].value,
+    });
+  };
+  // 跳转订单详情
+  const handleDetail = (record: TableType[0]) => {
+    navigate(`/orderManage/serviceOrder/detail?${qs.stringify({ id: record.id })}`);
+  };
+  //服务订单列表
+  const getServiceOrderList = (query?: serviceOrderTypeParameters) => {
+    OrderManageAPI.getServiceOrderList({
+      pageNo: pagination.pageNo,
+      pageSize: pagination.pageSize,
+      ...query,
+    }).then(({ result }) => {
+      setTableData(result.list || []);
+      pagination.totalCount = result.totalCount;
+      setPagination(pagination);
+    });
+  };
+  //服务-订单字典
+  const getServiceStatusList = () => {
+    OrderManageAPI.getServiceStatusList().then(({ result }) => {
+      setServiceStatusList(result);
+    });
+  };
+  //分页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    pagination.pageNo = pageNo;
+    pagination.pageSize = pageSize;
+    getServiceOrderList(query);
+  };
+  //筛选
+  const searchSuccess = (value: any) => {
+    setQuery(filterObjAttr(value, ['time']));
+    pagination.pageNo = 1;
+    getServiceOrderList(filterObjAttr(value, ['time']));
+  };
+  useEffect(() => {
+    getServiceStatusList();
+    getServiceOrderList();
+  }, []);
   return (
     <>
       <SearchBox
         search={[
           {
             label: '订单编号',
-            name: 'keyword',
+            name: 'orderNameOrNo',
             type: 'input',
             placeholder: '请输入订单编号',
           },
-          {
-            label: '买家账号',
-            name: 'keyword2',
-            type: 'input',
-            placeholder: '请输入用户账号',
-          },
-          {
-            label: '相关销售',
-            name: 'saleId',
-            type: 'Select',
-            placeholder: '请选择相关销售',
-            options: [],
-          },
+          // {
+          //   label: '买家账号',
+          //   name: 'keyword2',
+          //   type: 'input',
+          //   placeholder: '请输入用户账号',
+          // },
+          // {
+          //   label: '相关销售',
+          //   name: 'saleId',
+          //   type: 'Select',
+          //   placeholder: '请选择相关销售',
+          //   options: [],
+          // },
           {
             label: '时间',
             name: 'time',
@@ -149,7 +210,7 @@ function ServiceOrderView() {
             placeholder: '请选择创建时间',
           },
         ]}
-        searchData={(e: any) => console.log('提交数据 --->', e)}
+        searchData={searchSuccess}
         sufFixBtn={
           <>
             {statusCodeButtonList?.map((i, j) => {
@@ -174,13 +235,12 @@ function ServiceOrderView() {
         rowKey='id'
         scroll={{ x: 1200 }}
         pagination={{
-          total: pagination.total,
+          total: pagination.totalCount,
           pageSize: pagination.pageSize,
-          current: pagination.current,
+          current: pagination.pageNo,
           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 }}