102 lines
5.1 KiB
JavaScript
102 lines
5.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Modal, Alert, List, Switch } from 'antd';
|
|
import { PlusCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
|
import Styles from './web.pc.module.less';
|
|
import Upsert from '../upsert';
|
|
import { OakAttrNotNullException, OakException } from 'oak-domain/lib/types';
|
|
import { generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
|
|
export default function render(props) {
|
|
const { apAccountId, apProducts, oakFullpath, oakExecutable, canCreate, systemId } = props.data;
|
|
const { t, addItem, execute, clean } = props.methods;
|
|
const getNotNullMessage = (entity, attr) => {
|
|
// @oak-ignore
|
|
return t('notnull', { value: t(`${entity}:attr.${attr}`) });
|
|
};
|
|
const errMsg = oakExecutable instanceof OakException && (
|
|
// @oak-ignore
|
|
oakExecutable instanceof OakAttrNotNullException ? getNotNullMessage(oakExecutable.getEntity(), oakExecutable.getAttributes()[0]) : t(oakExecutable.message));
|
|
const [upsertId, setUpsertId] = useState('');
|
|
const U = (<Modal width={920} destroyOnClose title={`${t('apProduct:name')}${t('common::action.update')}`} open={!!upsertId} onCancel={() => {
|
|
clean();
|
|
setUpsertId('');
|
|
}} closeIcon={null} onOk={async () => {
|
|
await execute();
|
|
setUpsertId('');
|
|
}} okButtonProps={{
|
|
disabled: oakExecutable !== true,
|
|
}} okText={t('common::confirm')} cancelText={(t('common::action.cancel'))}>
|
|
<div style={{ padding: 10 }}>
|
|
{errMsg && <Alert type="error" message={errMsg} style={{ marginBottom: 20 }}/>}
|
|
<Upsert oakPath={`${oakFullpath}.${upsertId}`} systemId={systemId} apAccountId={apAccountId}/>
|
|
</div>
|
|
</Modal>);
|
|
if (apProducts && apProducts.length) {
|
|
return (<div className={Styles.container}>
|
|
<div className={Styles.btnBar}>
|
|
<div className={Styles.tips}>
|
|
{t('tips')}
|
|
</div>
|
|
<Button type="primary" onClick={() => {
|
|
const id = addItem({});
|
|
setUpsertId(id);
|
|
}}>
|
|
{t('common::action.create')}
|
|
</Button>
|
|
</div>
|
|
{U}
|
|
<List style={{ height: 380, overflowY: 'auto' }} dataSource={apProducts} renderItem={(product) => (<List.Item actions={product['#oakLegalActions'].includes('remove') ? [
|
|
<Button danger onClick={() => {
|
|
Modal.confirm({
|
|
title: t('confirmDelete'),
|
|
content: t('areYouSure'),
|
|
onOk: async () => execute(undefined, undefined, undefined, [
|
|
{
|
|
entity: 'apProduct',
|
|
operation: {
|
|
id: await generateNewIdAsync(),
|
|
action: 'remove',
|
|
data: {},
|
|
filter: {
|
|
id: product.id,
|
|
},
|
|
}
|
|
}
|
|
]),
|
|
});
|
|
}}>
|
|
{t('common::action.remove')}
|
|
</Button>
|
|
] : []}>
|
|
<List.Item.Meta avatar={product.enabled ? <CheckOutlined style={{ fontSize: 32 }}/> : <CloseOutlined style={{ fontSize: 32 }}/>} title={<span>{t(`apProduct:v.type.${product.type}`)}</span>} description={<span>{product.application?.name}</span>}/>
|
|
<Switch value={product.enabled} disabled={!product['#oakLegalActions']?.includes('update')} onChange={async (enabled) => {
|
|
await execute(undefined, undefined, undefined, [
|
|
{
|
|
entity: 'apProduct',
|
|
operation: {
|
|
id: await generateNewIdAsync(),
|
|
action: 'update',
|
|
data: {
|
|
enabled,
|
|
},
|
|
filter: {
|
|
id: product.id,
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
}}/>
|
|
</List.Item>)}/>
|
|
</div>);
|
|
}
|
|
return (<div className={Styles.container2}>
|
|
<Alert type='info' message={t('tips')}/>
|
|
{U}
|
|
<div className={Styles.body}>
|
|
{canCreate ? <PlusCircleOutlined className={Styles.add} shape="circle" style={{ fontSize: 50 }} onClick={() => {
|
|
const id = addItem({});
|
|
setUpsertId(id);
|
|
}}/> : t('noData')}
|
|
</div>
|
|
</div>);
|
|
}
|