80 lines
3.7 KiB
JavaScript
80 lines
3.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Modal, Alert } from 'antd';
|
|
import { PlusCircleOutlined } 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';
|
|
function WpProduct(props) {
|
|
return null;
|
|
}
|
|
export default function render(props) {
|
|
const { wpAccountId, wpProducts, oakFullpath, oakExecutable, canCreate, systemId } = props.data;
|
|
const { t, addItem, execute, clean } = props.methods;
|
|
const getNotNullMessage = (entity, attr) => {
|
|
return t('notnull', { value: t(`${entity}:attr.${attr}`) });
|
|
};
|
|
const errMsg = oakExecutable instanceof OakException && (oakExecutable instanceof OakAttrNotNullException ? getNotNullMessage(oakExecutable.getEntity(), oakExecutable.getAttributes()[0]) : t(oakExecutable.message));
|
|
const [upsertId, setUpsertId] = useState('');
|
|
const U = (<Modal width={420} destroyOnClose title={`${t('wpProduct: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} wpAccountId={wpAccountId}/>
|
|
</div>
|
|
</Modal>);
|
|
if (wpProducts && wpProducts.length) {
|
|
return (<div className={Styles.container}>
|
|
<Alert type='info' message={t('tips')}/>
|
|
{U}
|
|
<div className={Styles.list}>
|
|
{wpProducts.filter(ele => ele.$$createAt$$ > 1).map((ele, idx) => <div className={Styles.item} key={idx}>
|
|
<WpProduct wpProduct={ele} t={t} onRemove={() => {
|
|
Modal.confirm({
|
|
title: t('confirmDelete'),
|
|
content: t('areYouSure'),
|
|
onOk: async () => execute(undefined, undefined, undefined, [
|
|
{
|
|
entity: 'wpProduct',
|
|
operation: {
|
|
id: await generateNewIdAsync(),
|
|
action: 'remove',
|
|
data: {},
|
|
filter: {
|
|
id: ele.id,
|
|
},
|
|
}
|
|
}
|
|
]),
|
|
});
|
|
}} onUpdate={() => setUpsertId(ele.id)}/>
|
|
</div>)}
|
|
</div>
|
|
<div className={Styles.btnBar}>
|
|
{canCreate && <Button type="primary" onClick={() => {
|
|
const id = addItem({});
|
|
setUpsertId(id);
|
|
}}>
|
|
{t('common::action.add')}
|
|
</Button>}
|
|
</div>
|
|
</div>);
|
|
}
|
|
return (<div className={Styles.container2}>
|
|
{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>);
|
|
}
|