Commit 95710f94 authored by XieZhiXiong's avatar XieZhiXiong

feat: 新增退款余额、对公账户信息查询、新增申请单隐藏申请单号、内外部状态

parent da89aa65
import React, { useState } from 'react';
import { Descriptions, Space, Button } from 'antd';
interface bankAccount {
id: number,
name: string,
bankAccount: string,
bankDeposit: string,
memberId: number,
};
interface BalanceProps {
/**
* 弹窗需要的数据值
*/
value: {[key: string]: any};
/**
* 关闭事件
*/
handleModalVisible: () => void;
/**
* 弹窗内确认事件
*/
handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/**
* 弹窗提交 loading
*/
submitLoading: boolean;
};
const Balance: React.FC<BalanceProps> = ({
handleModalVisible,
handleConfirm,
value,
submitLoading,
}) => {
const [bankAccount, setBankAccount] = useState<bankAccount>({
id: 0,
name: '',
bankAccount: '',
bankDeposit: '',
memberId: 0,
});
return (
<>
<Descriptions title="账户余额信息" column={1}>
<Descriptions.Item label="账户可用余额">¥500000.00</Descriptions.Item>
<Descriptions.Item label="当前退款金额">
<span style={{ color: '#EF6260' }}>¥6000.00</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>
</>
)
};
import React, { useEffect, useState } from 'react';
import { Descriptions, Space, Button, Spin } from 'antd';
import { PublicApi } from '@/services/api';
interface BalanceProps {
/**
* 弹窗需要的数据值
*/
value: {[key: string]: any};
/**
* 关闭事件
*/
handleModalVisible: () => void;
/**
* 弹窗内确认事件
*/
handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/**
* 弹窗提交 loading
*/
submitLoading: boolean;
/**
* 采购商id
*/
purchaserId: number,
/**
* 采购商角色id
*/
purchaserRoleId: number,
};
const Balance: React.FC<BalanceProps> = ({
handleModalVisible,
handleConfirm,
value,
submitLoading,
}) => {
const [balance, setBalance] = useState(0);
const [loading, setLoading] = useState(false);
const getPayAssetAccountGetUserBalance = () => {
// setLoading(false);
// // todo 这个接口可能要改
// PublicApi.getPayAssetAccountGetUserBalance({
// payType: `${1}`,
// parentMemberId: `${0}`,
// parentMemberRoleId: `${0}`,
// }).then(res => {
// if (res.code === 1000) {
// setBalance(res.data);
// }
// }).finally(() => {
// setLoading(false);
// });
};
useEffect(() => {
getPayAssetAccountGetUserBalance();
}, []);
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>
</Spin>
)
};
export default Balance;
\ No newline at end of file
import React, { useState } from 'react';
import { Descriptions, Space, Button } from 'antd';
interface bankAccount {
id: number,
name: string,
bankAccount: string,
bankDeposit: string,
memberId: number,
};
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,
}) => {
const [bankAccount, setBankAccount] = useState<bankAccount>({
id: 0,
name: '',
bankAccount: '',
bankDeposit: '',
memberId: 0,
});
return (
<>
<p>
支付方式为货到付款的订单,用户确认退款方式与退款金额后,
系统会按照退款流程来完成退款动作,实际资金的退款结算由
交易双方线下处理。
</p>
<Descriptions column={1}>
<Descriptions.Item label="支付方式">货到付款</Descriptions.Item>
<Descriptions.Item label="退款金额">
<span style={{ color: '#EF6260' }}>¥6000.00</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>
</>
)
};
import React, { useState } from 'react';
import { Descriptions, Space, Button } from 'antd';
interface bankAccount {
id: number,
name: string,
bankAccount: string,
bankDeposit: string,
memberId: number,
};
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>
支付方式为货到付款的订单,用户确认退款方式与退款金额后,
系统会按照退款流程来完成退款动作,实际资金的退款结算由
交易双方线下处理。
</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>
</>
)
};
export default COD;
\ No newline at end of file
import React, { useState } from 'react';
import { Button, Space, message } from 'antd';
import { createFormActions } from '@formily/antd';
import NiceForm from '@/components/NiceForm';
import { uploadVoucherModalSchema } from './schema';
const uploadVoucherFormActions = createFormActions();
interface bankAccount {
name: string,
bankAccount: string,
bankDeposit: string,
};
interface UploadVoucherProps {
/**
* 弹窗需要的数据值
*/
value: {[key: string]: any};
/**
* 关闭事件
*/
handleModalVisible: () => void;
/**
* 弹窗内确认事件
*/
handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/**
* 弹窗提交 loading
*/
submitLoading: boolean;
};
const UploadVoucher: React.FC<UploadVoucherProps> = ({
handleConfirm,
handleModalVisible,
value,
submitLoading,
}) => {
const [bankAccount, setBankAccount] = useState<bankAccount>({
name: '',
bankAccount: '',
bankDeposit: '',
});
const beforeUploadVoucher = file => {
console.log(file.size)
if (file.size / 1024 > 200) {
message.warning('图片大小超过200K');
return Promise.reject();
}
};
const handleUploadVoucherSubmit = values => {
const { fileList = [] } = values;
if (handleConfirm) {
if (!bankAccount || !bankAccount.name) {
message.error('没有收款账户相关信息,无法退款');
return;
}
handleConfirm({
...value,
payProve: {
...values,
fileList: fileList.map(item => item.status === 'done' && ({
name: item.name,
proveUrl: item.data.url,
})).filter(Boolean),
},
}, 'uploadVoucher');
}
};
return (
<>
<NiceForm
previewPlaceholder=""
initialValues={bankAccount}
effects={($, { setFieldState }) => {
}}
expressionScope={{
beforeUpload: beforeUploadVoucher,
}}
actions={uploadVoucherFormActions}
schema={uploadVoucherModalSchema}
onSubmit={handleUploadVoucherSubmit}
/>
<div style={{ marginTop: 20, textAlign: 'center' }}>
<Space>
<Button onClick={handleModalVisible}>
取消
</Button>
<Button
type="primary"
onClick={() => uploadVoucherFormActions.submit()}
loading={submitLoading}
>
退款
</Button>
</Space>
</div>
</>
)
};
import React, { useState, useEffect } from 'react';
import { Button, Space, message, Spin } from 'antd';
import { createFormActions } from '@formily/antd';
import { PublicApi } from '@/services/api';
import NiceForm from '@/components/NiceForm';
import { uploadVoucherModalSchema } from './schema';
const uploadVoucherFormActions = createFormActions();
interface bankAccount {
name: string,
bankAccount: string,
bankDeposit: string,
};
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: '',
});
const [loading, setLoading] = useState(false);
// 获取对公账户信息
const getSettleAccountsCorporateAccountConfig = (memberId: number, memberRoleId: number) => {
if (!memberId || !memberRoleId) {
return;
}
setLoading(true);
PublicApi.getSettleAccountsCorporateAccountConfig({
memberId: `${memberId}`,
memberRoleId: `${memberRoleId}`,
}).then(res => {
if (res.code === 1000) {
setBankAccount(res.data);
}
}).finally(() => {
setLoading(false);
});
};
useEffect(() => {
getSettleAccountsCorporateAccountConfig(purchaserId, purchaserRoleId);
}, []);
const beforeUploadVoucher = file => {
console.log(file.size)
if (file.size / 1024 > 200) {
message.warning('图片大小超过200K');
return Promise.reject();
}
};
const handleUploadVoucherSubmit = values => {
const { fileList = [] } = values;
if (handleConfirm) {
if (!bankAccount || !bankAccount.name) {
message.error('没有收款账户相关信息,无法退款');
return;
}
handleConfirm({
...value,
payProve: {
...values,
fileList: fileList.map(item => item.status === 'done' && ({
name: item.name,
proveUrl: item.data.url,
})).filter(Boolean),
},
}, 'uploadVoucher');
}
};
return (
<Spin spinning={loading}>
<NiceForm
previewPlaceholder=""
initialValues={bankAccount}
effects={($, { setFieldState }) => {
}}
expressionScope={{
beforeUpload: beforeUploadVoucher,
}}
actions={uploadVoucherFormActions}
schema={uploadVoucherModalSchema}
onSubmit={handleUploadVoucherSubmit}
/>
<div style={{ marginTop: 20, textAlign: 'center' }}>
<Space>
<Button onClick={handleModalVisible}>
取消
</Button>
<Button
type="primary"
onClick={() => uploadVoucherFormActions.submit()}
loading={submitLoading}
>
退款
</Button>
</Space>
</div>
</Spin>
)
};
export default UploadVoucher;
\ No newline at end of file
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'));
export interface RefundModalProps {
/**
* 是否可见
*/
visible: boolean;
/**
* 对应的弹窗名称
*/
modalName: string;
/**
* 关闭事件
*/
handleModalVisible: () => void;
/**
* 弹窗内确认事件
*/
handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/**
* 弹窗需要的数据值
*/
value: {[key: string]: any};
/**
* 弹窗提交 loading
*/
submitLoading: boolean;
};
const RefundModal: React.FC<RefundModalProps> = ({
visible = false,
modalName = 'uploadVoucher',
handleModalVisible,
handleConfirm,
value,
submitLoading,
}) => {
const tempMap = {
uploadVoucher: {
width: 600,
title: '上传退款凭证',
render: () => (
<Suspense fallback={null}>
<UploadVoucher
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
balance: {
width: 600,
title: '退款处理',
render: () => (
<Suspense fallback={null}>
<Balance
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
credit: {
width: 600,
title: '退款处理',
render: () => (
<Suspense fallback={null}>
<Credit
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
COD: {
width: 500,
title: '货到付款退款确认',
render: () => (
<Suspense fallback={null}>
<COD
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
};
const template = tempMap[modalName] || {
width: 640,
title: '标题',
render: () => ('没有找到 modal 模板'),
};
return (
<Modal
width={template.width}
title={template.title}
visible={visible}
footer={null}
onCancel={() => handleModalVisible()}
destroyOnClose
>
{template.render()}
</Modal>
);
};
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'));
export interface RefundModalProps {
/**
* 是否可见
*/
visible: boolean;
/**
* 对应的弹窗名称
*/
modalName: string;
/**
* 关闭事件
*/
handleModalVisible: () => void;
/**
* 弹窗内确认事件
*/
handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/**
* 弹窗需要的数据值
*/
value: {[key: string]: any};
/**
* 弹窗提交 loading
*/
submitLoading: boolean;
};
const RefundModal: React.FC<RefundModalProps> = ({
visible = false,
modalName = 'uploadVoucher',
handleModalVisible,
handleConfirm,
value,
submitLoading,
}) => {
const tempMap = {
uploadVoucher: {
width: 600,
title: '上传退款凭证',
render: () => (
<Suspense fallback={null}>
<UploadVoucher
value={value}
purchaserId={value.purchaserId}
purchaserRoleId={value.purchaserRoleId}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
balance: {
width: 600,
title: '退款处理',
render: () => (
<Suspense fallback={null}>
<Balance
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
credit: {
width: 600,
title: '退款处理',
render: () => (
<Suspense fallback={null}>
<Credit
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
COD: {
width: 500,
title: '货到付款退款确认',
render: () => (
<Suspense fallback={null}>
<COD
value={value}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
};
const template = tempMap[modalName] || {
width: 640,
title: '标题',
render: () => ('没有找到 modal 模板'),
};
return (
<Modal
width={template.width}
title={template.title}
visible={visible}
footer={null}
onCancel={() => handleModalVisible()}
destroyOnClose
>
{template.render()}
</Modal>
);
};
export default RefundModal;
\ No newline at end of file
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2020-11-05 18:02:18
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-12-15 10:26:44
* @LastEditTime: 2020-12-28 13:53:00
* @Description: 退款明细
*/
import React, { useState } from 'react';
......@@ -58,6 +58,14 @@ interface ReturnDetailInfoProps {
* 退货申请单内部状态
*/
innerStatus: number;
/**
* 采购商id
*/
purchaserId: number,
/**
* 采购商角色id
*/
purchaserRoleId: number,
};
const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
......@@ -66,6 +74,8 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
onConfirm,
isPurchaser = false,
innerStatus,
purchaserId,
purchaserRoleId,
}) => {
const [visibleResult, setVisibleResult] = useState(false);
const [notReceivedLoading, setNotReceivedLoading] = useState(false);
......@@ -143,34 +153,34 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
},
];
const handleRefund = (id, channel) => {
const handleRefund = (id, channel, amount) => {
switch(channel) {
// 余额支付
case PAY_CHANNEL_BALANCE: {
setModalName('balance');
setRefundModalVisible(true);
setRefundModalValue({ id });
setRefundModalValue({ id, refundAmount: amount });
break;
};
// 线下支付
case PAY_CHANNEL_OFFLINE: {
setModalName('uploadVoucher');
setRefundModalVisible(true);
setRefundModalValue({ id });
setRefundModalValue({ id, purchaserId, purchaserRoleId });
break;
};
// 授信支付
case PAY_CHANNEL_CREDIT: {
setModalName('credit');
setRefundModalVisible(true);
setRefundModalValue({ id });
setRefundModalValue({ id, refundAmount: amount });
break;
};
// 货到付款
case PAY_CHANNEL_COD: {
setModalName('COD');
setRefundModalVisible(true);
setRefundModalValue({ id });
setRefundModalValue({ id, refundAmount: amount });
break;
};
default: {
......@@ -215,9 +225,11 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
const handleRefundConfirm = (values, modalName) => {
setSubmitLoading(true);
onRefund(values).finally(() => {
setSubmitLoading(false);
});
if (onRefund) {
onRefund(values).finally(() => {
setSubmitLoading(false);
});
}
};
return (
......@@ -264,14 +276,15 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
<div className={styles['deliver-item-actions']}>
{
!isPurchaser &&
innerStatus === RETURN_INNER_STATUS_TO_BE_REFUNDED && (
innerStatus === RETURN_INNER_STATUS_TO_BE_REFUNDED &&
!!item.canRefund && (
item.outerStatus === REFUND_OUTER_STATUS_NOT_RECEIVED ||
item.innerStatus === REFUND_INNER_STATUS_NO_REFUND ||
item.innerStatus === REFUND_INNER_STATUS_REFUND_FAILED
) && (
<div
className={styles['deliver-item-return']}
onClick={() => handleRefund(item.refundId, item.channel)}
onClick={() => handleRefund(item.refundId, item.channel, item.refundAmount)}
>
退款
</div>
......
......@@ -28,6 +28,7 @@ import {
const addSchemaAction = createFormActions();
const {
onFormInputChange$,
onFormInit$,
} = FormEffectHooks;
interface BillsFormProps {
......@@ -511,12 +512,22 @@ const ExchangeForm: React.FC<BillsFormProps> = ({
}}
editable={isEdit || !id}
effects={($, actions) => {
const { setFieldState } = actions;
createEffects($, actions)
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
onFormInit$().subscribe(() => {
if (!id && isEdit) {
setFieldState('*(applyNo,outerStatus,innerStatus)', field => {
field.visible = false;
});
}
});
}}
onSubmit={handleSubmit}
actions={addSchemaAction}
......
......@@ -26,6 +26,7 @@ import {
const addSchemaAction = createFormActions();
const {
onFormInputChange$,
onFormInit$,
} = FormEffectHooks;
interface DetailInfo {
......@@ -356,12 +357,22 @@ const RepairForm: React.FC<BillsFormProps> = ({
}}
editable={isEdit || !id}
effects={($, actions) => {
const { setFieldState } = actions;
createEffects($, actions)
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
onFormInit$().subscribe(() => {
if (!id && isEdit) {
setFieldState('*(applyNo,outerStatus,innerStatus)', field => {
field.visible = false;
});
}
});
}}
onSubmit={handleSubmit}
actions={addSchemaAction}
......
......@@ -416,6 +416,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
dataSource={detailInfo && detailInfo.refundList ? detailInfo.refundList : []}
onConfirm={handleConfirm}
innerStatus={detailInfo?.innerStatus}
purchaserId={detailInfo?.memberId}
purchaserRoleId={detailInfo?.roleId}
isPurchaser
/>
</Suspense>
......
......@@ -29,6 +29,7 @@ import {
const addSchemaAction = createFormActions();
const {
onFormInputChange$,
onFormInit$,
} = FormEffectHooks;
interface BillsFormProps {
......@@ -575,12 +576,22 @@ const ReturnForm: React.FC<BillsFormProps> = ({
}}
editable={isEdit || !id}
effects={($, actions) => {
const { setFieldState } = actions;
createEffects($, actions)
onFormInputChange$().subscribe(() => {
if (!unsaved) {
setUnsaved(true);
}
});
onFormInit$().subscribe(() => {
if (!id && isEdit) {
setFieldState('*(applyNo,outerStatus,innerStatus)', field => {
field.visible = false;
});
}
});
}}
onSubmit={handleSubmit}
actions={addSchemaAction}
......
......@@ -329,7 +329,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
// 退款
const handleRefund = (values): Promise<any> => {
const { id, ...rest } = values;
const { id, refundAmount, ...rest } = values;
return PublicApi.postAsReturnGoodsRefund({
dataId: id,
...rest,
......@@ -463,6 +463,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
dataSource={detailInfo && detailInfo.refundList ? detailInfo.refundList : []}
onRefund={handleRefund}
innerStatus={detailInfo?.innerStatus}
purchaserId={detailInfo?.memberId}
purchaserRoleId={detailInfo?.roleId}
/>
</Suspense>
</Col>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment