feat: 跟进UI

src/pages/afterService/components/RefundModal/Balance/index.less

+@import '~antd/es/style/themes/default.less';
+
+.balance {
+  :global {
+    .ant-descriptions-item-container {
+      align-items: center;
+    }
+  }
+
+  .amount {
+    font-size: @font-size-lg;
+    font-weight: 500;
+  
+    &-plus {
+      color: @error-color;
+      font-size: 24px;
+    }
+  }
+}

src/pages/afterService/components/RefundModal/Balance/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-06 11:36:34
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-09 16:25:35
+ * @Description: 余额退款
+ */
 import React, { useEffect, useState } from 'react';
 import { Descriptions, Space, Button, Spin } from 'antd';
 import { PublicApi } from '@/services/api';
+import { priceFormat } from '@/utils/numberFomat';
+import styles from './index.less';
 
 interface BalanceProps {
   /**
@@ -8,18 +17,6 @@ interface BalanceProps {
    */
   value: {[key: string]: any};
   /**
-   * 关闭事件
-   */
-  handleModalVisible: () => void; 
-  /**
-   * 弹窗内确认事件
-   */
-  handleConfirm: (values: {[key: string]: any}, modalName: string) => void; 
-  /**
-   * 弹窗提交 loading
-   */
-  submitLoading: boolean;
-  /**
    * 采购商id
    */
   purchaserId: number,
@@ -30,12 +27,9 @@ interface BalanceProps {
 };
 
 const Balance: React.FC<BalanceProps> = ({
-  handleModalVisible, 
-  handleConfirm, 
-  value, 
-  submitLoading, 
-  purchaserId, 
-  purchaserRoleId, 
+  value,
+  purchaserId,
+  purchaserRoleId,
 }) => {
   const [balance, setBalance] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -63,26 +57,15 @@ const Balance: React.FC<BalanceProps> = ({
 
   return (
     <Spin spinning={loading}>
-      <Descriptions title="账户余额信息" column={1}>
-        <Descriptions.Item label="账户可用余额">￥{balance}</Descriptions.Item>
-        <Descriptions.Item label="当前退款金额">
-          <span style={{ color: '#EF6260' }}>￥{value.refundAmount}</span>
-        </Descriptions.Item>
-      </Descriptions>
-
-      <div style={{ marginTop: 20, textAlign: 'center' }}>
-        <Space>
-          <Button onClick={handleModalVisible}>
-            取消
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => handleConfirm(value, 'balance')}
-            loading={submitLoading}
-          >
-            退款
-          </Button>
-        </Space>
+      <div className={styles.balance}>
+        <Descriptions column={1}>
+          <Descriptions.Item label="当前退款金额(元)">
+            <span className={styles['amount-plus']}>￥{priceFormat(value.refundAmount)}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="账户可用余额(元)">
+            <span className={styles.amount}>￥{priceFormat(balance)}</span>
+          </Descriptions.Item>
+        </Descriptions>
       </div>
     </Spin>
   )

src/pages/afterService/components/RefundModal/COD/index.less

+@import '~antd/es/style/themes/default.less';
+
+.COD {
+  :global {
+    .ant-descriptions-item-container {
+      align-items: center;
+    }
+  }
+
+  .amount {
+    font-size: @font-size-lg;
+    font-weight: 500;
+  
+    &-plus {
+      color: @error-color;
+      font-size: 24px;
+    }
+  }
+
+  .tip {
+    padding: @padding-xss @padding-xs;
+    color: @primary-color;
+    background-color: color(~`colorPalette('@{primary-color}', 0.04) `);
+  }
+}
\ No newline at end of file

src/pages/afterService/components/RefundModal/COD/index.tsx

-import React, { useState } from 'react';
-import { Descriptions, Space, Button } from 'antd';
+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-06 11:36:34
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-09 17:07:33
+ * @Description: 货到付款退款确认
+ */
+import React from 'react';
+import { Descriptions, Divider } from 'antd';
+import { priceFormat } from '@/utils/numberFomat';
+import styles from './index.less';
 
 interface bankAccount {
   id: number, 
@@ -14,57 +23,34 @@ interface BalanceProps {
    * 弹窗需要的数据值
    */
   value: {[key: string]: any};
-  /**
-   * 关闭事件
-   */
-  handleModalVisible: () => void; 
-  /**
-   * 弹窗内确认事件
-   */
-  handleConfirm: (values: {[key: string]: any}, modalName: string) => void; 
-  /**
-   * 弹窗提交 loading
-   */
-  submitLoading: boolean;
 };
 
 const COD: React.FC<BalanceProps> = ({
-  handleModalVisible, 
-  handleConfirm, 
   value, 
-  submitLoading, 
 }) => {
 
   return (
-    <>
-      <p>
+    <div className={styles.COD}>
+      <Descriptions column={1}>
+        <Descriptions.Item label="当前退款金额(元)">
+          <span className={styles['amount-plus']}>￥{priceFormat(value.refundAmount)}</span>
+        </Descriptions.Item>
+        <Descriptions.Item
+          label="支付方式"
+          style={{
+            paddingBottom: 0,
+          }}
+        >
+          货到付款
+        </Descriptions.Item>
+      </Descriptions>
+      <Divider dashed />
+      <p className={styles.tip}>
         支付方式为货到付款的订单，用户确认退款方式与退款金额后，
         系统会按照退款流程来完成退款动作，实际资金的退款结算由
         交易双方线下处理。
       </p>
-
-      <Descriptions column={1}>
-        <Descriptions.Item label="支付方式">货到付款</Descriptions.Item>
-        <Descriptions.Item label="退款金额">
-          <span style={{ color: '#EF6260' }}>￥{value.refundAmount}</span>
-        </Descriptions.Item>
-      </Descriptions>
-
-      <div style={{ marginTop: 20, textAlign: 'center' }}>
-        <Space>
-          <Button onClick={handleModalVisible}>
-            取消
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => handleConfirm(value, 'COD')}
-            loading={submitLoading}
-          >
-            确认
-          </Button>
-        </Space>
-      </div>
-    </>
+    </div>
   )
 };
 

src/pages/afterService/components/RefundModal/Credit/index.less

+@import '~antd/es/style/themes/default.less';
+
+.credit {
+  :global {
+    .ant-descriptions-item-container {
+      align-items: center;
+    }
+  }
+
+  .amount {
+    font-size: @font-size-lg;
+    font-weight: 500;
+  
+    &-plus {
+      color: @error-color;
+      font-size: 24px;
+    }
+  }
+}
\ No newline at end of file

src/pages/afterService/components/RefundModal/Credit/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-01-06 11:36:34
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-09 17:08:43
+ * @Description: 授信退款
+ */
 import React, { useState, useEffect } from 'react';
-import { Descriptions, Space, Button, Spin } from 'antd';
+import { Descriptions, Spin, Divider, Progress } from 'antd';
 import { PublicApi } from '@/services/api';
+import { priceFormat } from '@/utils/numberFomat';
+import styles from './index.less';
 
 interface Credit {
   quota: number, 
@@ -15,18 +24,6 @@ interface BalanceProps {
    */
   value: {[key: string]: any};
   /**
-   * 关闭事件
-   */
-  handleModalVisible: () => void; 
-  /**
-   * 弹窗内确认事件
-   */
-  handleConfirm: (values: {[key: string]: any}, modalName: string) => void; 
-  /**
-   * 弹窗提交 loading
-   */
-  submitLoading: boolean;
-  /**
    * 采购商id
    */
   purchaserId: number,
@@ -45,14 +42,11 @@ interface BalanceProps {
 };
 
 const Credit: React.FC<BalanceProps> = ({
-  handleModalVisible, 
-  handleConfirm, 
-  value, 
-  submitLoading, 
-  purchaserId, 
-  purchaserRoleId, 
-  supplierId, 
-  supplierRoleId, 
+  value,
+  purchaserId,
+  purchaserRoleId,
+  supplierId,
+  supplierRoleId,
 }) => {
   const [credit, setCredit] = useState<Credit>({
     quota: 0, 
@@ -92,28 +86,38 @@ const Credit: React.FC<BalanceProps> = ({
 
   return (
     <Spin spinning={loading}>
-      <Descriptions title="授信额度信息" column={1}>
-        <Descriptions.Item label="总授信额度">￥{credit.quota}</Descriptions.Item>
-        <Descriptions.Item label="已用授信额度">￥{credit.useQuota}</Descriptions.Item>
-        <Descriptions.Item label="可用授信额度">￥{credit.canUseQuota}</Descriptions.Item>
-        <Descriptions.Item label="当前退款金额">
-          <span style={{ color: '#EF6260' }}>￥{value.refundAmount}</span>
-        </Descriptions.Item>
-      </Descriptions>
-
-      <div style={{ marginTop: 20, textAlign: 'center' }}>
-        <Space>
-          <Button onClick={handleModalVisible}>
-            取消
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => handleConfirm(value, 'credit')}
-            loading={submitLoading}
+      <div className={styles.credit}>
+        <Descriptions column={1}>
+          <Descriptions.Item
+            label="当前退款金额"
+            style={{
+              paddingBottom: 0,
+            }}
           >
-            退款
-          </Button>
-        </Space>
+            <span className={styles['amount-plus']}>￥{priceFormat(value.refundAmount)}</span>
+          </Descriptions.Item>
+        </Descriptions>
+        <Divider dashed />
+        <Progress
+          percent={credit.quota ? credit.useQuota / credit.quota * 100 : 0}
+          strokeLinecap="square"
+          status="success"
+          showInfo={false}
+          style={{
+            marginBottom: 12,
+          }}
+        />
+        <Descriptions column={2}>
+          <Descriptions.Item label="可用授信额度(元)">
+            <span className={styles.amount}>￥{priceFormat(credit.canUseQuota)}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="已用授信额度(元)">
+            <span className={styles.amount}>￥{priceFormat(credit.useQuota)}</span>
+          </Descriptions.Item>
+          <Descriptions.Item label="总授信额度(元)">
+            <span className={styles.amount}>￥{priceFormat(credit.quota)}</span>
+          </Descriptions.Item>
+        </Descriptions>
       </div>
     </Spin>
   )

src/pages/afterService/components/RefundModal/UploadPaymentVoucher/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-09 10:34:18
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-09 15:53:08
+ * @Description: 上传支付凭证
+ */
+import React, { useState, useEffect } from 'react';
+import { message, Spin, Modal, Upload } from 'antd';
+import styled from 'styled-components';
+import { createFormActions } from '@formily/antd';
+import { PublicApi } from '@/services/api';
+import { FileData } from '@/utils';
+import NiceForm from '@/components/NiceForm';
+import { schema } from './schema';
+
+const formActions = createFormActions();
+
+const Wrap = styled(props => <div {...props} />)`
+  .ant-form-item {
+    margin-bottom: 4px;
+  }
+`
+
+interface BankAccount {
+  /**
+   * 还款账户名称
+   */
+  name: string,
+  /**
+   * 银行账号
+   */
+  bankAccount: string,
+  /**
+   * 开户行
+   */
+  bankDeposit: string,
+  /**
+   * 数据id
+   */
+  id: number,
+}
+
+export type ValueType = {
+  /**
+   * 账户id
+   */
+  id: number,
+  /**
+   * 还款账户名称
+   */
+  name: string,
+  /**
+   * 银行账号
+   */
+  bankAccount: string,
+  /**
+   * 开户行
+   */
+  bankDeposit: string,
+  /**
+   * 退款凭证
+   */
+  fileList: FileData[],
+}
+
+export type SubmitValueType = {
+  /**
+   * 账户id
+   */
+  id: number,
+  /**
+   * 支付凭证 ,PayProveBO
+   */
+  payProve?: {
+    /**
+     * 账户名称
+     */
+    name?: string
+    /**
+     * 银行账号
+     */
+    bankAccount?: string
+    /**
+     * 开户行
+     */
+    bankDeposit?: string
+    /**
+     * 支付凭证文件 ,PayProveFileBO
+     */
+    fileList?: {
+      /**
+       * 证明名称
+       */
+      name: string
+      /**
+       * 证明地址
+       */
+      proveUrl: string
+    }[]
+  }
+}
+
+interface IProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean,
+  /**
+   * 关闭事件
+   */
+  onClose: () => void,
+  /**
+   * 提交事件
+   */
+  onSubmit: (value: SubmitValueType) => Promise<void>,
+  /**
+   * 采购商id
+   */
+  purchaserId: number,
+  /**
+   * 采购商角色id
+   */
+  purchaserRoleId: number,
+}
+
+const UploadPaymentVoucher: React.FC<IProps> = (props: IProps) => {
+  const {
+    visible,
+    onClose,
+    onSubmit,
+    purchaserId, 
+    purchaserRoleId, 
+  } = props;
+  const [bankAccount, setBankAccount] = useState<BankAccount>({
+    name: '', 
+    bankAccount: '', 
+    bankDeposit: '', 
+    id: 0,
+  });
+  const [loading, setLoading] = useState(false);
+  const [refundDisabled, setRefundDisabled] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+
+  // 获取对公账户信息
+  const getSettleAccountsGetMemberAccountConfig = () => {
+    if (!purchaserId || !purchaserRoleId) {
+      return;
+    }
+    setLoading(true);
+    PublicApi.getSettleAccountsGetMemberAccountConfig({
+      memberId: `${purchaserId}`, 
+      roleId: `${purchaserRoleId}`, 
+    }).then(res => {
+      if (res.code === 1000) {
+        setBankAccount(res.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => {
+    getSettleAccountsGetMemberAccountConfig();
+  }, [purchaserId, purchaserRoleId]);
+
+  const handleModalVisible = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const beforeUploadVoucher = file => {
+    setRefundDisabled(true);
+    if (file.size / 1024 > 200) {
+      message.warning('图片大小超过200K');
+      return Upload.LIST_IGNORE;
+    }
+    return Promise.resolve();
+  };
+
+  const handleUploadChange = (file) => {
+    setRefundDisabled(false);
+  };
+
+  const handleSubmit = (values: ValueType) => {
+    const { fileList = [], id, ...rest } = values;
+
+    if (onSubmit) {
+      if (!bankAccount || !bankAccount.id) {
+        message.error('没有收款账户相关信息，无法退款');
+        return;
+      }
+      onSubmit({
+        id, 
+        payProve: {
+          ...rest, 
+          fileList: fileList.map(item => item.status === 'done' && ({
+            name: item.name, 
+            proveUrl: item.url,
+          })).filter(Boolean), 
+        },
+      });
+    }
+  };
+  
+  return (
+    <Modal
+      width={600}
+      title="上传支付凭证"
+      visible={visible}
+      onCancel={() => handleModalVisible()}
+      onOk={() => formActions.submit()}
+      okButtonProps={{
+        disabled: refundDisabled,
+        loading: submitLoading,
+      }}
+      destroyOnClose
+    >
+      <Spin spinning={loading}>
+        <Wrap>
+          <NiceForm
+            previewPlaceholder=""
+            value={bankAccount}
+            effects={($, { setFieldState }) => {
+              
+            }}
+            expressionScope={{
+              beforeUpload: beforeUploadVoucher, 
+              onUploadChange: handleUploadChange, 
+            }}
+            actions={formActions}
+            schema={schema}
+            onSubmit={handleSubmit}
+            colon
+          />
+        </Wrap>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default UploadPaymentVoucher;

src/pages/afterService/components/RefundModal/UploadVoucher/schema/index.ts → src/pages/afterService/components/RefundModal/UploadPaymentVoucher/schema.ts

-/*
- * @Author: XieZhiXiong
- * @Date: 2021-01-06 11:36:34
- * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-02-20 14:43:25
- * @Description: 
- */
-import { ISchema } from '@formily/antd';
-import { UPLOAD_TYPE } from '@/constants';
-
-export const uploadVoucherModalSchema: ISchema = {
-  type: 'object',
-  properties: {
-    MEGA_LAYOUT: {
-      type: 'object',
-      'x-component': 'mega-layout',
-      'x-component-props': {
-        labelCol: 4, 
-        wrapperCol: 20, 
-        labelAlign: 'left', 
-        full: true, 
-        description: '单个凭证文件大小不能超过 200K',
-      },
-      properties: {
-        name: {
-          type: 'string',
-          title: '还款账户名称', 
-          'x-component': 'Text', 
-        },
-        bankAccount: {
-          type: 'string',
-          title: '银行账号', 
-          'x-component': 'Text', 
-        },
-        bankDeposit: {
-          type: 'string',
-          title: '开户行', 
-          'x-component': 'Text', 
-        },
-        fileList: {
-          type: 'string', 
-          title: '上传退款凭证', 
-          'x-component': 'FixUpload', 
-          'x-component-props': {
-            action: '/api/file/file/upload/prefix', 
-            data: {
-              fileType: UPLOAD_TYPE, 
-              prefix: '', 
-            }, 
-            beforeUpload: '{{beforeUpload}}', 
-            onChange: '{{onUploadChange}}', 
-            accept: '.png, .jpg, .jpeg', 
-          },
-          'x-mega-props': {
-            labelAlign: 'top', 
-            full: true, 
-          },
-          'x-rules': [
-            {
-              required: true, 
-              message: '请上传退款凭证', 
-            },
-          ],
-          
-        },
-      },
-    },
-  },
+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-09 10:46:02
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-09 15:54:09
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+import { UPLOAD_TYPE } from '@/constants';
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      'x-component-props': {
+        labelCol: 4, 
+        wrapperCol: 20, 
+        labelAlign: 'left', 
+        full: true, 
+        description: '单个凭证文件大小不能超过 200K',
+      },
+      properties: {
+        name: {
+          type: 'string',
+          title: '还款账户名称', 
+          'x-component': 'Text', 
+        },
+        bankAccount: {
+          type: 'string',
+          title: '银行账号', 
+          'x-component': 'Text', 
+        },
+        bankDeposit: {
+          type: 'string',
+          title: '开户行', 
+          'x-component': 'Text', 
+        },
+        fileList: {
+          type: 'string', 
+          title: '上传退款凭证', 
+          'x-component': 'FixUpload', 
+          'x-component-props': {
+            action: '/api/file/file/upload/prefix',
+            data: {
+              fileType: UPLOAD_TYPE,
+              prefix: '',
+            },
+            beforeUpload: '{{beforeUpload}}',
+            onChange: '{{onUploadChange}}',
+            accept: '.png, .jpg, .jpeg',
+          },
+          'x-mega-props': {
+            labelAlign: 'top',
+            full: true,
+            wrapperCol: 24,
+          },
+          'x-rules': [
+            {
+              required: true, 
+              message: '请上传退款凭证', 
+            },
+          ],
+        },
+      },
+    },
+  },
 };
\ No newline at end of file

src/pages/afterService/components/RefundModal/UploadVoucher/index.tsx

-import React, { useState, useEffect } from 'react';
-import { Button, Space, message, Spin } from 'antd';
-import styled from 'styled-components';
-import { createFormActions } from '@formily/antd';
-import { PublicApi } from '@/services/api';
-import NiceForm from '@/components/NiceForm';
-import { uploadVoucherModalSchema } from './schema';
-
-const uploadVoucherFormActions = createFormActions();
-
-const Wrap = styled(props => <div {...props} />)`
-  .ant-form-item {
-    margin-bottom: 2;
-  }
-`
-
-interface BankAccount {
-  name: string, 
-  bankAccount: string, 
-  bankDeposit: string, 
-  id: number,
-};
-
-interface UploadVoucherProps {
-  /**
-   * 弹窗需要的数据值
-   */
-  value: {[key: string]: any};
-  /**
-   * 关闭事件
-   */
-  handleModalVisible: () => void; 
-  /**
-   * 弹窗内确认事件
-   */
-  handleConfirm: (values: {[key: string]: any}, modalName: string) => void; 
-  /**
-   * 弹窗提交 loading
-   */
-  submitLoading: boolean;
-  /**
-   * 采购商id
-   */
-  purchaserId: number,
-  /**
-   * 采购商角色id
-   */
-  purchaserRoleId: number,
-};
-
-const UploadVoucher: React.FC<UploadVoucherProps> = ({
-  handleConfirm, 
-  handleModalVisible, 
-  value, 
-  submitLoading, 
-  purchaserId, 
-  purchaserRoleId, 
-}) => {
-  const [bankAccount, setBankAccount] = useState<BankAccount>({
-    name: '', 
-    bankAccount: '', 
-    bankDeposit: '', 
-    id: 0,
-  });
-  const [loading, setLoading] = useState(false);
-  const [refundDisabled, setRefundDisabled] = useState(false);
-
-  // 获取对公账户信息
-  const getSettleAccountsGetMemberAccountConfig = () => {
-    if (!purchaserId || !purchaserRoleId) {
-      return;
-    }
-    setLoading(true);
-    PublicApi.getSettleAccountsGetMemberAccountConfig({
-      memberId: `${purchaserId}`, 
-      roleId: `${purchaserRoleId}`, 
-    }).then(res => {
-      if (res.code === 1000) {
-        setBankAccount(res.data);
-      }
-    }).finally(() => {
-      setLoading(false);
-    });
-  };
-
-  useEffect(() => {
-    getSettleAccountsGetMemberAccountConfig();
-  }, []);
-
-  const beforeUploadVoucher = file => {
-    if (file.size / 1024 > 200) {
-      message.warning('图片大小超过200K');
-      return Promise.reject();
-    }
-    setRefundDisabled(true);
-  };
-
-  const handleUploadVoucherSubmit = values => {
-    const { fileList = [], id, ...rest } = values;
-
-    if (handleConfirm) {
-      if (!bankAccount || !bankAccount.id) {
-        message.error('没有收款账户相关信息，无法退款');
-        return;
-      }
-      handleConfirm({
-        ...value, 
-        payProve: {
-          ...rest, 
-          fileList: fileList.map(item => item.status === 'done' && ({
-            name: item.name, 
-            proveUrl: item.url,
-          })).filter(Boolean), 
-        },
-      }, 'uploadVoucher');
-    }
-  };
-
-  const handleUploadChange = (file) => {
-    setRefundDisabled(false);
-  };
-
-  return (
-    <Spin spinning={loading}>
-      <Wrap>
-        <NiceForm
-          previewPlaceholder=""
-          value={bankAccount}
-          effects={($, { setFieldState }) => {
-            
-          }}
-          expressionScope={{
-            beforeUpload: beforeUploadVoucher, 
-            onUploadChange: handleUploadChange, 
-          }}
-          actions={uploadVoucherFormActions}
-          schema={uploadVoucherModalSchema}
-          onSubmit={handleUploadVoucherSubmit}
-          colon
-        />
-      </Wrap>
-
-      <div style={{ marginTop: 20, textAlign: 'center' }}>
-        <Space>
-          <Button onClick={handleModalVisible}>
-            取消
-          </Button>
-          <Button
-            type="primary"
-            onClick={() => uploadVoucherFormActions.submit()}
-            loading={submitLoading}
-            disabled={refundDisabled}
-          >
-            退款
-          </Button>
-        </Space>
-      </div>
-    </Spin>
-  )
-};
-
-export default UploadVoucher;
\ No newline at end of file

src/pages/afterService/components/RefundModal/index.tsx

 import React, { Suspense } from 'react';
 import { Modal } from 'antd';
 
-const UploadVoucher = React.lazy(() => import('./UploadVoucher'));
 const Balance = React.lazy(() => import('./Balance'));
 const Credit = React.lazy(() => import('./Credit'));
 const COD = React.lazy(() => import('./COD'));
@@ -50,22 +49,6 @@ const RefundModal: React.FC<RefundModalProps> = ({
   } = value;
 
   const tempMap = {
-    uploadVoucher: {
-      width: 600,
-      title: '上传退款凭证',
-      render: () => (
-        <Suspense fallback={null}>
-          <UploadVoucher
-            value={rest}
-            purchaserId={purchaserId}
-            purchaserRoleId={purchaserRoleId}
-            handleConfirm={handleConfirm}
-            handleModalVisible={handleModalVisible}
-            submitLoading={submitLoading}
-          />
-        </Suspense>
-      ),
-    },
     balance: {
       width: 600,
       title: '退款处理',
@@ -75,9 +58,6 @@ const RefundModal: React.FC<RefundModalProps> = ({
             value={rest}
             purchaserId={purchaserId}
             purchaserRoleId={purchaserRoleId}
-            handleConfirm={handleConfirm}
-            handleModalVisible={handleModalVisible}
-            submitLoading={submitLoading}
           />
         </Suspense>
       ),
@@ -93,23 +73,17 @@ const RefundModal: React.FC<RefundModalProps> = ({
             purchaserRoleId={purchaserRoleId}
             supplierId={supplierId}
             supplierRoleId={supplierRoleId}
-            handleConfirm={handleConfirm}
-            handleModalVisible={handleModalVisible}
-            submitLoading={submitLoading}
           />
         </Suspense>
       ),
     },
     COD: {
-      width: 500,
+      width: 600,
       title: '货到付款退款确认',
       render: () => (
         <Suspense fallback={null}>
           <COD
             value={rest}
-            handleConfirm={handleConfirm}
-            handleModalVisible={handleModalVisible}
-            submitLoading={submitLoading}
           />
         </Suspense>
       ),
@@ -127,8 +101,12 @@ const RefundModal: React.FC<RefundModalProps> = ({
       width={template.width}
       title={template.title}
       visible={visible}
-      footer={null}
       onCancel={() => handleModalVisible()}
+      onOk={() => handleConfirm(value, modalName)}
+      okButtonProps={{
+        loading: submitLoading,
+      }}
+      okText="退款"
       destroyOnClose
     >
       {template.render()}

src/pages/afterService/components/ReturnDetailInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 18:02:18
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-02-20 16:54:41
+ * @LastEditTime: 2021-06-09 17:14:36
  * @Description: 退款明细
  */
 import React, { useState } from 'react';
@@ -28,6 +28,7 @@ import {
 import Stamp from '../Stamp';
 import CheckVoucherModal from '../CheckVoucherModal';
 import RefundModal from '../RefundModal';
+import UploadPaymentVoucherModal from '../RefundModal/UploadPaymentVoucher';
 import {
   REFUND_INNER_STATUS_NO_REFUND, 
   REFUND_INNER_STATUS_REFUND_FAILED, 
@@ -40,6 +41,33 @@ import styles from './index.less';
 
 const { confirm } = Modal;
 
+type RefundModalValueType = {
+  /**
+   * 数据id
+   */
+  id: number,
+  /**
+   * 退款金额
+   */
+  refundAmount?: number,
+  /**
+   * 采购会员id
+   */
+  purchaserId?: number,
+  /**
+   * 采购会员角色id
+   */
+  purchaserRoleId?: number,
+  /**
+   * 供应会员id
+   */
+  supplierId?: number,
+  /**
+   * 供应会员角色id
+   */
+  supplierRoleId?: number,
+}
+
 interface ReturnDetailInfoProps extends MellowCardProps {
   /**
    * 数据
@@ -108,8 +136,11 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
   const [voucherVisible, setVoucherVisible] = useState(false);
   const [refundModalVisible, setRefundModalVisible] = useState(false);
   const [modalName, setModalName] = useState('uploadVoucher');
-  const [refundModalValue, setRefundModalValue] = useState({});
+  const [refundModalValue, setRefundModalValue] = useState<RefundModalValueType>({
+    id: 0,
+  });
   const [submitLoading, setSubmitLoading] = useState(false);
+  const [paymentVoucherVisible, setPaymentVoucherVisible] = useState(false);
 
   const columns: EditableColumns[] = [
     {
@@ -199,8 +230,7 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
       };
       // 线下支付
       case PAY_CHANNEL_OFFLINE: {
-        setModalName('uploadVoucher');
-        setRefundModalVisible(true);
+        setPaymentVoucherVisible(true);
         setRefundModalValue({ 
           id, 
           purchaserId, 
@@ -286,6 +316,13 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
     }
   };
 
+  const handlePaymentVoucherSubmit = (value) => {
+    if (onRefund) {
+      return onRefund(value);
+    }
+    return Promise.reject();
+  };
+
   return (
     <MellowCard title="退款明细" {...rest}>
       <PolymericTable
@@ -447,6 +484,14 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
         handleConfirm={handleRefundConfirm}
         submitLoading={submitLoading}
       />
+      
+      <UploadPaymentVoucherModal 
+        visible={paymentVoucherVisible}
+        onClose={() => setPaymentVoucherVisible(false)}
+        onSubmit={handlePaymentVoucherSubmit}
+        purchaserId={refundModalValue.purchaserId}
+        purchaserRoleId={refundModalValue.purchaserRoleId}
+      />
     </MellowCard>
   );
 };