结算能力对接应付账款，应收账款

src/locales/zh-CN/menu.ts

@@ -4,6 +4,7 @@
 <<<<<<< HEAD
  * @LastEditors: Please set LastEditors
 <<<<<<< HEAD
+<<<<<<< HEAD
  * @LastEditTime: 2020-10-26 18:20:31
 =======
  * @LastEditors: Please set LastEditors
@@ -16,6 +17,9 @@
 =======
  * @LastEditTime: 2020-10-23 16:07:53
 >>>>>>> b7a56747... 结算能力-结算规则配置接口对接完成，剩余部分等接口
+=======
+ * @LastEditTime: 2020-10-26 11:36:19
+>>>>>>> 38b99535... 结算能力对接应付账款，应收账款
  */
 
 export default {
@@ -521,7 +525,7 @@ export default {
   'menu.balance.accountsPayable.logisticsDetail': '物流通知单结算明细',
   'menu.balance.accountsPayable.productNoticeSettlementDetail': '生产通知单结算明细',
   'menu.balance.accountsReceivable': '应收账款结算',
-  'menu.balance.accountsReceivable.settlementList': '应付账款结算',
+  'menu.balance.accountsReceivable.settlementList': '应收账款结算',
   'menu.balance.accountsReceivable.logisticsDetail': '物流通知单结算明细',
   'menu.balance.accountsReceivable.productNoticeSettlementDetail': '生产通知单结算明细',
   'menu.balance.accountsReceivable.invoice': '开票管理',

src/pages/balance/accountsPayable/settlementList/index.tsx

@@ -14,18 +14,25 @@ import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { schema } from './schema';
-import ModalContainer from '../../components/ModalContainer';
-import ConfirmAccount from '../../components/ConfirmAccount';
-import Voucher from '../../components/Voucher';
+import StatusTag from '../../components/StatusTag';
+import StatusActions from '../../components/StatusActions';
+import { PublicApi } from '@/services/api'; 
 
 const formActions = createFormActions();
 
 const SettlementList = () => {
   const ref = useRef<any>({})
   const fetchListData = async (params) => {
+    const searchParams = {
+      orderType: 0,
+      status: 0,
+      ...params,
+    }
+    // /settle/accounts/member/settlement/pagePayableSettlement
+    const { data } = await PublicApi.getSettleAccountsMemberSettlementPagePayableSettlement(searchParams);
     return {
-      data: [{id: 1}],
-      totalCount: 1
+      totalCount: 1,
+      data: [{id: 1, status: 2}]
     }
   }
   const columns = [
@@ -42,7 +49,7 @@ const SettlementList = () => {
       title: '结算状态', dataIndex: 'status',
       render: (text, record) => {
         return (
-          <Tag>待对账</Tag>
+          <StatusTag status={record.status} />
         )
       }
     },
@@ -50,48 +57,47 @@ const SettlementList = () => {
       title: '操作',
       render: (text, record) => {
         return (
-          <>
-            
-            <ModalContainer>
-              {
-                ({visible, show, cancel}) => {
-                  return (
-                    <>
-                      <Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
-                        <Voucher />
-                      </Modal>
-                      <div onClick={show}>查看付款凭证</div>
-                    </>
-                  )
-                }
-              }
-            </ModalContainer>
-            <ModalContainer>
-              {
-                ({visible, show, cancel}) => {
-                  return (
-                    <>
-                      <Modal width={548} title="确认付款凭证" onCancel={cancel} visible={visible} 
-                        footer={(
-                          <Space>
-                            <Button>取消</Button>
-                            <Button>确认</Button>
-                          </Space>
-                        )}
-                      >
-                        <Voucher />
-                      </Modal>
-                      <div onClick={show}>确认付款凭证</div>
-                    </>
-                  )
-                }
-              }
-            </ModalContainer>
-          </>
+          <StatusActions 
+            status={record.status} 
+            handleReconciledComfirm={handleConfirm}
+            handleComfirmInCompletePayment={handleComfirmInCompletePayment}
+            handleComfirmCompletePayment={handleComfirmCompletePayment}
+          />
         )
       }
     }
   ]
+
+  /**
+   * 确认对账
+   * @param cancel 关闭回调函数
+   */
+  const handleConfirm = (params: any) => {
+    console.log(123)
+    params.onCancel();
+  }
+
+  const handleComfirmInCompletePayment = (params: any) => {
+    console.log(params);
+    params.onCancel()
+  }
+
+  const handleComfirmCompletePayment = (params: any) => {
+    params.onCancel();
+  }
+
+  /**
+   * 搜索
+   */
+  const handleSearch = (values) => {
+    console.log(values);
+    const format = 'YYYY-MM-DD'
+    const startTime = values.startTime?.format(format);
+    const endTime = values.endTime?.format(format);
+    console.log(startTime, endTime);
+    ref.current.reload({startTime, endTime});
+  }
+
   return (
     <PageHeaderWrapper>
       <Card>
@@ -115,7 +121,7 @@ const SettlementList = () => {
                 // );
               }}
               schema={schema}
-              onSubmit={values => ref.current.reload(values)}
+              onSubmit={handleSearch}
             />
           }
         />

src/pages/balance/accountsPayable/settlementList/logisticsDetail.tsx

@@ -4,7 +4,7 @@
  * @Description: 积分结算详情页
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, PageHeader, Descriptions, Button} from 'antd';
 import { history } from 'umi';
@@ -16,7 +16,9 @@ import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { detailSchema } from './schema'
-
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import StatusTag from '../../components/StatusTag';
 const formActions = createFormActions();
 
 const columns = [
@@ -32,12 +34,44 @@ const columns = [
   {title: '结算金额', dataIndex: 'payPrice'},
 ]
 
+interface infoType {
+  id: number,   // 会员结算id
+  settlementNo: string, // 结算单号
+  settlementDate: string, // 结算日期
+  settlementWayName: string, // 结算方式名称
+  settlementName: string,  // 结算方
+  payName: string, // 付款方
+  orderTypeName: string, // 结算单据类型名称
+  totalCount: number, // 总单数
+  amount: number, // 结算金额 
+  statusName: string // 结算状态名称
+}
+
 const logisticsDetail: React.FC = () => {
   const ref = useRef<any>({});
+  const [infoDetail, setInfoDetail] = useState<infoType>(null);
+  const { id, preview } = usePageStatus();
+
   const fetchListData = async (params) => {
-    return {}
+    console.log(id);
+    // const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+    return {
+      totalCount: 0,
+      data: []
+    }
   }
 
+  useEffect(() => {
+    if(id) {
+      // 获取详情
+      async function fetchDetail() {
+        const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+        setInfoDetail(data);
+      }
+      fetchDetail();
+    }
+  }, [id])
+
   return (
     <PageHeaderWrapper
       title={
@@ -49,7 +83,7 @@ const logisticsDetail: React.FC = () => {
               <AvatarWrap 
                 info={{
                   aloneTxt: '单',
-                  name: "通知单号："
+                  name: "结算单号："
                 }} 
                 extra={(
                   <span style={{ fontSize: 12, fontWeight: 'normal' }}>{"TPTY12"}</span>
@@ -63,12 +97,12 @@ const logisticsDetail: React.FC = () => {
                 padding: '0 32px', 
               }}
             >
-              <Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
-              <Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
-              <Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
-              <Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
-              <Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
-              <Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
+              <Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
+              <Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
+              <Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
+              <Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
+              <Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
+              <Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
             </Descriptions>
           </PageHeader>
         </>

src/pages/balance/accountsPayable/settlementList/productNoticeSettlementDetail.tsx

@@ -4,18 +4,20 @@
  * @Description: 积分结算详情页
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, PageHeader, Descriptions, Button} from 'antd';
 import { history } from 'umi';
 import AvatarWrap from '@/components/AvatarWrap';
 import NiceForm from '@/components/NiceForm';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { ISchema, createFormActions } from '@formily/antd';
+import { createFormActions } from '@formily/antd';
 import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { detailSchema } from './schema'
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
 
 const formActions = createFormActions();
 
@@ -32,12 +34,39 @@ const columns = [
   {title: '结算金额', dataIndex: 'payPrice'},
 ]
 
+interface infoType {
+  id: number,   // 会员结算id
+  settlementNo: string, // 结算单号
+  settlementDate: string, // 结算日期
+  settlementWayName: string, // 结算方式名称
+  settlementName: string,  // 结算方
+  payName: string, // 付款方
+  orderTypeName: string, // 结算单据类型名称
+  totalCount: number, // 总单数
+  amount: number, // 结算金额 
+  statusName: string // 结算状态名称
+}
+
 const  ProductNoticeSettlementDetail: React.FC = () => {
   const ref = useRef<any>({});
+  const [infoDetail, setInfoDetail] = useState<infoType>(null);
+  const { id, preview } = usePageStatus();
+
   const fetchListData = async (params) => {
     return {}
   }
 
+  useEffect(() => {
+    if(id) {
+      // 获取详情
+      async function fetchDetail() {
+        const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+        setInfoDetail(data);
+      }
+      fetchDetail();
+    }
+  }, [id])
+
   return (
     <PageHeaderWrapper
       title={
@@ -63,12 +92,12 @@ const  ProductNoticeSettlementDetail: React.FC = () => {
                 padding: '0 32px', 
               }}
             >
-              <Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
-              <Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
-              <Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
-              <Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
-              <Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
-              <Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
+              <Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
+              <Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
+              <Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
+              <Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
+              <Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
+              <Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
             </Descriptions>
           </PageHeader>
         </>

src/pages/balance/accountsPayable/settlementList/schema/index.tsx

@@ -58,15 +58,15 @@ export const schema: ISchema = {
                 allowClear: true, 
               },
             },
-            // submit: {
-            //   'x-component': 'Submit',
-            //   'x-mega-props': {
-            //     span: 1,
-            //   },
-            //   'x-component-props': {
-            //     children: '查询',
-            //   },
-            // },
+            submit: {
+              'x-component': 'Submit',
+              'x-mega-props': {
+                span: 1,
+              },
+              'x-component-props': {
+                children: '查询',
+              },
+            },
           },
         },
       },

src/pages/balance/accountsReceivable/settlementList/index.tsx

@@ -6,28 +6,31 @@
 
 import React, { useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Card, Button, Modal, DatePicker, Tag, Space } from 'antd';
+import { Card, DatePicker} from 'antd';
 import NiceForm from '@/components/NiceForm';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { ISchema, createFormActions } from '@formily/antd';
+import { createFormActions } from '@formily/antd';
 import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { schema } from './schema';
-import ModalContainer from '../../components/ModalContainer';
-import ConfirmAccount from '../../components/ConfirmAccount';
-import Voucher from '../../components/Voucher';
-
+import { PublicApi } from '@/services/api';
+import StatusActions from '../../components/StatusActions';
+import StatusTag from '../../components/StatusTag';
 
 const formActions = createFormActions();
 
 const SettlementList = () => {
   const ref = useRef<any>({})
   const fetchListData = async (params) => {
-    return {
-      data: [{id: 1}],
-      totalCount: 1
+    const searchParams = {
+      orderType: 0,
+      status: 0,
+      ...params,
     }
+    // /settle/accounts/member/settlement/pagePayableSettlement
+    const { data } = await PublicApi.getSettleAccountsMemberSettlementPageReceivableSettlement(searchParams);
+    return data
   }
   const columns = [
     {title: '结算单号', dataIndex: 'num'},
@@ -43,7 +46,7 @@ const SettlementList = () => {
       title: '结算状态', dataIndex: 'status',
       render: (text, record) => {
         return (
-          <Tag>待对账</Tag>
+          <StatusTag status={record.status || 1} />
         )
       }
     },
@@ -51,70 +54,33 @@ const SettlementList = () => {
       title: '操作',
       render: (text, record) => {
         return (
-          <>
-            <ModalContainer>
-              {
-                ({visible, show, cancel}) => {
-                  return (
-                    <>
-                      <Modal width={400} title="确认对账完成" visible={visible} onCancel={cancel} onOk={() => handleConfirm(cancel)}>
-                        <ConfirmAccount />
-                      </Modal>
-                      <div onClick={show}>确认对账完成</div>
-                    </>
-                  )
-                }
-              }
-            </ModalContainer>
-            <ModalContainer>
-              {
-                ({visible, show, cancel}) => {
-                  return (
-                    <>
-                      <Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
-                        <Voucher />
-                      </Modal>
-                      <div onClick={show}>查看付款凭证</div>
-                    </>
-                  )
-                }
-              }
-            </ModalContainer>
-            <ModalContainer>
-              {
-                ({visible, show, cancel}) => {
-                  return (
-                    <>
-                      <Modal width={548} title="确认付款凭证" onCancel={cancel} visible={visible} 
-                        footer={(
-                          <Space>
-                            <Button>取消</Button>
-                            <Button>确认未到款</Button>
-                            <Button>确认到款</Button>
-                          </Space>
-                        )}
-                      >
-                        <Voucher />
-                      </Modal>
-                      <div onClick={show}>确认付款凭证</div>
-                    </>
-                  )
-                }
-              }
-            </ModalContainer>
-          </>
+          <StatusActions 
+            status={record.status || 3} 
+            handleReconciledComfirm={handleConfirm}
+            handleComfirmInCompletePayment={handleComfirmInCompletePayment}
+            handleComfirmCompletePayment={handleComfirmCompletePayment}
+          />
         )
       }
     }
   ]
 
-  /**
+    /**
    * 确认对账
    * @param cancel 关闭回调函数
    */
-  const handleConfirm = (cancel) => {
+  const handleConfirm = (params: any) => {
     console.log(123)
-    cancel();
+    params.onCancel();
+  }
+
+  const handleComfirmInCompletePayment = (params: any) => {
+    console.log(params);
+    params.onCancel()
+  }
+
+  const handleComfirmCompletePayment = (params: any) => {
+    params.onCancel();
   }
   return (
     <PageHeaderWrapper>

src/pages/balance/accountsReceivable/settlementList/logisticsDetail.tsx

@@ -4,7 +4,7 @@
  * @Description: 积分结算详情页
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, PageHeader, Descriptions, Button} from 'antd';
 import { history } from 'umi';
@@ -16,7 +16,9 @@ import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { detailSchema } from './schema'
-
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import StatusTag from '../../components/StatusTag';
 const formActions = createFormActions();
 
 const columns = [
@@ -32,13 +34,44 @@ const columns = [
   {title: '结算金额', dataIndex: 'payPrice'},
 ]
 
+interface infoType {
+  id: number,   // 会员结算id
+  settlementNo: string, // 结算单号
+  settlementDate: string, // 结算日期
+  settlementWayName: string, // 结算方式名称
+  settlementName: string,  // 结算方
+  payName: string, // 付款方
+  orderTypeName: string, // 结算单据类型名称
+  totalCount: number, // 总单数
+  amount: number, // 结算金额 
+  statusName: string // 结算状态名称
+}
 
 const logisticsDetail: React.FC = () => {
   const ref = useRef<any>({});
+  const [infoDetail, setInfoDetail] = useState<infoType>(null);
+  const { id, preview } = usePageStatus();
+
   const fetchListData = async (params) => {
-    return {}
+    console.log(id);
+    // const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+    return {
+      totalCount: 0,
+      data: []
+    }
   }
 
+  useEffect(() => {
+    if(id) {
+      // 获取详情
+      async function fetchDetail() {
+        const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+        setInfoDetail(data);
+      }
+      fetchDetail();
+    }
+  }, [id])
+
   return (
     <PageHeaderWrapper
       title={
@@ -50,7 +83,7 @@ const logisticsDetail: React.FC = () => {
               <AvatarWrap 
                 info={{
                   aloneTxt: '单',
-                  name: "结算单号:"
+                  name: "结算单号："
                 }} 
                 extra={(
                   <span style={{ fontSize: 12, fontWeight: 'normal' }}>{"TPTY12"}</span>
@@ -64,12 +97,12 @@ const logisticsDetail: React.FC = () => {
                 padding: '0 32px', 
               }}
             >
-              <Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
-              <Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
-              <Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
-              <Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
-              <Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
-              <Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
+              <Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
+              <Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
+              <Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
+              <Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
+              <Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
+              <Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
             </Descriptions>
           </PageHeader>
         </>

src/pages/balance/accountsReceivable/settlementList/productNoticeSettlementDetail.tsx

@@ -4,19 +4,23 @@
  * @Description: 积分结算详情页
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Card, PageHeader, Descriptions, Button} from 'antd';
 import { history } from 'umi';
 import AvatarWrap from '@/components/AvatarWrap';
 import NiceForm from '@/components/NiceForm';
 import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { ISchema, createFormActions } from '@formily/antd';
+import { createFormActions } from '@formily/antd';
 import { StandardTable } from 'god';
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
 import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
 import { detailSchema } from './schema'
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+
 const formActions = createFormActions();
+
 const columns = [
   {title: '单据号', dataIndex: 'no'},
   {title: '单据摘要', dataIndex: 'desc'},
@@ -30,14 +34,39 @@ const columns = [
   {title: '结算金额', dataIndex: 'payPrice'},
 ]
 
-
+interface infoType {
+  id: number,   // 会员结算id
+  settlementNo: string, // 结算单号
+  settlementDate: string, // 结算日期
+  settlementWayName: string, // 结算方式名称
+  settlementName: string,  // 结算方
+  payName: string, // 付款方
+  orderTypeName: string, // 结算单据类型名称
+  totalCount: number, // 总单数
+  amount: number, // 结算金额 
+  statusName: string // 结算状态名称
+}
 
 const  ProductNoticeSettlementDetail: React.FC = () => {
   const ref = useRef<any>({});
+  const [infoDetail, setInfoDetail] = useState<infoType>(null);
+  const { id, preview } = usePageStatus();
+
   const fetchListData = async (params) => {
     return {}
   }
 
+  useEffect(() => {
+    if(id) {
+      // 获取详情
+      async function fetchDetail() {
+        const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
+        setInfoDetail(data);
+      }
+      fetchDetail();
+    }
+  }, [id])
+
   return (
     <PageHeaderWrapper
       title={
@@ -48,6 +77,7 @@ const  ProductNoticeSettlementDetail: React.FC = () => {
             title={
               <AvatarWrap 
                 info={{
+                  aloneTxt: '单',
                   name: "通知单号："
                 }} 
                 extra={(
@@ -62,12 +92,12 @@ const  ProductNoticeSettlementDetail: React.FC = () => {
                 padding: '0 32px', 
               }}
             >
-              <Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
-              <Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
-              <Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
-              <Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
-              <Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
-              <Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
+              <Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
+              <Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
+              <Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
+              <Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
+              <Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
+              <Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
             </Descriptions>
           </PageHeader>
         </>

src/pages/balance/common/type.d.ts

+/*
+ * @Author: Bill
+ * @Date: 2020-10-26 15:05:03
+ * @Description: 结算能力公共类型集合
+ */
+
+
+/**
+ * 上传凭证类型
+ */
+export interface VoucherFileProps {
+  /**
+   * 文件名
+   */
+  name: string,
+
+  /**
+   * 文件路径
+   */
+  proveUrl: string
+}
\ No newline at end of file

src/pages/balance/components/StatusActions/index.tsx

@@ -10,6 +10,7 @@ import ConfirmAccount from '../../components/ConfirmAccount';
 import Voucher from '../../components/Voucher';
 import { StatusEnum, TO_BE_RECONCILED, TO_BE_PAY, TO_BE_COLLECTED, COMPLETED } from '../../components/StatusTag';
 import styles from './index.less';
+import UploadPayVoucher from '../../components/UploadPayVoucher';
 
 interface Iprops {
   status: StatusEnum,
@@ -87,7 +88,7 @@ const ViewPaymentVoucher: React.FC = (props) => {
           return (
             <>
               <Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
-                <Voucher />
+                <Voucher files={[]} />
               </Modal>
               <div className={styles.modalBtn}  onClick={show}>查看付款凭证</div>
             </>
@@ -98,10 +99,43 @@ const ViewPaymentVoucher: React.FC = (props) => {
   )
 }
 
+// 待付款 状态 上传付款凭证
+const UploadVoucher: React.FC = (props) => {
+  return (
+    <ModalContainer>
+      {
+        ({visible, show, cancel}) => {
+          return (
+            <>
+              <Modal 
+                width={548} 
+                title="上传付款凭证" 
+                onCancel={cancel} 
+                visible={visible} 
+                footer={(
+                  <Space>
+                    <Button onClick={cancel}>取消</Button>
+                    <Button 
+                      type={"primary"} 
+                    >确认</Button>
+                  </Space>
+                )}
+              >
+                <UploadPayVoucher fileList={[{name: '123', proveUrl: ''}]} />
+              </Modal>
+              <div className={styles.modalBtn}  onClick={show}>上传付款凭证</div>
+            </>
+          )
+        }
+      }
+    </ModalContainer>
+  )
+}
+
 // 待对账时显示确认对账， 待付款 什么都不显示， 代收款显示确认付款凭证， 以完成显示 查看付款凭证
 const ChildrenComponent = {
   [TO_BE_RECONCILED]: ConfirmAccountComponent,
-  [TO_BE_PAY]: null,
+  [TO_BE_PAY]: UploadVoucher,
   [TO_BE_COLLECTED]: ConfirmCollected,
   [COMPLETED]: ViewPaymentVoucher
 }

src/pages/balance/components/UploadPayVoucher/index.less

+.container {
+  .formItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 24px;
+
+    .label {
+        margin-right: 20px;
+        color: #909399;
+        width: 70px;
+    }
+  } 
+
+  .voucherText {
+    color: #909399;
+    font-size: 14px;
+  }
+
+  .upload {
+    margin-top: 16px;
+    .tips {
+      margin-top: 12px;      
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
\ No newline at end of file

src/pages/balance/components/UploadPayVoucher/index.tsx

@@ -4,26 +4,99 @@
  * @Description: 上传付款凭证
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Voucher from '../Voucher';
+import styles from './index.less';
+import { Upload, Button, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
+import { UPLOAD_TYPE } from '@/constants'
+import { VoucherFileProps } from '../../common/type';
+
+interface Iprops {
+  fileList: VoucherFileProps[],
+}
+
+const UploadPayVoucher: React.FC<Iprops> = (props) => {
+  const [fileList, setFileList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  // 进来设置fileList
+  useEffect(() => {
+    setFileList(props.fileList)
+  }, [props.fileList])
+
+  /***
+   * 上传前检查
+   */
+  const fileMaxSize = 200;
+  const beforeUpload = (file: UploadFile) => {
+    const isSizeLimit = file.size / 1024 < fileMaxSize;
+    if (!isSizeLimit) {
+      message.error(`上传文件大小不超过${fileMaxSize}K!`);
+    }
+    return isSizeLimit;
+  }
+  /**
+   * 上传配置
+   */
+  const uploadProps = {
+    name: 'file',
+    action: '/api/file/file/upload',
+    headers: {},
+    data: {
+      fileType: UPLOAD_TYPE, // 指定类型是本地还是线上，
+    },
+    disabled: loading,
+    showUploadList: false,
+    onChange(info: UploadChangeParam) {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return;
+      }
+      if (info.file.status === 'done') {
+        // 图片回显
+        const { code, data } = info.file.response
+        if (code === 1000) {
+          console.log('upload success')
+          // onChange(data)
+          const temp = [...fileList];
+          const filename = info.file.name
+          temp.push({
+            name: filename,
+            proveUrl: data
+          })
+          setFileList(temp);
+        }
+        setLoading(false)
+      }
+    },
+    beforeUpload
+  };
 
-const UploadPayVoucher = () => {
   return (
-    <div>
-      <div>
-        <span>账户名称</span>
-        <span>温州市隆昌皮具有限公司</span>
+    <div className={styles.container}>
+      <div className={styles.formItem}>
+        <span className={styles.label}>账户名称</span>
+        <span className={styles.value}>温州市隆昌皮具有限公司</span>
+      </div>
+      <div className={styles.formItem}>
+        <span className={styles.label}>银行账号</span>
+        <span className={styles.value}>3214 454646 145 46 1231</span>
       </div>
-      <div>
-        <span>银行账号</span>
-        <span>3214 454646 145 46 1231</span>
+      <div className={styles.formItem}>
+        <span className={styles.label}>开户行</span>
+        <span className={styles.value}>中国建设银行广州市分行营业部</span>
       </div>
-      <div>
-        <span>开户行</span>
-        <span>中国建设银行广州市分行营业部</span>
+      <p className={styles.voucherText}>上传支付凭证</p>
+      <Voucher files={fileList} />
+      <div className={styles.upload}>
+        <Upload {...uploadProps}>
+          <Button icon={<UploadOutlined />}>上传凭证</Button>
+          <p className={styles.tips}>单个凭证文件大小不能超过200K</p>      
+        </Upload>
       </div>
-      <h1>上传支付凭证</h1>
-      <Voucher />
+
     </div>
   )
 }

src/pages/balance/components/Voucher/index.less

@@ -23,5 +23,10 @@
 
   .view {
     margin-left: auto;
+    cursor: pointer;
+  }
+
+  .text {
+    cursor: pointer;
   }
 }
\ No newline at end of file

src/pages/balance/components/Voucher/index.tsx

@@ -7,17 +7,33 @@
 import React from 'react';
 import styles from './index.less'
 import image_icon from '@/assets/imgs/image_icon.png';
+import { VoucherFileProps } from '../../common/type';
 
-const Voucher = () => {
+interface Iprops {
+  files: VoucherFileProps[]
+}
+
+const Voucher: React.FC<Iprops> = (props) => {
+  const { files = [] } = props;
   return (
-    <div className={styles.container}>
-      {/* <div></div>/ */}
-      <div className={styles.image}>
-        <img src={image_icon} className={styles.icon} />
-      </div>
-      <div className={styles.text}>20187878.jpg</div>
-      <div className={styles.view}>预览</div>
-    </div>
+    <>
+      {
+        files.map((item: VoucherFileProps) => {
+          return (
+            <div className={styles.container}>
+              {/* <div></div>/ */}
+              <div className={styles.image}>
+                <img src={image_icon} className={styles.icon} />
+              </div>
+              <div className={styles.text}>
+                <a href={item.proveUrl} target={"_blank"}>{item.name}</a>
+              </div>
+              <div className={styles.view}>预览</div>
+            </div>
+          )
+        })
+      }
+    </>
   )
 }