通知中心

src/forge/SecuritySetting/notice/myNotice/Index.jsx

@@ -9,12 +9,12 @@ import { CheckboxGroup } from 'rsuite';
 
 function MyNotice(props) {
 
-  const [noticeType, setNoticeType] = useState("2");//消息类别tab栏选择
+  const [noticeType, setNoticeType] = useState("0");//消息类别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 [batchDeleteList, setBatchDeleteList] = useState([]);//@我批量删除--选中
+  const [atmeList, setAtmeList] = useState([]);
 
   const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
   const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
@@ -40,11 +40,13 @@ function MyNotice(props) {
       setAtUnreadCount(response.data.unread_atme);
       setMessageList(response.data.messages);
     })
-    var count = 0;
+    console.log(messageList);
+    const atmeList = new Array();
     messageList.map(item => {
-      item.type==="atme"?count++:"";
+      item.type === "atme" ? atmeList.push(item.id.toString()) : "";
     })
-    setAtmeCount(count);
+    setAtmeList(atmeList);
+    console.log(atmeList);
   }
 
   function handleClick(e) {
@@ -54,20 +56,21 @@ function MyNotice(props) {
     }
   }
 
-  function onChange(e) {
-    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(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 onCheckAllChange(e) {
-    // setBatchDeleteList(e.target.checked?)
     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;
@@ -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 (
     <div className="notice01">
       <div className="sshHead">
@@ -130,8 +147,8 @@ function MyNotice(props) {
                   <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="timeSpan">{item.time_ago}</span>
-                <a>标记为已读</a>
+                  <span className={item.status === 1?"timeSpan":""}>{item.time_ago}</span>
+                  {item.status === 1 && <span className="invisable-read" onClick={readNotice(item.id)}>标记为已读</span>}
                 </div>
               </div>
             )
@@ -141,7 +158,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"></Checkbox>
+                  <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>}

src/forge/SecuritySetting/notice/myNotice/Index.scss

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