forked from huge/frontEnd/hugeOA

liyj
2020-09-07 f7e9b835c30e5b3287b2c04e24950871cafa907d
src/components/common/NotifyList/index.jsx
@@ -6,7 +6,8 @@
/** 通知列表 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Alert } from 'antd';
import { Alert, Tooltip } from 'antd';
import fetch from '../../../api/request';
import './index.scss';
@@ -16,30 +17,78 @@
    this.config = {
    };
    this.state = {
      notice: null
    };
  }
  componentWillMount() { }
  componentWillMount() {
    fetch({
      url: `api/document/getNewNotice`
    }).then(res => {
      if (res) {
        this.setState({
          notice: res
          // documentTitle: res.documentTitle || ''
        })
      }
    })
  }
  componentDidMount() { }
  emoveTAG = (str) => {
    return str.replace(/<[^>]+>/g, "");
  }
  onClick = () => {
    this.props.history.push({ pathname: "/index/workbench/announcement" });
  }
  onMouseOut = () => {
    this.refs.marquee.start();
  }
  onMouseOver = () => {
    this.refs.marquee.stop();
  }
  linkDetail = (id) => {
    this.props.history.push({ pathname: `/document/detail/${id}` });
  }
  renderDom = () => {
    let { notice } = this.state;
    return <div className="notify-list-main-dom">
      <span className="notify-list-main-dom-msg">最新通知:公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容</span>
      <span className="notify-list-main-dom-fuc">[查看全部]</span>
      <div className="notify-list-main-dom-msg">最新通知:
        <div className="notify-list-main-dom-msg-title" onClick={() => { notice.id && this.linkDetail(notice.id) }}>
          <marquee onMouseOut={this.onMouseOut} onMouseOver={this.onMouseOver} ref='marquee' style={{ cursor: 'pointer' }}>{notice.documentTitle || ''}</marquee>
        </div>
        {/* {
          notice.documentContent ? <Tooltip placement='topLeft' title={this.emoveTAG(notice.documentContent)}>
            <div className="notify-list-main-dom-msg-content" onClick={() => { notice.id && this.linkDetail(notice.id) }}>{this.emoveTAG(notice.documentContent)}</div>
          </Tooltip> : null
        } */}
      </div>
      <div className="notify-list-main-dom-fuc" onClick={this.onClick}>[查看全部]</div>
    </div>
  }
  render() {
    let { notice } = this.state;
    return (
      <div className="notify-list-main">
        <Alert
          // message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          message={this.renderDom()}
          type="warning"
          closable={false}
        // onClose={onClose}
        />
        {
          notice &&
          <Alert
            // message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
            message={this.renderDom()}
            type="warning"
            closable={false}
          />
        }
      </div>
    )
  }