oak-pay-business/es/components/sysAccountMove/create/web.pc.js

69 lines
3.6 KiB
JavaScript

import React from 'react';
import { Button, Form, Input, InputNumber, Radio, Space, Flex } from 'antd';
export default function Render(props) {
const { price, externalId, max, remark, fromEntityId, toEntityId, accounts } = props.data;
const { t, setFromId, setToId, setPrice, setExternalId, setRemark, createMove } = props.methods;
if (accounts.length) {
return (<>
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }} layout="horizontal" style={{
marginTop: 20,
}}>
<Form.Item label={t('label.from')} required>
<Radio.Group onChange={({ target }) => {
setFromId(target.value);
}} value={fromEntityId}>
<Space direction="vertical">
{accounts.filter(ele => ele.price > 0).map(ele => {
const { id, label, price, priceStr } = ele;
return (<Radio value={id} key={id} disabled={price <= 0}>
{`${label}: ${t('common::pay.symbol')}${priceStr}`}
</Radio>);
})}
</Space>
</Radio.Group>
</Form.Item>
{fromEntityId && <Form.Item label={t('label.to')} required>
<Radio.Group onChange={({ target }) => {
setToId(target.value);
}} value={toEntityId}>
<Space direction="vertical">
{accounts.filter(ele => ele.id !== fromEntityId).map(ele => {
const { id, label, price, priceStr } = ele;
return (<Radio value={id} key={id}>
{`${label}: ${t('common::pay.symbol')}${priceStr}`}
</Radio>);
})}
</Space>
</Radio.Group>
</Form.Item>}
{fromEntityId && toEntityId && <Form.Item label={t('sysAccountMove:attr.price')} required>
<InputNumber value={price} style={{
width: 240,
}} max={max} precision={2} onChange={(value) => {
const price = value;
setPrice(price);
}}/>
</Form.Item>}
{fromEntityId && toEntityId && <Form.Item label={t('sysAccountMove:attr.externalId')} required>
<Input value={externalId} onChange={({ currentTarget }) => {
const externalId = currentTarget.value;
setExternalId(externalId);
}} maxLength={64}/>
</Form.Item>}
{fromEntityId && toEntityId && <Form.Item label={t('sysAccountMove:attr.remark')}>
<Input.TextArea value={remark || undefined} onChange={({ currentTarget }) => {
const remark = currentTarget.value;
setRemark(remark);
}} rows={4}/>
</Form.Item>}
</Form>
<Flex style={{ width: '100%', padding: 12 }} justify="end">
<Button type="primary" disabled={!fromEntityId || !toEntityId || !price || !externalId} onClick={() => createMove()}>
{t('common::confirm')}
</Button>
</Flex>
</>);
}
return null;
}