我的通知-差分页操作

src/api/request.js

@@ -67,6 +67,16 @@ const request = {
     getLoginLog: '/security-center/logManage/getLoginLog',//登录日志
     getAbnormalLog: '/security-center/logManage/getAbnormalLog',//异常日志
     getAbnormalLogWayAndIp: '/security-center/logManage/getAbnormalLogWayAndIp',//查看异常日志
+
+    //站内通知
+    listPage:'/security-center/noticeManage/listPage',  //我的通知列表
+    getNoticeInfoById:'/security-center/noticeManage/getNoticeInfoById', //查看我的通知
+    noticeAdd:'/security-center/noticeManage/add',  //添加通知
+    deleteNoticeInfo:'/security-center/noticeManage/deleteNoticeInfo',  //删除通知
+    getHospitalUser:'/security-center/noticeManage/getHospitalUser',  //获取指定组织下的用户
+    getNotNoticeCount:'/security-center/noticeManage/getNotNoticeCount',        //获取未读信息数量
+    listManagePage:'/security-center/noticeManage/listManagePage',        //通知管理列表
+
 }
 
 export default request;

src/common/common.less

@@ -112,7 +112,7 @@ body{
   color:#FF4D4D
 }
 .menuItem:hover{
-  color: #1690FF;
+  color: @primary-color;
   background: #DBEEFF;
 }
 .record{

src/components/AMenu/index.js

@@ -12,6 +12,8 @@ import FuncManager from "../FuncManager";
 import OperationLog from "../OperationLog";
 import LoginLog from "../LoginLog";
 import ExceptionLog from "../ExceptionLog";
+import MyMessage from "../MyMessage";
+import MsgManage from "../MsgManage";
 import apiObj from '@api/index';
 
 const { xPost, api } = apiObj;
@@ -29,6 +31,8 @@ const pageMap = {
     '操作日志': <OperationLog />,
     '登录日志': <LoginLog />,
     '异常日志': <ExceptionLog />,
+    '我的通知': <MyMessage />,
+    '通知管理': <MsgManage />,
 }
 
 let firstMenuPage = null;         //第一个菜单，自动激活时用

src/components/MyMessage/index.js

@@ -0,0 +1,213 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux'
+import { Table, Modal, message, Menu, Breadcrumb, Dropdown, Space, Form, Input, Button, Row, Col, Select } from 'antd';
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import './index.less';
+import apiObj from '@api/index';
+import utils from '@utils/index'
+const { pickCheckedTreeIds } = utils;
+const { post, api, xPost } = apiObj;
+const { Option } = Select;
+function MyMessage() {
+    useEffect(() => {
+        //监听resize事件
+        // setTableHt(window.innerHeight - 260);
+        // window.addEventListener('resize', () => {
+        //     setTableHt(window.innerHeight - 260);
+        // });
+        //刷新列表
+        setOrgType(localStorage.getItem('type'))
+        getTableData();
+        //解绑事件
+        // return function clear() {
+        //     window.removeEventListener("resize");
+        // }
+
+    }, []);
+
+    const [size, setSize] = useState(15);       //每页显示条数
+    const [total, setTotal] = useState(0);       //每页显示条数
+    const [dataSource, setDataSource] = useState([]);   //列表数据
+    // const [tableHt, setTableHt] = useState(300);   //表格滚动高度
+    const [visible, setVisible] = useState(false);   //弹窗查看
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [msgDetail, setMsgDetail] = useState({});
+    const [orgType, setOrgType] = useState(localStorage.getItem('type'));
+    //从state中取出状态、类型列表
+    const staticInfo = useSelector(state => {
+        return state.staticInfo;
+    });
+    const { msgTypeList, msgStatusList } = staticInfo;
+
+    //获取表格数据
+    function getTableData(param = {}) {
+        post(api.listPage, param).then((res) => {
+            if (res.data.code === 200) {
+                let data = res.data.data;
+                setTotal(data.total);
+                setDataSource(data.records);
+            }
+
+        })
+    }
+    //弹窗取消
+    function handleCancel() {
+        setVisible(false);
+    }
+    //新增子组织弹窗
+    function showMessage(id) {
+        getOrgDetail(id);
+        setVisible(true);
+    }
+    function getOrgDetail(id) {     //type:1我的通知，0通知管理
+        xPost(api.getNoticeInfoById, { id: id, type: 1 }).then((res) => {
+            const { data, code } = res.data;
+            if (code === 200) {
+                setMsgDetail(data);
+            } else {
+                message.warning(res.data.msg || '获取详情失败')
+            }
+        });
+    }
+    function structDetail(data) {
+        const content = JSON.parse(JSON.stringify(data).replace(/getHospitalUserDTO/g, "addHospitalUserVO"));
+        const menuData = content.getRoleDTO ? content.getRoleDTO.loginUserMenuResourceTree : [];
+        content.confirmPsd = content.addHospitalUserVO.password
+        let softwares = [], sids = [];
+        for (let i = 0; i < menuData.length; i++) {
+            const obj = pickCheckedTreeIds(menuData[i]);
+            softwares.push(obj);
+            sids.push(obj.id);
+        }
+        const fData = Object.assign({}, content, { softwares, sids });
+        setMsgDetail(fData);
+    }
+    //每页显示条数切换
+    function onSizeChange(){
+
+    }
+    //翻页
+    function onPageChange(){
+
+    }
+    //表格渲染
+    function RenderTable() {
+            const columns = [
+                { title: '标题', dataIndex: 'title', key: 'title' },
+                {
+                    title: '类型', width: 150, dataIndex: 'typeName', key:'typeName'
+                },
+                { title: '发送者', dataIndex: 'sender', key: 'sender' },
+                { title: '发送时间', width: 240, dataIndex: 'gmtCreate', key: 'gmtCreate' },
+                {
+                    title: '发送状态', key: 'statusName', dataIndex:'statusName'
+                },
+                {
+                    title: '操作', key: 'operation', render: (row) => {
+                        return (<Space size="middle">
+                            <a onClick={() => showMessage(row.id)}>查看</a>
+                        </Space>)
+                    }
+                },
+            ];
+            return (
+                <Table
+                    rowKey={record => record.id}
+                    columns={columns}
+                    dataSource={dataSource}
+                    pagination={{
+                        showSizeChanger:true,
+                        pageSizeOptions:[15,30,60,120],
+                        defaultPageSize:size,
+                        pageNo: 1,
+                        size:'small',
+                        total: total,
+                        showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
+                    }}
+                />
+            )
+
+    }
+    //筛选项渲染
+    const [form] = Form.useForm();
+    const onFinish = (values: any) => {
+        getTableData(values);
+        console.log('筛选项:', values);
+    };
+    const onReset = () => {
+        form.resetFields();
+        getTableData();
+    };
+    return (
+        <div className='wrapper'>
+            <div className="filter-box">
+                <Form form={form} name="control-hooks" onFinish={onFinish}>
+                    <Row gutter={24}>
+                        <Col span={5} key={1}>
+                            <Form.Item name="type" label="通知类型">
+                                <Select
+                                    allowClear
+                                >
+                                    {msgTypeList.map((item) => {
+                                        return (
+                                            <Option value={item.name} key={item.name}>{item.val}</Option>
+                                        )
+                                    })}
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={5} key={2}>
+                            <Form.Item name="status" label="阅读状态">
+                                <Select
+                                    allowClear
+                                >
+                                    {msgStatusList.map((item) => {
+                                        return (
+                                            <Option value={item.name} key={item.name}>{item.val}</Option>
+                                        )
+                                    })}
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={9} key={3}>
+                            <Form.Item>
+                                <Button type="primary" htmlType="submit">
+                                    查询
+                                </Button>
+                                <Button htmlType="button" onClick={onReset}>
+                                    重置
+                                </Button>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </div>
+            <div className="table">
+                <div className="table-header">
+                    <h2 className="table-title">我的通知</h2>
+                </div>
+                <RenderTable />
+            </div>
+            <Modal
+                title="查看通知"
+                footer={null}
+                width={724}
+                visible={visible}
+                confirmLoading={confirmLoading}
+            >
+                <div className="message-box">
+                    <p className='msg-title'>{msgDetail.title}</p>
+                    <div className="msg-content">{msgDetail.content}</div>
+                    <div className="msg-footer">
+                        <span className="msg-type">类型：{msgDetail.typeName}</span>
+                        <span className="msg-sender">发送者：{msgDetail.creatorName}</span>
+                        <span className="msg-time">发送时间：{msgDetail.gmtCreate}</span>
+                    </div>
+                </div>
+                <p className='message-oper'><Button type='primary' onClick={handleCancel}>返回</Button></p>
+            </Modal>
+        </div>
+    )
+}
+
+export default MyMessage;

src/components/MyMessage/index.less

@@ -0,0 +1,55 @@
+@import "@common/common.less";
+
+.ant-table-thead > tr > th{
+  background: @table-th-color;
+  color: @text-color;
+  border-bottom: 1px #D8D8D8 solid;
+}
+.ant-steps-item-title{
+  font-size: 14px;
+}
+.ant-tabs > .ant-tabs-nav, .ant-tabs > div > .ant-tabs-nav{
+  margin-bottom: 0;
+}
+.ant-tabs-content-holder{
+  border: 1px solid #f0f0f0;
+  border-top: none;
+}
+.steps-content{
+  margin-top:40px ;
+}
+.button-box{
+  text-align: right;
+  .ant-btn-primary{
+    margin-left: 20px;
+  }
+}
+.filter-box{
+  .ant-btn-primary{
+    margin-right: 20px;
+  }
+}
+.add-container{
+  margin: 30px 165px;
+}
+.ant-breadcrumb{
+  .back-icon{
+    width: 14px;
+    height: 12px;
+    vertical-align: baseline;
+    margin-right: 4px;
+    cursor: pointer;
+  }
+}
+
+
+.table-header{
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 0;
+  .ant-breadcrumb-link{
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+  }
+}

src/components/PageLayout/index.js

@@ -5,7 +5,7 @@ import AHeader from '../AHeader'
 import AMenu from '../AMenu'
 import ATabs from '../ATabs'
 import apiObj from '@api/index';
-import { setStatusList, setHisTypeList, setTitleList, setDataList} from '@reducers/staticInfo';
+import { setStatusList, setHisTypeList, setTitleList, setDataList,setMsgTypeList, setMsgStatusList} from '@reducers/staticInfo';
 
 const {  Content, Sider } = Layout;
 const {post,api,xPost} = apiObj;
@@ -31,6 +31,8 @@ function PageLayout(){
                 dispatch(setStatusList(data[47]));
                 dispatch(setTitleList(data[40]));
                 dispatch(setDataList(data[48]));
+                dispatch(setMsgTypeList(data[50]));   //通知状态列表
+                dispatch(setMsgStatusList(data[51]));    //通知类型列表
             }
         })
     }

src/store/reducers/staticInfo.js

@@ -7,6 +7,8 @@ export const slice = createSlice({
         statusList:[],      //启/禁用状态列表
         titleList:[],    //职称数据
         dataList: [],    //数据范围
+        msgStatusList:[],      //通知状态列表
+        msgTypeList:[],     //通知类型列表
     },
     reducers: {
         setStatusList: (state,action) => {
@@ -21,9 +23,15 @@ export const slice = createSlice({
         setDataList: (state, action) => {
             state.dataList = action.payload;
         },
+        setMsgStatusList: (state, action) => {
+            state.msgStatusList = action.payload;
+        },
+        setMsgTypeList: (state, action) => {
+            state.msgTypeList = action.payload;
+        },
     },
 });
 
-export const { setStatusList, setHisTypeList, setTitleList, setDataList} = slice.actions;
+export const { setStatusList, setHisTypeList, setTitleList, setDataList,setMsgStatusList,setMsgTypeList} = slice.actions;
 
 export default slice.reducer;