123 lines
4.9 KiB
JavaScript
123 lines
4.9 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Table, Button, ConfigProvider, Tooltip, Space } from 'antd';
|
|
import Styles from './web.pc.module.less';
|
|
import { CopyOutlined, DeleteOutlined, EditOutlined, ExclamationCircleFilled, EyeOutlined } from '@ant-design/icons';
|
|
import { generateNewId } from 'oak-domain/lib/utils/uuid';
|
|
import Pagination from 'oak-frontend-base/es/components/pagination';
|
|
const { confirm } = Modal;
|
|
export default function Render(props) {
|
|
const { data, methods } = props;
|
|
const { articles, oakFullpath, oakEntity, oakLoading, empty, } = data;
|
|
const { t, goDetail, onCopy, onEditor, afterDelete } = props.methods;
|
|
const IconButton = (props) => {
|
|
const { icon, onClick, disabled, tooltip, style, linkHoverBg = 'var(--oak-bg-color-container-hover)' } = props;
|
|
const Btn = (<Button disabled={disabled} type="link" icon={icon} onClick={onClick} style={style}></Button>);
|
|
return (<ConfigProvider theme={{
|
|
components: {
|
|
Button: {
|
|
fontWeight: 600,
|
|
contentFontSize: 13,
|
|
borderRadius: 4,
|
|
controlHeight: 28,
|
|
linkHoverBg,
|
|
},
|
|
},
|
|
}}>
|
|
{tooltip ? <Tooltip title={tooltip}>{Btn}</Tooltip> : Btn}
|
|
</ConfigProvider>);
|
|
};
|
|
const articleAttr = [
|
|
{
|
|
title: t('name'),
|
|
key: 'name',
|
|
dataIndex: 'name',
|
|
ellipsis: true,
|
|
width: 600,
|
|
render: (_, record) => {
|
|
return (<div className={Styles.name} onClick={() => {
|
|
onEditor(record.id);
|
|
}}>{record.name}</div>);
|
|
}
|
|
},
|
|
{
|
|
title: t('updateAt'),
|
|
key: 'updateAt',
|
|
dataIndex: 'updateAtStr',
|
|
// width: 180,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: t('common::operate'),
|
|
key: 'operate',
|
|
fixed: 'right',
|
|
render: (_, record) => {
|
|
return (<Space size={[8, 0]}>
|
|
<IconButton style={{ marginTop: 4 }} tooltip={t('editor')} icon={<EditOutlined />} onClick={() => {
|
|
onEditor(record.id);
|
|
}}></IconButton>
|
|
<IconButton style={{ marginTop: 4 }} tooltip={t('preview')} icon={<EyeOutlined />} onClick={() => {
|
|
goDetail(record.id);
|
|
}}></IconButton>
|
|
<IconButton style={{ marginTop: 4 }} tooltip={t('copy')} icon={<CopyOutlined />} onClick={(e) => {
|
|
e.stopPropagation();
|
|
onCopy(record.id);
|
|
}}></IconButton>
|
|
|
|
<IconButton tooltip={t('delete')} icon={<DeleteOutlined />} onClick={() => { showRemoveConfirm(record.id, record.name); }}></IconButton>
|
|
</Space>);
|
|
},
|
|
}
|
|
];
|
|
const showRemoveConfirm = (articleId, articleName) => {
|
|
confirm({
|
|
title: t('removeConfirm.title', { name: articleName }),
|
|
icon: <ExclamationCircleFilled />,
|
|
content: <div style={{ color: 'var(--oak-color-error)' }}>{t('removeConfirm.content')}</div>,
|
|
async onOk() {
|
|
try {
|
|
await methods.execute(undefined, {
|
|
type: 'success',
|
|
content: t('success.remove')
|
|
}, undefined, [
|
|
{
|
|
entity: 'article',
|
|
operation: {
|
|
id: generateNewId(),
|
|
action: 'remove',
|
|
data: {},
|
|
filter: {
|
|
id: articleId,
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
afterDelete();
|
|
}
|
|
catch (err) {
|
|
methods.setMessage({
|
|
type: 'error',
|
|
content: t('fail.remove') + err?.message
|
|
});
|
|
}
|
|
},
|
|
okButtonProps: {
|
|
danger: true,
|
|
},
|
|
okText: t('common::action.confirm'),
|
|
cancelText: t('common::action.cancel')
|
|
});
|
|
};
|
|
return (<>
|
|
<Table rowKey="id" dataSource={articles} loading={oakLoading} columns={articleAttr} locale={{
|
|
emptyText: empty,
|
|
}} pagination={false}/>
|
|
<div style={{
|
|
display: "flex",
|
|
flexDirection: "row-reverse",
|
|
alignItems: "center",
|
|
}}>
|
|
<Pagination oakPath={oakFullpath} entity={oakEntity} oakAutoUnmount={true} showQuickJumper={true}/>
|
|
</div>
|
|
</>);
|
|
}
|