🦄 refactor: 物流能力重构

config/routes/logisticsAbilityRoute/index.tsx

+import logisticsBillQuery from './logisticsBillQuery';
+import logisticsBillManage from './logisticsBillManage';
+
+const logisticsAbilityRoute = {
+  path: '/memberCenter/logisticsAbility',
+  name: '物流能力',
+  icon: 'logistics',
+  routes: [
+    /** 物流单提交 */
+    ...logisticsBillQuery,
+    /** 物流单处理 */
+    ...logisticsBillManage,
+  ],
+}
+
+export default logisticsAbilityRoute;

config/routes/logisticsAbilityRoute/logisticsBillManage.ts

+/**
+ * @description: 物流能力 物流单处理
+ * @param {type}
+ * @return {type}
+*/
+
+export default [
+  {
+    path: '/memberCenter/logisticsAbility/logisticsBillManage',
+    name: '物流单处理',
+    routes: [
+      {
+        /** 物流单查询 */
+        path: '/memberCenter/logisticsAbility/logisticsBillManage/logisticsBillQuery',
+        name: '物流单查询',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillManage/logisticsBillQuery',
+      },
+      {
+        /** 物流单查询 - 详情 */
+        path: '/memberCenter/logisticsAbility/logisticsBillManage/logisticsBillQuery/preview',
+        name: '物流单查询详情',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillManage/detail',
+        hideInMenu: true,
+        noMargin: true,
+      },
+      {
+        /** 待确认物流单 */
+        path: '/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill',
+        name: '待提交物流单',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill',
+      },
+      {
+        /** 待确认物流单 - 详情 */
+        path: '/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill/preview',
+        name: '待确认物流单详情',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillManage/detail',
+        hideInMenu: true,
+        noMargin: true,
+      },
+      {
+        /** 待确认物流单 - 详情 */
+        path: '/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill/detail',
+        name: '待确认物流单详情',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillManage/detail',
+        hideInMenu: true,
+        noMargin: true,
+      },
+    ]
+  }
+]

config/routes/logisticsAbilityRoute/logisticsBillQuery.ts

+/**
+ * @description: 物流能力 物流单提交
+ * @param {type}
+ * @return {type}
+*/
+
+export default [
+  {
+    path: '/memberCenter/logisticsAbility/logisticsBillSubmit',
+    name: '物流单提交',
+    routes: [
+      {
+        /** 物流单查询 */
+        path: '/memberCenter/logisticsAbility/logisticsBillSubmit/logisticsBillQuery',
+        name: '物流单查询',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillSubmit/logisticsBillQuery',
+      },
+      {
+        /** 物流单查询 - 详情 */
+        path: '/memberCenter/logisticsAbility/logisticsBillSubmit/logisticsBillQuery/preview',
+        name: '物流单查询详情',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillSubmit/detail',
+        hideInMenu: true,
+        noMargin: true,
+      },
+      {
+        /** 待提交物流单 */
+        path: '/memberCenter/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill',
+        name: '待提交物流单',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill',
+      },
+      {
+        /** 待提交物流单 - 详情 */
+        path: '/memberCenter/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill/preview',
+        name: '待提交物流单详情',
+        component: '@/pages/transaction/logisticsAbility/logisticsBillSubmit/detail',
+        hideInMenu: true,
+        noMargin: true,
+      },
+    ]
+  }
+]

src/pages/transaction/components/detailLayout/components/generalLayout/index.tsx

 /** 详情通用 - 基本信息 */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Row, Col } from 'antd';
 import Card from '../../../card';
 import style from './index.less';
@@ -11,17 +11,20 @@ export interface GeneraInfoProps {
   anchor?: string,
   /** 标题 */
   title: string,
+  /** extra */
+  extra?: ReactNode,
 }
 
 const count = 0;
 
 const GeneralLayout: React.FC<GeneraInfoProps> = (props: any) => {
-  const { effect, anchor, title } = props;
+  const { effect, anchor, title, extra } = props;
 
   return (
     <Card
       id={anchor}
       title={title}
+      extra={extra}
     >
       <Row gutter={[8, 8]}>
         {effect.length > count && effect.map((item, index) => (

src/pages/transaction/components/detailLayout/components/recordLyout/index.tsx

@@ -28,7 +28,7 @@ const RecordLayout: React.FC<ProgressProps> = (props: any) => {
   return (
     <Card
       id='recordLyout'
-      title='流转进度'
+      title='流转记录'
       extra={
         <Radio.Group
           onChange={(e) => setLogStatus(e.target.value)}

src/pages/transaction/dealAbility/confirmOffer/waitAuditInquiryOne/index.tsx

@@ -23,7 +23,6 @@ const WaitAuditInquiryOne = () => {
       setRowKeys([])
     }
   }
-
   const columns: ColumnType<any>[] = [
     {
       title: '报价单号',

src/pages/transaction/logisticsAbility/logisticsBillManage/detail/index.tsx

+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { Button, } from 'antd';
+import { history } from 'umi';
+import { ColumnType } from 'antd/lib/table/interface';
+import PeripheralLayout from '@/pages/transaction/components/detailLayout';
+import { Context } from '@/pages/transaction/components/detailLayout/components/context';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import ProgressLayout from '@/pages/transaction/components/detailLayout/components/progressLayout';
+import BasicLayout from '@/pages/transaction/components/detailLayout/components/basicLayout';
+import ListLayout from '@/pages/transaction/components/detailLayout/components/listLayout';
+import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
+import FreightLayout from '@/pages/transaction/components/detailLayout/components/generalLayout'
+import { CheckCircleOutlined } from '@ant-design/icons';
+import FreightEdit from '../freightEdit';
+
+const TABLINK = [
+  { id: 'progressLayout', title: '流转进度' },
+  { id: 'basicLayout', title: '基本信息' },
+  { id: 'logisticsBillLayout', title: '物流单明细' },
+  { id: 'freightLayout', title: '运费' },
+  { id: 'recordLyout', title: '流转记录' },
+]
+
+const LogisticsBillManageDetail = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const {
+    query: {
+      id,
+      code
+    },
+    pathname,
+  } = history.location;
+  const [path] = useState(pathname.split('/')[pathname.split('/').length - 1]);
+  const [dataSource, setDataSource] = useState<any>({});
+  const [basicEffect, setBasicEffect] = useState<any>([]);
+  const [freightEffect, setFreightEffect] = useState<any>([]);
+  const [freightVisible, setFreightVisible] = useState<boolean>(false);
+
+  const handleBasicEffect = (data: any) => {
+    setBasicEffect([
+      {
+        col: [
+          { label: '物流单号', extra: data.logisticsOrderNo },
+          { label: '单据摘要', extra: data.digest },
+          { label: '外部状态', extra: data.statusName },
+        ]
+      },
+      {
+        col: [
+          { label: '对应发货单号', extra: data.shipmentOrderCode },
+          { label: '对应订单/售后单', extra: data.relevanceOrderCode },
+          { label: '发货方', extra: data.shipperMemberName },
+          { label: '发货地址', extra: data.shipperFullAddress },
+        ]
+      },
+      {
+        col: [
+          { label: '收货方', extra: data.receiverName },
+          { label: '收货地址', extra: data.receiverFullAddress },
+          { label: '单据时间', extra: format(data.invoicesTime) },
+        ]
+      },
+    ])
+  }
+
+  const handleFreightEffect = (data: any) => {
+    setFreightEffect([
+      {
+        col: [
+          { label: '含税/税率', extra: `${data.taxInclusive}/${data.taxRate}` },
+          { label: '运费', extra: `￥${data.freightPrice && data.freightPrice.toFixed(2)}` },
+          { label: '结算方式', extra: data.settlementWay },
+        ]
+      },
+    ])
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '商品ID/名称',
+      key: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '品类',
+      key: 'category',
+      dataIndex: 'category',
+    },
+    {
+      title: '品牌',
+      key: 'brand',
+      dataIndex: 'brand',
+    },
+    {
+      title: '数量/单位',
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>箱数<br />合计:{dataSource.totalCarton}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>重量(KG)<br />合计:{dataSource.totalWeight}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>体积(M3)<br />合计:{dataSource.totalVolume}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+  ]
+
+  const fetchData = useCallback(async () => {
+    await PublicApi.getLogisticsOrderWaitConfirmGet({ id, code }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      let { data } = res;
+      let externalLogs: any = [];
+      let externalLogStates: any = []
+      data.verifySteps.forEach((item: any) => {
+        externalLogStates.push({
+          state: item.step,
+          stateName: null,
+          // isExecute: item.isExecute,
+          operationalProcess: item.stepName,
+          roleName: item.roleName,
+        })
+      })
+      data.history.forEach((item: any) => {
+        externalLogs.push({
+          id: item.id,
+          roleName: item.operatorRoleName,
+          state: item.status,
+          stateName: item.statusName,
+          operation: item.operation,
+          createTime: item.createTime,
+          auditOpinion: item.remark,
+        })
+      })
+      data.externalLogs = externalLogs;
+      data.externalLogStates = externalLogStates;
+      setDataSource(data)
+      handleBasicEffect(data)
+      handleFreightEffect(data)
+    })
+  }, [])
+
+  useEffect(() => {
+    fetchData();
+  }, [])
+
+  return (
+    <Context.Provider value={dataSource}>
+      <PeripheralLayout
+        no={dataSource.logisticsOrderNo}
+        detail={dataSource.digest}
+        tabLink={TABLINK}
+        effect={
+          <>
+            {path === 'detail'
+              && (
+                <Button
+                  type='primary'
+                >
+                  <CheckCircleOutlined />
+                  单据确认
+                </Button>
+              )}
+          </>
+        }
+        components={
+          <Fragment>
+            <ProgressLayout />
+            <BasicLayout effect={basicEffect} />
+            <ListLayout
+              id={id}
+              anchor="logisticsBillLayout"
+              title="物流单明细"
+              columns={columns}
+              fetch={PublicApi.getTransactionEnquiryProductList}
+            />
+            <FreightLayout
+              anchor="freightLayout"
+              title="运费"
+              effect={freightEffect}
+              extra={<>
+                {path === 'detail'
+                  && (
+                    <Button
+                      type='link'
+                      onClick={() => setFreightVisible(true)}
+                    >
+                      编辑
+                    </Button>
+                  )}
+              </>}
+            />
+            <RecordLyout />
+          </Fragment>
+        }
+      />
+      <FreightEdit visible={freightVisible} />
+    </Context.Provider>
+  )
+}
+
+export default LogisticsBillManageDetail

src/pages/transaction/logisticsAbility/logisticsBillManage/freightEdit/index.tsx

+import React from 'react';
+import { Modal, Form, Input, Checkbox } from 'antd';
+
+interface FreightEditProps {
+  /** 显示隐藏 */
+  visible: boolean
+}
+
+const FreightEdit: React.FC<FreightEditProps> = (props: any) => {
+  const { visible } = props;
+  return (
+    <Modal
+      visible={visible}
+    >
+      <Form layout="vertical">
+        <Form.Item label="是否含税">
+          <Checkbox checked>是</Checkbox>
+        </Form.Item>
+        <Form.Item label="税率">
+          <Input
+            type='number'
+            addonAfter='%'
+            maxLength={25}
+          />
+        </Form.Item>
+        <Form.Item label="运费">
+          <Input
+            type='number'
+            addonBefore="¥"
+            maxLength={25}
+          />
+        </Form.Item>
+        <Form.Item label="结算方式">
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+export default FreightEdit;

src/pages/transaction/logisticsAbility/logisticsBillManage/logisticsBillQuery/index.tsx

+import React from 'react';
+import { Tag } from 'antd';
+import Table from '@/pages/transaction/components/TableLayout';
+import { ColumnType } from 'antd/lib/table/interface';
+import { LOGISTICSBILLQUERYSCHEMA, EXTERNALSTATE_COLOR } from '../schema';
+import { PublicApi } from '@/services/api';
+import moment from 'moment';
+import EyePreview from '@/components/EyePreview';
+
+const LogisticsBillQuery = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '物流单号',
+      key: 'logisticsOrderNo',
+      dataIndex: 'logisticsOrderNo',
+      render: (text: any, record: any) => <EyePreview
+        url={`/memberCenter/logisticsAbility/logisticsBillManage/logisticsBillQuery/preview?id=${record.id}`}>{text}</EyePreview>
+    },
+    {
+      title: '对应订单号',
+      key: 'relevanceOrderCode',
+      dataIndex: 'relevanceOrderCode',
+    },
+    {
+      title: '发货方',
+      key: 'shipperMemberName',
+      dataIndex: 'shipperMemberName',
+    },
+    {
+      title: '收货方',
+      key: 'receiverMemberName',
+      dataIndex: 'receiverMemberName',
+    },
+    {
+      title: '总箱数',
+      key: 'totalCarton',
+      dataIndex: 'totalCarton',
+    },
+    {
+      title: '总重量',
+      key: 'totalWeight',
+      dataIndex: 'totalWeight',
+    },
+    {
+      title: '总体积',
+      key: 'totalVolume',
+      dataIndex: 'totalVolume',
+    },
+    {
+      title: '单据时间',
+      key: 'invoicesTime',
+      dataIndex: 'invoicesTime',
+      render: (text) => format(text)
+    },
+    {
+      title: '外部状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (text, data) => <Tag color={EXTERNALSTATE_COLOR(text)}>{data.statusName}</Tag>
+    },
+
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      schema={LOGISTICSBILLQUERYSCHEMA}
+      effects="logisticsOrderNo"
+      fetch={PublicApi.getLogisticsOrderConfirmPage}
+      // externalStatusFetch={PublicApi.getLogisticsOrderSubmitStatusList}
+    />
+  )
+}
+
+export default LogisticsBillQuery

src/pages/transaction/logisticsAbility/logisticsBillManage/schema.tsx

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { PublicApi } from '@/services/api';
+
+/** 快递单查询 */
+export const LOGISTICSBILLQUERYSCHEMA: ISchema = {
+  type: 'object',
+  properties: {
+    megalayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        logisticsOrderNo: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-mega-props': {},
+          'x-component-props': {
+            placeholder: '物流单号',
+            align: 'flex-left',
+          }
+        }
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          justifyContent: 'flex-start',
+          flexWrap: 'nowrap'
+        },
+        colStyle: {//改变间隔
+          marginRight: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: 'object',
+          'x-component': 'mega-layout',
+          'x-mega-props': {
+            span: 5
+          },
+          'x-component-props': {
+            inline: true
+          },
+          properties: {
+            shipperMemberName: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '发货方',
+                style: {
+                  width: 160
+                }
+              },
+            },
+            status: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态',
+                style: {
+                  width: 160
+                }
+              },
+              enum: []
+            },
+            '[invoicesTimeStart,invoicesTimeEnd]': {
+              type: 'string',
+              'x-component': 'dateSelect',
+              'x-component-props': {
+                placeholder: '单据时间',
+              }
+            },
+          }
+        },
+        sumbit: {
+          'x-component': 'Submit',
+          'x-mega-props': {
+            span: 1
+          },
+          'x-component-props': {
+            children: '查询'
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 待提交物流单 */
+export const WAITSBUMITLOGISTICSBILLSCHEMA: ISchema = {
+  type: "object",
+  properties: {
+    megalayout: {
+      type: "object",
+      "x-component": "mega-layout",
+      "x-component-props": {
+        grid: true
+      },
+      properties: {
+        ctl: {
+          type: "object",
+          "x-component": "Children",
+          "x-component-props": {
+            children: "{{controllerBtns}}"
+          }
+        },
+        logisticsOrderNo: {
+          type: "string",
+          "x-component": "Search",
+          "x-mega-props": {},
+          "x-component-props": {
+            placeholder: "物流单号"
+          }
+        }
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: "object",
+      "x-component": "flex-layout",
+      "x-component-props": {
+        rowStyle: {
+          flexWrap: "nowrap"
+        },
+        colStyle: {
+          marginLeft: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: "object",
+          "x-component": "mega-layout",
+          "x-mega-props": {
+            span: 5
+          },
+          "x-component-props": {
+            inline: true
+          },
+          properties: {
+            relevanceOrderCode: {
+              type: "string",
+              "x-component-props": {
+                placeholder: "对应订单号"
+              }
+            },
+            companyId: {
+              type: 'string',
+              'x-component': 'Select',
+              'x-component-props': {
+                placeholder: '物流服务商',
+                className: 'fixed-ant-selected-down',
+                fetchSearch: PublicApi.getLogisticsSelectListMemberCompanyQuery,
+                style: {
+                  width: 160
+                }
+              },
+            },
+            status: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态',
+                style: {
+                  width: 160
+                }
+              },
+              enum: []
+            },
+            '[invoicesTimeStart,invoicesTimeEnd]': {
+              type: 'string',
+              'x-component': 'dateSelect',
+              'x-component-props': {
+                placeholder: '单据时间',
+              }
+            },
+          }
+        },
+        sumbit: {
+          "x-component": "Submit",
+          "x-mega-props": {
+            span: 1
+          },
+          "x-component-props": {
+            children: "查询"
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 外部状态颜色 */
+export const EXTERNALSTATE_COLOR = (text) => {
+  switch (Number(text)) {
+    case 1:
+    case 2:
+      return 'processing';
+    case 3:
+      return 'error';
+    case 4:
+      return 'success';
+    default:
+      return 'default'
+  }
+}

src/pages/transaction/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill/index.tsx

+import React from 'react';
+import { Tag, Button } from 'antd';
+import { history } from 'umi';
+import Table from '@/pages/transaction/components/TableLayout';
+import { ColumnType } from 'antd/lib/table/interface';
+import { LOGISTICSBILLQUERYSCHEMA, EXTERNALSTATE_COLOR } from '../schema';
+import { PublicApi } from '@/services/api';
+import moment from 'moment';
+import EyePreview from '@/components/EyePreview';
+
+const WaitConfirmLogisticsBill = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '物流单号',
+      key: 'logisticsOrderNo',
+      dataIndex: 'logisticsOrderNo',
+      render: (text: any, record: any) => <EyePreview
+        url={`/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill/preview?id=${record.id}`}>{text}</EyePreview>
+    },
+    {
+      title: '对应订单号',
+      key: 'relevanceOrderCode',
+      dataIndex: 'relevanceOrderCode',
+    },
+    {
+      title: '发货方',
+      key: 'shipperMemberName',
+      dataIndex: 'shipperMemberName',
+    },
+    {
+      title: '收货方',
+      key: 'receiverMemberName',
+      dataIndex: 'receiverMemberName',
+    },
+    {
+      title: '总箱数',
+      key: 'totalCarton',
+      dataIndex: 'totalCarton',
+    },
+    {
+      title: '总重量',
+      key: 'totalWeight',
+      dataIndex: 'totalWeight',
+    },
+    {
+      title: '总体积',
+      key: 'totalVolume',
+      dataIndex: 'totalVolume',
+    },
+    {
+      title: '单据时间',
+      key: 'invoicesTime',
+      dataIndex: 'invoicesTime',
+      render: (text) => format(text)
+    },
+    {
+      title: '外部状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (text, data) => <Tag color={EXTERNALSTATE_COLOR(text)}>{data.statusName}</Tag>
+    },
+    {
+      title: '操作',
+      key: 'confirm',
+      dataIndex: 'confirm',
+      render: (text, data) => text && <Button type='link' onClick={() => history.push(`/memberCenter/logisticsAbility/logisticsBillManage/waitConfirmLogisticsBill/detail?id=${data.id}`)}>确认</Button>
+    },
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      schema={LOGISTICSBILLQUERYSCHEMA}
+      effects="logisticsOrderNo"
+      fetch={PublicApi.getLogisticsOrderWaitConfirmPage}
+      // externalStatusFetch={PublicApi.getLogisticsOrderSubmitStatusList}
+    />
+  )
+}
+
+export default WaitConfirmLogisticsBill

src/pages/transaction/logisticsAbility/logisticsBillSubmit/detail/index.tsx

+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { history } from 'umi';
+import { ColumnType } from 'antd/lib/table/interface';
+import PeripheralLayout from '@/pages/transaction/components/detailLayout';
+import { Context } from '@/pages/transaction/components/detailLayout/components/context';
+import moment from 'moment';
+import { PublicApi } from '@/services/api';
+import ProgressLayout from '@/pages/transaction/components/detailLayout/components/progressLayout';
+import BasicLayout from '@/pages/transaction/components/detailLayout/components/basicLayout';
+import ListLayout from '@/pages/transaction/components/detailLayout/components/listLayout';
+import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
+import FreightLayout from '@/pages/transaction/components/detailLayout/components/generalLayout'
+
+const TABLINK = [
+  { id: 'progressLayout', title: '流转进度' },
+  { id: 'basicLayout', title: '基本信息' },
+  { id: 'logisticsBillLayout', title: '物流单明细' },
+  { id: 'freightLayout', title: '运费' },
+  { id: 'recordLyout', title: '流转记录' },
+]
+
+const LogisticsBillSubmitDetail = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+  const {
+    query: {
+      id,
+      code
+    },
+  } = history.location;
+  const [dataSource, setDataSource] = useState<any>({});
+  const [basicEffect, setBasicEffect] = useState<any>([]);
+  const [freightEffect, setFreightEffect] = useState<any>([]);
+
+  const handleBasicEffect = (data: any) => {
+    setBasicEffect([
+      {
+        col: [
+          { label: '物流单号', extra: data.logisticsOrderNo },
+          { label: '单据摘要', extra: data.digest },
+          { label: '物流服务商', extra: data.companyName },
+          { label: '外部状态', extra: data.statusName },
+        ]
+      },
+      {
+        col: [
+          { label: '对应发货单号', extra: data.shipmentOrderCode },
+          { label: '对应订单/售后单', extra: data.relevanceOrderCode },
+          { label: '发货地址', extra: data.shipperFullAddress },
+        ]
+      },
+      {
+        col: [
+          { label: '收货方', extra: data.receiverName },
+          { label: '收货地址', extra: data.receiverFullAddress },
+          { label: '单据时间', extra: format(data.invoicesTime) },
+        ]
+      },
+    ])
+  }
+
+  const handleFreightEffect = (data: any) => {
+    setFreightEffect([
+      {
+        col: [
+          { label: '含税/税率', extra: `${data.taxInclusive}/${data.taxRate}` },
+          { label: '运费', extra: `￥${data.freightPrice && data.freightPrice.toFixed(2)}` },
+          { label: '结算方式', extra: data.settlementWay },
+        ]
+      },
+    ])
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '商品ID/名称',
+      key: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '品类',
+      key: 'category',
+      dataIndex: 'category',
+    },
+    {
+      title: '品牌',
+      key: 'brand',
+      dataIndex: 'brand',
+    },
+    {
+      title: '数量/单位',
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>箱数<br />合计:{dataSource.totalCarton}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>重量(KG)<br />合计:{dataSource.totalWeight}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+    {
+      title: <>体积(M3)<br />合计:{dataSource.totalVolume}</>,
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount',
+    },
+  ]
+
+  const fetchData = useCallback( async () => {
+    await PublicApi.getLogisticsOrderWaitSubmitGet({ id, code }).then(res => {
+      if (res.code !== 1000) {
+        return;
+      }
+      let { data } = res;
+      let externalLogs: any = [];
+      let externalLogStates: any = []
+      data.verifySteps.forEach((item: any) => {
+        externalLogStates.push({
+          state: item.step,
+          stateName: null,
+          // isExecute: item.isExecute,
+          operationalProcess: item.stepName,
+          roleName: item.roleName,
+        })
+      })
+      data.history.forEach((item: any) => {
+        externalLogs.push({
+          id: item.id,
+          roleName: item.operatorRoleName,
+          state: item.status,
+          stateName: item.statusName,
+          operation: item.operation,
+          createTime: item.createTime,
+          auditOpinion: item.remark,
+        })
+      })
+      data.externalLogs = externalLogs;
+      data.externalLogStates = externalLogStates;
+      setDataSource(data)
+      handleBasicEffect(data)
+      handleFreightEffect(data)
+    })
+  }, [])
+
+  useEffect(() => {
+    fetchData();
+  }, [])
+
+  return (
+    <Context.Provider value={dataSource}>
+      <PeripheralLayout
+        no={dataSource.logisticsOrderNo}
+        detail={dataSource.digest}
+        tabLink={TABLINK}
+        components={
+          <Fragment>
+            <ProgressLayout />
+            <BasicLayout effect={basicEffect} />
+            <ListLayout
+              id={id}
+              anchor="logisticsBillLayout"
+              title="物流单明细"
+              columns={columns}
+              fetch={PublicApi.getTransactionEnquiryProductList}
+            />
+            <FreightLayout anchor="freightLayout" title="运费" effect={freightEffect} />
+            <RecordLyout />
+          </Fragment>
+        }
+      />
+    </Context.Provider>
+  )
+}
+
+export default LogisticsBillSubmitDetail

src/pages/transaction/logisticsAbility/logisticsBillSubmit/logisticsBillQuery/index.tsx

+import React from 'react';
+import { Tag } from 'antd';
+import Table from '@/pages/transaction/components/TableLayout';
+import { ColumnType } from 'antd/lib/table/interface';
+import { LOGISTICSBILLQUERYSCHEMA, EXTERNALSTATE_COLOR } from '../schema';
+import { PublicApi } from '@/services/api';
+import moment from 'moment';
+import EyePreview from '@/components/EyePreview';
+
+const LogisticsBillQuery = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '物流单号',
+      key: 'logisticsOrderNo',
+      dataIndex: 'logisticsOrderNo',
+      render: (text: any, record: any) => <EyePreview
+        url={`/memberCenter/logisticsAbility/logisticsBillSubmit/logisticsBillQuery/preview?id=${record.id}`}>{text}</EyePreview>
+    },
+    {
+      title: '对应订单号',
+      key: 'relevanceOrderCode',
+      dataIndex: 'relevanceOrderCode',
+    },
+    {
+      title: '物流服务商',
+      key: 'companyName',
+      dataIndex: 'companyName',
+    },
+    {
+      title: '收货方',
+      key: 'receiverMemberName',
+      dataIndex: 'receiverMemberName',
+    },
+    {
+      title: '总箱数',
+      key: 'totalCarton',
+      dataIndex: 'totalCarton',
+    },
+    {
+      title: '总重量',
+      key: 'totalWeight',
+      dataIndex: 'totalWeight',
+    },
+    {
+      title: '总体积',
+      key: 'totalVolume',
+      dataIndex: 'totalVolume',
+    },
+    {
+      title: '单据时间',
+      key: 'invoicesTime',
+      dataIndex: 'invoicesTime',
+      render: (text) => format(text)
+    },
+    {
+      title: '外部状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (text, data) => <Tag color={EXTERNALSTATE_COLOR(text)}>{data.statusName}</Tag>
+    },
+
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      schema={LOGISTICSBILLQUERYSCHEMA}
+      effects="logisticsOrderNo"
+      fetch={PublicApi.getLogisticsOrderSubmitPage}
+      // externalStatusFetch={PublicApi.getLogisticsOrderSubmitStatusList}
+    />
+  )
+}
+
+export default LogisticsBillQuery

src/pages/transaction/logisticsAbility/logisticsBillSubmit/schema.tsx

+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { PublicApi } from '@/services/api';
+
+/** 快递单查询 */
+export const LOGISTICSBILLQUERYSCHEMA: ISchema = {
+  type: 'object',
+  properties: {
+    megalayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        logisticsOrderNo: {
+          type: 'string',
+          'x-component': 'Search',
+          'x-mega-props': {},
+          'x-component-props': {
+            placeholder: '物流单号',
+            align: 'flex-left',
+          }
+        }
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          justifyContent: 'flex-start',
+          flexWrap: 'nowrap'
+        },
+        colStyle: {//改变间隔
+          marginRight: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: 'object',
+          'x-component': 'mega-layout',
+          'x-mega-props': {
+            span: 5
+          },
+          'x-component-props': {
+            inline: true
+          },
+          properties: {
+            shipperId: {
+              type: 'string',
+              'x-component': 'Select',
+              'x-component-props': {
+                placeholder: '发货方',
+                className: 'fixed-ant-selected-down',
+                fetchSearch: PublicApi.getLogisticsSelectListShipperSelect,
+                style: {
+                  width: 160
+                }
+              },
+            },
+            status: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态',
+                style: {
+                  width: 160
+                }
+              },
+              enum: []
+            },
+            '[invoicesTimeStart,invoicesTimeEnd]': {
+              type: 'string',
+              'x-component': 'dateSelect',
+              'x-component-props': {
+                placeholder: '单据时间',
+              }
+            },
+          }
+        },
+        sumbit: {
+          'x-component': 'Submit',
+          'x-mega-props': {
+            span: 1
+          },
+          'x-component-props': {
+            children: '查询'
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 待提交物流单 */
+export const WAITSBUMITLOGISTICSBILLSCHEMA: ISchema = {
+  type: "object",
+  properties: {
+    megalayout: {
+      type: "object",
+      "x-component": "mega-layout",
+      "x-component-props": {
+        grid: true
+      },
+      properties: {
+        ctl: {
+          type: "object",
+          "x-component": "Children",
+          "x-component-props": {
+            children: "{{controllerBtns}}"
+          }
+        },
+        logisticsOrderNo: {
+          type: "string",
+          "x-component": "Search",
+          "x-mega-props": {},
+          "x-component-props": {
+            placeholder: "物流单号"
+          }
+        }
+      }
+    },
+    [FORM_FILTER_PATH]: {
+      type: "object",
+      "x-component": "flex-layout",
+      "x-component-props": {
+        rowStyle: {
+          flexWrap: "nowrap"
+        },
+        colStyle: {
+          marginLeft: 20
+        }
+      },
+      properties: {
+        PRO_LAYOUT: {
+          type: "object",
+          "x-component": "mega-layout",
+          "x-mega-props": {
+            span: 5
+          },
+          "x-component-props": {
+            inline: true
+          },
+          properties: {
+            relevanceOrderCode: {
+              type: "string",
+              "x-component-props": {
+                placeholder: "对应订单号"
+              }
+            },
+            companyId: {
+              type: 'string',
+              'x-component': 'Select',
+              'x-component-props': {
+                placeholder: '物流服务商',
+                className: 'fixed-ant-selected-down',
+                fetchSearch: PublicApi.getLogisticsSelectListMemberCompanyQuery,
+                style: {
+                  width: 160
+                }
+              },
+            },
+            status: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '外部状态',
+                style: {
+                  width: 160
+                }
+              },
+              enum: []
+            },
+            '[invoicesTimeStart,invoicesTimeEnd]': {
+              type: 'string',
+              'x-component': 'dateSelect',
+              'x-component-props': {
+                placeholder: '单据时间',
+              }
+            },
+          }
+        },
+        sumbit: {
+          "x-component": "Submit",
+          "x-mega-props": {
+            span: 1
+          },
+          "x-component-props": {
+            children: "查询"
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 外部状态颜色 */
+export const EXTERNALSTATE_COLOR = (text) => {
+  switch (Number(text)) {
+    case 1:
+    case 2:
+      return 'processing';
+    case 3:
+      return 'error';
+    case 4:
+      return 'success';
+    default:
+      return 'default'
+  }
+}

src/pages/transaction/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill/index.tsx

+import React from 'react';
+import { Tag, Row, Col, Button, Space } from 'antd';
+import { history } from 'umi';
+import Table from '@/pages/transaction/components/TableLayout';
+import { ColumnType } from 'antd/lib/table/interface';
+import { WAITSBUMITLOGISTICSBILLSCHEMA, EXTERNALSTATE_COLOR } from '../schema';
+import { PublicApi } from '@/services/api';
+import moment from 'moment';
+import { PlusOutlined } from '@ant-design/icons';
+import EyePreview from '@/components/EyePreview';
+
+const LogisticsBillQuery = () => {
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: '物流单号',
+      key: 'logisticsOrderNo',
+      dataIndex: 'logisticsOrderNo',
+      render: (text: any, record: any) => <EyePreview
+        url={`/memberCenter/logisticsAbility/logisticsBillSubmit/waitSbumitLogisticsBill/preview?id=${record.id}`}>{text}</EyePreview>
+    },
+    {
+      title: '对应订单号',
+      key: 'relevanceOrderCode',
+      dataIndex: 'relevanceOrderCode',
+    },
+    {
+      title: '物流服务商',
+      key: 'companyName',
+      dataIndex: 'companyName',
+    },
+    {
+      title: '收货方',
+      key: 'receiverMemberName',
+      dataIndex: 'receiverMemberName',
+    },
+    {
+      title: '总箱数',
+      key: 'totalCarton',
+      dataIndex: 'totalCarton',
+    },
+    {
+      title: '总重量',
+      key: 'totalWeight',
+      dataIndex: 'totalWeight',
+    },
+    {
+      title: '总体积',
+      key: 'totalVolume',
+      dataIndex: 'totalVolume',
+    },
+    {
+      title: '单据时间',
+      key: 'invoicesTime',
+      dataIndex: 'invoicesTime',
+      render: (text) => format(text)
+    },
+    {
+      title: '外部状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (text, data) => <Tag color={EXTERNALSTATE_COLOR(text)}>{data.statusName}</Tag>
+    },
+    {
+      title: '操作',
+      key: 'operate',
+      dataIndex: 'operate',
+    },
+  ]
+
+  return (
+    <Table
+      columns={columns}
+      schema={WAITSBUMITLOGISTICSBILLSCHEMA}
+      effects="logisticsOrderNo"
+      fetch={PublicApi.getLogisticsOrderWaitSubmitPage}
+      // externalStatusFetch={PublicApi.getLogisticsOrderSubmitStatusList}
+      controllerBtns={
+        <Row>
+          <Col span={24}>
+            <Space direction="horizontal" size={16}>
+              <Button
+                type="primary"
+                icon={<PlusOutlined />}
+                onClick={() => history.push(`/memberCenter/tranactionAbility/productInquiry/waitAddInquiry/add`)}
+              >
+                新建
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+      }
+    />
+  )
+}
+
+export default LogisticsBillQuery

src/pages/transaction/purchaseAbility/components/detail/components/recordLyout/index.tsx

@@ -28,7 +28,7 @@ const RecordLayout: React.FC<ProgressProps> = (props: any) => {
   return (
     <Card
       id='recordLyout'
-      title='流转进度'
+      title='流转记录'
       extra={
         <Radio.Group
           onChange={(e) => setLogStatus(e.target.value)}

src/services/api.ts

@@ -24,7 +24,8 @@ import * as TemplateV2Api from './TemplateV2Api';
 import * as MemberV2Api from './MemberV2Api';
 import * as ReportV2Api from './ReportV2Api';
 import * as EnhanceV2Api from './EnhanceV2Api';
-import * as MessageV2 from './MessageV2Api'
+import * as MessageV2 from './MessageV2Api';
+import * as LogiticsV2 from './LogiticsV2Api';
 
 
 /**
@@ -62,5 +63,6 @@ export const PublicApi = {
   ...MemberV2Api,
   ...ReportV2Api,
   ...EnhanceV2Api,
-  ...MessageV2
+  ...MessageV2,
+  ...LogiticsV2
 }

ytt.config.ts

@@ -27,6 +27,7 @@ const tokenList = [
   { name: 'ReportV2', token: 'dab50c384c27f1c981a03f2c44ad76d1e7e1f60b4520bd279cea67f5cf146cee', categoryIds: [0]}, // 报表服务v2 首页
   { name: 'EnhanceV2', token: '71b97616a81866ade2731437ca121e288b1dd8331dce4b5c1ccaacb176c16580', categoryIds: [0], }, // 加工服务v2
   { name: 'MessageV2', token: '69a667ec9861e8bdc25b89238d0b908a2123d9fce26e72fec3cdf6cd0b1f2681', categoryIds: [0], }, // 消息中心v2
+  { name: 'LogiticsV2', token: '732fb8e33970ff5dee830423a630e8e85c3ef3293abba7581b16749dfce8608b', categoryIds: [0], }, // 物流能力v2
 
 ]