Skip to content

J
jinfa-admin
Commit a3ad5bf8 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 添加退款对应弹窗内容显示

parent 4dfcd1e8
Hide whitespace changes
Inline Side-by-side
Showing with 826 additions and 309 deletions
src/components/NiceForm/components/AntUpload/index.tsx 0 → 100644
View file @ a3ad5bf8
import React from 'react'
import { connect } from '@formily/react-schema-renderer'
import { Button, Upload as AntdUpload } from 'antd'
import styled from 'styled-components'
import { toArr, isArr, isEqual, mapStyledProps } from './shared'
import {
LoadingOutlined,
PlusOutlined,
UploadOutlined,
InboxOutlined
} from '@ant-design/icons'
const { Dragger: UploadDragger } = AntdUpload
const exts = [
{
ext: /\.docx?$/i,
icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png'
},
{
ext: /\.pptx?$/i,
icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png'
},
{
ext: /\.jpe?g$/i,
icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
},
{
ext: /\.pdf$/i,
icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png'
},
{
ext: /\.png$/i,
icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
},
{
ext: /\.eps$/i,
icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png'
},
{
ext: /\.ai$/i,
icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png'
},
{
ext: /\.gif$/i,
icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png'
},
{
ext: /\.svg$/i,
icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png'
},
{
ext: /\.xlsx?$/i,
icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png'
},
{
ext: /\.psd?$/i,
icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png'
},
{
ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i,
icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png'
},
{
ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)$/i,
icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
},
{
ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i,
icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png'
},
{
ext: /\.[^.]+$/i,
icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png'
}
]
const UploadPlaceholder = styled(props => (
<div>
{props.loading ? <LoadingOutlined /> : <PlusOutlined />}
<div className={'ant-upload-text'}>上传</div>
</div>
))``
const testOpts = (ext, options) => {
if (options && isArr(options.include)) {
return options.include.some(url => ext.test(url))
}
if (options && isArr(options.exclude)) {
return !options.exclude.some(url => ext.test(url))
}
return true
}
const getImageByUrl = (url, options) => {
for (let i = 0; i < exts.length; i++) {
if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
return exts[i].icon || url
}
}
return url
}
const normalizeFileList = fileList => {
if (fileList && fileList.length) {
return fileList.map(file => {
return file.response ? {
uid: file.uid,
status: file.status,
name: file.name,
url: file.downloadURL || file.imgURL || file.url,
...file.response,
thumbUrl: file.imgURL || getImageByUrl(file.downloadURL || file.url, {
exclude: ['.png', '.jpg', '.jpeg', '.gif']
})
} : file;
})
}
return []
}
const shallowClone = val => {
let result = isArr(val)
? [...val]
: typeof val === 'object'
? { ...val }
: val
if (isArr(result)) {
result = result.map(item => ({
...item,
// 必须要有一个不重复的uid
uid:
item.uid ||
Math.random()
.toFixed(16)
.slice(2, 10)
}))
}
return result
}
export interface IUploaderState {
value: any[]
}
// TODO 能不能直接引用 antd 里面的接口定义呢 ?
export declare type UploadListType = 'text' | 'picture' | 'picture-card'
export interface IUploaderProps {
onChange: (value: any[]) => void
locale: { [name: string]: any }
value: any[]
listType?: UploadListType
}
export const Upload = connect({
getProps: mapStyledProps
})(
class Uploader extends React.Component<IUploaderProps, IUploaderState> {
public static defaultProps = {
action:
'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
listType: 'text',
multiple: true,
className: 'antd-uploader'
}
readonly state: IUploaderState
constructor(props) {
super(props)
this.state = {
value: shallowClone(toArr(props.value))
}
}
public onRemoveHandler = file => {
const { value } = this.state
const fileList = []
value.forEach(item => {
if (item.uid !== file.uid) {
fileList.push(item)
}
})
this.props.onChange(fileList)
}
public onChangeHandler = ({ fileList }) => {
const { onChange } = this.props
fileList = toArr(fileList)
if (
fileList.every(file => {
if (
file.status === 'done' ||
file.imgURL ||
file.downloadURL ||
file.url ||
file.thumbUrl
)
return true
if (file.response) {
if (
file.response.imgURL ||
file.response.downloadURL ||
file.response.url ||
file.response.thumbUrl
)
return true
}
return false
}) &&
fileList.length
) {
fileList = normalizeFileList(fileList)
this.setState(
{
value: fileList
},
() => {
onChange(fileList.length > 0 ? fileList : undefined)
}
)
} else {
this.setState({
value: fileList
})
}
}
public componentDidUpdate(preProps) {
if (this.props.value && !isEqual(this.props.value, preProps.value)) {
this.setState({
value: shallowClone(this.props.value)
})
}
}
public render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { listType, locale, onChange, value, ...others } = this.props
if (listType.indexOf('card') > -1) {
return (
<AntdUpload
{...others}
fileList={this.state.value}
onChange={this.onChangeHandler}
onRemove={this.onRemoveHandler}
listType={'picture-card'}
>
<UploadPlaceholder />
</AntdUpload>
)
}
if (listType.indexOf('dragger') > -1) {
return (
<UploadDragger
{...others}
fileList={this.state.value}
onChange={this.onChangeHandler}
onRemove={this.onRemoveHandler}
// TODO image 类型是跟 picture 一样 ?
listType={listType.indexOf('image') > -1 ? 'picture' : 'text'}
>
<p className={'ant-upload-drag-icon'}>
<InboxOutlined />
</p>
<p className={'ant-upload-text'}>拖拽上传</p>
</UploadDragger>
)
}
return (
<AntdUpload
{...others}
fileList={this.state.value}
onChange={this.onChangeHandler}
onRemove={this.onRemoveHandler}
listType={listType}
>
<Button style={{ margin: '0 0 10px' }}>
<UploadOutlined />
{(locale && locale.uploadText) || '上传文件'}
</Button>
</AntdUpload>
)
}
}
)
export default Upload
src/components/NiceForm/components/AntUpload/shared.tsx 0 → 100644
View file @ a3ad5bf8
import React from 'react'
import { mapTextComponent, mapStyledProps, normalizeCol } from '@formily/antd'
import { Select as AntSelect } from 'antd'
import { SelectProps as AntSelectProps } from 'antd/lib/select'
import styled from 'styled-components'
import { isArr, FormPath } from '@formily/shared'
export * from '@formily/shared'
export const compose = (...args: any[]) => {
return (payload: any, ...extra: any[]) => {
return args.reduce((buf, fn) => {
return buf !== undefined ? fn(buf, ...extra) : fn(payload, ...extra)
}, payload)
}
}
interface SelectOption {
label: React.ReactText
value: any
[key: string]: any
}
type SelectProps = AntSelectProps & {
dataSource?: SelectOption[]
}
const createEnum = (enums: any) => {
if (isArr(enums)) {
return enums.map(item => {
if (typeof item === 'object') {
return {
...item
}
} else {
return {
label: item,
value: item
}
}
})
}
return []
}
export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
const { dataSource = [], onChange, ...others } = props
const children = createEnum(dataSource).map(item => {
const { label, value, ...others } = item
return (
<AntSelect.Option
key={value}
{...others}
title={label as string}
value={value}
>
{label}
</AntSelect.Option>
)
})
return (
<AntSelect
className={props.className}
{...others}
onChange={(value: any, options: any) => {
onChange(
value,
isArr(options)
? options.map(item => ({
...item,
props: undefined
}))
: {
...options,
props: undefined //干掉循环引用
}
)
}}
>
{children}
</AntSelect>
)
})`
min-width: 100px;
width: 100%;
`
export const acceptEnum = (component: React.JSXElementConstructor<any>) => {
return ({ dataSource, ...others }) => {
if (dataSource) {
return React.createElement(Select, { dataSource, ...others })
} else {
return React.createElement(component, others)
}
}
}
export const transformDataSourceKey = (component, dataSourceKey) => {
return ({ dataSource, ...others }) => {
return React.createElement(component, {
[dataSourceKey]: dataSource,
...others
})
}
}
export const createMatchUpdate = (name: string, path: string) => (
targetName: string,
targetPath: string,
callback: () => void
) => {
if (targetName || targetPath) {
if (targetName) {
if (FormPath.parse(targetName).matchAliasGroup(name, path)) {
callback()
}
} else if (targetPath) {
if (FormPath.parse(targetPath).matchAliasGroup(name, path)) {
callback()
}
}
} else {
callback()
}
}
export { mapTextComponent, mapStyledProps, normalizeCol }
src/components/NiceForm/components/AntUpload/style.ts 0 → 100644
View file @ a3ad5bf8
import 'antd/lib/upload/style/index'
\ No newline at end of file
src/components/NiceForm/index.tsx
View file @ a3ad5bf8
......@@ -26,6 +26,7 @@ import { Checkbox } from '@formily/antd-components';
import DateSelect from './components/DateSelect';
import DateRangePickerUnix from './components/DateRangePickerUnix';
import SmilingFace from './components/SmilingFace';
import AntUpload from './components/AntUpload';
import './index.less'
export interface NiceFormProps extends IAntdSchemaFormProps {}
......@@ -96,6 +97,7 @@ export const componentExport = {
DateSelect,
DateRangePickerUnix,
SmilingFace,
AntUpload,
}
const NiceForm: React.FC<NiceFormProps> = props => {
const { children, components, ...reset } = props;
......
src/pages/returnManage/components/DetailInfo/index.tsx
View file @ a3ad5bf8
......@@ -282,7 +282,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,
......@@ -401,6 +401,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
onRefund={handleRefund}
isPurchaser={isPurchaser}
innerStatus={detailInfo?.innerStatus}
purchaserId={detailInfo?.memberId}
purchaserRoleId={detailInfo?.roleId}
/>
</Suspense>
</Col>
......
src/pages/returnManage/components/RefundModal/Balance/index.tsx
View file @ a3ad5bf8
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,
purchaserId,
purchaserRoleId,
}) => {
const [balance, setBalance] = useState(0);
const [loading, setLoading] = useState(false);
const getPayAssetAccountGetUserBalance = () => {
if (!purchaserId || !purchaserRoleId) {
return;
}
setLoading(true);
PublicApi.getPayAssetAccountGetChildUserBalance({
childMemberId: `${purchaserId}`,
childMemberRoleId: `${purchaserRoleId}`,
}).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
src/pages/returnManage/components/RefundModal/UploadVoucher/index.tsx
View file @ a3ad5bf8
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,
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 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();
}
};
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.data.url,
})).filter(Boolean),
},
}, 'uploadVoucher');
}
};
return (
<Spin spinning={loading}>
<NiceForm
previewPlaceholder=""
value={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
src/pages/returnManage/components/RefundModal/index.tsx
View file @ a3ad5bf8
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 {
purchaserId,
purchaserRoleId,
supplierId,
supplierRoleId,
...rest
} = 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: '退款处理',
render: () => (
<Suspense fallback={null}>
<Balance
value={rest}
purchaserId={purchaserId}
purchaserRoleId={purchaserRoleId}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
credit: {
width: 600,
title: '退款处理',
render: () => (
<Suspense fallback={null}>
<Credit
value={rest}
handleConfirm={handleConfirm}
handleModalVisible={handleModalVisible}
submitLoading={submitLoading}
/>
</Suspense>
),
},
COD: {
width: 500,
title: '货到付款退款确认',
render: () => (
<Suspense fallback={null}>
<COD
value={rest}
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
src/pages/returnManage/components/ReturnDetailInfo/index.tsx
View file @ a3ad5bf8
......@@ -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-29 13:50:18
* @Description: 退款明细
*/
import React, { useState } from 'react';
......@@ -57,6 +57,14 @@ interface ReturnDetailInfoProps {
* 退货申请单内部状态
*/
innerStatus: number;
/**
* 采购商id
*/
purchaserId: number,
/**
* 采购商角色id
*/
purchaserRoleId: number,
};
const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
......@@ -65,6 +73,8 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
onConfirm,
isPurchaser = false,
innerStatus,
purchaserId,
purchaserRoleId,
}) => {
const [visibleResult, setVisibleResult] = useState(false);
const [notReceivedLoading, setNotReceivedLoading] = useState(false);
......@@ -142,20 +152,29 @@ 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,
purchaserId,
purchaserRoleId,
});
break;
};
// 线下支付
case PAY_CHANNEL_OFFLINE: {
setModalName('uploadVoucher');
setRefundModalVisible(true);
setRefundModalValue({ id });
setRefundModalValue({
id,
purchaserId,
purchaserRoleId,
});
break;
};
// 授信支付
......@@ -266,19 +285,25 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
{
!isPurchaser &&
innerStatus === RETURN_INNER_STATUS_TO_BE_REFUNDED &&
item.canRefund && (
!!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>
)
}
<div
className={styles['deliver-item-return']}
onClick={() => handleRefund(item.refundId, PAY_CHANNEL_OFFLINE, item.refundAmount)}
>
退款
</div>
{/* 线下支付 才有确认 与 查看功能 */}
{item.channel === PAY_CHANNEL_OFFLINE && (
<>
......
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