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

通知中心

This commit is contained in:
谢思 2021-09-13 14:25:52 +08:00
parent dabe7d6551
commit f30903072e
2 changed files with 80 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,28 +9,28 @@ import { CheckboxGroup } from 'rsuite';
function MyNotice(props) { function MyNotice(props) {
const [noticeType, setNoticeType] = useState("2");//消息类别tab栏选择 const [noticeType, setNoticeType] = useState("0");//消息类别tab栏选择
const [selectedNum, setSelectedNum] = useState(0);//@我批量删除选择消息条数 const [selectedNum, setSelectedNum] = useState(0);//@我批量删除选择消息条数
const [isBatchDelete, setIsBatchDelete] = useState(false);//@我是否批量删除 const [isBatchDelete, setIsBatchDelete] = useState(false);//@我是否批量删除
const [batchDeleteCheckedAll,setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选 const [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选
const [batchDeleteList,setBatchDeleteList] = useState(new Set());//@我批量删除--选中 const [batchDeleteList, setBatchDeleteList] = useState([]);//@我批量删除--选中
const [atmeCount,setAtmeCount] = useState(0); const [atmeList, setAtmeList] = useState([]);
const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量 const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量 const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量 const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
const [messageList, setMessageList] = useState([]); const [messageList, setMessageList] = useState([]);
const [onlyUnread,setOnlyUnread] = useState(); const [onlyUnread, setOnlyUnread] = useState();
useEffect(() => { useEffect(() => {
const params = { const params = {
type:noticeType==="0"?"notification":noticeType==="2"?"atme":"", type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
status:onlyUnread?onlyUnread:"", status: onlyUnread ? onlyUnread : "",
limit: 20, limit: 20,
page: 0, page: 0,
} }
getMessageList(params); getMessageList(params);
}, [noticeType,onlyUnread]) }, [noticeType, onlyUnread])
function getMessageList(params) { function getMessageList(params) {
Axios.get(`/users/yystopf/messages.json`, { Axios.get(`/users/yystopf/messages.json`, {
@ -40,11 +40,13 @@ function MyNotice(props) {
setAtUnreadCount(response.data.unread_atme); setAtUnreadCount(response.data.unread_atme);
setMessageList(response.data.messages); setMessageList(response.data.messages);
}) })
var count = 0; console.log(messageList);
messageList.map(item=>{ const atmeList = new Array();
item.type==="atme"?count++:""; messageList.map(item => {
item.type === "atme" ? atmeList.push(item.id.toString()) : "";
}) })
setAtmeCount(count); setAtmeList(atmeList);
console.log(atmeList);
} }
function handleClick(e) { function handleClick(e) {
@ -54,20 +56,21 @@ function MyNotice(props) {
} }
} }
function onChange(e) { function onChange(batchDeleteList) {
if(e.target.checked){ setBatchDeleteCheckAll(batchDeleteList.length === atmeList.length)
batchDeleteList.has(e.target.name)?"":setBatchDeleteList(batchDeleteList.add(e.target.name)); // if(e.target.checked){
}else{ // batchDeleteList.has(e.target.name)?"":setBatchDeleteList(batchDeleteList.add(e.target.name));
batchDeleteList.delete(e.target.name); // }else{
} // batchDeleteList.delete(e.target.name);
batchDeleteList.size === atmeCount?setBatchDeleteCheckAll(true):""; // }
console.log(batchDeleteCheckedAll); // batchDeleteList.size === atmeCount?setBatchDeleteCheckAll(true):"";
// console.log(batchDeleteCheckedAll);
} }
function onCheckAllChange(e) { function onCheckAllChange(e) {
// setBatchDeleteList(e.target.checked?)
setBatchDeleteCheckAll(e.target.checked); setBatchDeleteCheckAll(e.target.checked);
setBatchDeleteList(e.target.checked ? atmeList : []);
// const checkbox = document.getElementsByClassName("atme-checkbox"); // const checkbox = document.getElementsByClassName("atme-checkbox");
// for (var i = 0; i < checkbox.length; i++) { // for (var i = 0; i < checkbox.length; i++) {
// checkbox[i].checked = e.target.checked; // checkbox[i].checked = e.target.checked;
@ -86,6 +89,20 @@ function MyNotice(props) {
}); });
} }
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 ( return (
<div className="notice01"> <div className="notice01">
<div className="sshHead"> <div className="sshHead">
@ -99,7 +116,7 @@ function MyNotice(props) {
<div className={isBatchDelete ? "invisible " : "visible"}> <div className={isBatchDelete ? "invisible " : "visible"}>
<div className="vertical-center-style"> <div className="vertical-center-style">
<Checkbox onChange={(e)=>e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType==="0"?`消息（${noticeUnreadCount}）`:`消息（${atUnreadCount}）`}</Checkbox> <Checkbox onChange={(e) => e.target.checked ? setOnlyUnread(1) : setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType === "0" ? `消息（${noticeUnreadCount}）` : `消息（${atUnreadCount}）`}</Checkbox>
</div> </div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""} {noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</div> </div>
@ -107,7 +124,7 @@ function MyNotice(props) {
<div className={isBatchDelete ? 'visible' : 'invisible'}> <div className={isBatchDelete ? 'visible' : 'invisible'}>
<div className="vertical-center-style"> <div className="vertical-center-style">
{/* <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp; */} {/* <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp; */}
<Checkbox onChange={onCheckAllChange} checked = {batchDeleteCheckedAll}>全选</Checkbox> <Checkbox onChange={onCheckAllChange} checked={batchDeleteCheckedAll}>全选</Checkbox>
&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项 &nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
</div> </div>
<div> <div>
@ -117,45 +134,45 @@ function MyNotice(props) {
</div> </div>
<Checkbox.Group className={isBatchDelete ? '' : 'invisible_checkGroup'} onChange={onChange} value={batchDeleteList}> <Checkbox.Group className={isBatchDelete ? '' : 'invisible_checkGroup'} onChange={onChange} value={batchDeleteList}>
{messageList.map(item => { {messageList.map(item => {
// 系统消息 // 系统消息
// 消息类别 // 消息类别
// const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1": // const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":
if(noticeType ==="0" && item.type === "notification"){ if (noticeType === "0" && item.type === "notification") {
return( return (
<div className="mynotice-content vertical-center-style" key={item.id}> <div className="mynotice-content vertical-center-style" key={item.id}>
<div className="mynotice-cont vertical-center-style"> <div className="mynotice-cont vertical-center-style">
{item.status === 1? <Badge color="#FA2020" />:<span className="system-notice-blank"></span>} {item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}
<i className="iconfont icon-yixiuicon1"></i> <i className="iconfont icon-yixiuicon1"></i>
<span className="sysNotice-length highlightSpan" onClick={()=>window.location.href=(`${item.notification_url}`)}>{item.content}</span> <span className="sysNotice-length highlightSpan" onClick={() => window.location.href = (`${item.notification_url}`)}>{item.content}</span>
</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>}
</div>
</div> </div>
<div className="mynotice-cont vertical-center-style float-left-little"> )
<span className="timeSpan">{item.time_ago}</span> } else if (noticeType === "2" && item.type === "atme") {
<a>标记为已读</a> //@我
return (
<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>
<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>}
{item.content}
</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>
</div>
</div> </div>
</div> )
) }
} else if(noticeType ==="2" && item.type === "atme"){ })}</Checkbox.Group>
//@我
return(
<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"></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>}
{item.content}
</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>
</div>
</div>
)
}
})}</Checkbox.Group>
</div> </div>
) )
} }

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

@ -87,13 +87,14 @@ button:active {
background: #F3F4F6; background: #F3F4F6;
} }
& a{ & .invisable-read{
display: none; display: none;
} }
&:hover a{ &:hover .invisable-read{
display: block; display: block;
color: #466AFF; color: #466AFF;
cursor: pointer;
} }
&:hover .timeSpan{ &:hover .timeSpan{