oak-pay-business/es/components/payConfig/system/web.pc.js

106 lines
4.6 KiB
JavaScript

import React, { useState } from 'react';
import { Button, Row, Tabs } from 'antd';
import Styles from './web.pc.module.less';
import PayConfigUpsert from '../upsert';
import { PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_MP_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME } from '../../../types/PayConfig';
import { generateNewId } from 'oak-domain/lib/utils/uuid';
const SystemPayChannels = []; // [label, value]
const ApplicationPayChannels = {};
/**
*
* @param channel [label, value]
*/
export function registerSystemPayChannel(channel) {
SystemPayChannels.push(channel);
}
/**
*
* @param type
* @param channel [label, value]
*/
export function registerApplicationPayChannel(type, channel) {
if (ApplicationPayChannels[type]) {
ApplicationPayChannels[type].push(channel);
}
else {
ApplicationPayChannels[type] = [channel];
}
}
const DefaultApplicationPayChannels = {
web: [PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME],
wechatMp: [PAY_CHANNEL_WECHAT_MP_NAME],
wechatPublic: [PAY_CHANNEL_WECHAT_JS_NAME],
};
export default function render(props) {
const { system, oakFullpath, operation, oakDirty } = props.data;
const { t, update, setMessage, execute } = props.methods;
const defaultApplicationPayChannelDict = {
web: DefaultApplicationPayChannels.web.map(ele => [t(`payChannel::${ele}`), ele]),
wechatMp: DefaultApplicationPayChannels.wechatMp.map(ele => [t(`payChannel::${ele}`), ele]),
wechatPublic: DefaultApplicationPayChannels.wechatPublic.map(ele => [t(`payChannel::${ele}`), ele]),
};
const [key, setKey] = useState('');
if (system && oakFullpath) {
const { payConfig, application$system: applications } = system;
return (<div className={Styles.container}>
<Row justify="end" style={{ marginBottom: 12 }}>
<Button type="primary" disabled={!oakDirty} onClick={() => execute()}>
{t('common::action.save')}
</Button>
</Row>
<Tabs tabPosition="left" items={[
{
label: (<div className={Styles.systemLabel}>
{t('system')}
</div>),
key: 'system',
children: (<PayConfigUpsert key="system" config={payConfig} update={(config) => update({ payConfig: config })} channels={SystemPayChannels.concat([[t('payChannel::ACCOUNT'), 'ACCOUNT'], [t('payChannel::OFFLINE'), 'OFFLINE']])} t={t}/>),
},
{
label: (<div className={Styles.padding}>
{t('appsBelow')}
</div>),
disabled: true,
key: 'padding',
},
...applications.map((app) => {
const { type, id, payConfig: appPayConfig } = app;
return {
key: id,
label: (<div>
{app.name}
</div>),
children: (<PayConfigUpsert key={id} config={appPayConfig} update={(config) => update({
application$system: {
id: generateNewId(),
action: 'update',
data: {
payConfig: config,
},
filter: {
id,
}
}
})} channels={(defaultApplicationPayChannelDict[type] || []).concat(ApplicationPayChannels[type] || [])} t={t}/>),
};
})
]} onTabClick={(activeKey) => {
if (key && operation) {
const { application$system } = operation.data;
const { filter } = application$system;
if (filter?.id === key) {
setMessage({
type: 'warning',
content: t('mayLossUpdate', {
name: applications?.find(ele => ele.id === key).name
}),
});
}
}
setKey(activeKey);
}}/>
</div>);
}
return null;
}