msgList.js

import React,{Component} from 'react';
import './style.less';
import {List, Checkbox, Icon,  message, Button , Modal, notification } from 'antd';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import { API_SYS_MSG } from '@src/Api';
import Storage from '@src/utils/localStorage'
import UserManageBar from '@components/Common/WhiteBar/index'
import { connect } from 'react-redux';
import { saveMsgStatus } from '@src/redux/common/action';


/* 消息推送 */
class MsgList extends Component {
  state = {
    checkedList: [],
    indeterminate: false,
    checkAll: false,

    detailStatus: [],
    listData: [],
    btnAuth: []
	}
	// 查询页数和数量配置
	params = {
	    pageNum: 1,
	    pageSize: 10
  }

  plainOptions = [];

  componentWillMount () {
    this.getMsgList()

    let btnAuth = Storage.get('btnAuth')
    this.setState({btnAuth})
  }

  // 获取消息list 列表
  getMsgList() {    
    notification.destroy() 
    this.setState({ loading: true, checkedList: [] })
    const userInfo = Storage.get('userInfo')
    const _this = this
    axios.ajax({
      url: API_SYS_MSG.getSysPcMsgDetailListByCondition,
      data: {
        userId: userInfo ? userInfo.id : '',
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize
      }
    }).then(res => {
      // 头部消息状态
      this.getMsgStatus()

      if(res.records.length > 0) {
        const listData = res.records

        this.plainOptions= []
        for( let i in listData) {
         this.plainOptions.push(listData[i].id)
        }

        this.setState({
          listData,
          indeterminate: false,
          checkedList: [],
          checkAll: false,
          pagination: Utils.pagination(res, (current) => {
            _this.params.pageNum = current;
            _this.setState({
              checkedList: []
            })
            _this.getMsgList();
          })
        })

       
        
      } else {

        const current = this.params.pageNum
        if (current > 1) {
         this.params.pageNum = current - 1;
         this.getMsgList();         
         return 
        }

        this.setState({
          listData: [],
          indeterminate: false,
          checkedList: [],
          checkAll: false,
          pagination: Utils.pagination(res, (current) => {
            _this.params.pageNum = current;
            _this.getMsgList();
          })
        })
        this.plainOptions = []
      }
    
    })
  }

  // 获取头部消息是否点亮红色的标记
  getMsgStatus() {
   const userInfo = Storage.get('userInfo')
   if (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')
      }
    }) 
   }    
  }
    
  onChange = (checkedList) =>{
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < this.plainOptions.length),
      checkAll: checkedList.length === this.plainOptions.length,
    });
  }

  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? this.plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  }


  setDetailStatus = (e, item)=> { 
    const { detailStatus , listData} = this.state;

    if (item.readStatus === 1) {
      axios.ajax({
        url: API_SYS_MSG.updateReadStatus,
        data: { ids: item.id }
      }).then( res => {
        this.getMsgStatus();         
      })
    }

    if(detailStatus.indexOf(item.id) === -1) {
      detailStatus.push(item.id) 
    }else {
      this.collectList(e, item)
    }    

    const data = listData.map( (items, index) => {
      if (items.id === item.id) {
        return Object.assign({}, items, {readStatus:2})
      } else {
        return items
      }
    })

    this.setState({
      detailStatus: detailStatus,
      listData: data
    })

  }

  collectList = (e, item) => {
    const { detailStatus } = this.state;
    const index = detailStatus.indexOf(item.id)
    if (index > -1) {
      detailStatus.splice(index, 1);
    }
    this.setState({
      detailStatus: detailStatus
    })
  }

  

  setMsgRead = ()=>{
    const data = this.state.checkedList
    if (data.length === 0) {
      message.warn('请选择要设置的消息')
      return
    }
    Modal.confirm({
      title: '设置已读',
      content: `您要把选中的设为已读？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        let readerStr = ''
        for(let item in data) {         
          readerStr += data[item] + ','
        }
        axios.ajax({
          url: API_SYS_MSG.updateReadStatus,
          data: { ids: readerStr.substring(0, readerStr.lastIndexOf(',')) }
        }).then(res => {
          message.success('操作成功')
          this.getMsgList();
        })
            
      }
    })
  }

  // 消息列表删除
  msgDelete = (e, item)=>{
    Modal.confirm({
      title: '删除',
      content: `您要删除选中的消息？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        if (item) {         
          axios.ajax({
            url: API_SYS_MSG.deleteSysPcMsgDetail,
            data: { ids: item.id }
          }).then(res => {
            message.success('删除成功')
            this.getMsgList();
          })
        } else {
          message.warn('请选择要删除的消息')
        }        
      }
    })
  }
  // 选中删除
  msgBatchDelete = ()=>{
    const data = this.state.checkedList
    if (data.length === 0) {
      message.warn('请选择要删除的消息')
      return
    }

    Modal.confirm({
      title: '删除',
      content: `您要删除选中的消息？`,
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        let deleteStr = ''        
       
        for(let item in data) {         
          deleteStr += data[item] + ','
        }
        axios.ajax({
          url: API_SYS_MSG.deleteSysPcMsgDetail,
          data: { ids: deleteStr.substring(0, deleteStr.lastIndexOf(',')) }
        }).then(res => {
          message.success('删除成功')
          this.getMsgList();
        })
             
      }
    })

  }

	render () {
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );
		return (
      <div className="msgList">
        <UserManageBar title="系统通知" />
        <div className = "msgListWrap">
          <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
              <List
              itemLayout="vertical"
              size="large"
              pagination={this.state.pagination}
              dataSource={this.state.listData}
              renderItem={item => (
                <List.Item className = "msgListItem">
                  <Checkbox value= {item.id} >
                  </Checkbox>
                  {/* <List.Item.Meta
                    title={<a onClick = {(e) => this.setDetailStatus(e,  item)}>
                    { item.readStatus === 1 ? < i className="circle msgCircle"></i> : ''}
                    {item.messageTitle}</a>
                    }
                    className = "msgTitle"
                  > 
                  </List.Item.Meta>    */}
                  <div  className = "msgTitle">
                   <a onClick = {(e) => this.setDetailStatus(e,  item)}>
                    { item.readStatus === 1 ? < i className="circle msgCircle"></i> : ''}
                    {item.messageTitle}
                   </a>
                  </div>
                        
                  {
                    this.state.btnAuth.indexOf('msgList-delete') !== -1 ? 
                    <div className = "msgDeleteIcon"  onClick = {(e) => this.msgDelete(e,  item)} >
                      <Icon type="delete" theme="outlined" /> 
                    </div>  : ''
                  }                        
                  {
                    this.state.detailStatus.indexOf(item.id) !== -1 ?
                    <div className= "msgContent">
                      <span> <i className="iconfont icon-xiaoxi"></i> { Utils.formateDateToYMD(item.updateTime) } </span>
                      <div dangerouslySetInnerHTML = {{ __html: item.messageContent}}></div>
                      <div className = "msgUpOpt" >
                      <i className="iconfont icon-jiantou_yemian_xiangxia_o" onClick = {(e) => this.collectList(e,  item)}></i>
                      </div>
                    </div> : ''
                  }              
                </List.Item>

                
              )}
            />
          </Checkbox.Group>
        </div>
      <div className="msgOptWrap">
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            全选
          </Checkbox>
          {
            this.state.btnAuth.indexOf('msgList-all-reader') !== -1 ? 
            <Button className="marginR10" onClick= {()=> this.setMsgRead()}>
              标记已读
            </Button> : ''
          }
          {
            this.state.btnAuth.indexOf('msgList-all-delete') !== -1 ? 
              <Button className="marginR10" onClick= {()=> this.msgBatchDelete()}>
                删除
              </Button> : ''
          }
          
         
      </div>
    </div>
				
		);
	}
}

export default connect(state => ({
  msgStatus: state.msgStatus
}), {
  saveMsgStatus, 
})(MsgList)