业务要求:三个表格,只有最后一列的操作按钮不同。
1. NewsPublish.js
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Button, Tag, Table, notification } from "antd";
export default function AuditList(props) {
const handlePublish = (id) => {
axios
.patch(`/news/${id}`, { publishState: 2, publishTime: Date.now() })
.then((res) => {
props.history.push(`/publish-manage/published`);
notification.info({
message: `通知`,
description: `你可以到[发布管理-已发布]中查看您的新闻`,
placement: "bottomRight",
});
});
};
const columns = [
{
title: "新闻标题",
dataIndex: "title",
render: (title, item) => {
return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>;
},
},
{
title: "作者",
dataIndex: "author",
render: (author) => {
return <span>{author}</span>;
},
},
{
title: "新闻分类",
dataIndex: "category",
render: (category) => {
return <span>{category?.value}</span>;
},
},
{
title: "操作",
render: (item) => {
return <div>{props.button(item.id)}</div>;
},
},
];
return (
<div>
<Table
columns={columns}
dataSource={props.dataSource}
pagination={{ pageSize: 5 }}
rowKey={(item) => item.id}
></Table>
</div>
);
}
2. usePublish.js
import { useState, useEffect } from "react";
import axios from "axios";
import { notification } from "antd";
export default function usePublish(type) {
const { username } = JSON.parse(localStorage.getItem("token"));
const [dataSource, setDataSource] = useState([]);
useEffect(() => {
axios
.get(`/news?username=${username}&publishState=${type}&_expand=category`)
.then((res) => {
setDataSource(res.data);
});
}, [username, type]);
const handlePublish = (id) => {
setDataSource(dataSource.filter((data) => data.id !== id));
axios
.patch(`/news/${id}`, { publishState: 2, publishTime: Date.now() })
.then((res) => {
notification.info({
message: "通知",
description: `您可以到【发布管理-已发布】查看您的新闻`,
placement: "bottomRight",
});
});
};
const handleSunset = (id) => {
setDataSource(dataSource.filter((data) => data.id !== id));
axios.patch(`/news/${id}`, { publishState: 3 }).then((res) => {
notification.warn({
message: "通知",
description: `您可以到【发布管理-已下线】查看您的新闻`,
placement: "bottomRight",
});
});
};
const handleDelete = (id) => {
setDataSource(dataSource.filter((data) => data.id !== id));
axios.delete(`/news/${id}`).then((res) => {
notification.warn({
message: "通知",
description: `您已删除已下线的新闻`,
placement: "bottomRight",
});
});
};
return {
dataSource,
handlePublish,
handleSunset,
handleDelete,
};
}
3. 应用页面
import NewsPublish from "../../../components/publish-manage/NewsPublish";
import usePublish from "../../../components/publish-manage/usePublish";
import { Button } from "antd";
/**
* 已发布
*/
export default function Published() {
const { dataSource, handleSunset } = usePublish(2);
return (
<div>
<NewsPublish
dataSource={dataSource}
button={(id) => (
<Button type="primary" danger onClick={() => handleSunset(id)}>
下线
</Button>
)}
></NewsPublish>
</div>
);
}