122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
import XinTable from '@/components/XinTable';
|
|
import { Badge, Button, Tooltip, Typography } from 'antd';
|
|
import { UnorderedListOutlined } from '@ant-design/icons';
|
|
import type { ICategory } from '@/domain/iCategory';
|
|
import type { XinTableColumn } from '@/components/XinTable/typings';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router';
|
|
import dayjs from 'dayjs';
|
|
|
|
const { Title, Text } = Typography;
|
|
|
|
/** 首页分类管理 */
|
|
export default function CategoryPage() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const columns: XinTableColumn<ICategory>[] = [
|
|
{
|
|
title: t('system.category.id'),
|
|
dataIndex: 'id',
|
|
hideInForm: true,
|
|
width: 80,
|
|
sorter: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: t('system.category.name'),
|
|
dataIndex: 'name',
|
|
valueType: 'text',
|
|
colProps: { span: 12 },
|
|
rules: [{ required: true, message: t('system.category.name.required') }],
|
|
},
|
|
{
|
|
title: t('system.category.status'),
|
|
dataIndex: 'status',
|
|
valueType: 'select',
|
|
filters: [
|
|
{ text: t('system.category.status.normal'), value: 0 },
|
|
{ text: t('system.category.status.disabled'), value: 1 },
|
|
],
|
|
colProps: { span: 12 },
|
|
rules: [{ required: true, message: t('system.category.status.required') }],
|
|
fieldProps: {
|
|
options: [
|
|
{ label: t('system.category.status.normal'), value: 0 },
|
|
{ label: t('system.category.status.disabled'), value: 1 },
|
|
],
|
|
},
|
|
render: (value: number) => {
|
|
return value === 0
|
|
? <Badge status="success" text={t('system.category.status.normal')} />
|
|
: <Badge status="error" text={t('system.category.status.disabled')} />;
|
|
},
|
|
},
|
|
{
|
|
title: t('system.category.sort'),
|
|
dataIndex: 'sort',
|
|
valueType: 'digit',
|
|
colProps: { span: 12 },
|
|
hideInSearch: true,
|
|
initialValue: 0,
|
|
fieldProps: {
|
|
min: 0,
|
|
style: { width: '100%' },
|
|
},
|
|
},
|
|
{
|
|
title: t('system.category.createdAt'),
|
|
dataIndex: 'created_at',
|
|
render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
|
|
hideInForm: true,
|
|
hideInSearch: true,
|
|
width: 160,
|
|
},
|
|
];
|
|
|
|
// 跳转到分类项管理页面
|
|
const handleGoToItems = (record: ICategory) => {
|
|
navigate(`/system/category/item?categoryId=${record.id}&categoryName=${encodeURIComponent(record.name || '')}`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-5">
|
|
<Title level={3}>{t('system.category.page.title')}</Title>
|
|
<Text type="secondary">{t('system.category.page.description')}</Text>
|
|
</div>
|
|
<XinTable<ICategory>
|
|
api="/system/category"
|
|
columns={columns}
|
|
rowKey="id"
|
|
accessName="system.category"
|
|
formProps={{
|
|
grid: true,
|
|
colProps: { span: 12 },
|
|
rowProps: { gutter: [30, 0] },
|
|
layout: 'vertical',
|
|
}}
|
|
modalProps={{ width: 600 }}
|
|
searchProps={false}
|
|
operateProps={{
|
|
fixed: 'right',
|
|
width: 180,
|
|
}}
|
|
scroll={{ x: 1000 }}
|
|
operateRender={(record, dom) => [
|
|
<Tooltip title={t('system.category.manageItems')} key="items">
|
|
<Button
|
|
type="default"
|
|
icon={<UnorderedListOutlined />}
|
|
size="small"
|
|
onClick={() => handleGoToItems(record)}
|
|
/>
|
|
</Tooltip>,
|
|
dom.edit,
|
|
dom.del,
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|