feat: 新增订单查询&订单详情页面

config/config.js

@@ -91,6 +91,12 @@ export default {
               path: '/',
               component: './Admin',
             },
+            {
+              title: '商户管理后台',
+              path: '/orderManage/queryOrder',
+              name: 'queryOrder',
+              component: './orderManage/queryOrder',
+            },
             {
               title: '商户管理后台',
               path: '/orderManage/pendingDeliveryOrder',

config/env.config.js

@@ -2,16 +2,16 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
 
 const envAPi = {
-  api: '//backstms-yxm.liangkebang.net',
-  kdspOpApi: 'https://kdsp-operation-yxm.liangkebang.net',
-  kdspApi: 'https://sc-op-api-yxm.liangkebang.net',
-  goodsApi: 'https://sc-op-api-yxm.liangkebang.net',
-  querysApi: 'https://sc-settlement-api-yxm.liangkebang.net',
+  api: 'https://backstms-ds.liangkebang.net',
+  kdspOpApi: 'https://kdsp-operation-ds.liangkebang.net',
+  kdspApi: 'https://sc-op-api-ds.liangkebang.net',
+  goodsApi: 'https://sc-op-api-ds.liangkebang.net',
+  querysApi: 'https://sc-settlement-api-ds.liangkebang.net',
   // goodsApi: '//192.168.188.111:7000',
-  prologueDomain: 'https://mall-yxm.liangkebang.net',
+  prologueDomain: 'https://mall-ds.liangkebang.net',
   // qiniuHost: 'https://appsync.lkbang.net',
   qiniuHost: 'https://kdspstatic.q-gp.com/',
-  opapiHost: 'https://opapi-yxm.liangkebang.net',
+  opapiHost: 'https://opapi-ds.liangkebang.net',
 };
 
 const prodApi = {

src/pages/orderManage/queryOrder/components/CustomTable/index.jsx

+import React, { useMemo } from 'react';
+import { Spin, Empty } from 'antd';
+import style from './index.less';
+
+const CustomTable = props => {
+  const {
+    columns,
+    dataSource,
+    rowKey,
+    bordered,
+    eachRowHeadRender = null,
+    subDataField = null,
+    loading = null,
+    align = 'left',
+  } = props;
+  const colLength = columns.length;
+
+  const baseColumns = useMemo(() => columns, [columns]);
+  const baseDataSource = useMemo(() => dataSource, [dataSource]);
+
+  const ColElement = () =>
+    baseColumns.map((column, index) => {
+      const key = column.dataIndex || index.toString();
+      const styleWidth = column.width ? { width: column.width } : {};
+      return <col key={key} style={styleWidth}></col>;
+    });
+
+  /** @name thead内容 */
+  const TheadElement = () => (
+    <tr>
+      {baseColumns.map((column, index) => {
+        const key = column.dataIndex || index;
+        return <th key={key}>{column.title}</th>;
+      })}
+    </tr>
+  );
+
+  /** @name 获取td元素数据 */
+  const getTdElement = ({ dataSourceItem, dataSourceIndex, subData, subDataItem, subDataIndex }) =>
+    baseColumns.map((column, index) => {
+      const { render, dataIndex, align: itemAlign = null } = column;
+      const key = dataIndex || index;
+      // 子集不存在的属性去顶级查找
+      const currentData =
+        subDataItem && subDataItem[key] !== undefined ? subDataItem[key] : dataSourceItem[key];
+
+      let rowSpan = 1;
+      // 设置了自动合并 && 只设置第一条数据的值，其他的返回<></</>
+      if (column.rowSpanMode === 'auto' && subData) {
+        rowSpan = subData.length;
+        if (subDataIndex > 0) {
+          return <></>;
+        }
+      }
+
+      const renderParams = {
+        value: currentData,
+        record: dataSourceItem,
+        index: dataSourceIndex,
+        subRecord: subDataItem,
+        subIndex: subDataIndex,
+      };
+      return (
+        <td rowSpan={rowSpan} key={key} align={itemAlign || align}>
+          {render ? render(renderParams) : currentData}
+        </td>
+      );
+    });
+
+  /** @name 每一行的头部自定义渲染 */
+  const EachRowHeadElement = dataSourceItem => (
+    <tr>
+      <td className={style['thead-render']} colSpan={colLength}>
+        {' '}
+        {eachRowHeadRender(dataSourceItem)}
+      </td>
+    </tr>
+  );
+
+  /** @name tbody内容 */
+  const TbodyElement = () =>
+    baseDataSource.map((dataSourceItem, dataSourceIndex) => {
+      const subData = subDataField ? dataSourceItem[subDataField] : dataSourceItem;
+      let tbodyElement = '';
+      if (Array.isArray(subData)) {
+        tbodyElement = subData.map((subDataItem, subDataIndex) => {
+          const key = subDataItem[rowKey] || subDataIndex.toString();
+          return (
+            <tr key={key}>
+              {getTdElement({
+                dataSourceItem,
+                dataSourceIndex,
+                subData,
+                subDataItem,
+                subDataIndex,
+              })}
+            </tr>
+          );
+        });
+      } else {
+        const key = subData[rowKey] || dataSourceIndex.toString();
+        tbodyElement = (
+          <tr key={key}>{getTdElement({ dataSourceItem, dataSourceIndex, subData })}</tr>
+        );
+      }
+
+      return (
+        <React.Fragment key={dataSourceIndex.toString()}>
+          {eachRowHeadRender ? (
+            <EachRowHeadElement key={dataSourceIndex.toString()} {...dataSourceItem} />
+          ) : (
+            ''
+          )}
+          {tbodyElement}
+        </React.Fragment>
+      );
+    });
+
+  const EmptyElement = () => {
+    if (!dataSource || dataSource.length === 0) {
+      return (
+        <div className={style['custom-table-empty']}>
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        </div>
+      );
+    }
+    return <></>;
+  };
+  const memoTable = useMemo(
+    () => (
+      <table>
+        <colgroup>
+          <ColElement />
+        </colgroup>
+        <thead className={style['custom-table-thead']}>
+          <TheadElement />
+        </thead>
+        <tbody className={style['custom-table-tbody']}>
+          <TbodyElement />
+        </tbody>
+      </table>
+    ),
+    [props.dataSource],
+  );
+
+  return (
+    <div className={`${style['custom-table']} ${bordered ? style['custom-table-bordered'] : ''}`}>
+      <Spin spinning={loading}>
+        {memoTable}
+        <EmptyElement />
+      </Spin>
+    </div>
+  );
+};
+
+export { CustomTable };

src/pages/orderManage/queryOrder/components/CustomTable/index.less

+.custom-table {
+  width: 100%;
+  background: #fff;
+  table {
+    width: 100%;
+  }
+}
+
+.custom-table-thead {
+  background: #fafafa;
+  > tr > th {
+    padding: 16px 16px;
+    overflow-wrap: break-word;
+  }
+}
+
+.custom-table-tbody {
+  > tr > td {
+    padding: 16px 16px;
+    &.thead-render {
+      padding: 0;
+    }
+  }
+}
+
+// bordered
+.custom-table-bordered {
+  > table,
+  .custom-table-tbody,
+  .custom-table-thead {
+    > tr > td,
+    > tr > th {
+      border: 1px solid #e8e8e8;
+    }
+  }
+}
+
+// empt
+.custom-table-empty {
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  border: 1px solid #e8e8e8;
+  border-top: none;
+}

src/pages/orderManage/queryOrder/components/DetailModal/index.jsx

+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import { Modal, Table } from 'antd';
+import style from './index.less';
+
+const DetailModal = (props, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  const modalProps = {
+    visible,
+    width: '1000px',
+    title: '订单详情',
+    footer: null,
+    onCancel: () => {
+      setVisible(false);
+    },
+  };
+  /** @module 基本信息 */
+  const [baseInfo, setBaseInfo] = useState({});
+
+  /** @module 商品table */
+  const [goodData, setGoodData] = useState([]);
+  const goodColumns = [
+    {
+      title: '商品',
+      dataIndex: 'skuName',
+    },
+    {
+      title: '单价（元）',
+      dataIndex: 'supplyPrice',
+    },
+    {
+      title: '数量',
+      dataIndex: 'count',
+    },
+    {
+      title: '小计',
+      dataIndex: 'skuName',
+    },
+    {
+      title: '售后状态',
+      dataIndex: 'afterServiceStatus',
+    },
+  ];
+
+  /** @module 券码 */
+  const [couponData, setCouponData] = useState([]);
+  const couponColumns = [
+    {
+      title: '券码',
+      render: (_, record, index) => `券码${index + 1}`,
+    },
+    {
+      title: '有效期',
+      dataIndex: 'price',
+    },
+    {
+      title: '核销时间',
+      dataIndex: 'count',
+    },
+    {
+      title: '核销人',
+      dataIndex: 'skuName',
+    },
+    {
+      title: '状态',
+      dataIndex: 'afterStatus',
+    },
+  ];
+
+  const open = record => {
+    console.log(record);
+    setVisible(true);
+    const {
+      skuVos,
+      couponCodeVos,
+      receiverName,
+      receiverMobile,
+      fullAddress,
+      orderNo,
+      orderTime,
+      payTime,
+    } = record;
+
+    setGoodData(skuVos);
+    setCouponData(couponCodeVos);
+    setBaseInfo({
+      receiverName,
+      receiverMobile,
+      fullAddress,
+      orderNo,
+      orderTime,
+      payTime,
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    open,
+  }));
+
+  return (
+    <Modal {...modalProps}>
+      <div className={style['order-info']}>
+        <div className={style['order-info--item']}>
+          <div className={style['order-info--item__title']}>收货人信息</div>
+          <ul className={style['order-info--item__ul']}>
+            <li>姓名：{baseInfo.receiverName}</li>
+            <li>手机号：{baseInfo.receiverMobile}</li>
+            <li>地址：{baseInfo.fullAddress}</li>
+          </ul>
+        </div>
+        <div className={style['order-info--item']}>
+          <div className={style['order-info--item__title']}>订单信息</div>
+          <ul className={style['order-info--item__ul']}>
+            <li>订单号：{baseInfo.orderNo}</li>
+            <li>下单时间：{baseInfo.orderTime}</li>
+            <li>付款时间：{baseInfo.payTime}</li>
+          </ul>
+        </div>
+      </div>
+
+      {/* 商品 */}
+      <div className={style['good-table']}>
+        <Table
+          pagination={false}
+          rowKey="orderSkuId"
+          bordered
+          columns={goodColumns}
+          dataSource={goodData}
+        ></Table>
+      </div>
+      {/* 券码 */}
+      <div className={style['coupon-table']}>
+        <Table pagination={false} bordered columns={couponColumns} dataSource={couponData}></Table>
+      </div>
+    </Modal>
+  );
+};
+
+export default forwardRef(DetailModal);

src/pages/orderManage/queryOrder/components/DetailModal/index.less

+.order-info {
+  display: flex;
+  padding: 20px;
+  background: #fafafa;
+  &--item {
+    flex: 1;
+    &__title {
+      height: 40px;
+      font-weight: bold;
+      font-size: 16px;
+    }
+
+    &__ul {
+      margin: 0;
+      padding: 0;
+      font-size: 14px;
+      li {
+        line-height: 30px;
+      }
+    }
+  }
+}
+
+.good-table,
+.coupon-table {
+  margin-top: 20px;
+}

src/pages/orderManage/queryOrder/components/FormSearch/index.jsx

+import React from 'react';
+import { Form, Input, Select, DatePicker, Button, Space, notification } from 'antd';
+import { sub } from 'date-fns';
+import style from './index.less';
+
+const { Option } = Select;
+const { RangePicker } = DatePicker;
+const SEARCH_TYPE = {
+  SELECT: 'select',
+  RANGE_PICKER: 'range_picker',
+  INPUT: 'input',
+};
+const FormSearch = props => {
+  const {
+    width = '100%',
+    form,
+    initialValues = {},
+    onFinish = () => {},
+    formConfig,
+    formOptions,
+    btnConfig,
+  } = props;
+
+  const FormItemBox = ({ bindKey, label, column, children, afterRender }) => {
+    let columnValue = column;
+    if (afterRender) {
+      columnValue = '';
+    }
+    return (
+      <Form.Item
+        className={style['custom-form-item']}
+        column={columnValue}
+        name={bindKey}
+        label={label}
+      >
+        {children}
+      </Form.Item>
+    );
+  };
+
+  // 下拉框类型
+  const FormItemSelect = config => {
+    const {
+      bindKey,
+      options: configOptions = [],
+      originOptions = {},
+      afterRender = null,
+      afterOptions = {},
+    } = config;
+
+    // 提取公共部分
+    const BaseSelectElement = () => (
+      <FormItemBox {...config}>
+        <Select name={bindKey} className={style['form-item-tag']} {...originOptions}>
+          {configOptions.map(option => (
+            <Option key={option.value} value={option.value}>
+              {option.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItemBox>
+    );
+
+    if (afterRender) {
+      return (
+        <div className={style['custom-form-item-group']}>
+          <BaseSelectElement />
+          <FormItemBox {...afterOptions}>{afterRender()}</FormItemBox>
+        </div>
+      );
+    }
+
+    return <BaseSelectElement />;
+  };
+
+  // 选择日期范围类型
+  const FormItemRangePicker = config => {
+    const { originOptions = {} } = config;
+    return (
+      <FormItemBox {...config}>
+        <RangePicker className={style['form-item-tag']} {...originOptions} />
+      </FormItemBox>
+    );
+  };
+
+  // 选择日期
+
+  // 多级联动
+
+  // 输入框类型
+  const FormItemInput = config => {
+    const { originOptions = {} } = config;
+    return (
+      <FormItemBox {...config}>
+        <Input className={style['form-item-tag']} {...originOptions} />
+      </FormItemBox>
+    );
+  };
+
+  // 表单内容元素
+  const FormItemElement = () =>
+    formConfig.map(config => {
+      const { type } = config;
+      switch (type) {
+        case SEARCH_TYPE.SELECT:
+          return <FormItemSelect key={config.bindKey} {...config} />;
+        case SEARCH_TYPE.RANGE_PICKER:
+          return <FormItemRangePicker key={config.bindKey} {...config} />;
+        case SEARCH_TYPE.INPUT:
+          return <FormItemInput key={config.bindKey} {...config} />;
+        default:
+          return <></>;
+      }
+    });
+
+  /**
+   * @module 按钮操作
+   */
+  const FormItemButton = () => (
+    <Space size={10}>
+      {btnConfig.map(config => {
+        const { label, onClick = () => {}, type = 'primary', clickType = 'search' } = config;
+        const htmlType = clickType === 'reset' ? 'reset' : 'submit';
+        const callback = () => {
+          setTimeout(() => {
+            onClick({ type: clickType, params: form.getFieldValue() });
+          });
+        };
+        return (
+          <Button key={clickType} type={type} htmlType={htmlType} onClick={callback}>
+            {label}
+          </Button>
+        );
+      })}
+    </Space>
+  );
+
+  return (
+    <div className={style['form-search']}>
+      <Form
+        style={{ width }}
+        layout="inline"
+        form={form}
+        initialValues={initialValues}
+        onFinish={onFinish}
+        {...formOptions}
+      >
+        <FormItemElement></FormItemElement>
+        <Form.Item>
+          <FormItemButton></FormItemButton>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export { FormSearch, SEARCH_TYPE };

src/pages/orderManage/queryOrder/components/FormSearch/index.less

+.form-search {
+  padding: 15px;
+  background: #fff;
+}
+
+.custom-form-item {
+  min-width: 320px;
+  margin-bottom: 20px !important;
+  &[column='1'] {
+    width: 100%;
+  }
+  &[column='2'] {
+    width: calc(50% - 16px);
+  }
+  &[column='3'] {
+    width: calc(33.3333% - 32px);
+  }
+  &[column='4'] {
+    width: calc(25% - 48px);
+  }
+  &[column='5'] {
+    width: calc(20% - 54px);
+  }
+}
+
+.form-item-tag {
+  width: 100%;
+}
+
+.custom-form-item-group {
+  display: flex;
+}

src/pages/orderManage/queryOrder/components/LogisticsFormModel/index.jsx

+import LogisticsForm from '../../../pendingDeliveryOrder/components/LogisticsForm';
+
+const LogisticsFormModal = props => (
+  // eslint-disable-next-line react/react-in-jsx-scope
+  <LogisticsForm {...props} />
+);
+
+export default LogisticsFormModal;

src/pages/orderManage/queryOrder/const.js

+// 搜索类型
+export const ORDER_SEARCH_TYPE = [
+  {
+    value: 'orderNo',
+    name: '订单编号',
+  },
+  {
+    value: 'skuId',
+    name: '商品id',
+  },
+  {
+    value: 'channelOrderNo',
+    name: '外部订单',
+  },
+  {
+    value: 'receiverName',
+    name: '收货人姓名',
+  },
+  {
+    value: 'userMobile',
+    name: '买家手机号',
+  },
+  {
+    value: 'userMobile4',
+    name: '买家手机号后四位',
+  },
+  {
+    value: 'receiverMobile4',
+    name: '收货人手机号后四位',
+  },
+];
+
+// 订单类型
+export const ORDER_TYPE = [
+  {
+    value: '',
+    name: '全部',
+  },
+  {
+    value: 1,
+    name: '普通订单',
+  },
+  {
+    value: 4,
+    name: '服务订单',
+  },
+];
+
+// 订单状态
+export const ORDER_STATUS = [
+  {
+    value: '',
+    name: '全部',
+  },
+  {
+    value: 1,
+    name: '未支付',
+  },
+  {
+    value: 2,
+    name: '待发货',
+  },
+  {
+    value: 3,
+    name: '已发货',
+  },
+  {
+    value: 4,
+    name: '已完成',
+  },
+  {
+    value: 5,
+    name: '已关闭',
+  },
+];

src/pages/orderManage/queryOrder/index.jsx

+import { Form, Tabs, Input, Button, Pagination, notification } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import style from './index.less';
+import { CustomTable } from './components/CustomTable/index';
+import { FormSearch, SEARCH_TYPE } from './components/FormSearch/index';
+
+import LogisticsForm from './components/LogisticsFormModel';
+import DetailModal from './components/DetailModal/index';
+
+import { queryOrderList, getGoods, getLogistics, queryExpress, queryToSend } from './service';
+import { ORDER_SEARCH_TYPE, ORDER_TYPE, ORDER_STATUS } from './const';
+
+const { TabPane } = Tabs;
+
+const OrderList = ref => {
+  const [loading, setLoading] = useState(false);
+  const detailModalRef = useRef();
+
+  /** @module 发货弹框 */
+  // 物流公司数据
+  const [companys, setCompanys] = useState([]);
+  // 物流弹出框展示
+  const [LogisticsModalVisible, handleModalVisible] = useState(false);
+  // 订单下商品列表
+  const [skuList, setSkuList] = useState([]);
+  // 当前物流数据
+  const [LogisticsData, setLogisticsData] = useState([{}]);
+
+  /**  @module 表格区域 */
+  const [tableData, setTableData] = useState([]);
+  const [dataTotal, setDataTotal] = useState(10);
+  const [pagination, setPagination] = useState({
+    pageSize: 20,
+    pageNo: 1,
+  });
+
+  /**  @module 搜索区域 */
+  const [form] = Form.useForm();
+
+  /**  @module 状态切换区域 */
+  const [currentOrderStatus, setCurrentOrderStatus] = useState('');
+
+  // 获取列表数据
+  const getOrderList = () => {
+    const {
+      orderSearch = 'orderNo',
+      orderSearchValue = '',
+      orderTime = [],
+      skuName = '',
+      productType = '',
+      orderStatus = '',
+    } = form.getFieldValue();
+    //  筛选同步订单状态tabs
+    const startTime = orderTime[0] ? orderTime[0].format('YYYY-MM-DD') : '';
+    const endTime = orderTime[1] ? orderTime[1].format('YYYY-MM-DD') : '';
+    const searchParams = {
+      [orderSearch]: orderSearchValue,
+      startTime,
+      endTime,
+      skuName,
+      productType,
+      orderStatus,
+      // 测试字段
+      ...pagination,
+    };
+    console.log(searchParams);
+    setLoading(true);
+    queryOrderList(searchParams).then(res => {
+      setLoading(false);
+
+      const { current, total, records } = res.data;
+      setDataTotal(total);
+      setTableData(records);
+    });
+  };
+
+  // 打开详情弹框
+  const openDetailModal = record => {
+    detailModalRef.current.open(record);
+  };
+
+  // 切换订单状态- 同步select和tabs
+  function orderStatusChange(value) {
+    setCurrentOrderStatus(String(value));
+    form.setFieldsValue({
+      orderStatus: Number(value) || '',
+    });
+
+    setPagination({
+      ...pagination,
+      pageNo: 1,
+    });
+  }
+
+  // 重载
+  const reload = () => {
+    handleModalVisible(false);
+    getOrderList();
+  };
+
+  // 获取物流公司列表
+  const getCompanys = async () => {
+    const res = await queryExpress();
+    setCompanys(res);
+  };
+
+  // 分页操作
+  const onPageChange = (page, size) => {
+    const current = pagination.pageSize !== size ? 1 : page;
+    setPagination({
+      pageNo: current,
+      pageSize: size,
+    });
+  };
+
+  useEffect(() => {
+    getCompanys();
+  }, []);
+
+  useEffect(() => {
+    getOrderList();
+  }, [pagination]);
+
+  const baseStyle = {
+    style: {
+      width: '250px',
+    },
+  };
+  const FormSearchProps = {
+    width: '1200px',
+    form,
+    initialValues: {
+      orderSearch: 'orderNo',
+      orderStatus: '',
+      productType: '',
+    },
+    formOptions: {},
+    formConfig: [
+      {
+        type: SEARCH_TYPE.SELECT,
+        label: '订单搜索',
+        bindKey: 'orderSearch',
+        column: 1,
+        options: ORDER_SEARCH_TYPE,
+        originOptions: {
+          placeholder: '请选择',
+          ...baseStyle,
+        },
+        afterRender: () => (
+          <Input style={{ width: '300px', marginLeft: '10px' }} type="text"></Input>
+        ),
+        afterOptions: {
+          bindKey: 'orderSearchValue',
+        },
+      },
+      {
+        type: SEARCH_TYPE.RANGE_PICKER,
+        label: '下单时间',
+        column: 1,
+        bindKey: 'orderTime',
+        originOptions: {
+          placeholder: ['请选择', '请选择'],
+          ...baseStyle,
+        },
+      },
+      {
+        type: SEARCH_TYPE.INPUT,
+        label: '商品名称',
+        column: 4,
+        bindKey: 'skuName',
+        originOptions: {
+          placeholder: '请输入',
+          ...baseStyle,
+        },
+      },
+      {
+        // 1-普通商品订单 2-虚拟商品订单 3-电子卡券 4-服务商品
+        type: SEARCH_TYPE.SELECT,
+        label: '订单类型',
+        column: 4,
+        bindKey: 'productType',
+        options: ORDER_TYPE,
+        originOptions: {
+          placeholder: '请选择',
+          ...baseStyle,
+        },
+      },
+      {
+        type: SEARCH_TYPE.SELECT,
+        label: '订单状态',
+        column: 1,
+        bindKey: 'orderStatus',
+        options: ORDER_STATUS,
+        originOptions: {
+          placeholder: '请选择',
+          ...baseStyle,
+        },
+      },
+    ],
+    btnConfig: [
+      {
+        label: '筛选',
+        clickType: 'submit',
+        onClick: () => {
+          const { orderStatus } = form.getFieldValue();
+          orderStatusChange(orderStatus);
+        },
+      },
+      {
+        label: '重置',
+        type: '',
+        clickType: 'reset',
+        onClick: () => {
+          orderStatusChange('');
+        },
+      },
+    ],
+  };
+
+  const columns = [
+    {
+      title: '商品',
+      dataIndex: 'skuName',
+      align: 'left',
+      width: 350,
+      render: ({ value, subRecord }) => {
+        const { primaryImage } = subRecord;
+        return (
+          <div className={style['sku-info']}>
+            <img src={primaryImage} width="50px" height="50px" alt="" />
+            <span className={style['sku-info__name']}>{value}</span>
+          </div>
+        );
+      },
+    },
+    {
+      title: '单位（元）/数量',
+      dataIndex: 'supplyPrice',
+      width: 150,
+      render: ({ value, subRecord }) => {
+        const { count } = subRecord;
+        return `${value}/${count}`;
+      },
+    },
+    {
+      title: '买家/收货人',
+      dataIndex: 'receiverName',
+      rowSpanMode: 'auto',
+      width: 150,
+      render: ({ value, record }) => `${value}/${record.receiverMobile}`,
+    },
+    {
+      title: '付款金额（元）',
+      dataIndex: 'supplyAmount',
+      width: 150,
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'orderStatusDesc',
+      rowSpanMode: 'auto',
+      width: 150,
+    },
+    {
+      title: '配送方式',
+      dataIndex: 'deliveryType',
+      rowSpanMode: 'auto',
+      width: 150,
+    },
+    {
+      title: '售后状态',
+      dataIndex: 'afterStatus',
+      width: 200,
+    },
+    {
+      title: '操作',
+      rowSpanMode: 'auto',
+      align: 'center',
+      width: 100,
+      render: ({ value, record, index, subRecord, subIndex }) => (
+        <>
+          <Button
+            type="primary"
+            onClick={async () => {
+              const skuListData = await getGoods(record?.orderId);
+              let logisticsData = [{}];
+              setSkuList(skuListData);
+              const res = await getLogistics(record?.orderId);
+              logisticsData = res.map(item => ({
+                selectedGoods: item?.skus?.map(sku => sku?.orderSkuId),
+                selectedCompany: item.expressCompanyCode
+                  ? `${item?.expressCompanyCode}-${item?.expressCompanyName}`
+                  : null,
+                orderNum: item?.deliveryNo,
+              }));
+              setLogisticsData(logisticsData);
+              handleModalVisible(true);
+            }}
+          >
+            发货
+          </Button>
+        </>
+      ),
+    },
+  ];
+
+  const tableProps = {
+    bordered: true,
+    columns,
+    rowKey: 'skuId',
+    align: 'center',
+    dataSource: tableData,
+    subDataField: 'skuVos',
+    loading,
+  };
+
+  return (
+    <PageHeaderWrapper>
+      <FormSearch {...FormSearchProps} />
+      <div className={style['tab-box']}>
+        <Tabs
+          activeKey={currentOrderStatus}
+          onChange={orderStatusChange}
+          size="large"
+          tabBarStyle={{ padding: '0 30px' }}
+        >
+          <TabPane key="" tab="全部"></TabPane>
+          <TabPane key={1} tab="未支付"></TabPane>
+          <TabPane key={2} tab="待发货"></TabPane>
+          <TabPane key={3} tab="已发货"></TabPane>
+          <TabPane key={4} tab="已完成"></TabPane>
+          <TabPane key={5} tab="已关闭"></TabPane>
+        </Tabs>
+      </div>
+
+      <div className={style['white-box']}>
+        <CustomTable
+          {...tableProps}
+          eachRowHeadRender={record => (
+            <div className={style['table-item-header']}>
+              <div className={style['table-item-header--info']}>
+                <span>订单编号：{record.orderNoStr}</span>
+                <span>下单时间：{record.orderTime}</span>
+              </div>
+              <a
+                onClick={() => {
+                  openDetailModal(record);
+                }}
+                className={style['table-item-header--btn']}
+              >
+                查看详情
+              </a>
+            </div>
+          )}
+        ></CustomTable>
+        {/* 分页 */}
+        {tableData.length ? (
+          <div className={style['table-pagination']}>
+            <Pagination
+              onChange={onPageChange}
+              total={dataTotal}
+              showTotal={(total, range) => `第${range[0]}-${range[1]}条 /总共${total}条`}
+              pageSize={pagination.pageSize}
+              current={pagination.pageNo}
+            />
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+
+      <LogisticsForm
+        onSubmit={reload}
+        skuList={skuList}
+        companys={companys}
+        onCancel={() => handleModalVisible(false)}
+        modalVisible={LogisticsModalVisible}
+        value={LogisticsData}
+      />
+
+      <DetailModal ref={detailModalRef} />
+    </PageHeaderWrapper>
+  );
+};
+export default OrderList;

src/pages/orderManage/queryOrder/index.less

+.table-item-header {
+  display: flex;
+  padding: 0 20px;
+  line-height: 40px;
+  background-color: #f7f8f9;
+  &--info {
+    flex: 1;
+    span {
+      margin-right: 20px;
+    }
+  }
+
+  &--btn {
+    padding: 0 10px;
+    color: #61b0ff;
+  }
+}
+
+.white-box {
+  background-color: #fff;
+}
+
+.tab-box {
+  margin-top: 20px;
+  background-color: #fff;
+}
+
+.table-pagination {
+  margin-bottom: 30px;
+  padding: 20px 30px;
+  text-align: right;
+}
+
+.sku-info {
+  display: flex;
+  .sku-info__name {
+    margin-left: 10px;
+  }
+}

src/pages/orderManage/queryOrder/service.js

+import { stringify } from 'querystring';
+import _ from 'lodash';
+import request from '@/utils/request';
+import { saveAs } from 'file-saver';
+import { format } from 'date-fns';
+import config from '../../../../config/env.config';
+
+// 查询订单列表
+export async function queryOrderList(params) {
+  return request.post('/api/kdsp/queryOrderList', {
+    prefix: config.kdspApi,
+    data: params,
+  });
+}
+
+// 待发货订单
+export async function queryToSend(params) {
+  try {
+    const {
+      data: { current, records, total, size },
+    } = await request.post('/api/kdsp/op/mch-order/list-v2', {
+      prefix: config.kdspApi,
+      data: stringify(_.omitBy(params, v => !v)),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    });
+    return {
+      current,
+      data: records.map(v => ({ ...v, logisticsStatus: `_${v.logisticsStatus}` })),
+      total,
+      pageSize: size,
+    };
+  } catch (error) {
+    return {};
+  }
+}
+
+//  发货/更新物流
+export async function updateExpress(params) {
+  return request.post('/api/kdsp/op/mch-order/update-express-info', {
+    prefix: config.kdspApi,
+    data: params,
+  });
+}
+
+// 快递公司
+export async function queryExpress() {
+  try {
+    const { data } = await request.get('/api/kdsp/op/express/list', {
+      prefix: config.kdspApi,
+    });
+    return data;
+  } catch (error) {
+    return {};
+  }
+}
+
+export async function getGoods(orderId) {
+  const { data } = await request.get(`/api/kdsp/op/mch-order/skus?orderId=${orderId}`, {
+    prefix: config.kdspApi,
+  });
+  return data;
+}
+
+export async function getLogistics(orderId) {
+  const { data } = await request.get(`/api/kdsp/op/mch-order/logistics-skus?orderId=${orderId}`, {
+    prefix: config.kdspApi,
+  });
+  return data;
+}