Skip to content

J
jinfa-admin
Commit 19e7265d authored by Bill's avatar Bill
Browse files
Options

Merge branch 'dev' of 10.0.0.22:lingxi/lingxi-business-system into dev

parents 5e1f254f ab4b92fd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 867 additions and 376 deletions
src/components/MellowCard/index.tsx
View file @ 19e7265d
/* /*
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2020-08-26 17:32:45 * @Date: 2020-08-26 17:32:45
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-29 14:47:49 * @LastEditTime: 2020-12-29 15:06:05
* @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式 * @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式
*/ */
import React from 'react'; import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import { CardProps } from 'antd/lib/card'; import { CardProps } from 'antd/lib/card';
import styled from 'styled-components' import styled from 'styled-components'
import styles from './index.less'; import styles from './index.less';
const Wrap = styled(props => <div {...props}/>)` const Wrap = styled(props => <div {...props}/>)`
> .ant-card { > .ant-card {
border-radius: 8px; border-radius: 8px;
.ant-card-head { .ant-card-head {
border-bottom: none; border-bottom: none;
.ant-card-head-title { .ant-card-head-title {
line-height: 24px; line-height: 24px;
padding-bottom: 0; padding-bottom: 0;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: rgba(23, 43, 77, 1); color: rgba(23, 43, 77, 1);
} }
} }
.ant-card-body { .ant-card-body {
padding: 14px 24px 24px; padding: 14px 24px 24px;
} }
} }
&.fullHeight { &.fullHeight {
height: 100%; height: 100%;
.ant-card { .ant-card {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column !important; flex-direction: column !important;
.ant-card-head { .ant-card-head {
flex-shrink: 0; flex-shrink: 0;
} }
.ant-card-body { .ant-card-body {
flex: 1; flex: 1;
} }
} }
} }
` `
export interface MellowCardProps extends CardProps { export interface MellowCardProps extends CardProps {
blockClassName?: string; blockClassName?: string;
fullHeight?: boolean; // 是否占满父级的高度，一般用于多列使用改组件的情况 fullHeight?: boolean; // 是否占满父级的高度，一般用于多列使用改组件的情况
} }
const MellowCard: React.FC<MellowCardProps> = props => { const MellowCard: React.FC<MellowCardProps> = props => {
const { children, blockClassName, fullHeight, ...rest } = props; const { children, blockClassName, fullHeight, ...rest } = props;
const cls = classNames({ const cls = classNames({
'fullHeight': fullHeight, 'fullHeight': fullHeight,
}); });
return ( return (
<Wrap className={cls}> <Wrap className={cls}>
<Card bordered={false} {...rest}> <Card bordered={false} {...rest}>
{children} {children}
</Card> </Card>
</Wrap> </Wrap>
) )
}; };
export default MellowCard; export default MellowCard;
\ No newline at end of file
src/components/NiceForm/components/AntUpload/index.tsx 0 → 100644
View file @ 19e7265d
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 @ 19e7265d
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 @ 19e7265d
import 'antd/lib/upload/style/index'
\ No newline at end of file
src/components/NiceForm/index.tsx
View file @ 19e7265d
...@@ -26,6 +26,7 @@ import { Checkbox } from '@formily/antd-components'; ...@@ -26,6 +26,7 @@ import { Checkbox } from '@formily/antd-components';
import DateSelect from './components/DateSelect'; import DateSelect from './components/DateSelect';
import DateRangePickerUnix from './components/DateRangePickerUnix'; import DateRangePickerUnix from './components/DateRangePickerUnix';
import SmilingFace from './components/SmilingFace'; import SmilingFace from './components/SmilingFace';
import AntUpload from './components/AntUpload';
import './index.less' import './index.less'
export interface NiceFormProps extends IAntdSchemaFormProps {} export interface NiceFormProps extends IAntdSchemaFormProps {}
...@@ -96,6 +97,7 @@ export const componentExport = { ...@@ -96,6 +97,7 @@ export const componentExport = {
DateSelect, DateSelect,
DateRangePickerUnix, DateRangePickerUnix,
SmilingFace, SmilingFace,
AntUpload,
} }
const NiceForm: React.FC<NiceFormProps> = props => { const NiceForm: React.FC<NiceFormProps> = props => {
const { children, components, ...reset } = props; const { children, components, ...reset } = props;
......
src/pages/returnManage/components/RefundModal/Balance/index.tsx
View file @ 19e7265d
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Descriptions, Space, Button } from 'antd'; import { Descriptions, Space, Button, Spin } from 'antd';
import { PublicApi } from '@/services/api';
interface bankAccount {
id: number, interface BalanceProps {
name: string, /**
bankAccount: string, * 弹窗需要的数据值
bankDeposit: string, */
memberId: number, value: {[key: string]: any};
}; /**
* 关闭事件
interface BalanceProps { */
/** handleModalVisible: () => void;
* 弹窗需要的数据值 /**
*/ * 弹窗内确认事件
value: {[key: string]: any}; */
/** handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
* 关闭事件 /**
*/ * 弹窗提交 loading
handleModalVisible: () => void; */
/** submitLoading: boolean;
* 弹窗内确认事件 /**
*/ * 采购商id
handleConfirm: (values: {[key: string]: any}, modalName: string) => void; */
/** purchaserId: number,
* 弹窗提交 loading /**
*/ * 采购商角色id
submitLoading: boolean; */
}; purchaserRoleId: number,
};
const Balance: React.FC<BalanceProps> = ({
handleModalVisible, const Balance: React.FC<BalanceProps> = ({
handleConfirm, handleModalVisible,
value, handleConfirm,
submitLoading, value,
}) => { submitLoading,
const [bankAccount, setBankAccount] = useState<bankAccount>({ purchaserId,
id: 0, purchaserRoleId,
name: '', }) => {
bankAccount: '', const [balance, setBalance] = useState(0);
bankDeposit: '', const [loading, setLoading] = useState(false);
memberId: 0,
}); const getPayAssetAccountGetUserBalance = () => {
if (!purchaserId || !purchaserRoleId) {
return ( return;
<> }
<Descriptions title="账户余额信息" column={1}> setLoading(true);
<Descriptions.Item label="账户可用余额">￥500000.00</Descriptions.Item> PublicApi.getPayAssetAccountGetChildUserBalance({
<Descriptions.Item label="当前退款金额"> childMemberId: `${purchaserId}`,
<span style={{ color: '#EF6260' }}>￥6000.00</span> childMemberRoleId: `${purchaserRoleId}`,
</Descriptions.Item> }).then(res => {
</Descriptions> if (res.code === 1000) {
setBalance(res.data);
<div style={{ marginTop: 20, textAlign: 'center' }}> }
<Space> }).finally(() => {
<Button onClick={handleModalVisible}> setLoading(false);
取消 });
</Button> };
<Button
type="primary" useEffect(() => {
onClick={() => handleConfirm(value, 'balance')} getPayAssetAccountGetUserBalance();
loading={submitLoading} }, []);
>
退款 return (
</Button> <Spin spinning={loading}>
</Space> <Descriptions title="账户余额信息" column={1}>
</div> <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; export default Balance;
\ No newline at end of file
src/pages/returnManage/components/RefundModal/UploadVoucher/index.tsx
View file @ 19e7265d
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Button, Space, message } from 'antd'; import { Button, Space, message, Spin } from 'antd';
import { createFormActions } from '@formily/antd'; import { createFormActions } from '@formily/antd';
import NiceForm from '@/components/NiceForm'; import { PublicApi } from '@/services/api';
import { uploadVoucherModalSchema } from './schema'; import NiceForm from '@/components/NiceForm';
import { uploadVoucherModalSchema } from './schema';
const uploadVoucherFormActions = createFormActions();
const uploadVoucherFormActions = createFormActions();
interface bankAccount {
name: string, interface BankAccount {
bankAccount: string, name: string,
bankDeposit: string, bankAccount: string,
}; bankDeposit: string,
id: number,
interface UploadVoucherProps { };
/**
* 弹窗需要的数据值 interface UploadVoucherProps {
*/ /**
value: {[key: string]: any}; * 弹窗需要的数据值
/** */
* 关闭事件 value: {[key: string]: any};
*/ /**
handleModalVisible: () => void; * 关闭事件
/** */
* 弹窗内确认事件 handleModalVisible: () => void;
*/ /**
handleConfirm: (values: {[key: string]: any}, modalName: string) => void; * 弹窗内确认事件
/** */
* 弹窗提交 loading handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
*/ /**
submitLoading: boolean; * 弹窗提交 loading
}; */
submitLoading: boolean;
const UploadVoucher: React.FC<UploadVoucherProps> = ({ /**
handleConfirm, * 采购商id
handleModalVisible, */
value, purchaserId: number,
submitLoading, /**
}) => { * 采购商角色id
const [bankAccount, setBankAccount] = useState<bankAccount>({ */
name: '', purchaserRoleId: number,
bankAccount: '', };
bankDeposit: '',
}); const UploadVoucher: React.FC<UploadVoucherProps> = ({
handleConfirm,
const beforeUploadVoucher = file => { handleModalVisible,
console.log(file.size) value,
if (file.size / 1024 > 200) { submitLoading,
message.warning('图片大小超过200K'); purchaserId,
return Promise.reject(); purchaserRoleId,
} }) => {
}; const [bankAccount, setBankAccount] = useState<BankAccount>({
name: '',
const handleUploadVoucherSubmit = values => { bankAccount: '',
const { fileList = [] } = values; bankDeposit: '',
id: 0,
if (handleConfirm) { });
if (!bankAccount || !bankAccount.name) { const [loading, setLoading] = useState(false);
message.error('没有收款账户相关信息，无法退款');
return; // 获取对公账户信息
} const getSettleAccountsGetMemberAccountConfig = () => {
handleConfirm({ if (!purchaserId || !purchaserRoleId) {
...value, return;
payProve: { }
...values, setLoading(true);
fileList: fileList.map(item => item.status === 'done' && ({ PublicApi.getSettleAccountsGetMemberAccountConfig({
name: item.name, memberId: `${purchaserId}`,
proveUrl: item.data.url, roleId: `${purchaserRoleId}`,
})).filter(Boolean), }).then(res => {
}, if (res.code === 1000) {
}, 'uploadVoucher'); setBankAccount(res.data);
} }
}; }).finally(() => {
setLoading(false);
return ( });
<> };
<NiceForm
previewPlaceholder="" useEffect(() => {
initialValues={bankAccount} getSettleAccountsGetMemberAccountConfig();
effects={($, { setFieldState }) => { }, []);
}} const beforeUploadVoucher = file => {
expressionScope={{ if (file.size / 1024 > 200) {
beforeUpload: beforeUploadVoucher, message.warning('图片大小超过200K');
}} return Promise.reject();
actions={uploadVoucherFormActions} }
schema={uploadVoucherModalSchema} };
onSubmit={handleUploadVoucherSubmit}
/> const handleUploadVoucherSubmit = values => {
const { fileList = [], id, ...rest } = values;
<div style={{ marginTop: 20, textAlign: 'center' }}>
<Space> if (handleConfirm) {
<Button onClick={handleModalVisible}> if (!bankAccount || !bankAccount.id) {
取消 message.error('没有收款账户相关信息，无法退款');
</Button> return;
<Button }
type="primary" handleConfirm({
onClick={() => uploadVoucherFormActions.submit()} ...value,
loading={submitLoading} payProve: {
> ...rest,
退款 fileList: fileList.map(item => item.status === 'done' && ({
</Button> name: item.name,
</Space> proveUrl: item.data.url,
</div> })).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; export default UploadVoucher;
\ No newline at end of file
src/pages/returnManage/components/RefundModal/index.tsx
View file @ 19e7265d
import React, { Suspense } from 'react'; import React, { Suspense } from 'react';
import { Modal } from 'antd'; import { Modal } from 'antd';
const UploadVoucher = React.lazy(() => import('./UploadVoucher')); const UploadVoucher = React.lazy(() => import('./UploadVoucher'));
const Balance = React.lazy(() => import('./Balance')); const Balance = React.lazy(() => import('./Balance'));
const Credit = React.lazy(() => import('./Credit')); const Credit = React.lazy(() => import('./Credit'));
const COD = React.lazy(() => import('./COD')); const COD = React.lazy(() => import('./COD'));
export interface RefundModalProps { export interface RefundModalProps {
/** /**
* 是否可见 * 是否可见
*/ */
visible: boolean; visible: boolean;
/** /**
* 对应的弹窗名称 * 对应的弹窗名称
*/ */
modalName: string; modalName: string;
/** /**
* 关闭事件 * 关闭事件
*/ */
handleModalVisible: () => void; handleModalVisible: () => void;
/** /**
* 弹窗内确认事件 * 弹窗内确认事件
*/ */
handleConfirm: (values: {[key: string]: any}, modalName: string) => void; handleConfirm: (values: {[key: string]: any}, modalName: string) => void;
/** /**
* 弹窗需要的数据值 * 弹窗需要的数据值
*/ */
value: {[key: string]: any}; value: {[key: string]: any};
/** /**
* 弹窗提交 loading * 弹窗提交 loading
*/ */
submitLoading: boolean; submitLoading: boolean;
}; };
const RefundModal: React.FC<RefundModalProps> = ({ const RefundModal: React.FC<RefundModalProps> = ({
visible = false, visible = false,
modalName = 'uploadVoucher', modalName = 'uploadVoucher',
handleModalVisible, handleModalVisible,
handleConfirm, handleConfirm,
value, value,
submitLoading, submitLoading,
}) => { }) => {
const {
const tempMap = { purchaserId,
uploadVoucher: { purchaserRoleId,
width: 600, supplierId,
title: '上传退款凭证', supplierRoleId,
render: () => ( ...rest
<Suspense fallback={null}> } = value;
<UploadVoucher
value={value} const tempMap = {
handleConfirm={handleConfirm} uploadVoucher: {
handleModalVisible={handleModalVisible} width: 600,
submitLoading={submitLoading} title: '上传退款凭证',
/> render: () => (
</Suspense> <Suspense fallback={null}>
), <UploadVoucher
}, value={rest}
balance: { purchaserId={purchaserId}
width: 600, purchaserRoleId={purchaserRoleId}
title: '退款处理', handleConfirm={handleConfirm}
render: () => ( handleModalVisible={handleModalVisible}
<Suspense fallback={null}> submitLoading={submitLoading}
<Balance />
value={value} </Suspense>
handleConfirm={handleConfirm} ),
handleModalVisible={handleModalVisible} },
submitLoading={submitLoading} balance: {
/> width: 600,
</Suspense> title: '退款处理',
), render: () => (
}, <Suspense fallback={null}>
credit: { <Balance
width: 600, value={rest}
title: '退款处理', purchaserId={purchaserId}
render: () => ( purchaserRoleId={purchaserRoleId}
<Suspense fallback={null}> handleConfirm={handleConfirm}
<Credit handleModalVisible={handleModalVisible}
value={value} submitLoading={submitLoading}
handleConfirm={handleConfirm} />
handleModalVisible={handleModalVisible} </Suspense>
submitLoading={submitLoading} ),
/> },
</Suspense> credit: {
), width: 600,
}, title: '退款处理',
COD: { render: () => (
width: 500, <Suspense fallback={null}>
title: '货到付款退款确认', <Credit
render: () => ( value={rest}
<Suspense fallback={null}> handleConfirm={handleConfirm}
<COD handleModalVisible={handleModalVisible}
value={value} submitLoading={submitLoading}
handleConfirm={handleConfirm} />
handleModalVisible={handleModalVisible} </Suspense>
submitLoading={submitLoading} ),
/> },
</Suspense> COD: {
), width: 500,
}, title: '货到付款退款确认',
}; render: () => (
<Suspense fallback={null}>
const template = tempMap[modalName] || { <COD
width: 640, value={rest}
title: '标题', handleConfirm={handleConfirm}
render: () => ('没有找到 modal 模板'), handleModalVisible={handleModalVisible}
}; submitLoading={submitLoading}
/>
return ( </Suspense>
<Modal ),
width={template.width} },
title={template.title} };
visible={visible}
footer={null} const template = tempMap[modalName] || {
onCancel={() => handleModalVisible()} width: 640,
destroyOnClose title: '标题',
> render: () => ('没有找到 modal 模板'),
{template.render()} };
</Modal>
); return (
}; <Modal
width={template.width}
title={template.title}
visible={visible}
footer={null}
onCancel={() => handleModalVisible()}
destroyOnClose
>
{template.render()}
</Modal>
);
};
export default RefundModal; export default RefundModal;
\ No newline at end of file
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