242 lines
13 KiB
JavaScript
242 lines
13 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Descriptions, Tag, Spin, Modal, Space, Flex, Button, Divider, Alert } from 'antd';
|
|
import { AlipayOutlined, WechatOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
import Styles from './web.pc.module.less';
|
|
import { ThousandCont, ToYuan } from "oak-domain/lib/utils/money";
|
|
import { OfflineAccount as OADetail } from '../../offlineAccount/config/web.pc';
|
|
import { WpAccount as WADetail } from '../../wpAccount/config/web.pc';
|
|
import TransferList from '../transferList';
|
|
import SysAccountMoveCreate from '../../sysAccountMove/create';
|
|
import SysAccountOperList from '../../sysAccountOper/list';
|
|
import assert from 'assert';
|
|
function OfflineAccount(props) {
|
|
const { data, t } = props;
|
|
const { type, channel, color, name } = data;
|
|
switch (type) {
|
|
case 'bank': {
|
|
return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
|
|
<Tag>{t('offlineAccount:name')}</Tag>
|
|
<div className={Styles.title}>{t(`offlineAccount:v.type.${type}`)}</div>
|
|
<div className={Styles.subtitle}>{channel}</div>
|
|
</Flex>);
|
|
}
|
|
case 'alipay': {
|
|
return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
|
|
<Tag>{t('offlineAccount:name')}</Tag>
|
|
<AlipayOutlined style={{ color, fontSize: 18 }}/>
|
|
<div className={Styles.subtitle}>{name || t('qrCode')}</div>
|
|
</Flex>);
|
|
}
|
|
case 'wechat': {
|
|
return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
|
|
<Tag>{t('offlineAccount:name')}</Tag>
|
|
<WechatOutlined style={{ color, fontSize: 18 }}/>
|
|
<div className={Styles.subtitle}>{name || t('qrCode')}</div>
|
|
</Flex>);
|
|
}
|
|
case 'shouqianba':
|
|
case 'others': {
|
|
return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
|
|
<Tag>{t('offlineAccount:name')}</Tag>
|
|
<div className={Styles.title}>{t(`offlineAccount:v.type.${type}`)}</div>
|
|
<div className={Styles.subtitle}>{name || t('qrCode')}</div>
|
|
</Flex>);
|
|
}
|
|
}
|
|
}
|
|
function WpAccount(props) {
|
|
const { data, t } = props;
|
|
return (<Flex style={{ height: '100%' }} vertical gap="middle" align="center" justify="center">
|
|
<Tag>{t('wpAccount:name')}</Tag>
|
|
<WechatOutlined style={{ color: 'green', fontSize: 34 }}/>
|
|
</Flex>);
|
|
}
|
|
function GeneralAccount(props) {
|
|
const { entity, t } = props;
|
|
return (<Flex style={{ height: '100%' }} vertical gap="small" align="center" justify="center">
|
|
<Tag>{t(`${entity}:name`)}</Tag>
|
|
</Flex>);
|
|
}
|
|
const RenderSysAccountCardTopDict = {
|
|
'offlineAccount': OfflineAccount,
|
|
'wpAccount': WpAccount,
|
|
};
|
|
const RenderSysAccountDetailDict = {
|
|
'offlineAccount': OADetail,
|
|
'wpAccount': WADetail,
|
|
};
|
|
export function registerSysAccountCardTopComponent(entity, component) {
|
|
assert(!RenderSysAccountCardTopDict[entity]);
|
|
RenderSysAccountCardTopDict[entity] = component;
|
|
}
|
|
export function registerSysAccountDetailComponent(entity, component) {
|
|
assert(!RenderSysAccountDetailDict[entity]);
|
|
RenderSysAccountDetailDict[entity] = component;
|
|
}
|
|
export default function render(props) {
|
|
const { accounts, total, systemId, accountNum, accountTotalSum, accountAvailSum, refundCnt, refundPriceSum, transferCnt, transferPriceSum, orderCnt, orderPaidSum, orderRefundSum, refreshing, } = props.data;
|
|
const { t, setMessage, refreshData } = props.methods;
|
|
if (accounts && systemId) {
|
|
const [showTransferList, setShowTransferList] = useState(false);
|
|
const [showMoveCreate, setShowMoveCreate] = useState(false);
|
|
const [showHistoryList, setShowHistoryList] = useState(false);
|
|
const [showHistoryAcc, setShowHistoryAcc] = useState(undefined);
|
|
return (<div className={Styles.container}>
|
|
<Spin spinning={refreshing} fullscreen/>
|
|
<Descriptions title={t('sysAccount')} bordered items={[
|
|
{
|
|
label: t('total'),
|
|
children: <div className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(total || 0), 2)}</span>
|
|
</div>
|
|
},
|
|
{
|
|
label: t('count'),
|
|
children: accounts.length,
|
|
}
|
|
]} column={2} extra={<>
|
|
<Space>
|
|
<Button type="text" icon={<ReloadOutlined />} onClick={() => refreshData()}/>
|
|
<Button type="primary" onClick={() => setShowMoveCreate(true)}>
|
|
{t('move')}
|
|
</Button>
|
|
</Space>
|
|
<Modal destroyOnClose open={showMoveCreate} onCancel={() => setShowMoveCreate(false)} closeIcon={null} width={800} title={t('move')} footer={null}>
|
|
<SysAccountMoveCreate oakPath="$opb-sysAccount-survery-saMoveCreate" systemId={systemId} onSuccess={() => setShowMoveCreate(false)}/>
|
|
</Modal>
|
|
</>}/>
|
|
<div className={Styles.sysAccounts}>
|
|
{accounts.map(({ entity, data }, idx) => {
|
|
const TopRender = RenderSysAccountCardTopDict[entity];
|
|
assert(TopRender);
|
|
return (<div className={Styles.sysAccount} key={idx}>
|
|
<div className={Styles.top}>
|
|
{TopRender ? <TopRender data={data} t={t}/> : <GeneralAccount entity={entity} t={t}/>}
|
|
</div>
|
|
<div className={Styles.middle}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(data.price || 0), 2)}</span>
|
|
</div>
|
|
<div className={Styles.bottom}>
|
|
<Button onClick={() => {
|
|
setShowHistoryAcc({ entity, data });
|
|
setShowHistoryList(true);
|
|
}} style={{ marginRight: 8, }}>
|
|
{t('history')}
|
|
</Button>
|
|
<Button onClick={() => {
|
|
const DetailRender = RenderSysAccountDetailDict[entity];
|
|
if (DetailRender) {
|
|
Modal.info({
|
|
width: 560,
|
|
title: `${t(`${entity}:name`)}${t('common::action.detail')}`,
|
|
content: (<DetailRender data={data} systemId={systemId} t={t}/>),
|
|
onOk() { },
|
|
});
|
|
}
|
|
else {
|
|
setMessage({
|
|
title: t('noDetailRender'),
|
|
type: 'error',
|
|
});
|
|
}
|
|
}}>
|
|
{t('common::action.detail')}
|
|
</Button>
|
|
|
|
{!!showHistoryAcc && showHistoryList &&
|
|
<Modal destroyOnClose open={showHistoryList} onCancel={() => {
|
|
setShowHistoryAcc(undefined);
|
|
setShowHistoryList(false);
|
|
}} width={800} title={showHistoryAcc.entity === 'offlineAccount' ?
|
|
(showHistoryAcc.data.type === 'bank' ?
|
|
`${t(`${showHistoryAcc.entity}:v.type.${showHistoryAcc.data.type}`)}-${showHistoryAcc.data.channel}-${t('history')}`
|
|
: `${t(`${showHistoryAcc.entity}:v.type.${showHistoryAcc.data.type}`)}-${showHistoryAcc.data.name}-${t('history')}`) : `${t(`${showHistoryAcc.entity}:name`)}-${t('history')}`} footer={null}>
|
|
<div style={{ height: '65vh' }}>
|
|
<SysAccountOperList entity={showHistoryAcc.entity} entityId={showHistoryAcc.data.id} oakPath="$opb-sysAccount-survery-operList"/>
|
|
</div>
|
|
</Modal>}
|
|
</div>
|
|
</div>);
|
|
})}
|
|
</div>
|
|
<Divider />
|
|
{accountNum && <Descriptions title={t('business')} bordered extra={<Alert type="info" message={t('tips1')}/>} items={[
|
|
{
|
|
label: t('accountTotalSum'),
|
|
children: <div className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(accountTotalSum || 0), 2)}</span>
|
|
</div>
|
|
},
|
|
{
|
|
label: t('accountAvailSum'),
|
|
children: <div className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(accountAvailSum || 0), 2)}</span>
|
|
</div>
|
|
},
|
|
{
|
|
label: t('accountNum'),
|
|
children: <span className={Styles.value}>{accountNum || 0}</span>,
|
|
},
|
|
{
|
|
label: t('refundCnt'),
|
|
children: <span className={Styles.value}>{refundCnt || 0}</span>
|
|
},
|
|
{
|
|
label: t('refundPriceSum'),
|
|
span: 2,
|
|
children: (<div className={Styles.span2}>
|
|
<span className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(refundPriceSum || 0), 2)}</span>
|
|
</span>
|
|
<Button style={{ marginLeft: 20 }}>
|
|
{t('refundList')}
|
|
</Button>
|
|
</div>)
|
|
},
|
|
{
|
|
label: t('transferCnt'),
|
|
children: <span className={Styles.value}>{transferCnt || 0}</span>
|
|
},
|
|
{
|
|
label: t('transferPriceSum'),
|
|
span: 2,
|
|
children: (<div className={Styles.span2}>
|
|
<span className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan(transferPriceSum || 0), 2)}</span>
|
|
</span>
|
|
<Button onClick={() => setShowTransferList(true)}>
|
|
{t('transferList')}
|
|
</Button>
|
|
<Modal open={showTransferList} onCancel={() => setShowTransferList(false)} footer={null} closeIcon={null} width={800}>
|
|
<TransferList oakPath="$opb-sysAccount-survery-transferList"/>
|
|
</Modal>
|
|
</div>)
|
|
},
|
|
{
|
|
label: t('orderCnt'),
|
|
children: <span className={Styles.value}>{orderCnt || 0}</span>
|
|
},
|
|
{
|
|
label: t('orderPriceSum'),
|
|
children: (<div className={Styles.span2}>
|
|
<div className={Styles.total}>
|
|
<span className={Styles.symbol}>{t('common::pay.symbol')}</span>
|
|
<span className={Styles.value}>{ThousandCont(ToYuan((orderPaidSum || 0) - (orderRefundSum || 0)), 2)}</span>
|
|
</div>
|
|
<Button>
|
|
{t('orderList')}
|
|
</Button>
|
|
</div>)
|
|
}
|
|
]} column={3}/>}
|
|
</div>);
|
|
}
|
|
return null;
|
|
}
|