oak-pay-business/es/components/apAccount/upsert/web.pc.js

140 lines
7.7 KiB
JavaScript

import React from 'react';
import { Form, Switch, InputNumber, Input, Radio, Divider } from 'antd';
import Styles from './web.pc.module.less';
import AliPayUpsert from '../../aliPay/upsert';
export default function render(props) {
const { apAccount, aliPay, oakFullpath, systemId } = props.data;
const { t, update } = props.methods;
if (apAccount) {
return (<Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} layout="horizontal" style={{ minWidth: 860 }}>
{(!aliPay || aliPay.$$createAt$$ === 1) && <AliPayUpsert oakPath={`${oakFullpath}.aliPay`} systemId={systemId} key="apCreate"/>}
{(apAccount.aliPayId && apAccount?.$$createAt$$ !== 1) && <AliPayUpsert oakPath={`${oakFullpath}.aliPay`} systemId={systemId} key="apUpdate" oakId={apAccount.aliPayId}/>}
<Form.Item label="说明">
<div className={Styles.tips}>
{t('aliPayIsShared')}
</div>
</Form.Item>
<Divider />
<Form.Item label={t('apAccount:attr.appId')} required>
<Input maxLength={32} value={apAccount.appId} onChange={({ currentTarget }) => {
const appId = currentTarget.value;
update({ appId });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.mchId')}>
<Input maxLength={32} value={apAccount.mchId} onChange={({ currentTarget }) => {
const mchId = currentTarget.value;
update({ mchId });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.privateKeyPath')} required>
<Input value={apAccount.privateKeyPath || ''} placeholder={t('placeholder.privateKeyPath')} onChange={({ currentTarget }) => {
const privateKeyPath = currentTarget.value;
update({ privateKeyPath });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.keyType')} tooltip={t('keyTypeTip')}>
<Radio.Group value={apAccount.keyType} options={[
{ value: 'PKCS1', label: t('apAccount:v.keyType.PKCS1') },
{ value: 'PKCS8', label: t('apAccount:v.keyType.PKCS8') },
]} onChange={(e) => {
const keyType = e.target.value;
update({ keyType });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.mode')} tooltip={t('modeTip')}>
<Radio.Group value={apAccount.mode} options={[
{ value: 'publicKey', label: t('apAccount:v.mode.publicKey') },
{ value: 'certificate', label: t('apAccount:v.mode.certificate') },
]} onChange={(e) => {
const mode = e.target.value;
update({ mode });
}}/>
</Form.Item>
{apAccount.mode === 'publicKey' && (<>
<Form.Item label={t('apAccount:attr.publicKeyPath')} required>
<Input value={apAccount.publicKeyPath || ''} placeholder={t('placeholder.publicKeyPath')} onChange={({ currentTarget }) => {
const publicKeyPath = currentTarget.value;
update({ publicKeyPath });
}}/>
</Form.Item>
</>)}
{apAccount.mode === 'certificate' && (<>
<Form.Item label={t('apAccount:attr.alipayRootCertPath')} required>
<Input value={apAccount.alipayRootCertPath || ''} placeholder={t('placeholder.alipayRootCertPath')} onChange={({ currentTarget }) => {
const alipayRootCertPath = currentTarget.value;
update({ alipayRootCertPath });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.alipayPublicCertPath')} required>
<Input value={apAccount.alipayPublicCertPath || ''} placeholder={t('placeholder.alipayPublicCertPath')} onChange={({ currentTarget }) => {
const alipayPublicCertPath = currentTarget.value;
update({ alipayPublicCertPath });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.appCertPath')} required>
<Input value={apAccount.appCertPath || ''} placeholder={t('placeholder.appCertPath')} onChange={({ currentTarget }) => {
const appCertPath = currentTarget.value;
update({ appCertPath });
}}/>
</Form.Item>
</>)}
<Form.Item label={t('apAccount:attr.gateway')} tooltip={t('gatewayTip')}>
<Input value={apAccount.gateway || ''} placeholder={t('placeholder.gateway')} onChange={({ currentTarget }) => {
const gateway = currentTarget.value;
update({ gateway });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.setting')} tooltip={t('settingTip')}>
<Radio.Group value={apAccount.setting} options={[
{ value: 'userId', label: t('apAccount:v.setting.userId') },
{ value: 'openId', label: t('apAccount:v.setting.openId') },
]} onChange={(e) => {
const setting = e.target.value;
update({ setting });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.needEncrypt')} tooltip={t('needEncryptTip')}>
<Switch value={apAccount.needEncrypt} onChange={(enabled) => {
update({ needEncrypt: enabled });
}}/>
</Form.Item>
{apAccount.needEncrypt && (<Form.Item label={t('apAccount:attr.encryptKey')} required>
<Input value={apAccount.encryptKey || ''} placeholder={t('placeholder.encryptKey')} onChange={({ currentTarget }) => {
const encryptKey = currentTarget.value;
update({ encryptKey });
}}/>
</Form.Item>)}
<Form.Item label={t('apAccount:attr.taxLossRatio')} help={t('placeholder.taxLossRatio')}>
<InputNumber value={apAccount.taxLossRatio} max={5} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
const taxLossRatio = value;
update({ taxLossRatio });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.refundCompensateRatio')} help={t('placeholder.refundCompensateRatio')}>
<InputNumber value={apAccount.refundCompensateRatio} max={100} min={1} addonAfter={"%"} step={1} onChange={(value) => {
const refundCompensateRatio = value;
update({ refundCompensateRatio });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.refundGapDays')} help={t('placeholder.refundGapDays')}>
<InputNumber value={apAccount.refundGapDays} max={365} min={7} addonAfter={"天"} step={1} onChange={(value) => {
const refundGapDays = value;
update({ refundGapDays });
}}/>
</Form.Item>
<Form.Item label={t('apAccount:attr.enabled')} required>
<Switch value={apAccount.enabled} onChange={(enabled) => {
update({ enabled });
}}/>
</Form.Item>
</Form>);
}
return null;
}