forked from Gitlink/forgeplus-react
263 lines
9.3 KiB
JavaScript
263 lines
9.3 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Badge, Menu } from 'antd';
|
||
import { Link } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import AppPullRefresh from './AppPullRefresh';
|
||
import { noticeSourceType } from '../common/static';
|
||
import './header.scss';
|
||
import '../SecuritySetting/notice/manager/Index.scss';
|
||
import '../SecuritySetting/Index.scss';
|
||
import '../SecuritySetting/notice/myNotice/Index.scss';
|
||
|
||
|
||
function NoticeContent({ visible, showNotification, resetUserInfo, current_user: { login } }) {
|
||
const [initialize, setInitialize] = useState(true);
|
||
const [noticeType, setNoticeType] = useState("notification");
|
||
const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
|
||
|
||
const [noticeUnreadCount, setNoticeUnreadCount] = useState(0);//未读系统通知数量
|
||
const [noticePage, setNoticePage] = useState(0);
|
||
const [noticeUnreadList, setNoticeUnreadList] = useState([]);//未读系统通知列表
|
||
|
||
const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
|
||
const [atPage, setAtPage] = useState(0);
|
||
const [atUnreadList, setAtUnreadList] = useState([]);//未读@我列表
|
||
|
||
useEffect(() => {
|
||
resetUserInfo();
|
||
}, [noticeUnreadCount,atUnreadCount]);
|
||
|
||
useEffect(()=>{
|
||
setNoticePage(0);
|
||
setAtPage(0);
|
||
},[visible])
|
||
|
||
useEffect(() => {
|
||
const params = {
|
||
type: noticeType,
|
||
limit: 10,
|
||
page: noticeType === "notification" ? noticePage : noticeType === "atme" ? atPage : "",
|
||
status: 1,
|
||
}
|
||
getMessageList(params);
|
||
}, [noticePage, atPage]);
|
||
|
||
useEffect(() => {
|
||
const params = {
|
||
type: noticeType,
|
||
limit: 10,
|
||
page: 0,
|
||
status: 1,
|
||
};
|
||
if (initialize) {
|
||
params.type = "atme"
|
||
}
|
||
visible && getMessageList(params);
|
||
}, [visible]);
|
||
|
||
|
||
function getMessageList(params) {
|
||
axios.get(`/users/${login}/messages.json`, {
|
||
params: params,
|
||
}).then((response) => {
|
||
if (response && response.data) {
|
||
setNoticeUnreadCount(response.data.unread_notification);
|
||
setAtUnreadCount(response.data.unread_atme);
|
||
if (params.type === "notification") {
|
||
let list = response.data.messages;
|
||
if (params.page !== 0) {
|
||
list = [...noticeUnreadList, ...list];
|
||
}
|
||
setNoticeUnreadList(list);
|
||
if (initialize) {
|
||
// 如果是第一次加载，根据数据量判断是否切换tab栏
|
||
setInitialize(false);
|
||
if (response.data.unread_notification === 0 && response.data.unread_atme !== 0) {
|
||
setNoticeType("atme");
|
||
}
|
||
}
|
||
} else if (params.type === "atme") {
|
||
let list = response.data.messages;
|
||
if (params.page !== 0) {
|
||
list = [...atUnreadList, ...list];
|
||
}
|
||
setAtUnreadList(list);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function readAll() {
|
||
axios.post(`/users/${login}/messages/read.json`, {
|
||
type: noticeType,
|
||
ids: [-1]
|
||
}).then((response) => {
|
||
let data = response.data;
|
||
if (!data) return;
|
||
if (data.status === 0) {
|
||
changeReadMarkAll(noticeType);
|
||
} else {
|
||
showNotification(data.message);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
function changeReadMarkAll(noticeType) {
|
||
if (noticeType === "notification") {
|
||
let list = noticeUnreadList.slice();
|
||
list.forEach(item => {
|
||
item.status = 2;
|
||
})
|
||
setNoticeUnreadList(list);
|
||
setNoticeUnreadCount(0);
|
||
} else if (noticeType === "atme") {
|
||
let list = atUnreadList.slice();
|
||
list.forEach(item => {
|
||
item.status = 2;
|
||
})
|
||
setAtUnreadList(list);
|
||
setAtUnreadCount(0);
|
||
}
|
||
}
|
||
|
||
// const [letter_unread_list, setLetter_unread_list] = useState([
|
||
// {
|
||
// id: 122,
|
||
// read: 0, //是否已读，0未读，1已读
|
||
// send_name: "蒋宇航", //消息发送人
|
||
// send_login: "jiangYuHang", //消息发送人的login，前端根据这个跳转到消息内页
|
||
// content: "私信内容", //最近一条未读消息的内容
|
||
// create_time: "2019-03-04 18:08", //发送时间
|
||
// },
|
||
// ]);
|
||
|
||
function readItem(item) {
|
||
axios.post(`/users/${login}/messages/read.json`, {
|
||
type: noticeType,
|
||
ids: [item.id]
|
||
}).then((response) => {
|
||
let data = response.data;
|
||
if (!data) return;
|
||
if (data.status === 0) {
|
||
changeReadMark(item);
|
||
item.notification_url && window.open(item.notification_url);
|
||
} else {
|
||
showNotification(data.message);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
function changeReadMark(item) {
|
||
if (item.type === "notification") {
|
||
let list = noticeUnreadList.slice();
|
||
let index = noticeUnreadList.indexOf(item);
|
||
list[index].status = 2;
|
||
setNoticeUnreadList(list);
|
||
if (noticeUnreadCount > 0) {
|
||
setNoticeUnreadCount(noticeUnreadCount - 1);
|
||
}
|
||
} else if (item.type === "atme") {
|
||
let list = atUnreadList.slice();
|
||
let index = atUnreadList.indexOf(item);
|
||
list[index].status = 2;
|
||
setAtUnreadList(list);
|
||
if (atUnreadCount > 0) {
|
||
setAtUnreadCount(atUnreadCount - 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="messageHoverDiv notice01">
|
||
<div className="sshHead hoverNotice-head">
|
||
<Menu mode="horizontal" selectedKeys={noticeType} onClick={(e) => setNoticeType(e.key)}>
|
||
<Menu.Item key="notification"><Badge count={noticeUnreadCount}>系统通知</Badge></Menu.Item>
|
||
{/* <Menu.Item key="1" id="item-private"><Badge count={letterUnreadCount}>私信</Badge></Menu.Item> */}
|
||
<Menu.Item key="atme"><Badge count={atUnreadCount}>@我</Badge></Menu.Item>
|
||
</Menu>
|
||
</div>
|
||
|
||
{/* 系统通知 */}
|
||
{noticeType === "notification" && <AppPullRefresh
|
||
className='hoverNotice-body' // 外部添加className加以区分
|
||
onPullRefresh={() => { setNoticePage(noticePage + 1); }} //触发加载ajax的function
|
||
// type={2} // 传送加载组件的状态
|
||
count={noticeUnreadList.length} // 数据当前的总数量
|
||
pageSize={10} //
|
||
>
|
||
{
|
||
noticeUnreadList.map(item => {
|
||
return (
|
||
<div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
|
||
<div className={`noticeCont ${item.notification_url?'pointer':''}`}>
|
||
<span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
|
||
<Badge color="#FA2020" />
|
||
</span>
|
||
<i className={"iconfont " + noticeSourceType[item.source]}></i>
|
||
<div className="noticeCont-text">
|
||
<span className="content-span notice-cont-span" dangerouslySetInnerHTML={{ __html: item.content }}></span>
|
||
<span className="timeSpan">{item.time_ago}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</AppPullRefresh>
|
||
}
|
||
|
||
{/* @我 */}
|
||
{noticeType === "atme" && <AppPullRefresh
|
||
className='hoverNotice-body' // 外部添加className加以区分
|
||
onPullRefresh={() => { setAtPage(atPage + 1); }} //触发加载ajax的function
|
||
// type={1} // 传送加载组件的状态
|
||
count={atUnreadList.length} // 数据当前的总数量
|
||
pageSize={10} //
|
||
>
|
||
{atUnreadList.map(item => {
|
||
return (
|
||
<div key={item.id + Math.random()} className="noticeCont-back" onClick={() => { readItem(item) }}>
|
||
<div className="noticeCont">
|
||
<span style={{ visibility: item.status === 1 ? 'visible' : 'hidden' }}>
|
||
<Badge color="#FA2020" />
|
||
</span>
|
||
<div className="noticeCont-text">
|
||
<span className="content-span atme-cont-span" dangerouslySetInnerHTML={{ __html: "<b>" + (item.sender ? item.sender.name : '') + "</b> " + item.content + " 中@我" }}></span>
|
||
<span className="timeSpan">{item.time_ago}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</AppPullRefresh>
|
||
}
|
||
|
||
{/* 私信 */}
|
||
{/* {noticeType === "1" ? letter_unread_list.length > 0 ? letter_unread_list.map(item => {
|
||
return (
|
||
<div className="noticeCont-back">
|
||
<div className="noticeCont" style={{ height: item.content.length >= 30 && item.content.length <= 34 ? '65px' : "" }}>
|
||
<Badge color="#FA2020" />
|
||
<div className="noticeCont-text">
|
||
<span>{item.send_name}：</span>
|
||
<span className="boldSpan" dangerouslySetInnerHTML={{ __html: item.content.length >= 50 ? item.content.substr(0, 50) + "..." : item.content }}></span>
|
||
<span className="timeSpan">{item.create_time ? timeAgo(item.create_time) : "刚刚"}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}) : "暂无数据" : ""} */}
|
||
<div className="hoverNotice-buttom">
|
||
<Link to={{pathname:"/settings/notice",query:{noticeType:noticeType}}}>全部消息</Link>
|
||
{noticeUnreadCount > 0 && noticeType === "notification" && <a onClick={readAll}>所有系统消息一键已读</a>}
|
||
{atUnreadCount > 0 && noticeType === "atme" && <a onClick={readAll}>所有@我一键已读</a>}
|
||
</div>
|
||
</div>
|
||
|
||
)
|
||
}
|
||
export default NoticeContent;
|