2024-11-13

king

2024-11-13 c75f0c4f74701911e4e00e7b3fca7a269beaedd6

2024-11-13

 src/components/header/sysmessage/icon.jsx

@@ -1,13 +1,14 @@
import React, { Component } from 'react'
import { notification } from 'antd'
import { MessageFilled } from '@ant-design/icons'
import moment from 'moment'

import Api from '@/api'
import MKEmitter from '@/utils/events.js'

class SysIcon extends Component {
  state = {
    notices: []
    notices: null
  }

  componentDidMount () {
@@ -18,15 +19,60 @@

  getMsgList = () => {
    let param = {
      func: 's_get_kei'
      func: 's_get_unread_oa_mail_v1'
    }

    Api.getSystemConfig(param).then(result => {
    Api.genericInterface(param).then(result => {
      if (result.status) {
        let notices = result.data || []
        notices.forEach(item => {
          let time = new Date(item.submitdate).getTime()
          let _val = item.submitdate
          if (!isNaN(time)) {
            time = parseInt(time / 60000)                                     // 时间值
            let now = parseInt(new Date().getTime() / 60000)                  // 当前时间值
            let start = new Date(new Date().toDateString()).getTime() / 60000 // 今天零点时间值
            let split = now - time

            if (split < 0) { // 时间值在当前时间之后
              _val = moment(_val).format('MM月DD日 HH:mm')
            } else if (split < 3) {
              _val = '刚刚'
            } else if (split < 5) {
              _val = '3分钟前'
            } else if (split < 10) {
              _val = '5分钟前'
            } else if (split < 20) {
              _val = '10分钟前'
            } else if (split < 30) {
              _val = '20分钟前'
            } else if (split < 60) {
              _val = '30分钟前'
            } else if (split < 420 || time > start) { // 7小时内或时间值在今天零点后
              _val = parseInt(split / 60) + '小时前'
            } else {                                  // 时间值在今天零点之前
              let _day = parseInt((start - time) / (24 * 60)) + 1
              if (_day === 1) {
                _val = '昨天'
              } else if (_day <= 30) {
                _val = _day + '天前'
              } else {
                _val = moment(_val).format('MM月DD日 HH:mm')
              }
            }
          }
          item.time = _val
        })

        this.setState({ notices })
        MKEmitter.emit('sysMessageChange', notices)

        MKEmitter.emit('sysMessageChange', notices.slice(0, 5))

        if (notices.length > 0) {
          setTimeout(() => {
            MKEmitter.emit('sysMessageOpen')
          }, 50)
        }

        setTimeout(() => {
          this.getMsgList()
@@ -42,12 +88,35 @@
  }

  open = () => {
    const { notices } = this.state

    if (notices.length === 0) {
      this.toMenu()
    } else {
    MKEmitter.emit('sysMessageOpen')
    }
  }

  toMenu = () => {
    let menu = {
      MenuID: '1731250110643ivgpv9gdgiif5lggh4e',
      MenuName: '内部邮箱',
      type: 'CustomPage',
      param: {$BID: ''}
    }

    if (window.GLOB.mkThdMenus.has(menu.MenuID)) {
      menu.MenuName = window.GLOB.mkThdMenus.get(menu.MenuID).MenuName
    }

    MKEmitter.emit('modifyTabs', menu)
  }

  render() {
    const { notices } = this.state

    if (!notices) return null
    
    return (
      <MessageFilled className="mk-msg-icon" data-title={notices.length ? notices.length : ''} onClick={this.open} />
    )

 src/components/header/sysmessage/index.jsx

@@ -36,20 +36,39 @@
    this.setState({ visible: false })
  }

  toMenu = () => {
    let menu = {
      MenuID: '1731250110643ivgpv9gdgiif5lggh4e',
      MenuName: '内部邮箱',
      type: 'CustomPage',
      param: {$BID: ''}
    }

    if (window.GLOB.mkThdMenus.has(menu.MenuID)) {
      menu.MenuName = window.GLOB.mkThdMenus.get(menu.MenuID).MenuName
    }

    MKEmitter.emit('modifyTabs', menu)

    this.setState({ visible: false })
  }

  render() {
    const { visible, notices } = this.state

    return (
      <div className={'mk-msg-wrap' + (visible ? ' visible' : '')}>
        <div className="title">
          系统消息
          消息盒子
          <CloseOutlined onClick={this.close}/>
        </div>
        <div className="msg-list">{notices.map((item, index) => {
          return <div className="msg-item" key={index}>
            {item.remark}
          return <div className="msg-item" key={index} onClick={this.toMenu}>
            <span>{item.createstaff}</span><span className="time">{item.time}</span>
            <span>{item.title}</span>
          </div>
        })}</div>
        <span className="jump" onClick={this.toMenu}>详情&nbsp;&nbsp;&gt;</span>
      </div>
    )
  }

 src/components/header/sysmessage/index.scss

@@ -34,15 +34,14 @@
}
.mk-msg-wrap {
  position: fixed;
  width: 200px;
  height: 400px;
  top: 92px;
  right: 15px;
  width: 300px;
  top: 50px;
  right: 120px;
  z-index: -1;
  opacity: 0;
  padding: 10px;
  padding: 10px 10px 30px;
  font-size: 13px;
  background-color: #fff;
  background-color: #000000;
  background-clip: padding-box;
  color: rgba(0, 0, 0, 0.85);
  border: 0;
@@ -53,28 +52,54 @@
  transition: all 0.2s;

  .title {
    text-align: center;
    position: relative;
    text-align: left;
    font-size: 14px;
    height: 20px;
    color: #ffffff;

    .anticon-close {
      position: absolute;
      right: 10px;
      color: rgba(0, 0, 0, 0.45);
      right: 5px;
      color: #ffffff;
      cursor: pointer;
      transition: color 0.2s;
    }
    .anticon-close:hover {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .msg-list {
    .msg-item {
      height: 80px;
      background: rgba(0, 0, 0, 0.05);
      position: relative;
      height: 55px;
      background: #e8e8e8;
      margin: 10px 0px;
      padding: 5px;
      border-radius: 2px;
      padding: 8px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      span {
        display: block;
    }
  }
    .time {
      position: absolute;
      top: 5px;
      right: 8px;
      font-size: 13px;
    }
  }

  .jump {
    position: absolute;
    right: 15px;
    bottom: 12px;
    font-size: 14px;
    cursor: pointer;
    color: var(--mk-sys-color1);
    transition: color 0.2s;
  }
  .jump:hover {
    color: #ffffff;
  }
}
.mk-msg-wrap.visible {
  z-index: 3000;