通知中心

2021-09-13 14:25:52 +08:00 · 2021-09-13 14:25:52 +08:00 · f30903072e
parent dabe7d6551
commit f30903072e
2 changed files with 80 additions and 62 deletions
--- a/src/forge/SecuritySetting/notice/myNotice/Index.jsx
+++ b/src/forge/SecuritySetting/notice/myNotice/Index.jsx
@ -9,28 +9,28 @@ 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 [batchDeleteCheckedAll, setBatchDeleteCheckAll] = useState(false);//@我批量删除--全选
+  const [batchDeleteList, setBatchDeleteList] = useState([]);//@我批量删除--选中
+  const [atmeList, setAtmeList] = useState([]);

  const [noticeUnreadCount, setNoticeUnreadCount] = useState();//未读系统通知数量
  const [letterUnreadCount, setLetterUnreadCount] = useState(0);//未读私信数量
  const [atUnreadCount, setAtUnreadCount] = useState();//未读@我数量
  const [messageList, setMessageList] = useState([]);
-  const [onlyUnread,setOnlyUnread] = useState();
+  const [onlyUnread, setOnlyUnread] = useState();

  useEffect(() => {
    const params = {
-      type:noticeType==="0"?"notification":noticeType==="2"?"atme":"",
-      status:onlyUnread?onlyUnread:"",
+      type: noticeType === "0" ? "notification" : noticeType === "2" ? "atme" : "",
+      status: onlyUnread ? onlyUnread : "",
      limit: 20,
      page: 0,
    }
    getMessageList(params);
-  }, [noticeType,onlyUnread])
+  }, [noticeType, onlyUnread])

  function getMessageList(params) {
    Axios.get(`/users/yystopf/messages.json`, {
@ -40,11 +40,13 @@ function MyNotice(props) {
      setAtUnreadCount(response.data.unread_atme);
      setMessageList(response.data.messages);
    })
-    var count = 0;
-    messageList.map(item=>{
-      item.type==="atme"?count++:"";
+    console.log(messageList);
+    const atmeList = new Array();
+    messageList.map(item => {
+      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">
@ -99,7 +116,7 @@ function MyNotice(props) {

      <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"?`消息（${noticeUnreadCount}）`:`消息（${atUnreadCount}）`}</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>
@ -107,7 +124,7 @@ 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>
+          <Checkbox onChange={onCheckAllChange} checked={batchDeleteCheckedAll}>全选</Checkbox>
          &nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
        </div>
        <div>
@ -117,45 +134,45 @@ function MyNotice(props) {
      </div>

      <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":
-        if(noticeType ==="0" && item.type === "notification"){
-          return(
-            <div className="mynotice-content vertical-center-style" key={item.id}>
-              <div className="mynotice-cont vertical-center-style">
-                {item.status === 1? <Badge color="#FA2020" />:<span className="system-notice-blank"></span>}
-                <i className="iconfont icon-yixiuicon1"></i>
-                <span className="sysNotice-length highlightSpan" onClick={()=>window.location.href=(`${item.notification_url}`)}>{item.content}</span>
+        {messageList.map(item => {
+          // 系统消息
+          // 消息类别
+          // 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") {
+            return (
+              <div className="mynotice-content vertical-center-style" key={item.id}>
+                <div className="mynotice-cont vertical-center-style">
+                  {item.status === 1 ? <Badge color="#FA2020" /> : <span className="system-notice-blank"></span>}
+                  <i className="iconfont icon-yixiuicon1"></i>
+                  <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 className="mynotice-cont vertical-center-style float-left-little">
-                <span className="timeSpan">{item.time_ago}</span>
-                <a>标记为已读</a>
+            )
+          } else if (noticeType === "2" && item.type === "atme") {
+            //@我
+            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>
-          )
-        } else if(noticeType ==="2" && item.type === "atme"){
-          //@我
-          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>
+            )
+          }
+        })}</Checkbox.Group>
    </div>
  )
 }
--- a/src/forge/SecuritySetting/notice/myNotice/Index.scss
+++ b/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{