88 lines
4.2 KiB
JavaScript
88 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import { Popup, SwipeAction, List, Button, Result, Checkbox, Switch, Modal } from 'antd-mobile';
|
|
import Styles from './web.module.less';
|
|
import WdaUpsert from '../upsert';
|
|
export default function render(props) {
|
|
const { isCreate, withdrawAccounts, upsertId, oakFullpath, entity, entityId, asPicker, allowCreate, selectedId, onCancel, oakExecutable } = props.data;
|
|
const { t, setUpsertId, doUpdate, resetAll, updateAccount, newAccount, pickOne, confirmPick, removeAccount, switchDefault } = props.methods;
|
|
const U = upsertId && (<Popup visible={!!upsertId} destroyOnClose onMaskClick={() => resetAll()} onClose={() => resetAll()}>
|
|
<WdaUpsert oakPath={`${oakFullpath}.${upsertId}`} oakId={upsertId} entity={entity} entityId={entityId}/>
|
|
<div className={Styles.btns}>
|
|
<Button block onClick={() => resetAll()}>
|
|
{t('common::action.cancel')}
|
|
</Button>
|
|
<Button color="primary" block disabled={oakExecutable !== true} onClick={() => doUpdate()}>
|
|
{t('common::confirm')}
|
|
</Button>
|
|
</div>
|
|
</Popup>);
|
|
if (!withdrawAccounts?.length) {
|
|
return (<div className={Styles.container}>
|
|
{U}
|
|
<Result status="warning" title={t('noData')} description={<Button color="primary" onClick={() => newAccount()}>
|
|
{t('common::action.create')}
|
|
</Button>}/>
|
|
</div>);
|
|
}
|
|
const getItem = (ele, index) => (<List.Item key={index} prefix={<div className={Styles.avatar}>
|
|
{ele.symbol}
|
|
</div>} title={ele.name} description={ele.code} extra={asPicker ? <Checkbox checked={ele.id === selectedId} onChange={(checked) => {
|
|
if (checked) {
|
|
pickOne(ele.id);
|
|
}
|
|
else {
|
|
pickOne('');
|
|
}
|
|
}}/> : <Switch style={{ '--width': '72px' }} checked={ele.isDefault} checkedText={t('default')} onChange={() => switchDefault(ele.id)}/>}>
|
|
{ele.label}
|
|
</List.Item>);
|
|
return (<div className={Styles.container2}>
|
|
{U}
|
|
<div className={Styles.list}>
|
|
<List>
|
|
{withdrawAccounts.map((ele, idx) => {
|
|
const Item = getItem(ele, idx);
|
|
if (asPicker) {
|
|
return Item;
|
|
}
|
|
return (<SwipeAction key={idx} rightActions={[
|
|
{
|
|
key: 'delete',
|
|
text: t('common::action.remove'),
|
|
color: 'danger',
|
|
onClick: () => Modal.confirm({
|
|
title: t('confirmDelete'),
|
|
content: t('areYouSure'),
|
|
onConfirm: () => removeAccount(ele.id),
|
|
})
|
|
}
|
|
]}>
|
|
{Item}
|
|
</SwipeAction>);
|
|
})}
|
|
</List>
|
|
</div>
|
|
<div className={Styles.btns}>
|
|
{asPicker ? (<>
|
|
<Button block onClick={() => onCancel()} style={{ marginRight: 6 }}>
|
|
{t('common::action.cancel')}
|
|
</Button>
|
|
<Button block color="primary" disabled={!selectedId} onClick={() => confirmPick()}>
|
|
{t('common::confirm')}
|
|
</Button>
|
|
</>) : (oakExecutable === true ?
|
|
<>
|
|
<Button block onClick={() => resetAll()}>
|
|
{t('common::reset')}
|
|
</Button>
|
|
<Button block color="primary" onClick={() => doUpdate()}>
|
|
{t('common::action.update')}
|
|
</Button>
|
|
</> :
|
|
allowCreate && <Button block color="primary" onClick={() => newAccount()}>
|
|
{t('common::action.create')}
|
|
</Button>)}
|
|
</div>
|
|
</div>);
|
|
}
|