index.tsx 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. import React, { useState, useEffect } from 'react';
  2. import { PageContainer } from '@ant-design/pro-layout';
  3. import {
  4. Button,
  5. Card,
  6. Row,
  7. Col,
  8. Input,
  9. Table,
  10. Tooltip,
  11. Space,
  12. Popconfirm,
  13. message,
  14. Divider,
  15. } from 'antd';
  16. import { getNotice, deleteNotice } from '@/services/notice';
  17. import NoticeModal from './modal';
  18. import DetailModal from './detailModal';
  19. import { filterTimestamp } from '@/filters/index';
  20. import { connect, Dispatch } from 'umi';
  21. import type { ConnectState } from '@/models/connect';
  22. import type { Role } from '@/models/user';
  23. interface IProps {
  24. dispatch: Dispatch;
  25. roleList: Role[];
  26. }
  27. const Notice: React.FC<IProps> = ({ dispatch, roleList }) => {
  28. const [label, setLabel] = useState('');
  29. const [curPage, setCurpage] = useState(1);
  30. const [total, setTotal] = useState(0);
  31. const [noticeList, setNoticeList] = useState([]);
  32. const [loading, setLoading] = useState(false);
  33. const [type, setType] = useState(0);
  34. const [visible, setVisible] = useState(false);
  35. const [curNoticeData, setCurNoticeData] = useState({});
  36. const [DetailModalVisible, setDetailModalVisible] = useState(false);
  37. const [id, setId] = useState('');
  38. // 获取公告列表
  39. const GetNotice = async (): Promise<void> => {
  40. const $par = {
  41. curPage,
  42. label,
  43. type: 'ANN',
  44. };
  45. setLoading(true);
  46. const { code, data } = await getNotice($par);
  47. setLoading(false);
  48. if (code === 0) {
  49. console.log(data);
  50. const { records, total: Total } = data;
  51. setTotal(Total);
  52. setNoticeList(records);
  53. }
  54. };
  55. useEffect(() => {
  56. GetNotice();
  57. }, [label, curPage]);
  58. // 打开弹窗
  59. const openModal = (value: number, record: Record<string, any>) => {
  60. console.log(record, '打开弹窗 ');
  61. setType(value);
  62. setVisible(true);
  63. setCurNoticeData(record);
  64. };
  65. // 删除公告
  66. const DeleteNotice = async (value: string): Promise<void> => {
  67. const { code, data } = await deleteNotice(value);
  68. if (code === 0) {
  69. console.log(data);
  70. message.success('删除成功');
  71. }
  72. GetNotice();
  73. };
  74. // 关闭弹窗
  75. const closeModal = (): void => setVisible(false);
  76. // 搜索
  77. const onSearch = (value: string): void => setLabel(value);
  78. // 分页
  79. const changePagination = (page: number): void => setCurpage(page);
  80. return (
  81. <PageContainer title="公告管理">
  82. <Card>
  83. <Row justify="space-between">
  84. <Col>
  85. <Input.Search
  86. style={{ width: 250 }}
  87. placeholder="请输入搜索公告名称/内容"
  88. onSearch={onSearch}
  89. enterButton
  90. />
  91. </Col>
  92. <Col>
  93. <Button onClick={() => openModal(0, {})}>发布公告</Button>
  94. </Col>
  95. </Row>
  96. <Table
  97. loading={loading}
  98. dataSource={noticeList}
  99. style={{ marginTop: 20 }}
  100. pagination={{ total, onChange: changePagination }}
  101. >
  102. <Table.Column
  103. title="公告标题"
  104. ellipsis
  105. width={300}
  106. key="label"
  107. dataIndex="label"
  108. render={(text, record: Record<string, any>) => (
  109. <Tooltip title={record.label} placement="topLeft">
  110. <span>{record.label}</span>
  111. </Tooltip>
  112. )}
  113. ></Table.Column>
  114. <Table.Column
  115. title="公告内容"
  116. ellipsis
  117. width={300}
  118. key="content"
  119. dataIndex="content"
  120. render={(text, record: Record<string, any>) => (
  121. <a
  122. onClick={() => {
  123. setDetailModalVisible(true);
  124. setId(record.id);
  125. }}
  126. >
  127. {' '}
  128. 查看公告内容{' '}
  129. </a>
  130. )}
  131. />
  132. <Table.Column
  133. title="发布人"
  134. key="1"
  135. dataIndex="1"
  136. render={() => <span>管理员</span>}
  137. ></Table.Column>
  138. <Table.Column
  139. title="发布时间"
  140. key="createTime"
  141. dataIndex="createTime"
  142. render={(text) => <span>{filterTimestamp(text)}</span>}
  143. ></Table.Column>
  144. <Table.Column
  145. title="操作"
  146. key="action"
  147. dataIndex="action"
  148. render={(text, record: Record<string, any>) => (
  149. <Space>
  150. <a
  151. onClick={() => {
  152. setDetailModalVisible(true);
  153. setId(record.id);
  154. }}
  155. >
  156. 查看
  157. </a>
  158. <Divider type="vertical" />
  159. <a onClick={() => openModal(1, record as Record<string, any>)}>编辑</a>
  160. <Divider type="vertical" />
  161. <Popconfirm
  162. title="你确定要删除这条公告吗?"
  163. onConfirm={() => DeleteNotice(record.id)}
  164. okText="Yes"
  165. cancelText="No"
  166. >
  167. <a>删除</a>
  168. </Popconfirm>
  169. </Space>
  170. )}
  171. ></Table.Column>
  172. </Table>
  173. </Card>
  174. {visible && (
  175. <NoticeModal
  176. GetNotice={GetNotice}
  177. curNoticeData={curNoticeData}
  178. closeModal={closeModal}
  179. visible={visible}
  180. type={type}
  181. roleList={roleList}
  182. dispatch={dispatch}
  183. />
  184. )}
  185. {/* 详情弹窗 */}
  186. {DetailModalVisible && (
  187. <DetailModal
  188. DetailModalVisible={DetailModalVisible}
  189. id={id}
  190. closeModal={() => setDetailModalVisible(false)}
  191. />
  192. )}
  193. </PageContainer>
  194. );
  195. };
  196. export default connect(({ user }: ConnectState) => ({
  197. roleList: user.roleList,
  198. }))(Notice);