完善授信申请相关

config/routes/payandSettle.ts

@@ -3,7 +3,7 @@
  * @Date: 2020-08-19 15:33:27
  * @LastEditors: XieZhiXiong
  * @Copyright: 1549414730@qq.com
- * @LastEditTime: 2020-10-26 16:46:50
+ * @LastEditTime: 2020-10-27 14:33:09
  */
 import { RouterChild } from '../utils';
 
@@ -47,7 +47,14 @@ const payandSettleRoute: RouterChild = {
         {
           path: '/memberCenter/payandSettle/creditApplication/quotaMenage/apply',
           name: 'quotaApply', 
-          component: '@/pages/payandSettle/creditApplication/quotaPrSubmit/verify', 
+          component: '@/pages/payandSettle/creditApplication/quotaMenage/apply', 
+          hideInMenu: true, 
+        }, 
+        // 授信额度管理-历史申请单详情
+        {
+          path: '/memberCenter/payandSettle/creditApplication/quotaMenage/history',
+          name: 'quotaApply', 
+          component: '@/pages/payandSettle/creditApplication/quotaFormQuery/detail', 
           hideInMenu: true, 
         }, 
         // 授信申请单查询

src/pages/payandSettle/creditApplication/quotaPrSubmit/components/DetailInfo/index.tsx → src/pages/payandSettle/creditApplication/components/DetailInfo/index.tsx

@@ -16,20 +16,22 @@ import { GetPayCreditApplyGetApplyDetailResponse } from '@/services/PayApi';
 import { CREDIT_INNER_STATUS, CREDIT_OUTER_STATUS } from '@/constants';
 import AvatarWrap from '@/components/AvatarWrap';
 import StatusTag from '@/components/StatusTag';
-import { MEMBER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_BADGE_MAP } from '../../../../constant';
+import { MEMBER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_BADGE_MAP } from '../../../constant';
 
-const OuterCirculation = React.lazy(() => import('../../../components/OuterCirculation'));
-const QuotaApplicationInfo = React.lazy(() => import('../../../components/QuotaApplicationInfo'));
-const HitoryList = React.lazy(() => import('../../../components/HistoryList'));
-const OuterCirculationRecord = React.lazy(() => import('../../../components/OuterCirculationRecord'));
+const OuterCirculation = React.lazy(() => import('../OuterCirculation'));
+const QuotaApplicationInfo = React.lazy(() => import('../QuotaApplicationInfo'));
+const HitoryList = React.lazy(() => import('../HistoryList'));
+const OuterCirculationRecord = React.lazy(() => import('../OuterCirculationRecord'));
 
-interface DetailInfo {
+interface DetailInfoProps {
   // 申请id
   id: string;
   // 授信id
   creditId: string; 
   // 是否是编辑的
   isEdit?: boolean;
+  // 历史记录目标路径
+  target?: string;
 };
 
 interface QuotaValues {
@@ -41,10 +43,11 @@ interface QuotaValues {
   repayPeriod: number | null; 
 };
 
-const DetailInfo: React.FC<DetailInfo> = ({
+const DetailInfo: React.FC<DetailInfoProps> = ({
   id, 
   creditId, 
   isEdit = false, 
+  target, 
 }) => {
   const [quotaInfo, setQuotaInfo] = useState<GetPayCreditApplyGetApplyDetailResponse>(null);
   const [quotaValues, setQuotaValues] = useState<QuotaValues>({
@@ -198,7 +201,10 @@ const DetailInfo: React.FC<DetailInfo> = ({
         </Suspense>
         
         <Suspense fallback={null}>
-          <HitoryList dataSource={quotaInfo?.historyApplyList} />
+          <HitoryList 
+            dataSource={quotaInfo?.historyApplyList} 
+            target={target}
+          />
         </Suspense>
         
         <Suspense fallback={null}>

src/pages/payandSettle/creditApplication/components/HistoryList/index.tsx

@@ -12,10 +12,13 @@ interface HistoryListHistoryListProps {
     auditQuota: number;
     applyTime: string;
   }[];
+  // 目标路径
+  target?: string;
 };
 
 const HistoryList: React.FC<HistoryListHistoryListProps> = ({
   dataSource = [], 
+  target, 
 }) => {
 
   const columns: EditableColumns[] = [
@@ -24,7 +27,7 @@ const HistoryList: React.FC<HistoryListHistoryListProps> = ({
       dataIndex: 'applyNo', 
       render: (text, record) => (
         <EyePreview
-          url={`/memberCenter/payandSettle/creditApplication/quotaPrSubmit/detail?id=${record.id}`}
+          url={`${target ? target : '/memberCenter/payandSettle/creditApplication/quotaPrSubmit/detail'}?id=${record.id}`}
         >
           {text}
         </EyePreview>

src/pages/payandSettle/creditApplication/quotaFormQuery/detail.tsx

-import React, { Suspense, useEffect, useState } from 'react';
-import { 
-  PageHeader, 
-  Descriptions, 
-  Card, 
-  Spin, 
-  Button, 
-  Badge, 
-  message, 
-} from 'antd';
-import { FormOutlined } from '@ant-design/icons';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { history } from 'umi';
-import { PublicApi } from '@/services/api';
-import { GetPayCreditApplyGetApplyDetailResponse } from '@/services/PayApi';
-import { CREDIT_INNER_STATUS, CREDIT_OUTER_STATUS } from '@/constants';
+import React from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import AvatarWrap from '@/components/AvatarWrap';
-import StatusTag from '@/components/StatusTag';
-import { MEMBER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_TAG_MAP, CREDIT_OUTER_STATUS_BADGE_MAP } from '../../constant';
-
-const OuterCirculation = React.lazy(() => import('../components/OuterCirculation'));
-const QuotaApplicationInfo = React.lazy(() => import('../components/QuotaApplicationInfo'));
-const HitoryList = React.lazy(() => import('../components/HistoryList'));
-const OuterCirculationRecord = React.lazy(() => import('../components/OuterCirculationRecord'));
-
-interface DetailInfo {
-  // 授信id
-  id: string;
-  // 申请id
-  applyId: string; 
-  // 是否是编辑的
-  isEdit?: boolean;
-};
-
-interface QuotaValues {
-  // 申请调整额度
-  applyQuota: number | null; 
-  // 申请调整账单日期
-  billDay: number | null; 
-  // 申请还款周期
-  repayPeriod: number | null; 
-};
+import DetailInfo from '../components/DetailInfo';
 
 const QuotaFormQueryDetail: React.FC = () => {
-  const { id } = usePageStatus();
-  const [quotaInfo, setQuotaInfo] = useState<GetPayCreditApplyGetApplyDetailResponse>(null);
-  const [quotaValues, setQuotaValues] = useState<QuotaValues>({
-    applyQuota: null, 
-    billDay: null, 
-    repayPeriod: null, 
-  });
-  const [infoLoading, setInfoloading] = useState(false);
-
-  const getQuotaInfo = () => {
-    if (!id) {
-      return;
-    }
-    setInfoloading(true);
-    PublicApi.getPayCreditApplyGetApplyDetail({
-      id, 
-    }).then(res => {
-      if (res.code === 1000) {
-        setQuotaInfo(res.data);
-        setQuotaValues({
-          applyQuota: res.data.applyQuota, 
-          billDay: res.data.billDay, 
-          repayPeriod: res.data.repayPeriod, 
-        });
-      }
-    }).finally(() => {
-      setInfoloading(false);
-    });
-  };
-
-  useEffect(() => {
-    getQuotaInfo();
-  }, []);
+  const { id, creditId } = usePageStatus();
 
   return (
-    <Spin spinning={infoLoading}>
-      <PageHeaderWrapper
-        title={
-          <>
-            <PageHeader
-              style={{ padding: '0' }}
-              onBack={() => history.goBack()}
-              title={
-                <AvatarWrap 
-                  info={{
-                    aloneTxt: '单', 
-                    name: `申请单号：${quotaInfo && quotaInfo.applyNo ? quotaInfo.applyNo : ''}`, 
-                  }}
-                  extra={quotaInfo && quotaInfo.member ? quotaInfo.member.levelTag || '' : ''}
-                />
-              } 
-              extra={(
-                <>
-
-                </>
-              )}
-            >
-              <Descriptions 
-                size="small" 
-                column={3} 
-                style={{ 
-                  padding: '0 32px', 
-                }}
-              >
-                <Descriptions.Item label="会员归属">{'暂无'}</Descriptions.Item>
-                <Descriptions.Item label="会员类型">{quotaInfo?.member?.memberTypeName}</Descriptions.Item>
-                <Descriptions.Item label="会员角色名称">{quotaInfo?.member?.roleName}</Descriptions.Item>
-                <Descriptions.Item label="会员状态">
-                  <StatusTag 
-                    type={MEMBER_STATUS_TAG_MAP[quotaInfo && quotaInfo.member ? quotaInfo.member.status || 1 : 1]} 
-                    title={quotaInfo && quotaInfo.member ? quotaInfo.member.status || 1 : 1} 
-                  />
-                </Descriptions.Item>
-                <Descriptions.Item label="外部状态">
-                  <StatusTag type={CREDIT_OUTER_STATUS_TAG_MAP[quotaInfo?.outerStatus]} title={CREDIT_OUTER_STATUS[quotaInfo?.outerStatus]} />
-                </Descriptions.Item>
-                <Descriptions.Item label="内部状态">
-                  <Badge color={CREDIT_OUTER_STATUS_BADGE_MAP[quotaInfo?.innerStatus]} text={CREDIT_INNER_STATUS[quotaInfo?.innerStatus]} />
-                </Descriptions.Item>
-              </Descriptions>
-            </PageHeader>
-          </>
-        }
-      >
-        <Suspense fallback={null}>
-          <OuterCirculation 
-            steps={
-              quotaInfo && quotaInfo.outerVerifyRecordList ? 
-                quotaInfo.outerVerifyRecordList.map(item => ({
-                  title: item.operate, 
-                  description: item.roleName, 
-                })) : 
-                []
-            } 
-            current={0} 
-          />
-        </Suspense>
-        
-        <Suspense fallback={null}>
-          <QuotaApplicationInfo 
-            quotaInfo={{
-              originalQuota: quotaInfo?.originalQuota, 
-              applyQuota: quotaValues.applyQuota, 
-              billDay: quotaValues.billDay, 
-              repayPeriod: quotaValues.repayPeriod, 
-              applyTime: quotaInfo?.applyTime,
-            }}
-            verify={
-              quotaInfo && quotaInfo.verify ? {
-                quota: quotaInfo?.verify?.quota, 
-                billDay: quotaInfo?.verify?.billDay, 
-                repayPeriod: quotaInfo?.verify?.repayPeriod, 
-                verifyTime: quotaInfo?.verify?.verifyTime, 
-              } : 
-              null
-            }
-            editable={false} 
-          />
-        </Suspense>
-        
-        <Suspense fallback={null}>
-          <HitoryList dataSource={quotaInfo?.historyApplyList} />
-        </Suspense>
-        
-        <Suspense fallback={null}>
-          <OuterCirculationRecord dataSource={quotaInfo?.outerVerifyRecordList} />
-        </Suspense>
-      </PageHeaderWrapper>
-    </Spin>
+    <DetailInfo 
+      id={id} 
+      creditId={creditId} 
+      target="/memberCenter/payandSettle/creditApplication/quotaFormQuery/detail"
+      isEdit 
+    />
   );
 };
 

src/pages/payandSettle/creditApplication/quotaMenage/apply.tsx

+import React from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import DetailInfo from '../components/DetailInfo';
+
+const QuotaMenageApply: React.FC = () => {
+  const { id, creditId } = usePageStatus();
+
+  return (
+    <DetailInfo 
+      id={id} 
+      creditId={creditId} 
+      target="/memberCenter/payandSettle/creditApplication/quotaMenage/history"
+      isEdit 
+    />
+  );
+};
+
+export default QuotaMenageApply;
\ No newline at end of file

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

@@ -55,7 +55,7 @@ const BillInfo: React.FC<BillInfoProps> = ({
               <TabPane 
                 tab={(
                   <div className={styles.dateWrap}>
-                    <StatusTag type="danger" title={item.OverdueDay} />
+                    <StatusTag type="danger" title={`逾期 ${item.overdueDay} 天`} />
                     <div className={styles.time}>{item.billName}</div>
                   </div>
                 )} 
@@ -89,7 +89,7 @@ const BillInfo: React.FC<BillInfoProps> = ({
                                     textAlign: 'right', 
                                   }}
                                 >
-                                  <StatusTag type="danger" title={trade.OverdueDay} />
+                                  <StatusTag type="danger" title={`逾期 ${trade.overdueDay} 天`} />
                                 </Col>
                               </Row>
                             </Descriptions.Item>

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

@@ -103,6 +103,13 @@ interface IntroduceRowProps {
 interface IntroduceRowState {
   billId: number;
   billInfo: BillDetailData | null;
+  bankAccount: {
+    id: number, 
+    name: string, 
+    bankAccount: string, 
+    bankDeposit: string, 
+    memberId: number, 
+  },
   visibleRecord: boolean;
   visibleRepayment: boolean;
   visibleUploadVoucher: boolean;
@@ -122,6 +129,13 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
     this.state = {
       billId: 0, 
       billInfo: null, 
+      bankAccount: {
+        id: 0, 
+        name: '', 
+        bankAccount: '', 
+        bankDeposit: '', 
+        memberId: 0, 
+      }, 
       visibleRecord: false, 
       visibleRepayment: false, 
       visibleUploadVoucher: false, 
@@ -138,6 +152,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
 
   tradeRecordRef = null;
 
+  // 获取账单详情
   getBillDetail = id => {
     const { fetchBillDetail } = this.props;
 
@@ -147,12 +162,27 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
         id: `${id}`, 
       }).then(res => {
         this.setState({ billInfo: res });
+        // this.getSettleAccountsCorporateAccountConfig();
       }).finally(() => {
         this.setState({ billInfoLoading: false });
       });
     }
   };
 
+  // 获取对公账户信息
+  getSettleAccountsCorporateAccountConfig = (payee: string) => {
+    PublicApi.getSettleAccountsCorporateAccountConfig({
+      memberId: payee, 
+    }).then(res => {
+      if (res.code === 1000) {
+        this.setState({
+          bankAccount: res.data, 
+        });
+      }
+    });
+  };
+
+  // 根据下拉框数据改变设置默认选中第一项，并获取相应的账单详情
   initialize = (options) => {
     if (options && options.length) {
       const first = options[0];
@@ -224,7 +254,12 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
 
   handleUploadVoucherSubmit = values => {
     const { payProveList } = values;
-    const { repaymentValues, billId } = this.state;
+    const { repaymentValues, billId, bankAccount } = this.state;
+
+    if (!bankAccount.id || !bankAccount.memberId) {
+      message.error('没有还款账户相关信息，无法还款');
+      return;
+    }
 
     this.setState({ uploadVoucherSubmitLoading: true });
     PublicApi.postPayCreditApplyCreditRepay({
@@ -289,6 +324,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
       billInfoLoading, 
       visibleRecord, 
       billInfo, 
+      bankAccount, 
       visibleRepayment, 
       visibleUploadVoucher, 
       repaymentSubmitLoading, 
@@ -389,7 +425,14 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
                               <span className={styles['repayment-time']}>
                                 {billInfo?.expireTime} 到期
                               </span>
-                              <StatusTag type="danger" title={billInfo?.expireDay} />
+                              <StatusTag 
+                                type="danger" 
+                                title={
+                                  billInfo && billInfo.expireDay !== undefined ? 
+                                    billInfo.expireDay > 0 ? `${billInfo.expireDay}天后` : `逾期 ${billInfo.expireDay} 天` : 
+                                    ''
+                                } 
+                              />
                             </div>
                           </div>
                           <div className={styles['repayment-right']}>
@@ -415,13 +458,13 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
                         <Col span={8}>
                           <div className={styles.badgeWrap}>
                             <Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>还款周期：</span>)} />
-                            <span className={styles['badgeWrap-content']}>{billInfo?.repayPeriod}</span>
+                            <span className={styles['badgeWrap-content']}>{billInfo?.repayPeriod}天</span>
                           </div>
                         </Col>
                         <Col span={8}>
                           <div className={styles.badgeWrap}>
                             <Badge color="#DFE1E6" text={(<span className={styles['badgeWrap-title']}>账单日期：</span>)} />
-                            <span className={styles['badgeWrap-content']}>{billInfo?.billDay}</span>
+                            <span className={styles['badgeWrap-content']}>{billInfo?.billDay}日</span>
                           </div>
                         </Col>
                       </Row>
@@ -488,6 +531,7 @@ class IntroduceRow extends React.Component<IntroduceRowProps, IntroduceRowState>
         >
           <NiceForm
             previewPlaceholder=""
+            initialValues={bankAccount}
             effects={($, { setFieldState }) => {
               
             }}

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

@@ -106,22 +106,19 @@ export const uploadVoucherModalSchema: ISchema = {
         full: true, 
       },
       properties: {
-        accountName: {
+        name: {
           type: 'string',
           title: '还款账户名称', 
-          default: '温州市隆昌皮具有限公司', 
           'x-component': 'Text', 
         },
         bankAccount: {
           type: 'string',
           title: '银行账号', 
-          default: '6214 7812 3456 7891 1234', 
           'x-component': 'Text', 
         },
-        bod: {
+        bankDeposit: {
           type: 'string',
           title: '开户行', 
-          default: '中国建设银行广州市分行营业部', 
           'x-component': 'Text', 
         },
         payProveList: {

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

@@ -187,7 +187,10 @@ const QuotaMenageDetail: React.FC = () => {
         </Suspense>
 
         <Suspense fallback={null}>
-          <HistoryList />
+          <HistoryList 
+            dataSource={creditInfo?.historyApplyList} 
+            target="/memberCenter/payandSettle/creditApplication/quotaMenage/history"
+          />
         </Suspense>
       </PageHeaderWrapper>
     </Spin>

src/pages/payandSettle/creditApplication/quotaPrSubmit/detail.tsx

 import React from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import DetailInfo from './components/DetailInfo';
+import DetailInfo from '../components/DetailInfo';
 
 const QuotaPrSubmitDetail: React.FC = () => {
   const { id, creditId } = usePageStatus();

src/pages/payandSettle/creditApplication/quotaPrSubmit/verify.tsx

 import React from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import DetailInfo from './components/DetailInfo';
+import DetailInfo from '../components/DetailInfo';
 
 const VerifyQuotaPrSubmit: React.FC = () => {
   const { id, creditId } = usePageStatus();
 
   return (
-    <DetailInfo id={id} creditId={creditId} isEdit />
+    <DetailInfo 
+      id={id} 
+      creditId={creditId} 
+      isEdit 
+    />
   );
 };