合并前

config/config.ts

@@ -101,7 +101,7 @@ const config: any = {
     defaultSizes: 'parsed', // stat  // gzip
   },
   plugins: [
-    // "@linkseeks/umi-plugin-yapi"
+    "@linkseeks/umi-plugin-yapi"
   ],
   inlineLimit: 10000,
   // chunks: isProduction && ['styles', 'vendors', 'umi', 'services'],

config/routes/index.ts

@@ -34,7 +34,7 @@ const homeRoute = {
   key: 'home',
   component: '@/pages/home',
 };
-const routes = isDev ? [ homeRoute, TranactionRoute, OrderRoute, ProcurementRoute ] : asyncRoutes;
+const routes = isDev ? [ homeRoute, OrderRoute ] : asyncRoutes;
 // const routes = isDev ? [ CommodityRoute ] : asyncRoutes;
 
 const memberCenterRoute = {

src/components/BaseInfo/BaseInfo.tsx

@@ -33,7 +33,7 @@ function BaseInfoItem({ label, children }: {
   children: JSX.Element | string | React.ReactNode
 }) {
   return (
-    <div className='base_info_item flex text-lg'>
+    <div className='base_info_item flex text-sm'>
       <div className='label flex-4 flex items-center flex-grow-0 w-100 text-gray-400'>
         {label}
       </div>

src/pages/order/constants/anchors.ts

@@ -56,6 +56,11 @@ const DeliveryGood: AnchorsItem = {
   name: '送货商品'
 }
 
+const ExternalRoamRecord: AnchorsItem = {
+  key: 'ExternalDocumentFlowRecord',
+  name: '外部单据流转记录'
+}
+
 const DeliveryNoteQuery: AnchorsItem[] = [
   BillsInfo,
   Distribution,
@@ -68,6 +73,7 @@ const DeliveryPlanDetails: AnchorsItem[] = [
   Circulation,
   BaseInfo,
   PlanMaterial,
+  ExternalRoamRecord
 ]
 
 export {
@@ -81,6 +87,7 @@ export {
   HarvestMaterial,
   Circulation,
   PlanMaterial,
+  ExternalRoamRecord,
   DeliveryNoteQuery,
   DeliveryPlanDetails,
   DeliveryGood

src/pages/order/constants/label.ts

@@ -29,13 +29,18 @@ export const PlanSummary = '计划摘要';
 export const PlanningCycle = '计划周期';
 export const ExternalState = '外部状态';
 
-
-
 export const BuyerLabel = '采购会员';
 export const OutStatusLabel = '外部状态';
 
 export const DeliveryTypeLabel = '配送方式';
 
+export const Purchaser = '采购商';
+export const SubmitDeliveryPlan = '提交送货计划';
+
+export const Supplier = '供应商';
+export const ConfirmDeliveryPlan = '提交送货计划';
+
+
 
 
 

src/pages/order/deliveryPlanManagement/deliveryPlanQuery/details.tsx

@@ -2,34 +2,79 @@
  * 订单能力 -- 送货计划详情
  * @author: Gavin
  */
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { history } from 'umi'
 import { Card, Descriptions, Steps, Table, Tag } from 'antd'
 import AnchorPage from '@/components/AnchorPage'
 import { AnchorsItem } from "@/components/AnchorPage"
 import BaseInfo from '@/components/BaseInfo/BaseInfo'
-import { BaseInfo as base_Info, Circulation, DeliveryPlanDetails, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, SupplyMember, } from '../../constants'
+import { BaseInfo as base_Info, Circulation, ConfirmDeliveryPlan, DeliveryPlanDetails, ExternalRoamRecord, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, Purchaser, SubmitDeliveryPlan, Supplier, SupplyMember, } from '../../constants'
 
 
 const DeliveryPlanManagementDetails: React.FC = () => {
   const [iAnchors, setiAnchors] = useState<AnchorsItem[]>(DeliveryPlanDetails)
   const [details, setDetails] = useState<any>({})
-
+  const [test, setTest] = useState<any>([])
+  // 计划送货物料
   const columns = [
-    { title: '物料编号', dataIndex: 'name1', },
-    { title: '物料名称', dataIndex: 'name2', },
-    { title: '规格型号', dataIndex: 'name3', },
-    { title: '品类', dataIndex: 'name4', },
-    { title: '品牌', dataIndex: 'name5', },
-    { title: '单位', dataIndex: 'name6', },
-    { title: '订单数量', dataIndex: 'name7', },
-    { title: '收货数量', dataIndex: 'name8', },
-    { title: '在途数量', dataIndex: 'name9', },
-    { title: '待送货数量', dataIndex: 'name10', },
-    { title: '计划送货数量', dataIndex: 'name11', },
+    { title: '物料编号', dataIndex: 'name1', width: 80, ellipsis: true, align: 'center'},
+    { title: '物料名称', dataIndex: 'name2', width: 192, ellipsis: true, align: 'center'},
+    { title: '规格型号', dataIndex: 'name3', width: 128, align: 'center' },
+    { title: '品类', dataIndex: 'name4', width: 96, align: 'center' },
+    { title: '品牌', dataIndex: 'name5', width: 96, align: 'center' },
+    { title: '单位', dataIndex: 'name6', width: 64, align: 'center' },
+    { title: '订单数量', dataIndex: 'name7', width: 96, align: 'center' },
+    { title: '收货数量', dataIndex: 'name8', width: 96, align: 'center' },
+    { title: '在途数量', dataIndex: 'name9',width: 96, align: 'center' },
+    { title: '待送货数量', dataIndex: 'name10', width: 96, align: 'center' },
+    { title: '计划送货数量', dataIndex: 'name11', width: 128, align: 'center' },
+    ...test
   ]
   const data = [
     { 
+      id: '1',
+      'name1': 'Q89YTE1',
+      'name2': '进口头层黄牛皮荔枝纹',
+      'name3': '红色/XXL/厚1.5mm',
+      'name4': '牛皮',
+      'name5': 'PELLE',
+      'name6': '尺',
+      'name7': '10,000',
+      'name8': '10,000',
+      'name9': '10,000',
+      'name10': '10,000',
+      'name11': '10,000',
+     },
+    { 
+      id: '2',
+      'name1': 'Q89YTE1',
+      'name2': '进口头层黄牛皮荔枝纹',
+      'name3': '红色/XXL/厚1.5mm',
+      'name4': '牛皮',
+      'name5': 'PELLE',
+      'name6': '尺',
+      'name7': '10,000',
+      'name8': '10,000',
+      'name9': '10,000',
+      'name10': '10,000',
+      'name11': '10,000',
+     },
+    { 
+      id: '3',
+      'name1': 'Q89YTE1',
+      'name2': '进口头层黄牛皮荔枝纹',
+      'name3': '红色/XXL/厚1.5mm',
+      'name4': '牛皮',
+      'name5': 'PELLE',
+      'name6': '尺',
+      'name7': '10,000',
+      'name8': '10,000',
+      'name9': '10,000',
+      'name10': '10,000',
+      'name11': '10,000',
+     },
+    { 
+      id: '4',
       'name1': 'Q89YTE1',
       'name2': '进口头层黄牛皮荔枝纹',
       'name3': '红色/XXL/厚1.5mm',
@@ -41,21 +86,45 @@ const DeliveryPlanManagementDetails: React.FC = () => {
       'name9': '10,000',
       'name10': '10,000',
       'name11': '10,000',
-     }
+     },
   ]
   const expandedRowRender = () => {
     const columns = [
-      { title: '订单号', dataIndex: 'name1', },
-      { title: '订单摘要', dataIndex: 'name2', },
-      { title: '下单时间', dataIndex: 'name3', },
-      { title: '订单数量', dataIndex: 'name4', },
-      { title: '收货数量', dataIndex: 'name5', },
-      { title: '在途数量', dataIndex: 'name6', },
-      { title: '待送货数量', dataIndex: 'name7', },
-      { title: '计划送货数量', dataIndex: 'name8', },
+      { title: '订单号', dataIndex: 'name1', align: 'center' },
+      { title: '订单摘要', dataIndex: 'name2', align: 'center' },
+      { title: '下单时间', dataIndex: 'name3', align: 'center' },
+      { title: '订单数量', dataIndex: 'name4', align: 'center' },
+      { title: '收货数量', dataIndex: 'name5', align: 'center' },
+      { title: '在途数量', dataIndex: 'name6', align: 'center' },
+      { title: '待送货数量', dataIndex: 'name7', align: 'center' },
+      { title: '计划送货数量', dataIndex: 'name8', align: 'center' },
+      ...test
     ]
     const data = [
       {
+        id: '1',
+        'name1': 'DPTY12',
+        'name2': '进口头层黄牛皮荔枝纹',
+        'name3': '规格型号',
+        'name4': '2020-08-25 09:50',
+        'name5': '20,000',
+        'name6': '4,000',
+        'name7': '2,000',
+        'name8': '14,000',
+      },
+      {
+        id: '2',
+        'name1': 'DPTY12',
+        'name2': '进口头层黄牛皮荔枝纹',
+        'name3': '规格型号',
+        'name4': '2020-08-25 09:50',
+        'name5': '20,000',
+        'name6': '4,000',
+        'name7': '2,000',
+        'name8': '14,000',
+      },
+      {
+        id: '3',
         'name1': 'DPTY12',
         'name2': '进口头层黄牛皮荔枝纹',
         'name3': '规格型号',
@@ -66,8 +135,21 @@ const DeliveryPlanManagementDetails: React.FC = () => {
         'name8': '14,000',
       }
     ]
-    return <Table columns={columns} dataSource={data} pagination={false} />
+    return <Table rowKey={'id'} columns={columns} dataSource={data} pagination={false} />
   }
+
+  useEffect(() => {
+    setTimeout(() => {
+      let arr =  Array.from(Array(90)).map((item, i) => ({ title: '日期'+i, dataIndex: 'date'+i,  width: 64, align: 'center' }))
+      console.log('执行渲染 :>> ',  arr);
+      setTest(arr)
+    },0)
+  }, [])
+
+  // 外部单据流转记录
+  const externalRoamColumns = [
+    { title: '物料名称', dataIndex: 'name1', },
+  ]
   return (
     <AnchorPage
       title={details?.name || '没有title'}
@@ -76,8 +158,8 @@ const DeliveryPlanManagementDetails: React.FC = () => {
     >
       <BaseInfo className='mt-16' title={Circulation.name} id={Circulation.key} cols={1}>
         <Steps progressDot current={0}>
-            <Steps.Step title='采购商' description='提交送货计划' />
-            <Steps.Step title='供应商' description='确认送货计划' />
+            <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
+            <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
         </Steps>
       </BaseInfo>
       <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
@@ -99,12 +181,21 @@ const DeliveryPlanManagementDetails: React.FC = () => {
       </BaseInfo>
       <BaseInfo className='mt-1' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
         <Table
+          defaultExpandAllRows
+          rowKey={'id'}
           columns={columns}
           expandable={{ expandedRowRender }}
           dataSource={data}
+          scroll={{ x: 2022 }}
+        />
+      </BaseInfo>
+      <BaseInfo className='mt-1' title={ExternalRoamRecord.name} id={ExternalRoamRecord.key} cols={1}>
+        <Table 
+          rowKey={'id'}
+          columns={externalRoamColumns}
+          dataSource={[]}
         />
       </BaseInfo>
-      
     </AnchorPage>
   )
 }