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

通知中心

This commit is contained in:
谢思 2021-09-13 13:21:34 +08:00
parent 1b21d9e3fb
commit dabe7d6551
2 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,16 +5,21 @@ import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun';
import Axios from 'axios';
import { Link } from 'react-router-dom';
import { CheckboxGroup } from 'rsuite';
function MyNotice(props) {
const [noticeType, setNoticeType] = useState("0");
const [selectedNum, setSelectedNum] = useState(0);
const [isBatchDelete, setIsBatchDelete] = useState(false);
const [notice_unread_count, setNotice_unread_count] = useState();//未读系统通知数量
const [letter_unread_count, setLetter_unread_count] = useState(0);//未读私信数量
const [at_unread_count, setAt_unread_count] = useState();//未读@我数量
const [message_list, setMessage_list] = useState([]);
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(new Set());//@我批量删除--选中
const [atmeCount,setAtmeCount] = useState(0);
const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
const [messageList, setMessageList] = useState([]);
const [onlyUnread,setOnlyUnread] = useState();
useEffect(() => {
@ -31,10 +36,15 @@ function MyNotice(props) {
Axios.get(`/users/yystopf/messages.json`, {
params: params,
}).then((response) => {
setNotice_unread_count(response.data.unread_notification);
setAt_unread_count(response.data.unread_atme);
setMessage_list(response.data.messages);
setNoticeUnreadCount(response.data.unread_notification);
setAtUnreadCount(response.data.unread_atme);
setMessageList(response.data.messages);
})
var count = 0;
messageList.map(item=>{
item.type==="atme"?count++:"";
})
setAtmeCount(count);
}
function handleClick(e) {
@ -42,26 +52,27 @@ function MyNotice(props) {
if (e.key != "2") {
setIsBatchDelete(false);
}
}
function onChange() {
var selectedNum = 0;
const checkbox = document.getElementsByClassName("atme-checkbox");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked ? selectedNum++ : "";
function onChange(e) {
if(e.target.checked){
batchDeleteList.has(e.target.name)?"":setBatchDeleteList(batchDeleteList.add(e.target.name));
}else{
batchDeleteList.delete(e.target.name);
}
document.getElementById("checkAll").checked = selectedNum === checkbox.length;
setSelectedNum(selectedNum === checkbox.length ? checkbox.length : selectedNum);
batchDeleteList.size === atmeCount?setBatchDeleteCheckAll(true):"";
console.log(batchDeleteCheckedAll);
}
function onCheckAllChange(e) {
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);
// setBatchDeleteList(e.target.checked?)
setBatchDeleteCheckAll(e.target.checked);
// 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);
}
function deleteNotice() {
@ -79,24 +90,25 @@ function MyNotice(props) {
<div className="notice01">
<div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<Menu.Item key="0"><Badge count={notice_unread_count} title="">系统通知</Badge></Menu.Item>
<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="2"><Badge count={at_unread_count}>@我</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={atUnreadCount}>@我</Badge></Menu.Item>
</Menu>
<button>所有{noticeType === "0" ? "系统通知" : noticeType === "1" ? "私信" : "@我"}一键已读</button>
</div>
<div className={isBatchDelete ? "invisible " : "visible"}>
<div className="vertical-center-style">
<Checkbox onChange={(e)=>e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType==="0"?`消息（${notice_unread_count}）`:`消息（${at_unread_count}）`}</Checkbox>
<Checkbox onChange={(e)=>e.target.checked?setOnlyUnread(1):setOnlyUnread(2)}>仅看未读{noticeType === "1" ? `私信（12）` : noticeType==="0"?`消息（${noticeUnreadCount}）`:`消息（${atUnreadCount}）`}</Checkbox>
</div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</div>
<div className={isBatchDelete ? 'visible' : 'invisible'}>
<div className="vertical-center-style">
<input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
{/* <input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp; */}
<Checkbox onChange={onCheckAllChange} 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;
@ -104,7 +116,8 @@ function MyNotice(props) {
</div>
</div>
{message_list.map(item => {
<Checkbox.Group className={isBatchDelete ? '' : 'invisible_checkGroup'} onChange={onChange} value={batchDeleteList}>
{messageList.map(item => {
// 系统消息
// 消息类别
// const iconName = item.source.startsWith("Issue")?"icon-yixiuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":item.source.startsWith("Project")?"icon-daimakuicon1":
@ -127,7 +140,8 @@ function MyNotice(props) {
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} />
{/* <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>}
@ -141,7 +155,7 @@ function MyNotice(props) {
</div>
)
}
})}
})}</Checkbox.Group>
</div>
)
}

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

@ -209,4 +209,16 @@ button:active {
.float-left-little{
margin-right: 10px;
}
.invisible_checkGroup{
& .ant-checkbox-inner{
display: none;
}
}
.notice01{
& .ant-checkbox-group{
display: flex;
flex-direction: column;
}
}