chore: 抽离上传凭证弹窗

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/index.tsx

@@ -19,11 +19,10 @@ import { PAY_CHANNEL_WECHAT } from '@/constants';
 import MellowCard from '@/components/MellowCard';
 import { Pie } from '@/components/Charts';
 import StatusTag from '@/components/StatusTag';
-import NiceForm from '@/components/NiceForm';
-import { uploadVoucherModalSchema } from './schema';
 import TradeRecord, { RecordParams, RecordRes } from '../TradeRecord';
 import WxPayModal from '../WxPayModal';
 import RefundModal from '../RefundModal';
+import UploadVoucherModal from '../UploadVoucherModal';
 import styles from './index.less';
 
 const uploadVoucherFormActions = createFormActions();
@@ -111,12 +110,6 @@ interface IntroduceRowProps {
 interface IntroduceRowState {
   billId: number;
   billInfo: BillDetailData | null;
-  bankAccount: {
-    id: number, 
-    name: string, 
-    bankAccount: string, 
-    bankDeposit: string, 
-  },
   visibleRecord: boolean;
   visibleRepayment: boolean;
   visibleUploadVoucher: boolean;
@@ -141,12 +134,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
     this.state = {
       billId: 0, 
       billInfo: null, 
-      bankAccount: {
-        id: 0, 
-        name: '', 
-        bankAccount: '', 
-        bankDeposit: '', 
-      }, 
       visibleRecord: false, 
       visibleRepayment: false, 
       visibleUploadVoucher: false, 
@@ -181,30 +168,12 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
         id: `${id}`, 
       }).then(res => {
         this.setState({ billInfo: res });
-        this.getSettleAccountsGetMemberAccountConfig(res.memberId, res.memberRoleId);
       }).finally(() => {
         this.setState({ billInfoLoading: false });
       });
     }
   };
 
-  // 获取对公账户信息
-  getSettleAccountsGetMemberAccountConfig = (memberId: number, memberRoleId: number) => {
-    if (!memberId || !memberRoleId) {
-      return;
-    }
-    PublicApi.getSettleAccountsGetMemberAccountConfig({
-      memberId: `${memberId}`, 
-      roleId: `${memberRoleId}`, 
-    }).then(res => {
-      if (res.code === 1000) {
-        this.setState({
-          bankAccount: res.data, 
-        });
-      }
-    });
-  };
-
   // 根据下拉框数据改变设置默认选中第一项，并获取相应的账单详情
   initialize = (options) => {
     if (options && options.length) {
@@ -297,17 +266,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
 
   handleUploadVoucherSubmit = values => {
     const { payProveList = [] } = values;
-    const { repaymentValues, billId, bankAccount } = this.state;
-
-    if (
-      !bankAccount || 
-      !bankAccount.id || 
-      !bankAccount.bankAccount || 
-      !bankAccount.bankDeposit
-    ) {
-      message.error('没有还款账户完整相关信息，无法还款');
-      return;
-    }
+    const { repaymentValues, billId } = this.state;
 
     this.setState({ uploadVoucherSubmitLoading: true });
     PublicApi.postPayCreditApplyCreditRepay({
@@ -328,13 +287,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
     });
   };
 
-  beforeUploadVoucher = file => {
-    if (file.size / 1024 > 200) {
-      message.warning('图片大小超过200K');
-      return Promise.reject();
-    }
-  };
-
   getRecordList = params => {
     const { billId } = this.state;
     const { fetchBillRecordList } = this.props;
@@ -409,7 +361,6 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
       billInfoLoading, 
       visibleRecord, 
       billInfo, 
-      bankAccount, 
       visibleRepayment, 
       visibleUploadVoucher, 
       repaymentSubmitLoading, 
@@ -588,29 +539,14 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
           confirmLoading={repaymentSubmitLoading}
         />
 
-        <Modal
-          title="上传支付凭证"
-          width={576}
+        <UploadVoucherModal 
           visible={visibleUploadVoucher}
           confirmLoading={uploadVoucherSubmitLoading}
-          onOk={() => uploadVoucherFormActions.submit()}
+          memberId={billInfo?.memberId}
+          memberRoleId={billInfo?.memberRoleId}
           onCancel={() => this.setState({ visibleUploadVoucher: false })}
-          destroyOnClose
-        >
-          <NiceForm
-            previewPlaceholder=""
-            initialValues={bankAccount}
-            effects={($, { setFieldState }) => {
-              
-            }}
-            expressionScope={{
-              beforeUpload: this.beforeUploadVoucher, 
-            }}
-            actions={uploadVoucherFormActions}
-            schema={uploadVoucherModalSchema}
           onSubmit={this.handleUploadVoucherSubmit}
         />
-        </Modal>
       
         <WxPayModal 
           {...WxPayModalPros}

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/UploadVoucherModal/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-13 13:46:08
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-01-13 13:46:22
+ * @Description: 上传凭证弹窗
+ */
+import React, { useState, useEffect } from 'react';
+import { Modal, message } from 'antd';
+import { createFormActions } from '@formily/antd';
+import NiceForm from '@/components/NiceForm';
+import { PublicApi } from '@/services/api';
+import { uploadVoucherModalSchema } from './schema';
+import styles from './index.less';
+
+const uploadVoucherFormActions = createFormActions();
+
+interface UploadVoucherModalProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean;
+  /**
+   * 确认按钮loading
+   */
+  confirmLoading: boolean;
+  /**
+   * 会员id
+   */
+  memberId: number;
+  /**
+   * 会员角色
+   */
+  memberRoleId: number;
+  /**
+   * 提交事件
+   */
+  onSubmit: (values: any) => void;
+  /**
+   * 隐藏事件
+   */
+  onCancel: () => void,
+}
+
+interface BankAccountData {
+  id: number, 
+  name: string, 
+  bankAccount: string, 
+  bankDeposit: string, 
+}
+
+const UploadVoucherModal: React.FC<UploadVoucherModalProps> = (props: UploadVoucherModalProps) => {
+  const {
+    visible,
+    confirmLoading,
+    memberId,
+    memberRoleId,
+    onSubmit,
+    onCancel,
+  } = props;
+
+  const [bankAccount, setBankAccount] = useState<BankAccountData>({
+    id: 0, 
+    name: '', 
+    bankAccount: '', 
+    bankDeposit: '', 
+  });
+  const [loading, setLoading] = useState(false);
+
+  // 获取对公账户信息
+  const getSettleAccountsGetMemberAccountConfig = (memberId: number, memberRoleId: number) => {
+    if (!memberId || !memberRoleId || loading) {
+      return;
+    }
+    setLoading(true);
+    PublicApi.getSettleAccountsGetMemberAccountConfig({
+      memberId: `${memberId}`, 
+      roleId: `${memberRoleId}`, 
+    }).then(res => {
+      if (res.code === 1000) {
+        setBankAccount(res.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    if (visible) {
+      getSettleAccountsGetMemberAccountConfig(memberId, memberRoleId);
+    }
+  }, [visible]);
+
+  const beforeUploadVoucher = file => {
+    if (file.size / 1024 > 200) {
+      message.warning('图片大小超过200K');
+      return Promise.reject();
+    }
+  };
+
+  const handleUploadVoucherSubmit = values => {
+    if (onSubmit) {
+      if (
+        !bankAccount || 
+        !bankAccount.id || 
+        !bankAccount.bankAccount || 
+        !bankAccount.bankDeposit
+      ) {
+        message.error('没有还款账户完整相关信息，无法还款');
+        return;
+      }
+      
+      onSubmit(values);
+    }
+  };
+
+  return (
+    <Modal
+      title="上传支付凭证"
+      width={576}
+      visible={visible}
+      confirmLoading={confirmLoading}
+      onOk={() => uploadVoucherFormActions.submit()}
+      onCancel={onCancel}
+      destroyOnClose
+    >
+      <NiceForm
+        previewPlaceholder=""
+        initialValues={bankAccount}
+        effects={($, { setFieldState }) => {
+          
+        }}
+        expressionScope={{
+          beforeUpload: beforeUploadVoucher, 
+        }}
+        actions={uploadVoucherFormActions}
+        schema={uploadVoucherModalSchema}
+        onSubmit={handleUploadVoucherSubmit}
+      />
+    </Modal>
+  );
+};
+
+export default UploadVoucherModal;

src/pages/payandSettle/creditApplication/quotaMenage/detail/components/IntroduceRow/schema/index.ts → src/pages/payandSettle/creditApplication/quotaMenage/detail/components/UploadVoucherModal/schema/index.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-13 14:01:40
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-01-13 14:01:41
+ * @Description: 
+ */
 import { ISchema } from '@formily/antd';
 import { UPLOAD_TYPE } from '@/constants';