98 lines
2.2 KiB
TypeScript
98 lines
2.2 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import Table, { ProColumns, ActionType } from '@/components/Table';
|
|
import { Image } from 'antd';
|
|
import DeleteButton from '@/components/Table/DeleteButton';
|
|
import { history, Link } from 'umi';
|
|
import RoutePath from '@/routes/routePath';
|
|
import { queryWorkList, deleteWork } from '@/services/work';
|
|
import { fetchTableData } from '@/utils/table';
|
|
import TimeText from '@/components/Typography/TimeText';
|
|
|
|
const WorkList = () => {
|
|
const tableRef = useRef<ActionType>();
|
|
const handleDelete = async (id) => {
|
|
await deleteWork({ id });
|
|
tableRef.current?.reload();
|
|
};
|
|
const columns: ProColumns<any>[] = [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
width: '10%',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '封面',
|
|
dataIndex: 'url',
|
|
valueType: 'image',
|
|
hideInSearch: true,
|
|
width: '20%',
|
|
render: (_, row) => {
|
|
return <Image src={row.cover_resource?.url} height={100} alt="" />;
|
|
},
|
|
},
|
|
|
|
{
|
|
title: '标题',
|
|
dataIndex: 'title',
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: '系列',
|
|
dataIndex: 'series',
|
|
width: '10%',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '等级',
|
|
dataIndex: 'rarity_name',
|
|
width: '10%',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'created_at',
|
|
valueType: 'dateRange',
|
|
width: '20%',
|
|
hideInSearch: true,
|
|
render: (_, row) => {
|
|
return <TimeText value={row.created_at} />;
|
|
},
|
|
},
|
|
{
|
|
title: '操作',
|
|
valueType: 'option',
|
|
width: 150,
|
|
render: (_, row) => [
|
|
<Link to={`${RoutePath.WORK.EDIT}?id=${row.id}`}>详情</Link>,
|
|
<DeleteButton
|
|
onDelete={() => {
|
|
handleDelete(row.id);
|
|
}}
|
|
/>,
|
|
],
|
|
},
|
|
];
|
|
return (
|
|
<Table
|
|
columns={columns}
|
|
// indexColumn
|
|
rowKey="id"
|
|
actionRef={tableRef}
|
|
toolBarActions={[
|
|
{
|
|
type: 'add',
|
|
onConfirm: () => {
|
|
history.push(RoutePath.WORK.EDIT);
|
|
},
|
|
},
|
|
]}
|
|
request={async (params) => {
|
|
return fetchTableData(queryWorkList, params);
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default WorkList;
|