53 lines
3.0 KiB
JavaScript
53 lines
3.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Space, Breadcrumb, Modal, Form, Input } from 'antd';
|
|
import Styles from './web.pc.module.less';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import MenuList from '../list';
|
|
import ArticleList from '../../article/list';
|
|
export default function Render(props) {
|
|
const { data, methods } = props;
|
|
const { oakFullpath, oakLoading, oakExecuting, entity, entityId, title, breadcrumbItems, origin = 'qiniu', menuEmpty, articleEmpty, parentId, articleMenuId, showAddArticle, showAddMenu, generateUrl, } = data;
|
|
const { t, onBreadcrumItemClick, onMenuClick, onAddMenu, changeAddArticle, onAddArticle, menuCheck } = methods;
|
|
const [addMenuOpen, setAddMenuOpen] = useState(false);
|
|
const [menuName, setMenuName] = useState('');
|
|
const itemRender = (currentRoute) => {
|
|
return <div onClick={() => {
|
|
onBreadcrumItemClick(currentRoute.id);
|
|
}} className={Styles.title}>{currentRoute.title}</div>;
|
|
};
|
|
return (<div className={Styles.container}>
|
|
<div className={Styles.header}>
|
|
<Breadcrumb items={breadcrumbItems} itemRender={itemRender} separator=">"/>
|
|
<Space>
|
|
{(!!showAddArticle && !(parentId === '' && articleMenuId === '')) && (<Button key="article" type="primary" icon={<PlusOutlined />} onClick={() => onAddArticle()}>{t('addArticle')}</Button>)}
|
|
{!!showAddMenu && (<Button key="menu" type="primary" icon={<PlusOutlined />} onClick={() => setAddMenuOpen(true)}>{t('addMenu')}</Button>)}
|
|
</Space>
|
|
</div>
|
|
{articleMenuId === '' ?
|
|
<MenuList oakPath={`${oakFullpath}.articleMenus`} entity={entity} entityId={entityId} origin={origin} parentId={parentId} onMenuClick={onMenuClick} empty={menuEmpty} changeAddArticle={changeAddArticle} generateUrl={generateUrl}/>
|
|
:
|
|
<ArticleList oakPath={`${oakFullpath}.articles`} articleMenuId={articleMenuId} generateUrl={generateUrl} empty={articleEmpty} entityId={entityId} menuCheck={menuCheck}/>}
|
|
{addMenuOpen && <Modal title={t('addMenu')} closable open={addMenuOpen} okText={t('common::action.confirm')} cancelText={t('common::action.cancel')} onOk={async () => {
|
|
const r = await onAddMenu(menuName);
|
|
if (r) {
|
|
setMenuName('');
|
|
setAddMenuOpen(false);
|
|
}
|
|
}} okButtonProps={{
|
|
disabled: menuName === '' || oakLoading || oakExecuting
|
|
}} onCancel={() => {
|
|
setMenuName('');
|
|
setAddMenuOpen(false);
|
|
}}>
|
|
<Form>
|
|
<Form.Item label={t('menuName')} required>
|
|
<Input value={menuName} onChange={(e) => {
|
|
setMenuName(e.target.value.trim());
|
|
}} maxLength={20} showCount autoFocus/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>}
|
|
|
|
</div>);
|
|
}
|