forgeplus-react/src/forge/SecuritySetting/notice/myNotice/Index.jsx

import React, { useState, useEffect } from 'react';
import { Badge, Button, Checkbox, Menu } from 'antd';
import './Index.scss';
import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun';

function MyNotice(props) {

  const [noticeType, setNoticeType] = useState("1");
  const [selectedNum, setSelectedNum] = React.useState(0);
  const [isBatchDelete, setIsBatchDelete] = useState(false);

  function handleClick(e) {
    setNoticeType(e.key);
    if (e.key != "2") {
      setIsBatchDelete(false);
    }
  }

  function onChange() {
    var selectedNum = 0;
    const checkbox = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked ? selectedNum++ : "";
    }
    document.getElementById("checkAll").checked = selectedNum === checkbox.length;
    setSelectedNum(selectedNum === checkbox.length ? checkbox.length : selectedNum);
  }


  function onCheckAllChange(e) {
    const checkbox = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = e.target.checked;
    }
    setSelectedNum(e.target.checked ? checkbox.length : 0);
  }

  function deleteNotice() {
    DelModal({
      title: noticeType === "1" ? '删除私信' : '删除与我相关',
      contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : selectedNum === 0 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
      content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : selectedNum === 0 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
      onOk: () => {

      }
    });
  }

  return (
    <div className="notice01">
      <div className="sshHead">
        <Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
          <Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
          <Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
          <Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
        </Menu>
        <button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
      </div>

      <div className={isBatchDelete ? "invisible " : "visible"}>
        <div className="vertical-center-style">
          {/* <input type="checkbox"></input>&nbsp;
          仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
          <Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</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;项
        </div>
        <div>
          <button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
          <button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
        </div>
      </div>

      {noticeType === "1" ?
        <div className="mynotice-content vertical-center-style" onClick={() => props.history.push('/settings/notice/privateLetter')}>
          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
          <div className="private-letter-right">
            <div>
              <span>蒋宇航</span>
              <span className="timeSpan">4分钟前</span>
              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
              <span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
            </div>
          </div>
        </div>
        : <div className="mynotice-content vertical-center-style">
          <div className="mynotice-cont vertical-center-style">
            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
            {/* 系统通知 */}
            {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
            {noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
            {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
          </div>
          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">4分钟前</span>
            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
          </div>
        </div>}

      {noticeType === "1" ?
        <div className="mynotice-content vertical-center-style">
          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
          <div className="private-letter-right">
            <div>
              <span>段甲生</span>
              <span className="timeSpan">5分钟前</span>
              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
              <span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
            </div>
          </div>
        </div>
        : <div className="mynotice-content vertical-center-style">
          <div className="mynotice-cont vertical-center-style">
            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
            {/* 系统通知 */}
            {noticeType === "0" ? <Badge color="#FA2020" /> : ""}
            {noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
            {noticeType === "2" ? <Badge color="#FA2020" /> : ""}
            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
          </div>
          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">10分钟前</span>
            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
          </div>
        </div>}

      {noticeType === "1" ?
        <div className="mynotice-content vertical-center-style">
          <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
          <div className="private-letter-right">
            <div>
              <span>巴拉迪维</span>
              <span className="timeSpan">7分钟前</span>
              <a onClick={deleteNotice}>删除</a>
            </div>
            <div>
              <span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
            </div>
          </div>
        </div>
        : <div className="mynotice-content vertical-center-style">
          <div className="mynotice-cont vertical-center-style">
            <input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
            {/* 系统通知 */}
            {noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""}
            {noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
            {noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
            <span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
          </div>
          <div className="mynotice-cont vertical-center-style">
            <span className="timeSpan">1小时前</span>
            <a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
          </div>
        </div>}
    </div>
  )
}
export default MyNotice;