Gitlink
/
forgeplus-react
32
0
Fork 29
Code Issues Pull Requests 1 Releases 1 Wiki Activity

通知中心

This commit is contained in:
谢思 2021-09-14 09:45:53 +08:00
parent f30903072e
commit c5bb61cb9a
3 changed files with 247 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/SecuritySetting/Index.jsx
View File

@ -62,7 +62,7 @@ function Index(props){
<ul className="securityUl ul-border-buttom">
<li>消息通知</li>
<li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span className="text-shodow-bold">我的通知</span></Link></li>
<li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li>
{/* <li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li> */}
</ul>
<ul className="securityUl">
<li>安全设置</li>

254
src/forge/SecuritySetting/notice/myNotice/Index.jsx
View File

@ -3,37 +3,131 @@ import { Badge, Button, Checkbox, Menu } from 'antd';
import './Index.scss';
import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun';
import Axios from 'axios';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { CheckboxGroup } from 'rsuite';
function MyNotice(props) {
const [noticeType, setNoticeType] = useState("0");//消息类别tab栏选择
const [noticeType, setNoticeType] = useState("2");//消息类别tab栏选择
const [selectedNum, setSelectedNum] = useState(0);//@我批量删除选择消息条数
const [isBatchDelete, setIsBatchDelete] = useState(false);//@我是否批量删除
const [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选
const [batchDeleteList, setBatchDeleteList] = useState([]);//@我批量删除--选中
const [atmeList, setAtmeList] = useState([]);
const [atmeIds, setAtmeIds] = useState([]);
const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
const [messageList, setMessageList] = useState([]);
const [onlyUnread, setOnlyUnread] = useState();
useEffect(() => {
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
status: onlyUnread ? onlyUnread : "",
limit: 20,
page: 0,
const [atUnreadCount, setAtUnreadCount] = useState(2);//未读@我数量
const [messageList, setMessageList] = useState([
{
"id": 1,
"status": 1,
"content": "Atme Message Content 1",
"notification_url": "http://www.baidu.com",
"source": "PullRequestAtme",
"time_ago": "1天前",
"type": "atme",
"sender": {
"id": 5,
"type": "User",
"name": "testforge2",
"login": "testforge2",
"image_url": "system/lets/letter_avatars/2/T/236_177_85/120.png"
}
getMessageList(params);
}, [noticeType, onlyUnread])
},
{
"id": 2,
"status": 0,
"content": "Atme Message Content 2",
"notification_url": "http://www.baidu.com",
"source": "IssueAtme",
"time_ago": "1天前",
"type": "atme",
"sender": {
"id": 4,
"type": "User",
"name": "testforge1",
"login": "testforge1",
"image_url": "system/lets/letter_avatars/2/T/19_237_174/120.png"
}
},
{
"id": 3,
"status": 1,
"content": "Notification Message Content 1",
"notification_url": "http://www.baidu.com",
"source": "IssueDelete",
"time_ago": "1天前",
"type": "notification"
},
{
"id": 4,
"status": 0,
"content": "Notification Message Content 2",
"notification_url": "http://www.baidu.com",
"source": "IssueChanged",
"time_ago": "1天前",
"type": "notification"
},
{
"id": 5,
"status": 0,
"content": "Notification Message Content 3",
"notification_url": "http://www.baidu.com",
"source": "ProjectJoined",
"time_ago": "1天前",
"type": "notification"
}
]);
const [onlyUnread, setOnlyUnread] = useState();
const noticeType = {
// 易修
IssueAssigned:1, // 有新指派给我的易修
IssueAssignerExpire:1, // 我负责的易修截止日期到达最后一天
IssueAtme:1, // 在易修中@我
IssueChanged:1, // 我创建或负责的易修状态变更
IssueCreatorExpire:1, // 我创建的易修截止日期到达最后一天
IssueDeleted:1, // 我创建或负责的易修删除
IssueJournal:1, // 我创建或负责的易修有新的评论
//平台通知
LoginIpTip:2, //登录异常提示
//个人状态类通知
OrganizationJoined:3, // 账号被拉入组织
OrganizationLeft:3, // 账号被移出组织
rganizationRole:3, // 账号组织权限变更
ProjectJoined:3, // 账号被拉入项目
ProjectLeft:3, // 账号被移出项目
ProjectRole:3, // 账号仓库权限变更
//其他仓库通知
ProjectDelete:4, // 我关注的仓库被删除
ProjectFollowed:4, // 我管理的仓库被关注
ProjectForked:4, // 我管理的仓库被复刻
ProjectIssue:4, // 我管理/关注的仓库有新的易修
ProjectSettingChanged:4, // 我管理的仓库项目设置被更改
ProjectTransfer:4, // 我关注的仓库被转移
ProjectVersion:4, // 我关注的仓库有新的发行版
//合并请求类通知
ProjectPullRequest:5, // 我管理/关注的仓库有新的合并请求
PullRequestAssigned:5, // 有新指派给我的合并请求
PullReuqestAtme:5, // 在合并请求中@我
PullRequestChanged:5, // 我创建或负责的合并请求状态变更
PullRequestJournal:5, // 我创建或负责的合并请求有新的评论
//里程碑
ProjectMilestone:6, // 我管理的仓库有新的里程碑
};
// useEffect(() => {
// const params = {
// type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
// status: onlyUnread ? onlyUnread : "",
// limit: 20,
// page: 0,
// }
// getMessageList(params);
// }, [noticeType, onlyUnread])
function getMessageList(params) {
Axios.get(`/users/yystopf/messages.json`, {
axios.get(`/users/yystopf/messages.json`, {
params: params,
}).then((response) => {
setNoticeUnreadCount(response.data.unread_notification);
@ -41,12 +135,23 @@ function MyNotice(props) {
setMessageList(response.data.messages);
})
console.log(messageList);
const atmeList = new Array();
messageList.map(item => {
item.type === "atme" ? atmeList.push(item.id.toString()) : "";
//@我消息列表ids
const atmeIds = new Array();
}
function readNotice(id){
if(id){
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id,
};
console.log(params);
axios.post(`/users/yystopf/messages/read.json`,{
params:params,
}).then((response)=>{
console.log(response);
})
setAtmeList(atmeList);
console.log(atmeList);
}
}
function handleClick(e) {
@ -56,62 +161,64 @@ function MyNotice(props) {
}
}
function onChange(batchDeleteList) {
setBatchDeleteCheckAll(batchDeleteList.length === atmeList.length)
// if(e.target.checked){
// batchDeleteList.has(e.target.name)?"":setBatchDeleteList(batchDeleteList.add(e.target.name));
// }else{
// batchDeleteList.delete(e.target.name);
// }
// batchDeleteList.size === atmeCount?setBatchDeleteCheckAll(true):"";
// console.log(batchDeleteCheckedAll);
function onChange(e) {
var checkboxNum = 0;
let messageListNew=messageList.slice();
messageListNew.map((item)=>{
if(item.id===e.target.value){
item.checkedBatch = e.target.checked;
}
item.checkedBatch?checkboxNum++:"";
});
setMessageList(messageListNew);
setSelectedNum(checkboxNum);
setBatchDeleteCheckAll(checkboxNum === atUnreadCount);
}
function onCheckAllChange(e) {
function onChangeAll(e) {
setBatchDeleteCheckAll(e.target.checked);
setBatchDeleteList(e.target.checked ? atmeList : []);
// const checkbox = document.getElementsByClassName("atme-checkbox");
// for (var i = 0; i < checkbox.length; i++) {
// checkbox[i].checked = e.target.checked;
// }
// setSelectedNum(e.target.checked ? checkbox.length : 0);
setSelectedNum(e.target.checked?messageList.length:0);
let messageListNew=messageList.slice();
messageListNew.map((item)=>{
item.checkedBatch = e.target.checked;
});
setMessageList(messageListNew);
}
function deleteNotice() {
function deleteNotice(id) {
if(id){
DelModal({
title: noticeType === "1" ? '删除私信' : '删除与我相关',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : selectedNum === 0 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : selectedNum === 0 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : id[0] != -1 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : id[0] != -1 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
onOk: () => {
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:id,
};
// console.log(params);
axios.delete(`/users/yystopf/messages.json`,{
data:params,
}).then((response)=>{
// console.log(response);
})
}
});
}
function readNotice(id){
alert("消息已读");
console.log(id);
const params = {
type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
ids:[id],
};
Axios.post(`/users/yystopf/messages/read.json`,{
params:params,
}).then((response)=>{
console.log(response);
})
}
return (
<div className="notice01">
<div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<Menu.Item key="0"><Badge count={noticeUnreadCount} title="">系统通知</Badge></Menu.Item>
<Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item>
{/* <Menu.Item key="1" id="item-private"><Badge count={0}>私信</Badge></Menu.Item> */}
<Menu.Item key="2"><Badge count={atUnreadCount}>@我</Badge></Menu.Item>
</Menu>
<button>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
<button onClick={()=>{readNotice([-1])}}>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
</div>
<div className={isBatchDelete ? "invisible " : "visible"}>
@ -123,17 +230,16 @@ function MyNotice(props) {
<div className={isBatchDelete ? 'visible' : 'invisible'}>
<div className="vertical-center-style">
{/* <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp; */}
<Checkbox onChange={onCheckAllChange} checked={batchDeleteCheckedAll}>全选</Checkbox>
{/* <input type="checkbox" id="checkAll" onChange={onChangeAll} />&nbsp; */}
<Checkbox onChange={onChangeAll} checked={batchDeleteCheckedAll}>全选</Checkbox>
&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
</div>
<div>
<button onClick={() => { setIsBatchDelete(false); setSelectedNum(0); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut" onClick={selectedNum > 0 ? deleteNotice : () => { }}>删除</button>
<button className="deleteBut" onClick={selectedNum > 0 ? ()=>deleteNotice([-1]) : () => { }}>删除</button>
</div>
</div>
<Checkbox.Group className={isBatchDelete ? '' : 'invisible_checkGroup'} onChange={onChange} value={batchDeleteList}>
{messageList.map(item => {
// 系统消息
// 消息类别
@ -148,7 +254,7 @@ function MyNotice(props) {
</div>
<div className="mynotice-cont vertical-center-style float-left-little">
<span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
{item.status === 1 && <span className="invisable-read" onClick={readNotice(item.id)}>标记为已读</span>}
{item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}
</div>
</div>
)
@ -158,7 +264,7 @@ function MyNotice(props) {
<div className="mynotice-content vertical-center-style" key={item.id}>
<div className="mynotice-cont vertical-center-style">
{/* <input type="checkbox" className={isBatchDelete ? 'atme-checkbox' : 'invisible'} onChange={onChange} /> */}
<Checkbox className="atme-checkbox" value={item.id} key={item.id}></Checkbox>
<Checkbox value={item.id} className={isBatchDelete ? 'visible-checkbox' : 'invisible-checkbox'} onChange={onChange} checked={item.checkedBatch}></Checkbox>
<img src={`https://testforgeplus.trustie.net//${item.sender.image_url}`} className="currentImg" />
<span className="at-length highlightSpan">
{item.status === 1 ? <Badge color="#FA2020" className="at-badge" /> : <span className="system-notice-blank"></span>}
@ -166,13 +272,29 @@ function MyNotice(props) {
</span>
</div>
<div className="mynotice-cont vertical-center-style">
<span className="timeSpan">{item.time_ago}</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;<a className="float-left-little" onClick={deleteNotice}>删除</a>
<span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
{item.status === 1 && <span className="invisable-read" onClick={()=>readNotice([item.id])}>标记为已读</span>}&nbsp;&nbsp;&nbsp;
<span className="invisable-read" onClick={()=>deleteNotice([item.id])}>删除</span>
</div>
</div>
)
}
})}</Checkbox.Group>
})}
{/* 私信 */}
{/* <div className="mynotice-content vertical-center-style">
<Badge count={95}><img src="https://testforgeplus.trustie.net//system/lets/letter_avatars/2/D/208_124_118/120.png" className="currentImg private-letter-img" /></Badge>
<div className="private-letter-right">
<div>
<span>蒋宇航</span>
<span className="timeSpan">4分钟前</span>
<a onClick={deleteNotice}>删除</a>
</div>
<div onClick={() => props.history.push('/settings/notice/privateLetter')}>
<span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
</div>
</div>
</div> */}
</div>
)
}

31
src/forge/SecuritySetting/notice/myNotice/Index.scss
View File

@ -6,7 +6,7 @@
}
.ant-menu-item{
padding:0px;
// margin-right:34px!important;
margin-right:34px!important;
height: 34px;
width: 64px;
text-align: center;
@ -129,9 +129,12 @@ button:active {
.mynotice-cont{
padding:0;
& .atme-checkbox{
& .visible-checkbox{
margin-right: 10px;
}
& .invisible-checkbox{
display: none;
}
}
& .ant-badge-count, .ant-badge-dot, .ant-badge .ant-scroll-number-custom-component {
@ -197,7 +200,7 @@ button:active {
.at-length{
max-width: 48rem;
margin-left: 18px;
margin-left: 12px;
}
#numberSpan{
color: #466AFF;
@ -212,14 +215,14 @@ button:active {
margin-right: 10px;
}
.invisible_checkGroup{
& .ant-checkbox-inner{
display: none;
}
}
.notice01{
& .ant-checkbox-group{
display: flex;
flex-direction: column;
}
}
// .invisible_checkGroup{
// & .ant-checkbox-inner{
// display: none;
// }
// }
// .notice01{
// & .ant-checkbox-group{
// display: flex;
// flex-direction: column;
// }
// }