Notice Module Update

2021-07-01 19:02:07 +08:00
parent 2e2800e43b
commit a2cf74f383
14 changed files with 756 additions and 37 deletions
--- a/Api/Ewide.Core/Entity/SysNotice.cs
+++ b/Api/Ewide.Core/Entity/SysNotice.cs
@@ -59,13 +59,13 @@ namespace Ewide.Core
        /// 发布时间
        /// </summary>
        [Comment("发布时间")]
-        public DateTime PublicTime { get; set; }
+        public DateTime? PublicTime { get; set; }

        /// <summary>
        /// 撤回时间
        /// </summary>
        [Comment("撤回时间")]
-        public DateTime CancelTime { get; set; }
+        public DateTime? CancelTime { get; set; }

        /// <summary>
        /// 状态（字典 0草稿 1发布 2撤回 3删除）
--- a/Api/Ewide.Core/Entity/SysNoticeUser.cs
+++ b/Api/Ewide.Core/Entity/SysNoticeUser.cs
@@ -11,7 +11,7 @@ namespace Ewide.Core
    /// </summary>
    [Table("sys_notice_user")]
    [Comment("通知公告用户表")]
-    public class SysNoticeUser : IEntity, IEntityTypeBuilder<SysNoticeUser>
+    public class SysNoticeUser : DEntityBase
    {
        /// <summary>
        /// 通知公告Id
@@ -31,7 +31,7 @@ namespace Ewide.Core
        /// 阅读时间
        /// </summary>
        [Comment("阅读时间")]
-        public DateTime ReadTime { get; set; }
+        public DateTime? ReadTime { get; set; }

        /// <summary>
        /// 状态（字典 0未读 1已读）
--- a/Api/Ewide.Core/Service/Notice/Dto/NoticeBase.cs
+++ b/Api/Ewide.Core/Service/Notice/Dto/NoticeBase.cs
@@ -25,7 +25,7 @@ namespace Ewide.Core.Service
        /// <summary>
        /// 发布人Id
        /// </summary>
-        public long PublicUserId { get; set; }
+        public string PublicUserId { get; set; }

        /// <summary>
        /// 发布人姓名
@@ -35,7 +35,7 @@ namespace Ewide.Core.Service
        /// <summary>
        /// 发布机构Id
        /// </summary>
-        public long PublicOrgId { get; set; }
+        public string PublicOrgId { get; set; }

        /// <summary>
        /// 发布机构名称
--- a/Api/Ewide.Core/Service/Notice/Dto/NoticeDetailOutput.cs
+++ b/Api/Ewide.Core/Service/Notice/Dto/NoticeDetailOutput.cs
@@ -39,6 +39,6 @@ namespace Ewide.Core.Service
        /// <summary>
        /// 阅读时间
        /// </summary>
-        public DateTime ReadTime { get; set; }
+        public DateTime? ReadTime { get; set; }
    }
 }
--- a/Api/Ewide.Core/Service/Notice/SysNoticeService.cs
+++ b/Api/Ewide.Core/Service/Notice/SysNoticeService.cs
@@ -61,22 +61,26 @@ namespace Ewide.Core.Service.Notice
        /// <param name="input"></param>
        /// <returns></returns>
        [HttpPost("/sysNotice/add")]
+        [UnitOfWork]
        public async Task AddNotice(AddNoticeInput input)
        {
+            _sysNoticeRep.EnsureTransaction();
            if (input.Status != (int)NoticeStatus.DRAFT && input.Status != (int)NoticeStatus.PUBLIC)
                throw Oops.Oh(ErrorCode.D7000);

            var notice = input.Adapt<SysNotice>();
+            var id = System.Guid.NewGuid().ToString().ToLower();
+            notice.Id = id;
            await UpdatePublicInfo(notice);
            // 如果是发布，则设置发布时间
            if (input.Status == (int)NoticeStatus.PUBLIC)
                notice.PublicTime = DateTime.Now;
-            var newItem = await notice.InsertNowAsync();
+            var newItem = await notice.InsertAsync();

            // 通知到的人
            var noticeUserIdList = input.NoticeUserIdList;
            var noticeUserStatus = (int)NoticeUserStatus.UNREAD;
-            await _sysNoticeUserService.Add(newItem.Entity.Id, noticeUserIdList, noticeUserStatus);
+            await _sysNoticeUserService.Add(id, noticeUserIdList, noticeUserStatus);
        }

        /// <summary>
@@ -161,7 +165,11 @@ namespace Ewide.Core.Service.Notice
                await _sysNoticeUserService.Read(notice.Id, _userManager.UserId, (int)NoticeUserStatus.READ);
            return noticeResult;
        }
-
+        [HttpGet("/sysNotice/detailById")]
+        public async Task<SysNotice> GetNotice(string id)
+        {
+            return await _sysNoticeRep.FirstOrDefaultAsync(u => u.Id == id);
+        }
        /// <summary>
        /// 修改通知公告状态
        /// </summary>
--- a/Api/Ewide.Core/Service/Notice/SysNoticeUserService.cs
+++ b/Api/Ewide.Core/Service/Notice/SysNoticeUserService.cs
@@ -1,9 +1,12 @@
 using Furion.DatabaseAccessor;
 using Furion.DatabaseAccessor.Extensions;
 using Furion.DependencyInjection;
+using Furion.DynamicApiController;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;

 namespace Ewide.Core.Service.Notice
@@ -11,13 +14,17 @@ namespace Ewide.Core.Service.Notice
    /// <summary>
    /// 通知公告用户
    /// </summary>
-    public class SysNoticeUserService : ISysNoticeUserService, ITransient
+    [ApiDescriptionSettings(Name = "NoticeUser", Order = 100)]
+    public class SysNoticeUserService : ISysNoticeUserService, IDynamicApiController, ITransient
    {
        private readonly IRepository<SysNoticeUser> _sysNoticeUserRep;  // 通知公告用户表仓储 
-
-        public SysNoticeUserService(IRepository<SysNoticeUser> sysNoticeUserRep)
+        private readonly IUserManager _userManager;
+        private readonly IRepository<SysNotice> _sysNoticeRep;
+        public SysNoticeUserService(IRepository<SysNoticeUser> sysNoticeUserRep, IUserManager userManager, IRepository<SysNotice> sysNoticeRep)
        {
            _sysNoticeUserRep = sysNoticeUserRep;
+            _userManager = userManager;
+            _sysNoticeRep = sysNoticeRep;
        }

        /// <summary>
@@ -27,20 +34,32 @@ namespace Ewide.Core.Service.Notice
        /// <param name="noticeUserIdList"></param>
        /// <param name="noticeUserStatus"></param>
        /// <returns></returns>
-        public Task Add(string noticeId, List<string> noticeUserIdList, int noticeUserStatus)
+
+        public async Task Add(string noticeId, List<string> noticeUserIdList, int noticeUserStatus)
        {
-            noticeUserIdList.ForEach(u =>
+            foreach (var u in noticeUserIdList)
            {
-                new SysNoticeUser
+                await new SysNoticeUser
                {
+                    Id = Guid.NewGuid().ToString(),
                    NoticeId = noticeId,
                    UserId = u,
                    ReadStatus = noticeUserStatus
                }.InsertAsync();
-            });
-            return Task.CompletedTask;
+            }
        }
+        [HttpGet("/NoticeUser/getCount")]
+        public async Task<int> GetCount()
+        {
+            return await _sysNoticeUserRep.Where(u => u.UserId == _userManager.UserId && u.ReadStatus == (int)NoticeUserStatus.UNREAD).CountAsync();
+        }
+        [HttpGet("/NoticeUser/GetNoticeInfo")]
+        public async Task<List<SysNotice>> GetNoticeInfo()
+        {
+            var noticeIdList = await _sysNoticeUserRep.Where(u => u.UserId == _userManager.UserId && u.ReadStatus == (int)NoticeUserStatus.UNREAD).Select(p => p.NoticeId).ToListAsync();

+            return await _sysNoticeRep.Where(s => noticeIdList.Contains(s.Id)).ToListAsync();
+        }
        /// <summary>
        /// 更新
        /// </summary>
--- a/web-react/package.json
+++ b/web-react/package.json
@@ -9,6 +9,7 @@
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.16.2",
    "axios": "^0.21.1",
+    "braft-editor": "^2.3.9",
    "craco-less": "^1.17.1",
    "crypto-js": "^4.0.0",
    "echarts": "^5.1.2",
--- a/web-react/src/common/api/requests/sys/noticeManage.js
+++ b/web-react/src/common/api/requests/sys/noticeManage.js
@@ -4,37 +4,44 @@ const urls = {
     */
    sysNoticePage: ['/sysNotice/page', 'post'],

-
    /**
     * 添加系统通知公告
     */
    sysNoticeAdd: ['/sysNotice/add', 'post'],

-
    /**
     * 编辑系统通知公告
     */
    sysNoticeEdit: ['/sysNotice/edit', 'post'],

-
    /**
     * 删除系统通知公告
     */
    sysNoticeDelete: ['/sysNotice/delete', 'post'],

-
    /**
     * 通知公告详情
     */
    sysNoticeDetail: ['/sysNotice/detail', 'get'],

-
    /**
     * 修改状态
     */
    sysNoticeChangeStatus: ['/sysNotice/changeStatus', 'post'],

+    /**
+     * 获取Notice总数
+     */
+    sysNoticeGetCount: ['/NoticeUser/getCount', 'get'],

+    /**
+     * 获取Notice详细
+     */
+    sysNoticeInfo: ['/NoticeUser/GetNoticeInfo', 'get'],
+    /**
+     * 获取Notice详细ByID
+     */
+    sysNoticeShow: ['/sysNotice/detailById', 'get'],
 }

-export default urls
+export default urls
--- a/web-react/src/components/form/braft-editor/index.jsx
+++ b/web-react/src/components/form/braft-editor/index.jsx
@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { Col, Input, InputNumber, Row } from 'antd'
+import { AntIcon } from 'components'
+import BraftEditor from 'braft-editor'
+import 'braft-editor/dist/index.css'
+
+export default class index extends Component {
+    state = {
+        editorState: BraftEditor.createEditorState(this.props.value), // 设置编辑器初始内容
+        outputHTML: '<p></p>',
+    }
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        // 3秒后更改编辑器内容
+        setTimeout(this.setEditorContentAsync, 2000)
+    }
+    componentWillUnmount() {
+        this.isLivinig = false
+    }
+    handleChange = editorState => {
+        const outputHTML = editorState.toHTML()
+
+        const { onChange } = this.props
+
+        this.setState({
+            editorState: editorState,
+            outputHTML,
+        })
+
+        onChange && onChange(outputHTML)
+    }
+
+    setEditorContentAsync = () => {
+        const { placeholder, value, onChange } = this.props
+        this.isLivinig &&
+            this.setState({
+                editorState: BraftEditor.createEditorState(value),
+            })
+    }
+    render() {
+        const { editorState, outputHTML } = this.state
+
+        //localStorage.setItem('props', JSON.stringify(this.props))
+        const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'media']
+        return (
+            <BraftEditor
+                value={editorState}
+                controls={controls}
+                onChange={this.handleChange}
+                placeholder={'输入内容'}
+            />
+        )
+    }
+}
--- a/web-react/src/components/index.js
+++ b/web-react/src/components/index.js
@@ -12,4 +12,5 @@ export { default as PhotoPreview } from './photo-preview'
 export { default as QueryList } from './query-list'
 export { default as QueryTable } from './query-table'
 export { default as QueryTableActions } from './query-table-actions'
-export { default as QueryTreeLayout } from './query-tree-layout'
+export { default as QueryTreeLayout } from './query-tree-layout'
+export { default as BraftEditor } from './form/braft-editor'
--- a/web-react/src/pages/system/notice/form.jsx
+++ b/web-react/src/pages/system/notice/form.jsx
@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+import { Form, Spin, Input, Radio, Select } from 'antd'
+import { api } from 'common/api'
+import { AntIcon, BraftEditor } from 'components'
+import getDictData from 'util/dic'
+import { cloneDeep } from 'lodash'
+// import BraftEditor from 'braft-editor'
+// import 'braft-editor/dist/index.css'
+const initialValues = {}
+
+export default class form extends Component {
+    state = {
+        // 加载状态
+        loading: true,
+        options: {
+            userList: [],
+        },
+        codes: {
+            noticeType: [],
+            noticeStatus: [],
+        },
+    }
+
+    // 表单实例
+    form = React.createRef()
+
+    // 初始化数据
+    record = {}
+
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        this.props.created && this.props.created(this)
+        this.isLivinig = true
+        // 3秒后更改编辑器内容
+    }
+
+    /**
+     * 填充数据
+     * 可以在设置this.record之后对其作出数据结构调整
+     * [异步,必要]
+     * @param {*} params
+     */
+    async fillData(params) {
+        //#region 从后端转换成前段所需格式,也可以在此处调用获取详细数据接口
+        if (params.id) {
+            this.record = (await api.sysNoticeDetail({ id: params.id })).data
+        }
+        const {
+            data: { items: userList },
+        } = await this.onLoadUser()
+        const codes = await getDictData('notice_status', 'notice_type')
+        //#endregion
+        this.form.current.setFieldsValue(this.record)
+
+        this.setState({
+            loading: false,
+            options: {
+                userList,
+            },
+            codes,
+        })
+    }
+    async onLoadUser() {
+        const data = await api.getUserPage()
+        return data
+    }
+    /**
+     * 获取数据
+     * 可以对postData进行数据结构调整
+     * [异步,必要]
+     * @returns
+     */
+    async getData() {
+        const form = this.form.current
+
+        const valid = await form.validateFields()
+        if (valid) {
+            const postData = form.getFieldsValue()
+            if (this.record) {
+                postData.id = this.record.id
+            }
+            //#region 从前段转换后端所需格式
+            //#endregion
+            return postData
+        }
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        const { options, codes } = this.state
+
+        return (
+            <Form initialValues={initialValues} ref={this.form} className="yo-form">
+                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <div className="yo-form-group">
+                        <Form.Item
+                            label="标题"
+                            name="title"
+                            rules={[{ required: true, message: '请输入标题', trigger: 'blur' }]}
+                        >
+                            <Input autoComplete="off" placeholder="请输入标题" className="w-300" />
+                        </Form.Item>
+                        <Form.Item
+                            label="类型"
+                            name="type"
+                            rules={[{ required: true, message: '请选择类型' }]}
+                        >
+                            <Radio.Group buttonStyle="solid">
+                                {codes.noticeType.map(item => (
+                                    <Radio.Button key={item.code} value={+item.code}>
+                                        {item.value}
+                                    </Radio.Button>
+                                ))}
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item
+                            label="内容"
+                            name="content"
+                            // rules={[{ required: true, message: '请输入内容' }]}
+                        >
+                            <BraftEditor />
+                        </Form.Item>
+
+                        <Form.Item label="通知到的人" name="noticeUserIdList">
+                            <Select
+                                mode="tags"
+                                placeholder="请选择通知到的人"
+                                tokenSeparators={[',']}
+                            >
+                                {options.userList.map(item => (
+                                    <Select.Option key={item.id} value={item.id}>
+                                        {item.name}
+                                    </Select.Option>
+                                ))}
+                            </Select>
+                        </Form.Item>
+                    </div>
+                </Spin>
+            </Form>
+        )
+    }
+}
--- a/web-react/src/pages/system/notice/index.jsx
+++ b/web-react/src/pages/system/notice/index.jsx
@@ -0,0 +1,277 @@
+import React, { Component } from 'react'
+import { Button, Card, Form, Input, message as Message, Popconfirm, Select } from 'antd'
+import { AntIcon, Auth, Container, ModalForm, QueryTable, QueryTableActions } from 'components'
+import { api } from 'common/api'
+import auth from 'components/authorized/handler'
+import { isEqual } from 'lodash'
+import getDictData from 'util/dic'
+import { toCamelCase } from 'util/format'
+import FormBody from './form'
+
+/**
+ * 注释段[\/**\/]为必须要改
+ */
+
+/**
+ * 配置页面所需接口函数
+ */
+const apiAction = {
+    page: api.sysNoticePage,
+    add: api.sysNoticeAdd,
+    edit: api.sysNoticeEdit,
+    delete: api.sysNoticeDelete,
+    Detail: api.sysNoticeDetail,
+    Status: api.sysNoticeChangeStatus,
+}
+
+/**
+ * 用于弹窗标题
+ * [必要]
+ */
+const name = '啥玩意'
+
+/**
+ * 统一配置权限标识
+ * [必要]
+ */
+const authName = '/**/'
+
+export default class index extends Component {
+    state = {
+        codes: {
+            noticeStatus: [],
+            noticeType: [],
+        },
+    }
+
+    // 表格实例
+    table = React.createRef()
+
+    // 新增窗口实例
+    addForm = React.createRef()
+    // 编辑窗口实例
+    editForm = React.createRef()
+
+    columns = [
+        {
+            title: '标题',
+            dataIndex: 'title',
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+            render: text => this.bindCodeValue(text, 'notice_type'),
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            render: text => this.bindCodeValue(text, 'notice_status'),
+        },
+    ]
+
+    /**
+     * 构造函数,在渲染前动态添加操作字段等
+     * @param {*} props
+     */
+    constructor(props) {
+        super(props)
+
+        const flag = auth({ [authName]: [['edit'], ['delete']] })
+
+        if (flag) {
+            this.columns.push({
+                title: '操作',
+                width: 150,
+                dataIndex: 'actions',
+                render: (text, record) => (
+                    <QueryTableActions>
+                        <Auth auth={{ [authName]: 'edit' }}>
+                            <a onClick={() => this.onOpen(this.editForm, record.id)}>编辑</a>
+                        </Auth>
+                        <Auth auth={{ [authName]: 'delete' }}>
+                            <Popconfirm
+                                placement="topRight"
+                                title="是否确认删除"
+                                onConfirm={() => this.onDelete(record.id)}
+                            >
+                                <a>删除</a>
+                            </Popconfirm>
+                        </Auth>
+                    </QueryTableActions>
+                ),
+            })
+        }
+    }
+
+    /**
+     * 阻止外部组件引发的渲染,提升性能
+     * 可自行添加渲染条件
+     * [必要]
+     * @param {*} props
+     * @param {*} state
+     * @returns
+     */
+    shouldComponentUpdate(props, state) {
+        return !isEqual(this.state, state)
+    }
+
+    /**
+     * 加载字典数据,之后开始加载表格数据
+     * 如果必须要加载字典数据,可直接对表格设置autoLoad=true
+     */
+    componentDidMount() {
+        const { onLoading, onLoadData } = this.table.current
+        onLoading()
+        getDictData('notice_status', 'notice_type').then(codes => {
+            this.setState({ codes }, () => {
+                onLoadData()
+            })
+        })
+    }
+
+    /**
+     * 调用加载数据接口,可在调用前对query进行处理
+     * [异步,必要]
+     * @param {*} params
+     * @param {*} query
+     * @returns
+     */
+    loadData = async (params, query) => {
+        const { data } = await apiAction.page({
+            ...params,
+            ...query,
+        })
+        return data
+    }
+
+    /**
+     * 绑定字典数据
+     * @param {*} code
+     * @param {*} name
+     * @returns
+     */
+    bindCodeValue(code, name) {
+        name = toCamelCase(name)
+        const codes = this.state.codes[name]
+        if (codes) {
+            const c = codes.find(p => p.code == code)
+            if (c) {
+                return c.value
+            }
+        }
+        return null
+    }
+
+    /**
+     * 打开新增/编辑弹窗
+     * @param {*} modal
+     * @param {*} id
+     */
+    onOpen(modal, id) {
+        modal.current.open({
+            id,
+        })
+    }
+
+    /**
+     * 对表格上的操作进行统一处理
+     * [异步]
+     * @param {*} action
+     * @param {*} successMessage
+     */
+    async onAction(action, successMessage) {
+        const { onLoading, onLoaded, onReloadData } = this.table.current
+        onLoading()
+        try {
+            if (action) {
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            onReloadData()
+        } catch {
+            onLoaded()
+        }
+    }
+
+    /**
+     * 删除
+     * @param {*} id
+     */
+    onDelete(id) {
+        this.onAction(apiAction.delete({ id }), '删除成功')
+    }
+
+    //#region 自定义方法
+    //#endregion
+
+    render() {
+        const { codes } = this.state
+        return (
+            <Container mode="fluid">
+                <br />
+                <Card bordered={false}>
+                    <QueryTable
+                        ref={this.table}
+                        autoLoad={false}
+                        loadData={this.loadData}
+                        columns={this.columns}
+                        query={
+                            <Auth auth={{ [authName]: 'page' }}>
+                                <Form.Item label="关键字" name="searchValue">
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入标题、内容"
+                                        className="w-400"
+                                    />
+                                </Form.Item>
+                                <Form.Item label="类型" name="type">
+                                    <Select placeholder="请选择类型" className="w-400" allowClear>
+                                        {codes.noticeType.map(item => (
+                                            <Select.Option key={item.code} value={item.code}>
+                                                {item.value}
+                                            </Select.Option>
+                                        ))}
+                                    </Select>
+                                </Form.Item>
+                            </Auth>
+                        }
+                        operator={
+                            <Auth auth={{ [authName]: 'add' }}>
+                                <Button
+                                    icon={<AntIcon type="plus" />}
+                                    onClick={() => this.onOpen(this.addForm)}
+                                >
+                                    新增{name}
+                                </Button>
+                            </Auth>
+                        }
+                    />
+                </Card>
+
+                <Auth auth={{ [authName]: 'add' }}>
+                    <ModalForm
+                        title={`新增${name}`}
+                        action={apiAction.add}
+                        ref={this.addForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+
+                <Auth auth={{ [authName]: 'edit' }}>
+                    <ModalForm
+                        title={`编辑${name}`}
+                        action={apiAction.edit}
+                        ref={this.editForm}
+                        onSuccess={() => this.table.current.onReloadData()}
+                    >
+                        <FormBody />
+                    </ModalForm>
+                </Auth>
+            </Container>
+        )
+    }
+}
--- a/web-react/src/views/main/_layout/header/index.jsx
+++ b/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>
--- a/web-react/yarn.lock
+++ b/web-react/yarn.lock
@@ -1191,6 +1191,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.0.0":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.14.5"
  resolved "https://registry.nlark.com/@babel/runtime/download/@babel/runtime-7.14.5.tgz?cache=0&sync_timestamp=1623280395479&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.14.5.tgz#665450911c6031af38f81db530f387ec04cd9a98"
@@ -2996,6 +3003,39 @@ braces@^3.0.1, braces@~3.0.2:
  dependencies:
    fill-range "^7.0.1"

+braft-convert@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/braft-convert/-/braft-convert-2.3.0.tgz#27d5905136c334903d083b7a2352a72045627888"
+  integrity sha512-5km+dLHk8iYDv2iEYDrDQ2ld/ZoUx66QLql0qdm5PqZEcNXc8dBHGLORfzeu3iMw1jLeAiHxtdY5+ypuIhczVg==
+  dependencies:
+    draft-convert "^2.0.0"
+    draft-js "^0.10.3"
+
+braft-editor@^2.3.9:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/braft-editor/-/braft-editor-2.3.9.tgz#fd2b8e23ea71191016579a1ed8231d16ad8f5b4a"
+  integrity sha512-mqdPk/zI2dhFK8tW/A4Qj/AkkARLh5L/niNw+iif5wFqb6zh15rMlrShgz1nWO/QXyAKr8XtDgxiBbR0zWwtRg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    braft-convert "^2.3.0"
+    braft-finder "^0.0.19"
+    braft-utils "^3.0.8"
+    draft-convert "^2.0.0"
+    draft-js "^0.10.3"
+    draft-js-multidecorators "^1.0.0"
+    draftjs-utils "^0.9.4"
+    immutable "~3.7.4"
+
+braft-finder@^0.0.19:
+  version "0.0.19"
+  resolved "https://registry.yarnpkg.com/braft-finder/-/braft-finder-0.0.19.tgz#c324d82526ed3476a93de86cc9b407f4e188bc8d"
+  integrity sha512-0kzI6/KbomJJhYX1hpjn4edCKhblyUyWdUrsgBmOrwy0vrj+pPkm69+Uf8Uj6KGAULM6LF0ooC++p7fqUGgFHw==
+
+braft-utils@^3.0.8:
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/braft-utils/-/braft-utils-3.0.12.tgz#2b755ce1d8397d96b627b6767f74d07f25729d85"
+  integrity sha512-O2cKysURNC4HSEMKgNmQ2RluwcrxvYrztlEmyPN5SzktiNX3vaLFQoo0Ez3PlIhvjaGrIBSIT2Oyh2N6mn6TFg==
+
 brorand@^1.0.1, brorand@^1.1.0:
  version "1.1.0"
  resolved "https://registry.npm.taobao.org/brorand/download/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -3676,6 +3716,11 @@ core-js-pure@^3.14.0:
  resolved "https://registry.nlark.com/core-js-pure/download/core-js-pure-3.14.0.tgz#72bcfacba74a65ffce04bf94ae91d966e80ee553"
  integrity sha1-crz6y6dKZf/OBL+UrpHZZugO5VM=

+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0:
  version "2.6.12"
  resolved "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -4410,6 +4455,36 @@ dotenv@8.2.0:
  resolved "https://registry.nlark.com/dotenv/download/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
  integrity sha1-l+YZJZradQ7qPk6j4mvO6lQksWo=

+draft-convert@^2.0.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/draft-convert/-/draft-convert-2.1.11.tgz#09797151ac7ed9c8f7898d116ba9f36869997bdf"
+  integrity sha512-8jLuhXmx5h5jiGi7thqdqV8O3aOmT7D5Q4OvCmT5tJWyMXWhKcJCktgqnwvEVGrHGxYJwfkfU4F/3fhGP2Dljw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    immutable "~3.7.4"
+    invariant "^2.2.1"
+
+draft-js-multidecorators@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/draft-js-multidecorators/-/draft-js-multidecorators-1.0.0.tgz#6c4be8d7b78dd2b966ee51ee6cc179b9b535e612"
+  integrity sha1-bEvo17eN0rlm7lHubMF5ubU15hI=
+  dependencies:
+    immutable "*"
+
+draft-js@^0.10.3:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  integrity sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
+draftjs-utils@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/draftjs-utils/-/draftjs-utils-0.9.4.tgz#976c61aa133dbbbfedd65ae1dd6627d7b98c6f08"
+  integrity sha512-KYjABSbGpJrwrwmxVj5UhfV37MF/p0QRxKIyL+/+QOaJ8J9z1FBKxkblThbpR0nJi9lxPQWGg+gh+v0dAsSCCg==
+
 duplexer@^0.1.1:
  version "0.1.2"
  resolved "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fduplexer%2Fdownload%2Fduplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -4496,6 +4571,13 @@ encodeurl@~1.0.2:
  resolved "https://registry.nlark.com/encodeurl/download/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=

+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.nlark.com/end-of-stream/download/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -5120,6 +5202,19 @@ fbjs-css-vars@^1.0.0:
  resolved "https://registry.npm.taobao.org/fbjs-css-vars/download/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
  integrity sha1-IWVRE2rgL+JVkyw+yHdfGOLAeLg=

+fbjs@^0.8.15:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fbjs@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npm.taobao.org/fbjs/download/fbjs-3.0.0.tgz?cache=0&sync_timestamp=1602048886093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffbjs%2Fdownload%2Ffbjs-3.0.0.tgz#0907067fb3f57a78f45d95f1eacffcacd623c165"
@@ -5856,6 +5951,13 @@ iconv-lite@0.4.24:
  dependencies:
    safer-buffer ">= 2.1.2 < 3"

+iconv-lite@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
  version "4.1.1"
  resolved "https://registry.nlark.com/icss-utils/download/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -5900,6 +6002,16 @@ immer@8.0.1:
  resolved "https://registry.nlark.com/immer/download/immer-8.0.1.tgz?cache=0&sync_timestamp=1623232631798&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fimmer%2Fdownload%2Fimmer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
  integrity sha1-nHPbaD4rOXXEJPsFcq9YiYd65lY=

+immutable@*:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
+  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
+
+immutable@~3.7.4:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+  integrity sha1-E7TTyxK++hVIKib+Gy665kAHHks=
+
 import-cwd@^2.0.0:
  version "2.1.0"
  resolved "https://registry.nlark.com/import-cwd/download/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -6011,6 +6123,13 @@ internal-slot@^1.0.3:
    has "^1.0.3"
    side-channel "^1.0.4"

+invariant@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
  version "2.1.0"
  resolved "https://registry.nlark.com/ip-regex/download/ip-regex-2.1.0.tgz?cache=0&sync_timestamp=1618846943469&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fip-regex%2Fdownload%2Fip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -6318,7 +6437,7 @@ is-root@2.1.0:
  resolved "https://registry.npm.taobao.org/is-root/download/is-root-2.1.0.tgz?cache=0&sync_timestamp=1617783382597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-root%2Fdownload%2Fis-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
  integrity sha1-gJ4YEpzxEpZEMCpPhUQDXVGYSpw=

-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.npm.taobao.org/is-stream/download/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6394,6 +6513,14 @@ isobject@^3.0.0, isobject@^3.0.1:
  resolved "https://registry.nlark.com/isobject/download/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 istanbul-lib-coverage@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npm.taobao.org/istanbul-lib-coverage/download/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
@@ -7719,6 +7846,14 @@ node-fetch@2.6.1:
  resolved "https://registry.nlark.com/node-fetch/download/node-fetch-2.6.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fnode-fetch%2Fdownload%2Fnode-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
  integrity sha1-BFvTI2Mfdu0uK1VXM5RBa2OaAFI=

+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@^0.10.0:
  version "0.10.0"
  resolved "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz?cache=0&sync_timestamp=1599010726129&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-forge%2Fdownload%2Fnode-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -10340,7 +10475,7 @@ safe-regex@^1.1.0:
  dependencies:
    ret "~0.1.10"

-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.1.0:
  version "2.1.2"
  resolved "https://registry.nlark.com/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=
@@ -11972,7 +12107,7 @@ whatwg-encoding@^1.0.5:
  dependencies:
    iconv-lite "0.4.24"

-whatwg-fetch@^3.4.1:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.4.1:
  version "3.6.2"
  resolved "https://registry.nlark.com/whatwg-fetch/download/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
  integrity sha1-3O0k838mJO0CgXJdUdDi4/5nf4w=