采购订单/销售订单

src/components/MellowCard/index.tsx

@@ -9,12 +9,17 @@ import React from 'react';
 import { Card } from 'antd';
 import { CardProps } from 'antd/lib/card';
 import styles from './index.less';
+import cx from 'classnames'
 
-const MellowCard: React.FC<CardProps> = props => {
-  const { children, ...rest } = props;
+export interface MellowCardProps extends CardProps {
+  blockClassName?: string
+}
+
+const MellowCard: React.FC<MellowCardProps> = props => {
+  const { children, blockClassName, ...rest } = props;
 
   return (
-    <div className={styles.mellow}>
+    <div className={cx(styles.mellow, blockClassName)}>
       <Card {...rest}>
         {children}
       </Card>

src/pages/transaction/components/OrderDetailHeader/index.tsx

@@ -42,10 +42,10 @@ const OrderDetailHeader:React.FC<OrderDetailHeaderProps> = ({headerTitle, extraR
               <Row>
                 {detailList.map(v => {
                   const { label, render, name, ...colProps } = v
-                  return <Col key={label} {...colProps} className={style.detailCol}>
+                  return detailData[name] ? <Col key={label} {...colProps} className={style.detailCol}>
                     <span className={style.colLabel}>{label}:</span>
                     {render ? render(detailData[name], detailData) : <span>{detailData[name]}</span>}
-                  </Col>
+                  </Col> : null
                 })}
               </Row>
             </Col>

src/pages/transaction/components/OrderDetailWrapper/index.less

+.wrapper {
+  padding: 24px;
+}
\ No newline at end of file

src/pages/transaction/components/OrderDetailWrapper/index.tsx

+import React from 'react'
+import style from './index.less'
+
+export interface OrderDetailWrapperProps {}
+
+const OrderDetailWrapper:React.FC<OrderDetailWrapperProps> = (props) => {
+  return (
+    <div className={style.wrapper}>{props.children}</div>
+  )
+}
+
+OrderDetailWrapper.defaultProps = {}
+
+export default OrderDetailWrapper
\ No newline at end of file

src/pages/transaction/purchaseOrder/orderDetail/components/selectAddress/index.tsx

@@ -66,9 +66,9 @@ const SelectAddress = (props: ISchemaFieldComponentProps) => {
     setMode('add')
     modalRef.current.setVisible(true)
   }
-  const handleCheck = (id) => {
+  const handleCheck = (item) => {
     if (editable) {
-      mutators.change(id)
+      mutators.change(item)
     }
   }
 
@@ -111,7 +111,7 @@ const SelectAddress = (props: ISchemaFieldComponentProps) => {
       { editable && <Button block onClick={handleAdd} icon={<PlusOutlined/>}>新建地址</Button> }
       <SelectStyles>
         {
-          showDataSource.map(v =>  <div key={v.id} onClick={() => handleCheck(v.id)} className={cx('select_style_border', value === v.id ? 'active' : '')}>
+          showDataSource.map(v =>  <div key={v.id} onClick={() => handleCheck(v)} className={cx('select_style_border', value.id === v.id ? 'active' : '')}>
             <div>
               <Row style={{color: '#172B4D'}}>
                 <Col>{v.receiverName}</Col>

src/pages/transaction/purchaseOrder/orderDetail/effects/index.ts

@@ -141,7 +141,7 @@ export const useProductAddress = (ctx: ISchemaFormActions | ISchemaFormAsyncActi
     ctx.setFieldState('deliveryAddresId', state => {
       if (data.length > 0 && !state.value) {
         // 初始化时存在数据， 默认帮用户选中第一个(默认地址)
-        state.value = data[0].id
+        state.value = data[0]
       }
       state.dataSource = data
       state.showMore = data.length > 3

src/pages/transaction/purchaseOrder/orderDetail/index.tsx

@@ -24,7 +24,7 @@ import { useProductTable } from './model/useProductTable'
 import styled from 'styled-components'
 import { useUpdate } from '@umijs/hooks'
 import { PublicApi } from '@/services/api'
-import { formatTimeString } from '@/utils'
+import { formatTimeString, omit } from '@/utils'
 import { changeRouterTitleByStatus, findLastIndexFlowState } from '../utils'
 
 import { ReadyAddOrderDetailContext } from '../context'
@@ -144,7 +144,10 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
               v.memberPrice = parseInt(v.memberPrice)
               return v
             }),
-            needTheInvoice: Number(value.needTheInvoice)
+            needTheInvoice: Number(value.needTheInvoice),
+            // 冗余交付信息
+            deliveryAddresId: value.deliveryAddresId.id,
+            ...omit(value.deliveryAddresId, ['id'])
           }
           fnResult = id ? await PublicApi.postOrderProcurementOrderUpdate({...params, id}) : await PublicApi.postOrderProcurementOrderAdd(params)
           break;
@@ -198,7 +201,7 @@ const PurchaseOrderDetail:React.FC<PurchaseOrderDetailProps> = (props) => {
         history.goBack()
       }
     } catch (error) {
-      
+      console.log(error)
     }
   }
 

src/pages/transaction/saleOrder/orderDetail/components/orderElectronModal/index.tsx

+import React from 'react'
+import { Modal } from 'antd'
+import NiceForm from '@/components/NiceForm'
+import { createFormActions } from '@formily/antd'
+
+export interface OrderElectronModalProps {}
+
+const schemaActions = createFormActions()
+
+//@todo 尚未完成
+const OrderElectronModal:React.FC<OrderElectronModalProps> = (props) => {
+  return (
+    <Modal>
+      <NiceForm
+        actions={schemaActions}
+        schema={{
+          type: 'object',
+          properties: {
+            NO_SUBMIT: {
+              type: 'object',
+              "x-component": "mega-layout",
+              "x-component-props": {
+                labelAlign: 'top'
+              },
+              properties: {
+
+              }
+            }
+          }
+        }}
+      />
+    </Modal>
+  )
+}
+
+OrderElectronModal.defaultProps = {}
+
+export default OrderElectronModal
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderMergeInfo/index.less

+.card-list {
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 24px;
+}
+.card-list_title {
+  font-size: 14px;
+  color: #909399;
+}
+
+.fullHeight {
+  height: 100%;
+}
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderMergeInfo/index.tsx

+import React, { useContext, useEffect, useState, useMemo } from 'react'
+import { Row, Col, Tag } from 'antd'
+import MellowCard from '@/components/MellowCard'
+import { OrderDetailContext } from '../../context'
+import { formatTimeString } from '@/utils'
+import { DELIVERY_TYPE } from '@/constants'
+import style from './index.less'
+import { PublicApi } from '@/services/api'
+
+export interface OrderMergeInfoProps {}
+const payInfo = [
+  { title: '交付日期', name: 'deliveryTime', render: (text) => formatTimeString(text) },
+  { title: '交付地址', name: 'deliveryAddresId', render: (_, record) => 
+  <div>
+    <Row>
+      <Col>{record.receiverName}</Col>
+      <Col> / </Col>
+      <Col>{record.phone}</Col>
+      {record.isDefault && <Col style={{marginLeft: 6}}><Tag color='default'>默认</Tag></Col>}
+    </Row>
+    <div style={{color: '#6B778C'}}>{record.fullAddress}</div>
+  </div>
+  },
+  { title: '提货方式', name: 'deliveryType', render: (text) => DELIVERY_TYPE[text] },
+  { title: '自提地址', name: 'pickUpAddress' },
+  { title: '运费', name: 'freight' }
+]
+
+const otherInfo = [
+  { title: '包装要求', name: 'pageRequire' },
+  { title: '其他要求', name: 'restsRequire' },
+]
+
+const electronInfo = [
+  { title: '电子合同', name: 'none' },
+]
+
+const RenderCard = ({infoList, dataSource}) => infoList.map(v => dataSource[v.name] ? <Row key={v.name} className={style['card-list']}>
+  <Col span={6} className={style['card-list_title']}>{v.title}</Col>
+  <Col flex={1}>{v.render ? v.render(dataSource[v.name], dataSource) : dataSource[v.name]}</Col>
+</Row> : null)
+
+const OrderMergeInfo:React.FC<OrderMergeInfoProps> = (props) => {
+  const orderDetailCtx = useContext(OrderDetailContext)
+  const address = useMemo(async () => {
+    const { data } = await PublicApi.getLogisticsSelectListReceiverAddress()
+    return data
+  }, [])
+  const { data, ctl } = orderDetailCtx
+
+  useEffect(() => {
+    if (data.deliveryAddresId && !data.receiverName) {
+      asyncSetAddress()
+    }
+  }, [data, address])
+
+  const asyncSetAddress = async () => {
+    const res = await address
+    ctl.setData({
+      ...data,
+      ...(res.find(v => v.id === data.deliveryAddresId) || {})
+    })
+  }
+
+  return (
+    <Row style={{marginTop: 24}}>
+      <Col span={12}>
+        <MellowCard title='交易信息' blockClassName={style.fullHeight} className={style.fullHeight}>
+          <RenderCard infoList={payInfo} dataSource={data}/>
+        </MellowCard>
+      </Col>
+      <Col span={6} push={1}>
+        <MellowCard title='其他信息' blockClassName={style.fullHeight} className={style.fullHeight}>
+          <RenderCard infoList={otherInfo} dataSource={data}/>
+        </MellowCard>
+      </Col>
+      <Col span={4} push={2}>
+        <MellowCard title='电子合同' blockClassName={style.fullHeight} className={style.fullHeight}>
+          <RenderCard infoList={electronInfo} dataSource={data}/>
+        </MellowCard>
+      </Col>
+    </Row>
+  )
+}
+
+OrderMergeInfo.defaultProps = {}
+
+export default OrderMergeInfo
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderPayTabs/index.less

+.fontGray {
+  font-size: 12px;
+  color: #909399;
+  margin-bottom: 10px;
+}
+
+.bignumber {
+  font-size: 24px;
+  color: #303133;
+  margin-bottom: 10px;
+}
+
+.smallnumber {
+  font-size: 16px;
+  color: #303133;
+  line-height: 24px;
+}
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderPayTabs/index.tsx

+import React, { useContext } from 'react'
+import style from './index.less'
+import { Tabs, Row, Col } from 'antd'
+import { OrderDetailContext } from '../../context'
+import MellowCard from '@/components/MellowCard'
+import StatusColors from '../../../components/StatusColors'
+
+export interface OrderPayTabsProps {}
+
+const TabPane = Tabs.TabPane
+
+const TabHeader = ({dataSource}) => {
+  return <Row justify='space-between'>
+    <Col>
+      <div className={style.fontGray}>支付比例</div>
+      <div className={style.bignumber}>30%</div>
+      <div className={style.smallnumber}>￥48，000.00</div>
+    </Col>
+    <Col>
+      <StatusColors status={5} type='out'/>
+    </Col>
+  </Row>
+}
+// 支付信息
+const OrderPayTabs:React.FC<OrderPayTabsProps> = (props) => {
+  const { data } = useContext(OrderDetailContext)
+  return (
+    <MellowCard style={{marginTop: 24}} bordered={false}>
+      <Tabs defaultActiveKey='1'>
+        <TabPane tab={<TabHeader dataSource={data}/>} key='1'>
+          <Row>
+            <Col className={style.fontGray} span={4}>支付环节: </Col>
+            <Col>订单确认后支付</Col>
+          </Row>
+          <Row>
+            <Col className={style.fontGray} span={4}>支付方式: </Col>
+            <Col>订单确认后支付</Col>
+          </Row>
+          <Row>
+            <Col className={style.fontGray} span={4}>支付渠道: </Col>
+            <Col>订单确认后支付</Col>
+          </Row>
+        </TabPane>
+      </Tabs>
+    </MellowCard>
+  )
+}
+
+OrderPayTabs.defaultProps = {}
+
+export default OrderPayTabs
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderProductTable/index.less

+.cancel {
+  color: #909399;
+  font-size: 12px;
+  cursor: pointer;
+  margin: 0 4px;
+}
+.confirm {
+  color: #00B37A;
+  font-size: 12px;
+  cursor: pointer;
+}
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderProductTable/index.tsx

+import React, { useContext, useState, useRef, useEffect } from 'react'
+import { StandardTable } from 'god'
+import { Card, Table, Form, Input, Row, Col, Button, Modal } from 'antd'
+import { OrderDetailContext } from '../../context'
+import ProductTableCell, { ProductEditableRow } from '../productTableCell'
+import { EditOutlined, SettingOutlined } from '@ant-design/icons'
+import style from './index.less'
+import { PublicApi } from '@/services/api'
+import styled from 'styled-components'
+import ModalForm from '@/components/ModalForm'
+import { createFormActions } from '@formily/antd'
+import MellowCard from '@/components/MellowCard'
+
+export interface OrderProductTableProps {}
+
+// 订单商品cell切换
+const EditableContext = React.createContext<any>({});
+
+interface Item {
+  key: string;
+  name: string;
+  age: string;
+  address: string;
+}
+
+interface EditableRowProps {
+  index: number;
+}
+
+const RowStyle = styled(props => <Row style={{marginTop: 12}} justify='end' {...props}>
+  {props.children}
+</Row>)`
+  .ant-col {
+    text-align: center
+  }
+  .ant-col div {
+    margin-bottom: 12px;
+  }
+`
+
+const modalPriceActions = createFormActions()
+// 总计金额联动框
+export const MoneyTotalBox = ({ dataSource }) => {
+  const { orderProductRequests = [], receiverAddressId  } = dataSource || {}
+  const sum = orderProductRequests.reduce((prev, next) => prev + parseInt((next.price || 0)), 0)
+  const modelRef = useRef<any>({})
+  const [freePrice, setFreePrice] = useState<number>(0)
+  const handleSetting = () => {
+    modelRef.current.setVisible(true)
+  }
+
+  const handleConfirm = () => {
+    setFreePrice(parseInt(modalPriceActions.getFieldValue('freePrice') || 0))
+    modelRef.current.setVisible(false)
+  }
+
+  useEffect(() => {
+    // 存在商品 并且有选择收货地址，则开始计算运费
+    if (orderProductRequests && orderProductRequests.length > 0 && receiverAddressId) {
+      // 筛选配送方式为物流的商品并且使用了运费模板
+      const logsiticsDataMaps = orderProductRequests.filter(v => v.logistics && v.logistics.useTemplate && v.logistics.deliveryType === 1)
+      if (logsiticsDataMaps.length > 0) {
+        PublicApi.postLogisticsFreightRemoteAddDetail({
+          orderProductList: logsiticsDataMaps.map(v => ({
+            templateId: v.templateId,
+            weight: v.weight
+          })),
+          receiverAddressId
+        }, {ttl: 10 * 1000, useCache: true, ctlType: 'none'}).then(res => {
+          if (res.code === 1000) {
+            setFreePrice(res.data)
+          }
+        })
+      }
+    }
+  }, [orderProductRequests])
+  return <RowStyle>
+    <Col span={2}>
+      <div>合计金额</div>
+      <div>{sum}</div>
+    </Col>
+    <Col span={2}>
+      <div>运费 <SettingOutlined style={{marginLeft: 8}} onClick={handleSetting}/></div>
+      <div>{freePrice}</div>
+    </Col>
+    <Col span={2}>
+      <div>总计金额</div>
+      <div>{sum + freePrice}</div>
+    </Col>
+    <ModalForm
+      modalTitle='设置运费'
+      currentRef={modelRef}
+      initialValues={freePrice}
+      schema={{
+        type: 'object',
+        properties: {
+          NO_SUBMIT_LAYOUT: {
+            type: 'object',
+            "x-component": 'mega-layout',
+            "x-component-props": {
+              labelAlign: 'top'
+            },
+            properties: {
+              freePrice: {
+                type: 'string',
+                title: '设置运费',
+                "x-props": {
+                  addonBefore: '￥'
+                }
+              }
+            }
+          }
+        }
+      }}
+      actions={modalPriceActions}
+      confirm={handleConfirm}
+    >
+
+    </ModalForm>
+  </RowStyle>
+}
+
+const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+
+interface EditableCellProps {
+  title: React.ReactNode;
+  editable: boolean;
+  children: React.ReactNode;
+  dataIndex: string;
+  record: Item;
+  handleSave: (record: Item) => void;
+}
+
+const EditableCell: React.FC<EditableCellProps> = ({
+  title,
+  editable,
+  children,
+  dataIndex,
+  record,
+  handleSave,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef<any>({});
+  const form = useContext(EditableContext);
+
+  useEffect(() => {
+    if (editing) {
+      inputRef.current.focus();
+    }
+  }, [editing]);
+
+  const toggleEdit = () => {
+    setEditing(!editing);
+    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+  };
+  const save = async e => {
+    try {
+      const values = await form.validateFields();
+      values.price = parseInt(values.price)
+      toggleEdit();
+      handleSave({ ...record, ...values });
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  };
+
+  const cancel = () => {
+    console.log('cancel')
+    setEditing(false)
+  }
+
+  let childNode = children;
+
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item
+        style={{ margin: 0, width: 140 }}
+        name={dataIndex}
+        rules={[
+          {
+            required: true,
+            message: `单价是必填的`,
+          },
+        ]}
+      >
+        <Input type='number' ref={inputRef} onBlur={save} onPressEnter={save}/>
+      </Form.Item>
+    ) : (
+      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
+        {children}
+        <EditOutlined/>
+      </div>
+    );
+  }
+
+  return <td {...restProps}>{childNode}</td>;
+};
+
+const OrderProductTable:React.FC<OrderProductTableProps> = (props) => {
+  const { ctl, data } = useContext(OrderDetailContext)
+  const { orderProductRequests = [] } = data || {}
+
+  const productComponents = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell
+    }
+  }
+
+  const asyncGetMemberPrice = async (asyncData: any[]) => {
+    return await Promise.all(asyncData.filter(v => v.memberPrice === undefined).map(async v =>  {
+      const {code, data} = await PublicApi.getMemberManageUpperCreditParamGet({
+        parentMemberId: v.memberId,
+        parentMemberRoleId: v.memberRoleId
+      }, {ttl: 60 * 1000, useCache: true})
+      return code === 1000 ? { value: (data.parameter * 100) + '%', id: v.id } : { value: '', id: 0 }
+    }
+    ))
+  }
+
+  useEffect(() => {
+    // 过滤 会员折扣不存在的列表
+    const hasPriceList = orderProductRequests.filter(v => !v.memberPrice)
+    if (hasPriceList.length > 0) {
+      asyncGetMemberPrice(hasPriceList).then((asyncData) => {
+        const newData = orderProductRequests.map((v, i) => {
+          if (!v.memberPrice) {
+            v.memberPrice = asyncData.find(j => j.id === v.id)?.value || ''
+          }
+          return v
+        })
+
+        ctl.setData({
+          ...data,
+          orderProductRequests: newData
+        })
+      })
+    }
+  }, [orderProductRequests])
+
+  const handleSave = row => {
+    const newData = [...orderProductRequests];
+    const index = newData.findIndex(item => row.key === item.key);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+    ctl.setData({
+      ...data,
+      orderProductRequests: newData
+    })
+  };
+
+  const productInfoColumns: any[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+    },
+    {
+      title: '品类',
+      dataIndex: 'customerCategoryName',
+      align: 'center',
+      key: 'customerCategoryName',
+    },
+    {
+      title: '品牌',
+      dataIndex: 'brandName',
+      align: 'center',
+      key: 'brandName',
+    },
+    {
+      title: '单位',
+      dataIndex: 'unit',
+      align: 'center',
+      key: 'unit',
+    },
+    {
+      title: '单价（元）',
+      dataIndex: 'price',
+      align: 'left',
+      key: 'price',
+      editable: true
+    },
+    {
+      title: '会员折扣',
+      dataIndex: 'memberPrice',
+      align: 'center',
+      key: 'memberPrice',
+      render: (text, record) => record.isMemberPrice ? (text + '%') : null
+    },
+    {
+      title: '采购数量',
+      dataIndex: 'purchaseCount',
+      align: 'center',
+      key: 'purchaseCount'
+    },
+    {
+      title: '含税',
+      dataIndex: 'none',
+      align: 'center',
+      key: 'none',
+    },
+    {
+      title: '金额',
+      dataIndex: 'price',
+      align: 'center',
+      key: 'price',
+    },
+    // 接口调用
+    {
+      title: '配送方式',
+      dataIndex: 'logistics',
+      align: 'center',
+      key: 'logistics',
+      render: text => (text && text.render) || ''
+    },
+    {
+      title: '仓位库存扣减记录',
+      dataIndex: 'record',
+      align: 'center',
+      key: 'record',
+      // @todo 尚未实现, 需UI设计
+      render: text => <Button type='link'>查看(未实现)</Button>
+    },
+  ]
+
+  
+
+  const columns = productInfoColumns.map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: record => ({
+        record,
+        editable: col.editable,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        handleSave: handleSave,
+      }),
+    };
+  });
+  return (
+    <MellowCard title='订单商品' style={{marginTop: 24}} bordered={false}>
+      <Table
+        columns={columns}
+        dataSource={orderProductRequests}
+        components={productComponents}
+        rowKey='id'
+        pagination={false}
+      />
+      <MoneyTotalBox dataSource={data}/>
+    </MellowCard>
+  )
+}
+
+OrderProductTable.defaultProps = {}
+
+export default OrderProductTable
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/components/orderTransformRecord/index.tsx

+import React, { useContext } from 'react'
+import { Tabs, Table } from 'antd'
+import StatusColors from '../../../components/StatusColors'
+import { formatTimeString } from '@/utils'
+import { OrderDetailContext } from '../../context'
+import MellowCard from '@/components/MellowCard'
+
+export interface OrderTransformRecordProps {}
+
+const outOrderCols: any[] = [
+  {
+    title: '流转顺序号',
+    dataIndex: 'no',
+    align: 'center',
+    key: 'no',
+    render: (_, __, index: number) => index + 1
+  },
+  {
+    title: '操作角色',
+    dataIndex: 'roleName',
+    align: 'center',
+    key: 'roleName',
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    align: 'center',
+    key: 'state',
+    render: text => <StatusColors status={text} type='out'/>
+    // @todo 需传递工作流状态重新render
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    key: 'operation',
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'operationTime',
+    align: 'center',
+    key: 'operationTime',
+    render: time => formatTimeString(time)
+  },
+  {
+    title: '审核意见',
+    dataIndex: 'auditOpinion',
+    align: 'center',
+    key: 'auditOpinion',
+  },
+]
+const sideOrderCols: any[] = [
+  {
+    title: '流转记录',
+    dataIndex: 'no',
+    align: 'center',
+    key: 'no',
+    render: (_, __, index: number) => index + 1
+  },
+  {
+    title: '操作人',
+    dataIndex: 'roleName',
+    align: 'center',
+    key: 'roleName',
+  },
+  {
+    title: '部门',
+    dataIndex: 'department',
+    align: 'center',
+    key: 'department',
+  },
+  {
+    title: '职位',
+    dataIndex: 'position',
+    align: 'center',
+    key: 'position',
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    align: 'center',
+    key: 'state',
+    render: text => <StatusColors status={text} type='inside'/>
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    key: 'operation',
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'operationTime',
+    align: 'center',
+    key: 'operationTime',
+  },
+  {
+    title: '审核意见',
+    dataIndex: 'auditOpinion',
+    align: 'center',
+    key: 'auditOpinion',
+  },
+]
+// 订单流转记录
+const OrderTransformRecord:React.FC<OrderTransformRecordProps> = (props) => {
+  const { data } = useContext(OrderDetailContext)
+  const { externalProcurementOrderLogResponses, interiorProcurementOrderLogResponses } = data
+  return (
+    <MellowCard style={{marginTop: 24}} bordered={false}>
+      <Tabs defaultActiveKey="1" animated={false}>
+        <Tabs.TabPane tab='外部订单流转记录' key="1">
+          <Table
+            columns={outOrderCols}
+            dataSource={externalProcurementOrderLogResponses}
+            pagination={false}
+            rowKey="id"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab='内部订单流转记录' key="2">
+          <Table
+            columns={outOrderCols}
+            dataSource={interiorProcurementOrderLogResponses}
+            pagination={false}
+            rowKey="id"
+          />
+        </Tabs.TabPane>
+      </Tabs>
+    </MellowCard>
+  )
+}
+
+OrderTransformRecord.defaultProps = {}
+
+export default OrderTransformRecord
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/context/index.ts

+import { createContext } from 'react';
+
+export const OrderDetailContext = createContext<any>({})
\ No newline at end of file

src/pages/transaction/saleOrder/orderDetail/index.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import OrderDetailHeader from '../../components/OrderDetailHeader'
 import { Button, Row, Col } from 'antd'
 import { Link } from 'umi'
 import { OrderModalType } from '@/constants'
 import { orderTypeLabel } from './constant'
 import { formatTimeString } from '@/utils'
-import { usePageStatus } from '@/hooks/usePageStatus'
+import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
 import { PublicApi } from '@/services/api'
+import AuditProcess from '@/components/AuditProcess'
+import { findLastIndexFlowState } from '../utils'
+import OrderDetailWrapper from '../../components/OrderDetailWrapper'
+import { GlobalConfig } from '@/global/config'
+import OrderProductTable from './components/orderProductTable'
+import { OrderDetailContext } from './context'
+import MellowCard from '@/components/MellowCard'
+import OrderMergeInfo from './components/orderMergeInfo'
+import OrderTransformRecord from './components/orderTransformRecord'
+import OrderPayTabs from './components/orderPayTabs'
 
 export interface CommonOrderDetailProps {}
 
-const mockData = {
+const mockList = {
   headerTitle: {
     picName: '单',
     titleLabel: '订单号: ',
@@ -34,9 +44,27 @@ const mockData = {
   },
   extraRight: <Button type='primary'>提交审核</Button>
 }
+
+const mockData = {
+  orderNo: '123',
+  quotationNo: 432,
+  orderModel: 5,
+  externalWorkflowFlowRecordLogResponses: [
+    {state: 1, roleName: "待定", isExecute: 1, operationalProcess: "新增订单"},
+    {state: 2, roleName: "待定", isExecute: 0, operationalProcess: "审核订单"},
+    {state: 3, roleName: "待定", isExecute: 0, operationalProcess: "审核订单"},
+    {state: 4, roleName: "待定", isExecute: 0, operationalProcess: "提交订单"}
+  ],
+  interiorWorkflowFlowRecordLogResponses: [
+    {state: 1, roleName: "待定", isExecute: 1, operationalProcess: "新增订单"},
+    {state: 2, roleName: "待定", isExecute: 0, operationalProcess: "审核订单"},
+    {state: 3, roleName: "待定", isExecute: 0, operationalProcess: "审核订单"},
+    {state: 4, roleName: "待定", isExecute: 0, operationalProcess: "提交订单"}
+  ]
+}
 const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
-  const [formData, setFormData] = useState<any>(null)
-  const { id } = usePageStatus()
+  const [formData, setFormData] = useState<any>(mockData)
+  const { id, pageStatus } = usePageStatus()
   useEffect(() => {
     if (id) {
       PublicApi.getOrderPurchaseOrderDetails({id}).then(({data, code}) => {
@@ -46,11 +74,20 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
       })
     }
   }, [])
+
+  const formContext = {
+    data: formData,
+    ctl: {
+      setData: setFormData
+    }
+  }
+
+  const extraRight = <Button type='primary'>提交审核</Button>
   const detailList = [
     { label: '对应报价单号', name: 'quotationNo', span: 8, render: text => <Link to={'/'}>{text}</Link> },
     { label: '订单摘要', name: 'orderThe', span: 8 },
     { label: '供应会员', name: 'supplyMembersName', span: 8, render: text => <Link to={'/'}>{text}</Link> },
-    { label: '下单模式', name: 'orderModel', span: 8, render: text => OrderModalType[text] },
+    { label: '下单模式', name: 'orderModel', span: 8, render: text => GlobalConfig.web.orderMode[text].label },
     { label: '订单类型', name: 'type', span: 8, render: text => orderTypeLabel[text] },
     { label: '下单时间', name: 'createTime', span: 8, render: text => formatTimeString(text) },
     { label: '外部状态', name: 'externalState', span: 8 },
@@ -63,7 +100,34 @@ const CommonOrderDetail:React.FC<CommonOrderDetailProps> = (props) => {
   } : null
   return formData ? (
     <div>
-      <OrderDetailHeader headerTitle={headerTiTle} detailList={detailList} detailData={formData}/>
+      <OrderDetailContext.Provider value={formContext}>
+        <OrderDetailHeader headerTitle={headerTiTle} detailList={detailList} detailData={formData} extraRight={extraRight}/>
+        <OrderDetailWrapper>
+          <div className='gray-wrap'>
+            {/* 工作流进度 */}
+            { pageStatus !== PageStatus.ADD && formData && <AuditProcess 
+              customTitleKey='operationalProcess'
+              customKey='state'
+              outerVerifyCurrent={findLastIndexFlowState(formData.externalWorkflowFlowRecordLogResponses)} 
+              innerVerifyCurrent={findLastIndexFlowState(formData.interiorWorkflowFlowRecordLogResponses)} 
+              outerVerifySteps={formData.externalWorkflowFlowRecordLogResponses} 
+              innerVerifySteps={formData.interiorWorkflowFlowRecordLogResponses}
+            ></AuditProcess> }
+
+            {/* 商品列表 */}
+            <OrderProductTable/>
+
+            {/* 支付信息 todo */}
+            <OrderPayTabs/>
+            
+            {/* 杂项 */}
+            <OrderMergeInfo/>
+
+            {/* 订单流转记录 */}
+            <OrderTransformRecord/>
+          </div>
+        </OrderDetailWrapper>
+      </OrderDetailContext.Provider>
     </div>
   ) : null
 }

src/utils/index.tsx

@@ -13,7 +13,7 @@ export function isObject(obj: any) {
   return Object.prototype.toString.call(obj) === '[object Object]'
 }
 
-export function formatTimeString(date, format: string = 'YYYY-MM-DD HH:MM:SS') {
+export function formatTimeString(date, format: string = 'YYYY-MM-DD HH:mm:ss') {
   return date ? moment(date).format(format) : ''
 }