唐简：完成通知通告模块
This commit is contained in:
Jim__TT
23
src/api/system/notice.ts
Normal file
23
src/api/system/notice.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import request from "../../utils/request";
|
||||
|
||||
export const getNoticeListApi = (params: any) => {
|
||||
return request({
|
||||
url: "/notice/notify",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const getNoticeInfoApi = (id: number) => {
|
||||
return request({
|
||||
url: "/notice/notify/" + id,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const deleteNoticeInfoApi = (id: number) => {
|
||||
return request({
|
||||
url: "/notice/notify/" + id,
|
||||
method: "delete",
|
||||
});
|
||||
};
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Dept() {
|
||||
return(
|
||||
<div>dept</div>
|
||||
)
|
||||
}
|
||||
return <div>dept</div>;
|
||||
}
|
||||
|
||||
60
src/view/system/notice/inform/index.scss
Normal file
60
src/view/system/notice/inform/index.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
#content {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
.dept-content {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
}
|
||||
|
||||
.left-dept {
|
||||
flex: 20%;
|
||||
padding: 35px 12px 0 0;
|
||||
height: calc(100vh - 85px);
|
||||
border: 1px solid red;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.right {
|
||||
flex: 80%;
|
||||
height: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.search-content {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
justify-content: space-around;
|
||||
padding: 35px 12px 0 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.add-content {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.user-mid-button {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
margin-top: 20px;
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
242
src/view/system/notice/inform/index.tsx
Normal file
242
src/view/system/notice/inform/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import "./index.scss";
|
||||
import { Select, Button, Table, Space, Tag, message, Modal } from "antd";
|
||||
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
ExclamationCircleFilled,
|
||||
} from "@ant-design/icons";
|
||||
|
||||
import {
|
||||
getNoticeListApi,
|
||||
deleteNoticeInfoApi,
|
||||
} from "../../../../api/system/notice";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
|
||||
|
||||
export default function Inform() {
|
||||
const [noticeInfo, setNoticeInfo] = useState<string>("");
|
||||
const [isNoticeOpen, setIsNoticeOpen] = useState<boolean>(false);
|
||||
const [listData, setListData] = useState([]);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [queryParams, setQueryParams] = useState<QueryParamsType>({
|
||||
state: undefined,
|
||||
pageSize: undefined,
|
||||
pageNum: undefined,
|
||||
});
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "noticeId",
|
||||
key: "noticeId",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "公告标题",
|
||||
dataIndex: "noticeTitle",
|
||||
key: "noticeTitle",
|
||||
render: (text: string) => <>{text ? text : "null"}</>,
|
||||
},
|
||||
{
|
||||
title: "阅读状态",
|
||||
key: "state",
|
||||
dataIndex: "state",
|
||||
render: (text: string) => (
|
||||
<>
|
||||
{text === "1" ? (
|
||||
<Tag color="warning">已读</Tag>
|
||||
) : (
|
||||
<Tag color="error">未读</Tag>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operate",
|
||||
dataIndex: "operate",
|
||||
render: (_: string, record: object) => (
|
||||
<div style={{ color: "#58aaff" }}>
|
||||
<Space>
|
||||
<EditOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleInfo(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
详情
|
||||
</a>
|
||||
<DeleteOutlined />
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => handleDel(record)}
|
||||
style={{ color: " #58aaff" }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
interface QueryParamsType {
|
||||
state?: string;
|
||||
pageSize?: number;
|
||||
pageNum?: number;
|
||||
}
|
||||
|
||||
const getList = async (newQueryParams: object) => {
|
||||
try {
|
||||
const { code, data } = await getNoticeListApi(newQueryParams);
|
||||
if (code === 1000) {
|
||||
setListData(data.rows);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = async () => {
|
||||
setQueryParams({});
|
||||
getList({});
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
getList(queryParams);
|
||||
};
|
||||
|
||||
const handleInfo = (record: any) => {
|
||||
setIsNoticeOpen(true);
|
||||
setNoticeInfo(record.noticeTitle);
|
||||
};
|
||||
|
||||
const handleInfoOk = () => {
|
||||
setIsNoticeOpen(false);
|
||||
};
|
||||
|
||||
const handleInfoCancel = () => {
|
||||
setIsNoticeOpen(false);
|
||||
};
|
||||
|
||||
const handleDel = async (record: any) => {
|
||||
Modal.confirm({
|
||||
title: `确定删除Id为-${record.noticeId}-, 名称为-${record.noticeTitle}-的岗位吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
async onOk() {
|
||||
const { code } = await deleteNoticeInfoApi(record.noticeId);
|
||||
try {
|
||||
if (code === 1000) {
|
||||
messageApi.open({
|
||||
type: "success",
|
||||
content: "删除成功",
|
||||
});
|
||||
getList({});
|
||||
} else {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: "删除失败",
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
messageApi.open({
|
||||
type: "warning",
|
||||
content: "取消成功",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
pageNum: page,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getList(queryParams);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div id="content">
|
||||
<>
|
||||
<div className="right">
|
||||
<div className="search-content">
|
||||
<>
|
||||
<Space>
|
||||
<div>状态</div>
|
||||
<Select
|
||||
style={{ width: 220 }}
|
||||
placeholder="请选择状态"
|
||||
allowClear
|
||||
options={[
|
||||
{ value: "1", label: "已读" },
|
||||
{ value: "0", label: "未读" },
|
||||
]}
|
||||
value={queryParams.state}
|
||||
onChange={(value: any) =>
|
||||
setQueryParams({
|
||||
...queryParams,
|
||||
state: value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
<Space>
|
||||
<div className="search-button">
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
<SearchOutlined />
|
||||
搜索
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
<Space>
|
||||
<div className="reset-button" onClick={handleReset}>
|
||||
<Button>
|
||||
<RedoOutlined />
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
</>
|
||||
</div>
|
||||
<Modal
|
||||
title="通知弹框"
|
||||
open={isNoticeOpen}
|
||||
onOk={handleInfoOk}
|
||||
onCancel={handleInfoCancel}
|
||||
footer={null}
|
||||
>
|
||||
<h1>{noticeInfo}</h1>
|
||||
</Modal>
|
||||
<div className="table-content">
|
||||
<>
|
||||
{contextHolder}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
className="article-table"
|
||||
pagination={{
|
||||
onChange: handlePageChange,
|
||||
locale: {
|
||||
jump_to: "跳至",
|
||||
page: "页",
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user