index.js

import React from 'react'
import { Row, Icon, Modal, Button, Form, Input, message,notification } from 'antd'
import axios from '@src/axios'
import { API_USER_MANAGE ,API_SYS_MONITOR , API_SYS_MSG} from '@src/Api'
import { withRouter } from 'react-router-dom';
import Utils from '@src/utils/utils'
import storage from '@src/utils/localStorage'
import SYS_CONFIG from '@src/config/constant.js'
import { NavLink } from 'react-router-dom'
import './index.less'

import { connect } from 'react-redux';
import { saveMsgStatus } from '@src/redux/common/action';


const FormItem = Form.Item

class Header extends React.Component {
  state = {
    showSetting: 'none',
    userName: '',
    isShowErrInfo: 'block',
    errInfo: '',
    msgTipIcon:false,
    visible : false,
    msgTitle: '',
    msgContent: '',
    batchId: null
  }

  componentWillUnmount () {
    this.setState = (state, callback) => {
      return;
    };
    
  }
  
  getMsgContent = () =>   {
    const isOnceLogin = storage.get('isOnceLogin')
    const userInfo = storage.get('userInfo')
    if (!isOnceLogin && userInfo && userInfo.token) {
      this.getWebsocket(userInfo)

      axios.ajax({
        url: API_SYS_MSG.getSysPcMsgDetail,
        data: {
          userId: userInfo.id
        }
      }).then(res => {       
        if ( res) {
          notification.destroy();
          const title = res.messageTitle + `<br/><span style="font-size:12px;">${Utils.formateDateToYMD(res.updateTime)}</span>`
          const msgCon = res.messageContent ? res.messageContent.replace(/<\/?.+?>/g,"") : '' ;
          const msgObj = {
            title: res.messageTitle.substring(0, 10),
            msgContent: <div>
                          <div className = "msgContent">{msgCon.substring(0, 50)}...</div>
                          <div  className = "msgLink">  >>  <a  onClick = {()=>this.getMsgDetail(userInfo)} >点击查看详情</a></div>
                        </div>,
            layerTitle: <div dangerouslySetInnerHTML = {{ __html: title}}></div>,
            layerContent: <div dangerouslySetInnerHTML = {{ __html: res.messageContent}}></div>,
            batchId :  res.id          
          }          
          this.setState({
            msgTitle: msgObj.layerTitle,
            msgContent : msgObj.layerContent,
            batchId:msgObj.id
          });    

          const args = {
            message: msgObj.title,
            description: msgObj.msgContent,
            duration: 0,
            placement: 'bottomRight',
            className: 'msgTip'
          };
          notification.open(args)
          
        } 
      })
      storage.set('isOnceLogin', true)
    } 

    if ( isOnceLogin && userInfo  && userInfo.token) {      
      this.getWebsocket(userInfo)
    }    
  }
  
  getWebsocket = (userInfo) =>  {
    const url =`${SYS_CONFIG.wxApi}${API_SYS_MSG.asset}/${userInfo.id}`
    const ws = new WebSocket(url);
    const _this = this
    var msgObj = {
      title: '',
      msgContent: '',
      layerTitle: '',
      layerContent: '',
      msgId :  ''   
    }
    ws.onopen = function (e) {
     
    }
    
    ws.onmessage = function (event) {
      notification.destroy()
      if (event.data.indexOf('code') !== -1) { 
        var data = JSON.parse(event.data);
        var res = data.data;
        if (data.code === 0) {

          const msgCon = res.messageContent ? res.messageContent.replace(/<\/?.+?>/g,"") : '' ;
          const titles = res.messageTitle + `<br/><span style="font-size:12px;">${Utils.formateDateToYMD(res.updateTime)}</span>`

          msgObj = {
            title: res.messageTitle.substring(0, 10),
            msgContent: <div>
                          <div className = "msgContent">{msgCon.substring(0, 50)}...</div>
                          <div  className = "msgLink">  >>  <a  onClick = {()=> _this.getMsgDetail(userInfo)} >点击查看详情</a></div>
                        </div>,
            layerTitle: <div dangerouslySetInnerHTML = {{ __html:titles}}></div>,
            layerContent: <div dangerouslySetInnerHTML = {{ __html: res.messageContent}}></div>,
            batchId : res.batchId     
          }
          

          _this.setState({
            msgTitle: msgObj.layerTitle,
            msgContent : msgObj.layerContent,
            batchId:msgObj.batchId
          });
          const args = {
            message: msgObj.title,
            description: msgObj.msgContent,
            duration: 0,
            placement: 'bottomRight',
            className: 'msgTip'
          };   
          
          notification.open(args);
          _this.getUnReadSysPcMsgDetailCount(userInfo)
        }
      }
     
      
    }
    ws.onerror  = function(msg) { 
    };
    
  }


  

  getMsgDetail=(userInfo)=>{  
    axios.ajax({
      url: API_SYS_MSG.updateReadStatusByBatchId,
      data: {
        batchId: this.state.batchId,
        userId: userInfo.id
      }
    }).then(res => {
      this.setState({
        visible: true
      })
      notification.destroy();
      this.getUnReadSysPcMsgDetailCount(userInfo)
    }) 
  }

  getUnReadSysPcMsgDetailCount = (userInfo) =>{
    //console.log('用户信息',userInfo)
    axios.ajax({
      url: API_SYS_MSG.getUnReadSysPcMsgDetailCount,
      data: {
        userId: userInfo.id
      }
    }).then(res => {
      if(res>0){       
        this.props.saveMsgStatus(true, 'MSGSTATUS')
      } else {
        this.props.saveMsgStatus(false, 'MSGSTATUS')
      }
    }) 
  }
  componentDidMount() {
    let userInfo = storage.get('userInfo')
    if (userInfo && Object.keys(userInfo).length !== 0) {
      this.setState({
        userName: storage.get('userInfo').userName
      })
    }
    let body = document.getElementsByTagName('body')[0]
    body.onclick = (e) => {
      let setting = document.getElementById('setting')
      if (setting === e.target) {
        if (this.state.showSetting === 'none') {
          this.setState({
            showSetting: 'block'
          })
        } else {
          this.setState({
            showSetting: 'none'
          })
        }
      } else {
        this.setState({
          showSetting: 'none'
        })
      }


    }

    if (localStorage.userInfo) {
      const userInfo = JSON.parse(localStorage.userInfo)
      const url =`${SYS_CONFIG.wxApi}${API_SYS_MONITOR.websocket}?userId=${userInfo.id}`
      const ws = new WebSocket(url);
      ws.onopen = function (e) {
      }
      ws.onmessage = function (event) {
        if (event.data) {
          let data = JSON.parse(event.data)
          if (data.youAreOut) {
            message.error(data.message)
            storage.clearToken()
            window.location.href = '#/login'
          }
        }
      }
    
      // 实时消息推送
      this.getMsgContent()
      // 实时查看是否有新消息
      this.getUnReadSysPcMsgDetailCount(userInfo)
    }
  }

 

  showUpdPwd = () => {
    this.setState({
      showUpdPwd: true
    })
  }
  msgList=()=>{

  }
  logout = () => {
    notification.destroy();
    const userInfo = storage.get('userInfo')
    if(!userInfo || !userInfo.token){
      this.props.history.replace('/login');
    }

    axios.ajax({
      url: API_USER_MANAGE.logout,
    }).then(res=>{
      storage.remove('isOnceLogin')
      storage.remove('btnAuth')
    })
    this.props.history.push('/login');    
    storage.clearToken()

    
  }

  submit = async (e) => {
    e && e.preventDefault();
    let data = this.props.form.getFieldsValue();
    let userInfo = storage.get('userInfo')

    //验证表单
    let isflag = await this.checkPwd()
    //console.log(isflag);
    if(!isflag){
      return
    }
    let confPass = await this.confPass()
    //console.log(confPass)

    if(isflag && confPass){
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          //console.log(data);
          axios.ajax({
            url: API_USER_MANAGE.updPassword,
            data: {
              ...data,
              userId: userInfo.id
            }
          }).then(res => {
            if (res) {
              message.success('修改成功');
              this.setState({
                showUpdPwd: false,
                isShowErrInfo:'none'
              })
              // console.log(this.);
              storage.clear()
              this.props.history.push('/login');
            }
          })
        }
      });
    }
    
  }

  checkPwd = () => {
    const data = this.props.form.getFieldsValue()
    const { origPass, confPass, password } = data
    //console.log(data);
    return new Promise((resolve,reject)=>{
      if (!origPass || origPass.replace(/^\s+|\s+$/g, '') === '') {
        this.setState({
          isShowErrInfo: 'block',
          errInfo: '请输入原密码'
        })
        resolve(false)
        return false
      }
  
      if (!password || password.replace(/^\s+|\s+$/g, '') === '') {
        this.setState({
          isShowErrInfo: 'block',
          errInfo: '请输入新密码'
        })
        resolve(false)
        return false
      }
  
      if (!confPass || confPass.replace(/^\s+|\s+$/g, '') === '') {
        this.setState({
          isShowErrInfo: 'block',
          errInfo: '请输入确认密码'
        })
        resolve(false)
        return false
      }
      
  
      if (password !== confPass) {
        this.setState({
          isShowErrInfo: 'block',
          errInfo: '密码不一致'
        })
        resolve(false)
        return false
      }
  
      resolve(true)
    })
    
  }

  password =(e)=>{
    const userInfo = this.props.form.getFieldsValue()
    const {   confPass, password } = userInfo
    //console.log(e)
    if (e && e.keyCode === 32 && password) {
      this.props.form.setFieldsValue({ password: password.replace(/^\s+|\s+$/g, '') })
    }
    if(!confPass || confPass.replace(/^\s+|\s+$/g, '') === ''){
      return false
    }
    if (password !== confPass) {
      this.setState({
        isShowErrInfo: 'block',
        errInfo: '密码不一致'
      })
      return false
    }else{
      this.setState({
        isShowErrInfo: 'none',
      })
      return true
    }
  }

  //确认密码
  confPass = (e)=>{
    const data = this.props.form.getFieldsValue()
    const {confPass, password } = data
    //console.log(e)
    if (e && e.keyCode === 32 && confPass) {
      this.props.form.setFieldsValue({ confPass: confPass.replace(/^\s+|\s+$/g, '') })
    }
    if (password !== confPass) {
      this.setState({
        isShowErrInfo: 'block',
        errInfo: '密码不一致'
      })
      return false
    }else{
      this.setState({
        isShowErrInfo: 'none',
      })
      return true
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { isShowErrInfo, errInfo } = this.state
    const formItemLayout = {
      labelCol: {
        xs: 24,
        sm: 8
      },
      wrapperCol: {
        xs: 24,
        sm: 16
      }
    }
    return (
      <div className='header'>
        <Row>
          <div className='banner'>
            <img src={require('../../resource/assets/images/banner.jpg')} alt="" />
            <span className='title'>保险业务核心系统</span>
            <div   className='login'>
              <img src={require('../../resource/assets/images/login.svg')} alt="" />
              <span className="userName">{this.state.userName}</span>
            </div>
            <NavLink replace to={'/home/msgpush/msgList'} className='message'>
              <div className="msgTipCircle">
                   {this.props.msgStatus ?<i className="circle"></i>:''}
                   <img src={require('../../resource/assets/images/notice.svg')} alt="" />
               </div>
              <span className="userName">
                系统通知
              </span>
              <div id='setMsg'  ></div>
            </NavLink>
            <div onClick={this.setting} className='logout'>
              <img src={require('../../resource/assets/images/setting.svg')} alt="" />
              <span className="userName">系统设置</span>
              <div id='setting'  ></div>
            </div>
            <div className="setting" style={{ display: this.state.showSetting }} >
              <div onClick={this.showUpdPwd} className="lock" ><i className={` iconfont icon-xiugaimima01 `} ></i> 修改密码</div>
              <div onClick={this.logout}  ><i className={`updPwd iconfont icon-tuichu `} ></i> 退出登录</div>
            </div>
          </div>
        </Row>

        <Modal
          title="修改密码"
          visible={this.state.showUpdPwd}
          width={600}
          onCancel={() => {
            this.props.form.resetFields()
            this.setState({
              showUpdPwd: false,
              isShowErrInfo:'none'
            })
          }}
          footer={
            <Button onClick={this.submit} style={{ width: 400, margin: '0 auto', display: 'block' }} type="primary" className="confirmBtn">提交</Button>
          }
        >
          <Form layout="inline" >
            <FormItem style={{ width: '80%' }} label="原密码" {...formItemLayout} >
              {
                getFieldDecorator('origPass', {

                })(
                  <Input  onKeyUp={(e) => { Utils.filterSpace(e, 'origPass',this) }}  type='password' placeholder="请输入原密码" />
                )
              }
            </FormItem>
            <FormItem style={{ width: '80%' }} label="新密码" {...formItemLayout} >
              {
                getFieldDecorator('password', {

                })(
                  <Input  onKeyUp={this.password} type='password' placeholder="请输入新密码" />
                )
              }
            </FormItem>
            <FormItem style={{ width: '80%' }} label="确认密码" {...formItemLayout} >
              {
                getFieldDecorator('confPass', {
                  // rules: [{ validator: this.checkPwd }]
                })(
                  <Input onKeyUp={this.confPass} type='password' style={{ width: '100%' }} placeholder="请再次确认密码" />
                )
              }
              <div className="errInfo" style={{ display: isShowErrInfo }} >{errInfo}</div>
            </FormItem>
          </Form>
        </Modal>
        <Modal
            className="msgDetailModal"
            title="Basic Modal"
            visible={this.state.visible}
            footer = {null}
            title = {this.state.msgTitle}
            width = {800}
            onCancel = { ()=> {
              this.setState({visible: false})
            }}
          >
            {this.state.msgContent}
          </Modal>
      </div>
    )
  }
}

export default withRouter( connect(state => ({
  msgStatus: state.msgStatus
}), {
  saveMsgStatus, 
})(Form.create()(Header)))