oak-pay-business/es/components/withdrawTransfer/list/web.pc.js

import React, { useState } from 'react';
import { Input, Form, Modal } from 'antd';
import Styles from './web.pc.module.less';
import ListPro from 'oak-frontend-base/es/components/listPro';
import { FilterPanel } from '../../../components/AbstractComponents';
import { ThousandCont, ToYuan } from 'oak-domain/lib/utils/money';
export default function Render(props) {
    const { transfers, oakFullpath, oakExecutable, updateId, sysAccountAmount } = props.data;
    const { t, updateItem, execute, clean, setMessage, setUpdateId } = props.methods;
    const [updateAction, setUpdateAction] = useState('');
    if (transfers) {
        const updateRow = updateId && transfers.find(ele => ele.id === updateId);
        return (<div>
                <FilterPanel oakPath={oakFullpath} entity="withdrawTransfer" columns={[
                {
                    attr: 'iState',
                },
                {
                    attr: 'externalId',
                }
            ]}/>
                <ListPro entity="withdrawTransfer" data={transfers} attributes={[
                {
                    path: 'price',
                    label: t('withdrawTransfer:attr.price'),
                    width: 100,
                    render: (row) => {
                        return `${t('common::pay.symbol')} ${ThousandCont(ToYuan(row.price), 2)}`;
                    }
                },
                {
                    path: 'loss',
                    label: t('withdrawTransfer:attr.loss'),
                    width: 100,
                    render: (row) => {
                        return `${t('common::pay.symbol')} ${ThousandCont(ToYuan(row.loss), 2)}`;
                    }
                },
                {
                    path: 'iState',
                    width: 80,
                    label: t('withdrawTransfer:attr.iState'),
                },
                {
                    path: '$$createAt$$',
                    label: t('common::$$createAt$$'),
                    width: 100,
                },
                {
                    path: 'creatorName',
                    label: t('label.cn'),
                    width: 140,
                    render: (row) => {
                        const { creatorName, creatorMobile } = row;
                        return (<div>
                                        <div>{creatorName}</div>
                                        <div>{creatorMobile}</div>
                                    </div>);
                    }
                },
                {
                    path: 'operatorName',
                    label: t('label.on'),
                    width: 140,
                    render: (row) => {
                        const { operatorName, operatorMobile } = row;
                        return (<div>
                                        <div>{operatorName}</div>
                                        <div>{operatorMobile}</div>
                                    </div>);
                    }
                },
                {
                    path: 'channel',
                    label: t('label.channel'),
                    type: 'string',
                    width: 100,
                },
                {
                    path: 'externalId',
                    label: t('withdrawTransfer:attr.externalId'),
                    width: 120,
                },
                {
                    path: 'reason',
                    label: t('withdrawTransfer:attr.reason'),
                    width: 200,
                }
            ]} onAction={(row, action) => {
                setUpdateId(row.id, action);
                setUpdateAction(action);
            }} oakPath={oakFullpath}/>
                {updateRow && <Modal open={!!updateId} onCancel={() => {
                    setUpdateId('', '');
                    setUpdateAction('');
                }} onOk={async () => {
                    await execute();
                    setUpdateId('', '');
                    setUpdateAction('');
                }} destroyOnClose closeIcon={null} okText={t('common::confirm')} cancelText={t('common::action.cancel')} okButtonProps={{
                    disabled: oakExecutable !== true,
                }}>
                    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ width: '100%', marginTop: 12 }}>
                        <Form.Item label={t('label.channel')}>
                            {updateRow.channel}
                        </Form.Item>
                        {updateRow.withdrawAccount?.org && <Form.Item label={t('withdraw::account.bank.org')}>
                            {updateRow.withdrawAccount?.org}
                        </Form.Item>}
                        {updateRow.withdrawAccount?.name && <Form.Item label={updateRow.withdrawAccount?.channel?.entity === 'bank' ?
                        t('withdraw::account.bank.name') :
                        t('withdraw::account.others.name')}>
                            {updateRow.withdrawAccount?.name}
                        </Form.Item>}
                        {updateRow.withdrawAccount?.code && <Form.Item label={t('withdrawAccount:attr.code')}>
                            {updateRow.withdrawAccount?.code}
                        </Form.Item>}
                        <Form.Item label={t('label.sysAccountAmount')} help={(updateAction === 'succeed' && sysAccountAmount < updateRow.price - updateRow.loss) ?
                    <span className={Styles.warning}>{t('saNotEnough')}</span> :
                    undefined}>
                            <span className={(updateAction === 'succeed' && sysAccountAmount < updateRow.price - updateRow.loss) ? Styles.warning : undefined}>
                                {`${t('common::pay.symbol')} ${ThousandCont(ToYuan(sysAccountAmount), 2)}`}
                            </span>
                        </Form.Item>
                        <Form.Item label={t('label.transferActualPrice')}>
                            <span className={Styles.actualPrice}>
                                {`${t('common::pay.symbol')} ${ThousandCont(ToYuan(updateRow.price - updateRow.loss), 2)}`}
                            </span>
                        </Form.Item>
                        {updateAction === 'succeed' && (<Form.Item label={t('withdrawTransfer:attr.externalId')}>
                                    <Input value={updateRow.externalId} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        updateItem({
                            externalId: value,
                        }, updateId);
                    }}/>
                                </Form.Item>)}
                        {updateAction === 'fail' && (<Form.Item label={t('withdrawTransfer:attr.reason')}>
                                    <Input value={updateRow.reason} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        updateItem({
                            reason: value,
                        }, updateId);
                    }}/>
                                </Form.Item>)}
                    </Form>
                </Modal>}
            </div>);
    }
    return null;
}