Notice Module Update

web-react/src/views/main/_layout/header/index.jsx

@@ -1,16 +1,23 @@
-import React, { Component } from 'react'
-import { Layout, Badge } from 'antd'
+import React, { Component, useState } from 'react'
+import { Layout, Badge, Popover, Menu, Modal } from 'antd'
 import { AntIcon, Container } from 'components'
 import Logo from '../logo'
 import User from './user'
 import Search from './search'
 import store from 'store'
+import { api } from 'common/api'
 
 const { getState, subscribe, dispatch } = store
 
 export default class index extends Component {
     state = {
         ...getState('layout'),
+        notice: {
+            count: 0,
+            data: [],
+        },
+        modalVisible: false,
+        currentNotice: {},
     }
 
     constructor(props) {
@@ -21,6 +28,10 @@ export default class index extends Component {
         })
     }
 
+    componentDidMount() {
+        this.loadNotice()
+    }
+
     componentWillUnmount() {
         this.unsubscribe()
     }
@@ -32,9 +43,27 @@ export default class index extends Component {
         })
     }
 
-    render() {
-        const { allowSiderCollapsed } = this.state
+    async loadNotice() {
+        const { data } = await api.sysNoticeGetCount()
+        const items = await api.sysNoticeInfo()
+        this.setState({
+            notice: {
+                count: data,
+                data: items.data,
+            },
+        })
+    }
+    async showDetail(params, visible) {
+        this.setState({ currentNotice: params })
 
+        if (visible) {
+            this.setState({ modalVisible: visible })
+        } else {
+            this.setState({ modalVisible: visible })
+        }
+    }
+    render() {
+        const { allowSiderCollapsed, notice, currentNotice } = this.state
         return (
             <Layout.Header>
                 <Container mode="fluid">
@@ -57,11 +86,51 @@ export default class index extends Component {
                         >
                             <AntIcon type="reload" />
                         </span>
-                        <span className="header-action">
-                            <Badge count="5">
-                                <AntIcon type="bell" />
-                            </Badge>
-                        </span>
+                        <Popover
+                            arrowPointAtCenter={true}
+                            overlayClassName="yo-user-popover"
+                            placement="bottomRight"
+                            content={
+                                <Menu selectable={false}>
+                                    <Menu.Divider />
+                                    {notice.data.map(item => (
+                                        <Menu.Item
+                                            onClick={() => this.showDetail(item, true)}
+                                            key={item.id}
+                                        >
+                                            {item.title}
+                                        </Menu.Item>
+                                    ))}
+                                </Menu>
+                            }
+                        >
+                            <span className="header-action">
+                                <Badge count={notice.count}>
+                                    <AntIcon type="bell" />
+                                </Badge>
+                            </span>
+
+                            <Modal
+                                title={currentNotice.title}
+                                width={1000}
+                                style={{ top: 120 }}
+                                visible={this.state.modalVisible}
+                                onOk={() => this.showDetail(false)}
+                                onCancel={() => this.showDetail(false)}
+                                style={{ zIndex: 1000 }}
+                            >
+                                <div style={{ textAlign: 'center', fontSize: '30px' }}>
+                                    <div
+                                        dangerouslySetInnerHTML={{ __html: currentNotice.content }}
+                                    ></div>
+                                </div>
+                                <div style={{ textAlign: 'right', fontSize: '10px' }}>
+                                    <span>发布人：{currentNotice.createdUserName}</span>
+                                    {'  '}
+                                    <span>发布时间：{currentNotice.createdTime} </span>
+                                </div>
+                            </Modal>
+                        </Popover>
                         <User />
                     </div>
                 </Container>