对接物流单详情

src/pages/logistics/components/orderSearchDetail.tsx

 import React, { Component, useEffect, useState, ReactNode, useRef } from 'react';
-import { Row, Col, Modal, Tooltip, Input, Select, Button, Popconfirm, Card, Tag, Badge, Steps, } from 'antd'
+import { Row, Col, Modal,Table, Tooltip, Input, Select, Button, Popconfirm, Card, Tag, Badge, Steps, } from 'antd'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { EyeOutlined, ClockCircleOutlined, UpOutlined, DownOutlined, StopOutlined, CheckSquareOutlined } from '@ant-design/icons'
 import { StandardTable } from 'god'
 import { ColumnType } from 'antd/lib/table/interface'
 import ConfirmModal from './confirmModal'
-import {history} from 'umi'
+import { history } from 'umi'
+import { PublicApi } from '@/services/api'
+import moment from 'moment'
 import style from './index.less'
+import statuStyle from '../colorTag'
 const { Step } = Steps
 const data = [
   {
@@ -19,11 +22,44 @@ const data = [
     status: 2,
   },
 ];
+interface dataInfoType{
+  status: any;
+  digest?: any;
+  logisticsOrderNo:string;
+  companyName: string;
+  invoicesTime: any,
+  detailList: Array<any>,
+  logList: Array<any>,
+  totalCarton: number,
+  totalVolume: number,
+  totalWeight: number,
+  freightPrice: number,
+  settlementWay: string
+}
 
 const detailInfo: React.FC<{}> = () => {
   const ref = useRef({})
   let [isextraOption, setIsextraOption] = useState(false)
+  let [dataInfo, setdataInfo] = useState<dataInfoType>({
+    status: '',
+    digest: '',
+    logisticsOrderNo:'',
+    companyName:'',
+    invoicesTime:'',
+    detailList:[],
+    logList:[],
+    totalCarton: 0,
+    totalVolume: 0,
+    totalWeight: 0,
+    freightPrice: 0,
+    settlementWay: ''
+  })
+  const [id, setid] = useState('')
   let [visible, setvisible] = useState(false)
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10
+  })
   const [detailData, setDetailData] = useState<any>({
     step: {
       current: 0,
@@ -48,15 +84,15 @@ const detailInfo: React.FC<{}> = () => {
     base: {
       title: '基本信息',
       leftElem: [
-        { title: '对应发货单号：', key: '' },
-        { title: '对应订单号/售后单：', key: '' }
+        { title: '对应发货单号：', key: 'shipmentOrderNo',value: dataInfo.shipmentOrderNo },
+        { title: '对应订单号/售后单：', key: '',value: dataInfo.invoicesNo }
       ],
       centerElem: [
-        { title: '收货方：', key: '' },
-        { title: '收货地址：', key: '' }
+        { title: '收货方：', key: '',value: dataInfo.receiverName },
+        { title: '收货地址：', key: '',value: dataInfo.receiverFullAddress }
       ],
       rightElem: [
-        { title: '发货地址：', key: '' }
+        { title: '发货地址：', key: '',value:dataInfo.shipperFullAddress }
       ],
       elem: [
 
@@ -65,80 +101,80 @@ const detailInfo: React.FC<{}> = () => {
     freight: {
       title: '运费',
       leftElem: [
-        { title: '运费：', key: 'freight' },
-        { title: '结算方式：', key: '' }
+        { title: '运费：', key: 'freight',value: dataInfo.freightPrice },
+        { title: '结算方式：', key: '',value: dataInfo.settlementWay }
       ]
     }
   }
   const columns1: ColumnType<any>[] = [
     {
       title: 'ID',
-      dataIndex: 'id',
+      dataIndex: 'productId',
       align: 'center',
-      key: 'id',
+      key: 'productId',
     },
     {
       title: '商品名称',
-      dataIndex: 'role',
+      dataIndex: 'productName',
       align: 'center',
-      key: 'role',
+      key: 'productName',
       width: 240
     },
     {
       title: '品类',
-      dataIndex: 'role2',
+      dataIndex: 'categoryName',
       align: 'center',
-      key: 'role3',
+      key: 'categoryName',
     },
     {
       title: '品牌',
-      dataIndex: 'role1',
+      dataIndex: 'brandName',
       align: 'center',
-      key: 'role2',
+      key: 'brandName',
     },
     {
       title: '单位',
-      dataIndex: 'role3',
+      dataIndex: 'unitName',
       align: 'center',
-      key: 'role3',
+      key: 'unitName',
     },
     {
       title: '数量',
-      dataIndex: 'role3',
+      dataIndex: 'amount',
       align: 'center',
-      key: 'role3',
+      key: 'amount',
     },
     {
       title: '箱数',
-      dataIndex: 'role3',
+      dataIndex: 'carton',
       align: 'center',
-      key: 'role3',
+      key: 'carton',
     },
     {
       title: '重量 (KG)',
-      dataIndex: 'role3',
+      dataIndex: 'weight',
       align: 'center',
-      key: 'role3',
+      key: 'weight',
     },
     {
       title: '体积 (M3)',
-      dataIndex: 'role3',
+      dataIndex: 'volume',
       align: 'center',
-      key: 'role3',
+      key: 'volume',
     }
   ];
   const columns: ColumnType<any>[] = [
     {
       title: '序号',
-      dataIndex: 'id',
+      dataIndex: 'operatorRoleId',
       align: 'center',
-      key: 'id',
+      key: 'operatorRoleId',
     },
     {
       title: '操作角色',
-      dataIndex: 'role',
+      dataIndex: 'operatorRoleName',
       align: 'center',
-      key: 'role',
+      key: 'operatorRoleName',
     },
     {
       title: '状态',
@@ -159,23 +195,65 @@ const detailInfo: React.FC<{}> = () => {
     },
     {
       title: '操作时间',
-      dataIndex: 'opTime',
+      dataIndex: 'operateTime',
       align: 'center',
-      key: 'opTime',
-    },
+      key: 'operateTime',
+      render:(text: any, record: any) => <>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</>
+     },
     {
       title: '审核意见',
-      dataIndex: 'suggest',
+      dataIndex: 'remark',
       align: 'center',
-      key: 'suggest',
+      key: 'remark',
       width: 300
     },
   ];
   //在这做逻辑判断  判断路由 是由哪个页面进来的
   useEffect(() => {
     let pathname = history.location.pathname
-    if(pathname === '/memberCenter/logisticsAbility/logisticsResult/toOrderComfirmDeatil'){
+    const id = history.location.query.id
+    setid(id)
+
+    if (pathname === '/memberCenter/logisticsAbility/logisticsSubmit/orderSubmitDeatil') {
+      PublicApi.getLogisticsOrderSubmitGet({ id: id }).then(res => {
+        setdataInfo(res.data)
+        let current = 0
+        if(res.data.status <= 2){
+          current = 0
+        }else if(res.data.status == 3 || res.data.status == 4){
+          current = 1
+        }
+        setDetailData({...detailData,'step.current': current})
+      })
+    }
+
+
+    if (pathname === '/memberCenter/logisticsAbility/logisticsResult/orderResultDeatil') {
+      PublicApi.getLogisticsOrderConfirmGet({ id: id }).then(res => {
+        setdataInfo(res.data)
+        let current = 0
+        if(res.data.status <= 2){
+          current = 0
+        }else if(res.data.status == 3 || res.data.status == 4){
+          current = 1
+        }
+        setDetailData({...detailData,'step.current': current})
+      })
+    }
+
+    //待确认物流单
+    if (pathname === '/memberCenter/logisticsAbility/logisticsResult/toOrderComfirmDeatil') {
       setIsextraOption(true)
+      PublicApi.getLogisticsOrderWaitConfirmGet({ id: id }).then(res => {
+        setdataInfo(res.data)
+        let current = 0
+        if(res.data.status <= 2){
+          current = 0
+        }else if(res.data.status == 3 || res.data.status == 4){
+          current = 1
+        }
+        setDetailData({...detailData,'step.current': current})
+      })
     }
 
     return () => {
@@ -188,11 +266,12 @@ const detailInfo: React.FC<{}> = () => {
         resolve({
           code: 200,
           message: '',
-          data: queryResult ? [queryResult] : data,
+          data: dataInfo.detailList//dataInfo.logList
         });
       }, 1000);
     });
   };
+  
 
   return (
     <PageHeaderWrapper
@@ -202,8 +281,8 @@ const detailInfo: React.FC<{}> = () => {
           <div className={style['headerTop']}>
             <div className={style['headerTop-prefix']}>单</div>
             <div className={style['headerTop-name']}>
-              物流单号：WL0954548
-          </div>
+              物流单号：{dataInfo.logisticsOrderNo}
+            </div>
             <div className={style[`levelIcon${'1'}`]}></div>
           </div>
         </>
@@ -226,22 +305,27 @@ const detailInfo: React.FC<{}> = () => {
           <div className={style['headerMain-left']}>
             <div className={style['headerMain-left-option']}>
               <div>单据摘要：</div>
-              <div>xxxx</div>
+              <div>{dataInfo.digest}</div>
             </div>
             <div className={style['headerMain-left-option']}>
               <div>物流服务商：</div>
-              <div>xxx</div>
+              <div>{dataInfo.companyName}</div>
             </div>
             <div className={style['headerMain-left-option']}>
               <div>单据时间：</div>
               <div>
-                <Tag color="green">2020-09-09 12:58:25</Tag>
+                <Tag color="green">{moment(dataInfo.invoicesTime).format('YYYY-MM-DD HH:mm:ss')}</Tag>
               </div>
             </div>
             <div className={style['headerMain-left-option']}>
               <div>外部状态：</div>
               <div>
-                <Tag color="gold">待审核</Tag>
+              {
+                dataInfo.status == 1?<><span style={statuStyle.default}>待提交</span></>:
+                dataInfo.status == 2?<><span style={statuStyle.confirm}>待确认</span></>:
+                dataInfo.status == 3?<><span style={statuStyle.success}>接受物流单</span></>:
+                <><span style={statuStyle.warn}>不接受物流单</span></>
+              }
               </div>
             </div>
           </div>
@@ -283,7 +367,9 @@ const detailInfo: React.FC<{}> = () => {
                       <div className={style['cols-main-options']}>
                         {item.title}
                       </div>
-                      <div className={style['cols-main-options']}>张三</div>
+                      <div className={style['cols-main-options']}>
+                        <Button type='link'>{item.value}</Button>
+                      </div>
                     </div>
                   );
                 },
@@ -297,7 +383,7 @@ const detailInfo: React.FC<{}> = () => {
                       <div className={style['cols-main-options']}>
                         {item.title}
                       </div>
-                      <div className={style['cols-main-options']}>张三</div>
+                      <div className={style['cols-main-options']}>{item.value}</div>
 
                     </div>
                   );
@@ -312,7 +398,7 @@ const detailInfo: React.FC<{}> = () => {
                       <div className={style['cols-main-options']}>
                         {item.title}
                       </div>
-                      <div className={style['cols-main-options']}>张三</div>
+                      <div className={style['cols-main-options']}>{item.value}</div>
 
                     </div>
                   );
@@ -340,28 +426,21 @@ const detailInfo: React.FC<{}> = () => {
           <div className={style['mainCol-title']}>
             物流单明细
           </div>
-          <StandardTable
-            tableProps={{
-              pagination: false,
-            }}
-            columns={columns1}
-            currentRef={ref}
-            fetchTableData={(params: any) => fetchData(params)}
-          />
+          <Table dataSource={dataInfo.detailList}  columns={columns1} pagination={false} />
           <Row style={{ marginTop: '26px' }}>
             <Col span={9} push={15}>
               <Row align='middle' justify='center' gutter={[16, 16]}>
                 <Col span={8} >
                   <div>总箱数（箱）</div>
-                  <div className={style.count}>700</div>
+                  <div className={style.count}>{dataInfo.totalCarton}</div>
                 </Col>
                 <Col span={8} >
                   <div>总重量（KG）</div>
-                  <div className={style.count}>700</div>
+                  <div className={style.count}>{dataInfo.totalWeight}</div>
                 </Col>
                 <Col span={8} >
                   <div>总体积（M3）</div>
-                  <div className={style.count}>700</div>
+                  <div className={style.count}>{dataInfo.totalVolume}</div>
                 </Col>
 
               </Row>
@@ -385,11 +464,12 @@ const detailInfo: React.FC<{}> = () => {
                       {
                         item.key === 'freight' ?
                           <div className={style['cols-main-options']}>
-                            1000.00
-                        <Input addonBefore=" ¥ " defaultValue="1000" />
+                            {item.value}
+                            
+                            {/* <Input addonBefore=" ¥ " defaultValue={100} /> */}
                           </div>
                           : <div className={style['cols-main-options']}>
-                            张三
+                            {item.value}
                         </div>
                       }
                     </div>
@@ -405,21 +485,16 @@ const detailInfo: React.FC<{}> = () => {
           <div className={style['mainCol-title']}>
             外部流转记录
           </div>
-          <StandardTable
-            tableProps={{
+          <Table dataSource={dataInfo.logList}  columns={columns} pagination={pagination} />
 
-            }}
-            columns={columns}
-            currentRef={ref}
-            fetchTableData={(params: any) => fetchData(params)}
-          />
 
         </Col>
       </Row>
-      <ConfirmModal 
+      <ConfirmModal
+        id={id}
         dialogVisible={visible}
         onCancel={() => setvisible(false)}
-        />
+      />
 
     </PageHeaderWrapper>
   )

src/pages/logistics/components/orderSearchList.tsx

@@ -2,7 +2,7 @@
  * @Author: LeeJiancong
  * @Date: 2020-07-18 15:55:51
  * @LastEditors: LeeJiancong
- * @LastEditTime: 2020-07-31 19:23:51
+ * @LastEditTime: 2020-08-01 11:09:05
  */ 
 import React, { useState, useEffect, useRef, ReactNode } from 'react';
 import { Card, Button, Row, Col, Tooltip, Input, Select, Tag, Space } from 'antd'
@@ -16,6 +16,7 @@ import { hidden } from 'chalk';
 import { PublicApi } from '@/services/api';
 import {timeRange} from '@/utils/index'
 import statuStyle from '../colorTag'
+import {TimeList,statusList,outSideStatusList} from '../statusList'
 import moment  from 'moment'
 let { Option } = Select
 export interface listProps {
@@ -50,49 +51,6 @@ const orderSearchList: React.FC<listProps> = (props) => {
   console.log(props)
   const ref = useRef<any>({})
   const [selectRow, setSelectRow] = useState<Item[]>([])
-  const TimeList = [
-    {
-      label: '单据时间（全部）', value: 0
-    },
-    {
-      label: '今天', value: 1
-    },
-    {
-      label: '一周内', value: 2
-    },
-    {
-      label: '一个月内', value: 3
-    },
-    {
-      label: '三个月内', value: 4
-    },
-    {
-      label: '六个月内', value: 5
-    },
-    {
-      label: '一年内', value: 6
-    },
-    {
-      label: '一年前', value: 7
-    }
-  ]
-  const outSideStatusList = [
-    {
-      label: '外部状态(全部)', value: ''
-    },
-    {
-      label: '待提交', value: 1
-    },
-    {
-      label: '待确认', value: 2
-    },
-    {
-      label: '接受物流单', value: 3
-    },
-    {
-      label: '不接受物流单', value: 4
-    }
-  ]
   const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
   const [companyList, setcompanyList] = useState([])
   const [shipperAddressList, setshipperAddressList] = useState([])
@@ -258,6 +216,9 @@ const orderSearchList: React.FC<listProps> = (props) => {
       align: 'center',
       dataIndex: 'status',
       key: 'status',
+      filters: statusList,
+      filterMultiple: false,
+      onFilter:(value,record) => record.status === value,
       render: (_: any, reconds) => {
         let component: ReactNode = null
         if (reconds.status == 3) {
@@ -277,6 +238,10 @@ const orderSearchList: React.FC<listProps> = (props) => {
 
   ]
 
+  const statusFilter = (value:any,record:any) => {
+    console.log(value,record)
+  }
+
   const rowSelection: TableRowSelection<any> = {
     type: 'checkbox',
     selectedRowKeys: selectedTableRowKeys,

src/pages/logistics/logisticsResult/toOrderComfirmList.tsx

@@ -2,7 +2,7 @@
  * @Author: LeeJiancong
  * @Date: 2020-07-14 15:07:34
  * @LastEditors: LeeJiancong
- * @LastEditTime: 2020-07-31 19:27:46
+ * @LastEditTime: 2020-08-01 11:10:57
  */
 import React, { Component, ReactNode, useRef, useState, useEffect } from 'react'
 import { history } from 'umi'
@@ -28,6 +28,7 @@ import { PublicApi } from '@/services/api'
 import { timeRange} from '@/utils/index'
 import moment from 'moment'
 import statuStyle from '../colorTag'
+import {TimeList,outSideStatusList,statusList} from '../statusList'
 import style from '../components/index.less'
 const { Option } = Select
 const data = [
@@ -143,49 +144,7 @@ const OrderList: React.FC<ListProps> = (props) => {
     invoicesTimeStart: '',
     invoicesTimeEnd: ''
   })
-  const TimeList = [
-    {
-      label: '单据时间（全部）', value: 0
-    },
-    {
-      label: '今天', value: 1
-    },
-    {
-      label: '一周内', value: 2
-    },
-    {
-      label: '一个月内', value: 3
-    },
-    {
-      label: '三个月内', value: 4
-    },
-    {
-      label: '六个月内', value: 5
-    },
-    {
-      label: '一年内', value: 6
-    },
-    {
-      label: '一年前', value: 7
-    }
-  ]
-  const outSideStatusList = [
-    {
-      label: '外部状态(全部)', value: ''
-    },
-    {
-      label: '待提交', value: 1
-    },
-    {
-      label: '待确认', value: 2
-    },
-    {
-      label: '接受物流单', value: 3
-    },
-    {
-      label: '不接受物流单', value: 4
-    }
-  ]
+ 
   const columns: ColumnType<any>[] = [
     {
       title: '物流单号',
@@ -243,6 +202,9 @@ const OrderList: React.FC<ListProps> = (props) => {
       align: 'center',
       dataIndex: 'status',
       key: 'status',
+      filters: statusList,
+      filterMultiple: false,
+      onFilter:(value,record) => record.status === value,
       render: (text: any, record: any) => {
         let component: ReactNode = null
         if (text == 3) {

src/pages/logistics/logisticsSubmit/toOrderSumitList.tsx

@@ -2,7 +2,7 @@
  * @Author: LeeJiancong
  * @Date: 2020-07-14 15:07:34
  * @LastEditors: LeeJiancong
- * @LastEditTime: 2020-07-31 20:20:19
+ * @LastEditTime: 2020-08-01 11:12:49
  */
 import React, { Component, ReactNode, useRef, useState, useEffect } from 'react'
 import { history } from 'umi'
@@ -26,6 +26,7 @@ import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableCon
 import { PublicApi } from '@/services/api'
 import style from '../components/index.less'
 import statuStyle from '../colorTag'
+import {TimeList,outSideStatusList,statusList} from '../statusList'
 import moment from 'moment'
 import { timeRange } from '@/utils/index'
 import Index from '@/pages';
@@ -57,49 +58,7 @@ const data = [
 interface Item {
   key: string
 }
-const TimeList = [
-  {
-    label: '单据时间（全部）', value: 0
-  },
-  {
-    label: '今天', value: 1
-  },
-  {
-    label: '一周内', value: 2
-  },
-  {
-    label: '一个月内', value: 3
-  },
-  {
-    label: '三个月内', value: 4
-  },
-  {
-    label: '六个月内', value: 5
-  },
-  {
-    label: '一年内', value: 6
-  },
-  {
-    label: '一年前', value: 7
-  }
-]
-const outSideStatusList = [
-  {
-    label: '外部状态(全部)', value: ''
-  },
-  {
-    label: '待提交', value: 1
-  },
-  {
-    label: '待确认', value: 2
-  },
-  {
-    label: '接受物流单', value: 3
-  },
-  {
-    label: '不接受物流单', value: 4
-  }
-]
+
 //父页面传递来的参数
 export interface ListProps {
 }
@@ -203,6 +162,9 @@ const OrderList: React.FC<ListProps> = (props) => {
       align: 'center',
       dataIndex: 'status',
       key: 'status',
+      filters: statusList,
+      filterMultiple: false,
+      onFilter:(value,record) => record.status === value,
       render: (text: any, reconds: any) => {
         let component: ReactNode = null
         if (text == 3) {

src/pages/logistics/statusList.ts

+/*
+ * @Author: LeeJiancong
+ * @Date: 2020-08-01 11:06:09
+ * @LastEditors: LeeJiancong
+ * @LastEditTime: 2020-08-01 11:07:49
+ */ 
+export const TimeList = [
+  {
+    label: '单据时间（全部）', value: 0
+  },
+  {
+    label: '今天', value: 1
+  },
+  {
+    label: '一周内', value: 2
+  },
+  {
+    label: '一个月内', value: 3
+  },
+  {
+    label: '三个月内', value: 4
+  },
+  {
+    label: '六个月内', value: 5
+  },
+  {
+    label: '一年内', value: 6
+  },
+  {
+    label: '一年前', value: 7
+  }
+]
+export const outSideStatusList = [
+  {
+    label: '外部状态(全部)', value: ''
+  },
+  {
+    label: '待提交', value: 1
+  },
+  {
+    label: '待确认', value: 2
+  },
+  {
+    label: '接受物流单', value: 3
+  },
+  {
+    label: '不接受物流单', value: 4
+  }
+]
+export const statusList = [
+  {
+    text: '待提交', value: 1
+  },
+  {
+    text: '待确认', value: 2
+  },
+  {
+    text: '接受物流单', value: 3
+  },
+  {
+    text: '不接受物流单', value: 4
+  }
+]
\ No newline at end of file