oak-pay-business/es/components/ship/wechatMpShip/web.pc.js

74 lines
3.1 KiB
JavaScript

import { Card, Modal, Button, Alert, Space } from 'antd';
import { PlusOutlined, EditOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
import Upsert from './upsert';
import React, { useState } from "react";
import { generateNewIdAsync } from "oak-domain/lib/utils/uuid";
import Detail from 'oak-frontend-base/es/components/detail';
export default function render(props) {
const { ships, applications, oakFullpath, oakDirty } = props.data;
const { t, update, clean, execute, addItem } = props.methods;
const [upsertId, setUpsertId] = useState('');
const U = (<Modal open={!!upsertId} title={`${t('common::action.update')}${t('wechatMpShip:name')}`} okButtonProps={{
disabled: !oakDirty
}} destroyOnClose onCancel={() => {
clean();
setUpsertId('');
}} onOk={async () => {
await execute();
setUpsertId('');
}} width={720} okText={t('common::confirm')} cancelText={t('common::action.cancel')}>
<Upsert oakPath={`${oakFullpath}.${upsertId}`} oakId={upsertId}/>
</Modal>);
if (ships?.length) {
return (<div>
<Alert message={t('help.intro')}/>
<Space style={{
marginTop: 22
}}>
{ships.map((ele, idx) => (<Card title={ele.application.name} extra={<Button size="small" icon={<EditOutlined />} type="text" onClick={() => {
setUpsertId(ele.id);
}}/>}>
<Detail key={idx} column={1} bordered entity="wechatMpShip" attributes={[
"disabled",
"sort",
]} data={ele}/>
</Card>))}
{applications.length > ships.length && <Card style={{
width: 245.67,
height: 269.41,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Button icon={<PlusOutlined style={{ fontSize: 32, color: 'var(--oak-color-primary)' }}/>} type="text" style={{ width: 80, height: 80 }} onClick={async () => {
const id = await generateNewIdAsync();
addItem({
id,
});
setUpsertId(id);
}}/>
</Card>}
</Space>
{U}
</div>);
}
if (applications?.length) {
return (<>
<div className={Styles.container}>
<Button icon={<PlusOutlined style={{ fontSize: 72, color: 'var(--oak-color-primary)' }}/>} type="text" style={{ width: 80, height: 80 }} onClick={async () => {
const id = await generateNewIdAsync();
addItem({
id,
});
setUpsertId(id);
}}/>
</div>
{U}
</>);
}
return (<div className={Styles.container}>
<Alert type="info" message={t('warning.noApplication')}/>
</div>);
}