feat:采购订单-待支付订单

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

@@ -8,6 +8,7 @@ import { UPLOAD_TYPE } from '@/constants'
 import { usePageStatus } from '@/hooks/usePageStatus'
 import { PublicApi } from '@/services/api'
 import { history } from 'umi'
+import { useHttpRequest } from '@/hooks/useHttpRequest'
 
 export interface OrderPayModalProps {
   currentRef: any,
@@ -54,7 +55,9 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
 
   const { id } = usePageStatus()
   const { data, payList } = useContext(OrderDetailContext)
-  const transformPayList: any = transformPayData(data.paymentInformationResponses, payList)
+
+  const transformPayList: any = data ? transformPayData(data.paymentInformationResponses, payList) : []
+  const { run, loading } = useHttpRequest(PublicApi.postOrderPendingOrderPay)
   const [visible, setVisible] = useState(false)
   const [checked, setChecked] = useState<any>({})
   const [current, setCurrent] = useState(0)
@@ -107,7 +110,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
       paymentInformationId
     }
 
-    const { code } = await PublicApi.postOrderPendingOrderPay(params)
+    const { code } = await run(params)
     if (code === 1000) {
       history.goBack()
     }
@@ -137,6 +140,7 @@ const OrderPayModal: React.FC<OrderPayModalProps> = (props) => {
       onCancel={handleCancel}
       cancelText={current === 0 ? '取消' : '上一步'}
       okText={current === 0 ? '下一步' : '确认'}
+      confirmLoading={loading}
     >
       {current === 0 &&
         transformPayList && Object.entries(transformPayList).map(([key, value]) => <Row key={key} style={{ marginBottom: 24 }}>

src/pages/transaction/purchaseOrder/readyConfirmContract/detail/index.tsx

-import React from 'react';
+import React, { useState, useCallback, useRef } from 'react';
+import { OrderDetailContext } from '../../../_public/order/context';
+import { PublicApi } from '@/services/api';
+import { Button } from 'antd';
+import OrderDetailHeader from '@/pages/transaction/components/OrderDetailHeader';
+import OrderDetailWrapper from '@/pages/transaction/components/OrderDetailWrapper';
+import PreLoading from '@/components/PreLoading';
+import { useOrderDetail } from '../../../_public/order/effects/useOrderDetail';
+import { history } from 'umi'
+import { useHttpRequest } from '@/hooks/useHttpRequest';
+import OrderDetailSection from '../../../components/orderDetailSection';
+import OrderElectronModal from '@/pages/transaction/components/orderElectronModal';
+
+const ReadyConfirmContract: React.FC = () => {
+  const { formContext, id, detailList } = useOrderDetail({type: 'purchaseOrder'})
+  const { run, loading } = useHttpRequest(PublicApi.postOrderProcurementOrderReviewed)
+  const electronRef = useRef<any>({})
+
+  const handleClick = useCallback(() => {
+    electronRef.current.setVisible(true)
+  }, [])
 
-const ReadyConfirmContractDetail: React.FC = () => {
   return (
     <div>
-      待确认电子合同详情
+      <OrderDetailContext.Provider value={formContext}>
+        <OrderDetailHeader detailList={detailList} detailData={formContext.data} extraRight={
+          <Button type='primary' onClick={handleClick}>
+            确认电子合同
+          </Button>
+        } />
+
+        <OrderDetailWrapper>
+          <PreLoading loading={!formContext.data} active paragraph={{rows: 6}}>
+            <OrderDetailSection formContext={formContext}/>
+          </PreLoading>
+        </OrderDetailWrapper>
+
+        {/* 提交时触发的弹窗集合 */}
+        <OrderElectronModal
+          currentRef={electronRef}
+        />
+      </OrderDetailContext.Provider>
     </div>
   );
 };
 
-export default ReadyConfirmContractDetail;
\ No newline at end of file
+export default ReadyConfirmContract;
\ No newline at end of file

src/pages/transaction/purchaseOrder/readyPayOrder/detail/index.tsx

-import React from 'react';
+import React, { useState, useCallback, useRef } from 'react';
+import { OrderDetailContext } from '../../../_public/order/context';
+import { PublicApi } from '@/services/api';
+import { Button } from 'antd';
+import OrderDetailHeader from '@/pages/transaction/components/OrderDetailHeader';
+import OrderDetailWrapper from '@/pages/transaction/components/OrderDetailWrapper';
+import PreLoading from '@/components/PreLoading';
+import { useOrderDetail } from '../../../_public/order/effects/useOrderDetail';
+import OrderDetailSection from '../../../components/orderDetailSection';
+import OrderPayModal from '@/pages/transaction/components/orderPayModal';
+
+const ReadyConfirmContract: React.FC = () => {
+  const { formContext, id, detailList } = useOrderDetail({type: 'purchaseOrder'})
+  const payRef = useRef<any>({})
+
+  const handleClick = useCallback(() => {
+    payRef.current.setVisible(true)
+  }, [])
 
-const ReadyPayOrderDetail: React.FC = () => {
   return (
     <div>
-      待支付订单详情
+      <OrderDetailContext.Provider value={formContext}>
+        <OrderDetailHeader detailList={detailList} detailData={formContext.data} extraRight={
+          <>
+            <Button type='primary' onClick={handleClick}>
+              去支付
+            </Button>
+            <div style={{ textAlign: 'right' }}>
+              <p style={{ marginTop: 12, fontSize: 12, color: '#6B778C' }}>本次需支付</p>
+              { formContext.data && <p>￥{formContext.data.sumPrice}</p> }
+            </div>
+          </>
+        } />
+
+        <OrderDetailWrapper>
+          <PreLoading loading={!formContext.data} active paragraph={{rows: 6}}>
+            <OrderDetailSection formContext={formContext}/>
+          </PreLoading>
+        </OrderDetailWrapper>
+
+        {/* 提交时触发的弹窗集合 */}
+        <OrderPayModal
+          currentRef={payRef}
+        />
+      </OrderDetailContext.Provider>
     </div>
   );
 };
 
-export default ReadyPayOrderDetail;
\ No newline at end of file
+export default ReadyConfirmContract;
\ No newline at end of file