功能：商城订单页面

src/components/modal/iframeModal/index.tsx

+import { FC } from 'react';
+import { Modal, ModalProps } from 'antd';
+
+interface selfProps {
+  url: string;
+  title: string;
+}
+const IframeModal: FC<ModalProps & selfProps> = ({ open, onCancel, title, url }) => {
+  return (
+    <Modal open={open} onCancel={onCancel} title={title}>
+      <iframe src={url} title={title} style={{ width: '100%', height: '1000px' }} />
+    </Modal>
+  );
+};
+export default IframeModal;

src/components/richText/index.tsx

@@ -44,9 +44,8 @@ const RichText: React.FC<PropsType> = ({
           }
           const formData = new FormData();
           formData.append('uploadFile', file);
-          CommonAPI.uploadOss(formData).then(({ result }) => {
-            insertFn(result.filePath);
-          });
+          const { result } = await CommonAPI.uploadOss(formData);
+          insertFn(result.filePath);
         },
       },
       uploadVideo: {

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

+const ProcurementOrderDetail = () => {
+  return <div className='procurement-order-detail'>采购详情</div>;
+};
+export default ProcurementOrderDetail;

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

+import SearchBox from '~/components/search-box';
+import { Button, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { OrderManageAPI } from '~/api';
+import { ColumnsType } from 'antd/es/table/InternalTable';
+
+const ProcurementOrderList = () => {
+  // 订单状态
+  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
+  // 订单状态搜索列表
+  const [tranStatusList, setTranStatusList] = useState<
+    { value: number | undefined; label: string }[]
+  >([]);
+  // 当前选择的是第几个按钮
+  const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
+
+  const tableColumns: ColumnsType<any> = [
+    {
+      title: '商品',
+      align: 'center',
+    },
+    {
+      title: '订单金额(元)',
+      align: 'center',
+    },
+    {
+      title: '买家',
+      align: 'center',
+    },
+    {
+      title: '订单状态',
+      align: 'center',
+    },
+    {
+      title: '实收款',
+      align: 'center',
+    },
+    {
+      title: '推荐人',
+      align: 'center',
+    },
+    {
+      title: '订单交期',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      align: 'center',
+    },
+  ];
+
+  // 获取订单状态
+  const getOrderStatus = () => {
+    OrderManageAPI.orderListStatus({}).then(({ result }) => {
+      const list = result.map((item) => ({ value: item.code, label: item.status }));
+      setOrderStatusList(list);
+      const arr = list
+        .filter((i) => [999, 800, 720, 300, 200, 100, 50].includes(i.value))
+        .reverse();
+      setTranStatusList([{ value: undefined, label: '全部订单' }, ...arr]);
+    });
+  };
+  // 订单状态筛选
+  const statusChangeEvent = (i: number) => {
+    if (i === statusCodeButtonIndex) {
+      setStatusCodeButtonIndex(0);
+    } else {
+      setStatusCodeButtonIndex(i);
+    }
+  };
+
+  useEffect(() => {
+    getOrderStatus();
+  }, []);
+  return (
+    <div className='procurement-order-list'>
+      <SearchBox
+        search={[
+          {
+            label: '订单编号',
+            name: 'keyword',
+            type: 'input',
+            placeholder: '请输入订单编号',
+          },
+          {
+            label: '买家账号',
+            name: 'keyword2',
+            type: 'input',
+            placeholder: '请输入用户账号',
+          },
+          {
+            label: '时间',
+            name: 'rangeTime',
+            type: 'rangePicker',
+            placeholder: '请选择创建时间',
+          },
+        ]}
+        sufFixBtn={
+          <>
+            {tranStatusList?.map((i, j) => {
+              return (
+                <Button
+                  key={j}
+                  type={j === statusCodeButtonIndex ? 'primary' : 'default'}
+                  onClick={() => statusChangeEvent(j)}
+                  style={{ marginTop: '5px' }}
+                >
+                  {i.label}
+                </Button>
+              );
+            })}
+          </>
+        }
+      />
+      <Table bordered columns={tableColumns} />
+    </div>
+  );
+};
+export default ProcurementOrderList;

src/pages/orderManage/productOrder/detail/index.tsx → src/pages/orderManage/productOrder/orderDetail/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 './comp/detailDelivery';
+import DetailPurchaser from './comp/detailPurchaser';
+import DetailInformation from './comp/detailInformation';
 import { getMallOrderDetailById } from '~/api/interface/orderManageType';
 import { InterDataType } from '~/api/interface';
 import { OrderManageAPI } from '~/api';

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

+import { FC } from 'react';
+import { Form, Modal, ModalProps, Radio } from 'antd';
+
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const ApprovalOrder: FC<ModalProps & selfProps> = ({ open, onCancel, onOk }) => {
+  const handleOk = () => {
+    onOk();
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  return (
+    <Modal open={open} title='凭证审批' onOk={handleOk} onCancel={handleCancel}>
+      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 12 }}>
+        <Form.Item label='状态'>
+          <Radio.Group>
+            <Radio value={1}>通过</Radio>
+            <Radio value={2}>驳回</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item label='凭证'></Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default ApprovalOrder;

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

+import { Form, Modal, ModalProps, Select } from 'antd';
+import { FC } from 'react';
+
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+const DistributionOrder: FC<ModalProps & selfProps> = ({ open, onCancel, onOk }) => {
+  const handleOk = () => {
+    onOk();
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  return (
+    <Modal open={open} title='分配订单' onOk={handleOk} onCancel={handleCancel}>
+      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
+        <Form.Item label='订单编号'></Form.Item>
+        <Form.Item label='订单名称'></Form.Item>
+        <Form.Item label='分配运营' rules={[{ required: true, message: '请选择运营人员' }]}>
+          <Select placeholder='请选择运营人员'></Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default DistributionOrder;

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

+import { FC } from 'react';
+import { Cascader, Form, Input, Modal, ModalProps, Select } from 'antd';
+
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+const ShipmentsOrder: FC<ModalProps & selfProps> = ({ onOk, onCancel, open }) => {
+  const handleOk = () => {
+    onOk();
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  return (
+    <Modal open={open} title='发货' onOk={handleOk} onCancel={handleCancel}>
+      <Form
+        name='basic'
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 16 }}
+        initialValues={{ remember: true }}
+        autoComplete='off'
+      >
+        <Form.Item
+          label='物流公司'
+          name='sendExpCode'
+          rules={[
+            {
+              required: true,
+              message: '请选择物流公司',
+            },
+          ]}
+        >
+          <Select placeholder='请选择物流公司' allowClear></Select>
+        </Form.Item>
+        <Form.Item
+          label='物流编号'
+          name='sendExpNo'
+          rules={[
+            {
+              required: true,
+              message: '请输入物流编号',
+            },
+          ]}
+        >
+          <Input placeholder='请输入物流编号' allowClear />
+        </Form.Item>
+        <Form.Item
+          label='用户姓名'
+          name='takeName'
+          // rules={[
+          //   {
+          //     validator: validateUserName,
+          //     required: true,
+          //   },
+          // ]}
+        >
+          <Input placeholder='请输入用户姓名' allowClear />
+        </Form.Item>
+        <Form.Item
+          label='手机号'
+          name='takePhone'
+          // rules={[
+          //   {
+          //     validator: validatePhone,
+          //     required: true,
+          //   },
+          // ]}
+        >
+          <Input placeholder='请输入手机号' allowClear />
+        </Form.Item>
+        <Form.Item
+          label='收货地址'
+          name='takeRegion'
+          rules={[
+            {
+              required: false,
+              message: '请选择收货地址',
+            },
+          ]}
+        >
+          <Cascader
+            // options={location}
+            placeholder='请选择收货地址'
+            allowClear
+            fieldNames={{
+              label: 'name',
+              value: 'name',
+              children: 'childInfo',
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label='详细地址'
+          name='takeAddress'
+          rules={[
+            {
+              required: false,
+              message: '请输入收货地址',
+            },
+          ]}
+        >
+          <Input.TextArea maxLength={70} showCount placeholder='请输入收货地址' allowClear />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default ShipmentsOrder;

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

+.sure-order{
+  .address-info,.order-info,.contract-info{
+    &-title{
+      font-size: 10px;
+      font-weight: bold;
+    }
+  }
+  .order-info{
+    &-form{
+      margin-top: 10px;
+    }
+  }
+}

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

+import { FC } from 'react';
+import { Button, Cascader, Col, Form, Input, Modal, ModalProps, Row, Table, Upload } from 'antd';
+import './index.scss';
+import { ColumnsType } from 'antd/es/table/InternalTable';
+import { UploadOutlined } from '@ant-design/icons';
+
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const SureOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel }) => {
+  const tableColumns: ColumnsType<any> = [
+    {
+      title: '商品',
+      align: 'center',
+    },
+    {
+      title: '价格',
+      align: 'center',
+    },
+    {
+      title: '数量',
+      align: 'center',
+    },
+  ];
+
+  const handleOk = () => {
+    onOk();
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  return (
+    <Modal open={open} title='确认订单' onOk={handleOk} onCancel={handleCancel} width={800}>
+      <div className='sure-order'>
+        <div className='address-info'>
+          <div className='address-info-title'>收货信息：</div>
+          <div className='address-info-form'>
+            <Form labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
+              <Form.Item
+                label='收货人'
+                name='takeName'
+                // rules={[{ required: true, validator: validateUserName }]}
+              >
+                <Input placeholder='请输入收货人' style={{ width: '300px' }} />
+              </Form.Item>
+              <Form.Item
+                label='联系方式'
+                name='takePhone'
+                // rules={[{ required: true, validator: validatePhone }]}
+              >
+                <Input placeholder='请输入联系方式' style={{ width: '300px' }} />
+              </Form.Item>
+              <Form.Item
+                label='所属地区'
+                rules={[{ required: true, message: '请输入所属地区' }]}
+                name='takeRegion'
+              >
+                <Cascader
+                  // options={location}
+                  style={{ width: '300px' }}
+                  fieldNames={{
+                    label: 'name',
+                    value: 'name',
+                    children: 'childInfo',
+                  }}
+                  placeholder='请选择所属地区'
+                />
+              </Form.Item>
+              <Form.Item
+                label='详细地址'
+                name='takeAddress'
+                rules={[{ required: true, message: '请输入详细地址' }]}
+              >
+                <Input.TextArea
+                  maxLength={250}
+                  placeholder='请输入详细地址'
+                  showCount
+                  rows={4}
+                  style={{ width: '300px' }}
+                />
+              </Form.Item>
+            </Form>
+          </div>
+        </div>
+        <div className='order-info'>
+          <div className='order-info-title'>订单信息：</div>
+          <Row>
+            <Col span={3}></Col>
+            <Col span={16}>
+              <div className='order-info-table'>
+                <Table bordered columns={tableColumns} />
+              </div>
+              <div className='order-info-form'>
+                <Form wrapperCol={{ span: 10 }} labelCol={{ span: 3 }}>
+                  <Form.Item label='订单交期'>
+                    <Input placeholder='请输入订单交期' />
+                  </Form.Item>
+                  <Form.Item label='付款期限'>
+                    <Input placeholder='请输入付款期限' />
+                  </Form.Item>
+                </Form>
+              </div>
+            </Col>
+          </Row>
+        </div>
+        <div className='contract-info'>
+          <div className='contract-info-title'>合同签署：</div>
+          <div className='contract-info-form'>
+            <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+              <Form.Item label='合同'>
+                <Upload>
+                  <Button icon={<UploadOutlined />}>上传</Button>
+                </Upload>
+              </Form.Item>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default SureOrder;

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

+import { FC } from 'react';
+import { Modal, ModalProps } from 'antd';
+
+interface selfProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+const TailPaymentOrder: FC<ModalProps & selfProps> = ({ open, onOk, onCancel }) => {
+  const handleOk = () => {
+    onOk();
+  };
+  const handleCancel = () => {
+    onCancel();
+  };
+  return <Modal open={open} title='确认尾款' onOk={handleOk} onCancel={handleCancel} />;
+};
+export default TailPaymentOrder;

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

@@ -7,6 +7,10 @@ import qs from 'query-string';
 import { OrderManageAPI } from '~/api';
 import { listPageManagerVerOne } from '~/api/interface/orderManageType';
 import { InterListType, InterReqType } from '~/api/interface';
+import DistributionOrder from './components/distributionOrder';
+import SureOrder from './components/sureOrder';
+import ApprovalOrder from './components/approvalOrder';
+import ShipmentsOrder from './components/shipmentsOrder';
 
 // 表格数据类型
 type TableType = InterListType<listPageManagerVerOne>;
@@ -37,6 +41,13 @@ function ProductOrderView() {
   const [tableData, setTableData] = useState<TableType>([]);
   // 需要编辑的数据
   // const [editData, setEditData] = useState<TableType[0]>(); // 用于编辑
+
+  // 订单流程操作
+  const [distributionOrderShow, setDistributionOrderShow] = useState<boolean>(false); //分配
+  const [sureOrderShow, setSureOrderShow] = useState<boolean>(false); //确认订单
+  const [approvalOrderShow, setApprovalOrderShow] = useState<boolean>(false); //审核
+  const [shipmentsOrderShow, setShipmentsOrderShow] = useState<boolean>(false); //发货
+
   // 加载列表
   const getTableList = async (value = {}) => {
     // 只需要修改这个地方的接口即可
@@ -55,7 +66,6 @@ function ProductOrderView() {
         totalPage,
       });
       setTableData(list);
-      // console.log('加载列表 --->', list);
     }
   };
   // 翻页
@@ -95,6 +105,47 @@ function ProductOrderView() {
       setTranStatusList([{ value: undefined, label: '全部订单' }, ...arr]);
     }
   };
+  // 分配订单
+  const showDistributionOrderEvent = () => {
+    setDistributionOrderShow(true);
+  };
+  const distributionOrderOk = () => {
+    setDistributionOrderShow(false);
+  };
+  const distributionOrderCancel = () => {
+    setDistributionOrderShow(false);
+  };
+  // 确认订单
+  const showSureOrderEvent = () => {
+    setSureOrderShow(true);
+  };
+  const sureOrderCancel = () => {
+    setSureOrderShow(false);
+  };
+  const sureOrderOk = () => {
+    setSureOrderShow(false);
+  };
+  // 凭证审批
+  const showApprovalOrderEvent = () => {
+    setApprovalOrderShow(true);
+  };
+  const approvalOrderOk = () => {
+    setApprovalOrderShow(false);
+  };
+  const approvalOrderCancel = () => {
+    setApprovalOrderShow(false);
+  };
+  // 发货
+  const showShipmentsOrderEvent = () => {
+    setShipmentsOrderShow(true);
+  };
+  const shipmentsOrderCancel = () => {
+    setShipmentsOrderShow(false);
+  };
+  const shipmentsOrderOk = () => {
+    setShipmentsOrderShow(false);
+  };
+
   // componentDidMount
   useEffect(() => {
     query = {};
@@ -182,6 +233,18 @@ function ProductOrderView() {
       fixed: 'right',
       render: (_text, record) => (
         <>
+          {/*<Button type={'link'} onClick={() => showDistributionOrderEvent()}>*/}
+          {/*  分配运营*/}
+          {/*</Button>*/}
+          {/*<Button type={'link'} onClick={() => showSureOrderEvent()}>*/}
+          {/*  确认订单*/}
+          {/*</Button>*/}
+          {/*<Button type={'link'} onClick={() => showApprovalOrderEvent()}>*/}
+          {/*  凭证审批*/}
+          {/*</Button>*/}
+          <Button type={'link'} onClick={() => showShipmentsOrderEvent()}>
+            发货
+          </Button>
           <Button type={'link'} onClick={() => handleDetail(record)}>
             详情
           </Button>
@@ -206,13 +269,6 @@ function ProductOrderView() {
             placeholder: '请输入用户账号',
           },
           {
-            label: '相关销售',
-            name: 'saleId',
-            type: 'Select',
-            placeholder: '请选择相关销售',
-            options: [],
-          },
-          {
             label: '时间',
             name: 'rangeTime',
             type: 'rangePicker',
@@ -254,6 +310,26 @@ function ProductOrderView() {
         }}
         // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
       />
+      {/*分配订单*/}
+      <DistributionOrder
+        open={distributionOrderShow}
+        onOk={distributionOrderOk}
+        onCancel={distributionOrderCancel}
+      />
+      {/*确认订单*/}
+      <SureOrder open={sureOrderShow} onCancel={sureOrderCancel} onOk={sureOrderOk} />
+      {/*凭证审批*/}
+      <ApprovalOrder
+        open={approvalOrderShow}
+        onCancel={approvalOrderCancel}
+        onOk={approvalOrderOk}
+      />
+      {/*发货*/}
+      <ShipmentsOrder
+        open={shipmentsOrderShow}
+        onCancel={shipmentsOrderCancel}
+        onOk={shipmentsOrderOk}
+      />
     </>
   );
 }

src/router/router.tsx

@@ -83,10 +83,10 @@ const IndustryNewsView = React.lazy(() => import('~/pages/resourceManage/industr
 //论坛管理
 const DynamicListView = React.lazy(() => import('~/pages/forumManage/dynamicList'));
 // 订单
-const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
+const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder/orderList')); //销售订单
 const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
 const ServiceOrderView = React.lazy(() => import('src/pages/orderManage/serviceOrder')); //服务订单
-const ProductOrderDetail = React.lazy(() => import('~/pages/orderManage/productOrder/detail'));
+const ProductOrderDetail = React.lazy(() => import('~/pages/orderManage/productOrder/orderDetail'));
 const ServiceOrderDetail = React.lazy(() => import('~/pages/orderManage/serviceOrder/detail'));
 const EquipmentOrderDetail = React.lazy(() => import('~/pages/orderManage/equipmentOrder/detail'));
 const PilotTrainingOrderView = React.lazy(() => import('~/pages/orderManage/pilotTrainingOrder'));
@@ -94,6 +94,10 @@ const DemandOrderListView = React.lazy(() => import('~/pages/orderManage/demandO
 const DemandOrderDetailView = React.lazy(
   () => import('~/pages/orderManage/demandOrder/orderDetail'),
 ); //需求订单详情
+const ProcurementOrder = React.lazy(() => import('~/pages/orderManage/procurementOrder/orderList')); //商城采购订单列表
+const ProcurementOrderDetail = React.lazy(
+  () => import('~/pages/orderManage/procurementOrder/orderDetail'),
+); //商城采购订单详情
 
 //商品管理
 import CourseManageView from '~/pages/mallManage/courseManage'; //课程管理
@@ -556,6 +560,29 @@ export const routerList: Array<RouteObjectType> = [
         },
       },
       {
+        path: '/orderManage/procurementOrder/list',
+        element: withLoadingComponent(<ProcurementOrder />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10070,
+          title: '采购订单',
+          icon: <ShoppingOutlined />,
+          develop: true,
+        },
+      },
+      {
+        path: '/orderManage/procurementOrder/detail',
+        element: withLoadingComponent(<ProcurementOrderDetail />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 10070,
+          title: '采购订单详情',
+          icon: <ShoppingOutlined />,
+          develop: true,
+          hidden: true,
+        },
+      },
+      {
         path: '/orderManage/equipmentOrder',
         element: withLoadingComponent(<EquipmentOrderView />),
         errorElement: <ErrorPage />,
@@ -623,7 +650,7 @@ export const routerList: Array<RouteObjectType> = [
         element: withLoadingComponent(<DemandOrderDetailView />),
         errorElement: <ErrorPage />,
         meta: {
-          id: 10050,
+          id: 10060,
           title: '需求订单详情',
           icon: <CreditCardOutlined />,
           hidden: true,