king
2023-07-12 f724c64b419f148985c0bd5a1153e3fc7d84b9e6
src/tabviews/custom/components/calendar/board/index.jsx
@@ -1,10 +1,11 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Select, Radio, Row, Col } from 'antd'
import { Select, Radio, Row, Col, Popover, Badge } from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'
import MKEmitter from '@/utils/events.js'
import './index.scss'
const { Option } = Select
@@ -55,16 +56,53 @@
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
    const { datelist } = this.state
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      this.setState({
        levels: nextProps.config.wrap.levels,
        level: nextProps.config.wrap.levels[0]
        datelist: this.mountdata(datelist, nextProps.data)
      })
    }
  }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }
  mountdata = (datelist, data) => {
    return fromJS(datelist).toJS().map(month => {
      month.subData = []
      data.forEach(item => {
        if (item.$startM <= month.time && item.$endM >= month.time) {
          month.subData.push(item)
        }
      })
      month.children = month.children.map(week => {
        week.children = week.children.map(day => {
          if (day.$disable) return day
          day.subData = []
          day.style = null
          day.$level = 100
          data.forEach(item => {
            if (item.$start <= day.time && item.$end >= day.time) {
              day.subData.push(item)
              if (!day.style) {
                day.style = item.$style
                day.$level = item.$level
              } else if (item.$level < day.$level) {
                day.style = item.$style
                day.$level = item.$level
              }
            }
          })
          return day
        })
        return week
      })
      return month
    })
  }
  getNongLi = (nyear, nmonth, nday, week) => {
@@ -307,7 +345,7 @@
  
          let item = {
            day: _day,
            time: times[0] + times[1] + _day,
            time: +(times[0] + times[1] + _day),
            label: _day,
            subData: [],
            $disable: true,
@@ -323,7 +361,7 @@
        let item = {
          day: _day,
          time: selectYear + month + _day,
          time: +(selectYear + month + _day),
          label: i,
          subData: [],
          ...nl
@@ -348,7 +386,7 @@
  
        let item = {
          day: _day,
          time: times[0] + times[1] + _day,
          time: +(times[0] + times[1] + _day),
          label: i,
          subData: [],
          $disable: true,
@@ -366,7 +404,7 @@
      datelist.push({
        month: month,
        time: selectYear + month,
        time: +(selectYear + month),
        label: monthName[month],
        children: _weeklist,
        subData: []
@@ -381,11 +419,19 @@
  }
  yearChange = (value) => {
    const { data } = this.props
    const { selectMonth } = this.state
    let datelist = this.getDateList(value)
    if (data.length > 0) {
      datelist = this.mountdata(datelist, data)
    }
    let monthlist = datelist.filter(item => item.month === selectMonth)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable)
    this.setState({ selectYear: value, datelist, monthlist })
    this.props.yearChange(value)
  }
  monthChange = (value) => {
@@ -402,12 +448,86 @@
    })
  }
  triggerDay = (d) => {
    const { config } = this.props
    if (!config.setting.linkbtn) return
    let id = d.time + ''
    id = id.substr(0, 4) + '-' + id.substr(4, 2) + '-' + id.substr(6)
    MKEmitter.emit('triggerBtnId', config.setting.linkbtn, [{$$uuid: id}])
  }
  openView = (data, e) => {
    const { config } = this.props
    if (!config.wrap.click) return
    e && e.stopPropagation()
    if (config.wrap.click === 'menus') {
      let menu = null
      if (config.wrap.menus && config.wrap.menus.length > 0) {
        let s = data[config.wrap.menuType] + ''
        config.wrap.menus.forEach(m => {
          if (s !== m.sign) return
          menu = m
        })
      }
      if (!menu) return
      let newtab = {
        MenuID: menu.MenuID,
        MenuName: menu.MenuName,
        MenuNo: menu.MenuNo || '',
        type: menu.tabType,
        param: {$BID: data.$$uuid || ''}
      }
      Object.keys(data).forEach(key => {
        if (/^\$/.test(key)) return
        newtab.param[key] = data[key]
      })
      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (config.wrap.click === 'menu') {
      let menuId = config.wrap.MenuID || config.wrap.menu.slice(-1)[0]
      let menu = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]
      if (!menu && config.wrap.MenuName && config.wrap.tabType) {
        menu = {
          MenuID: menuId,
          MenuName: config.wrap.MenuName,
          MenuNo: config.wrap.MenuNo || '',
          type: config.wrap.tabType
        }
      }
      if (!menu) return
      let newtab = {
        ...menu,
        param: {$BID: data.$$uuid || ''}
      }
      Object.keys(data).forEach(key => {
        if (/^\$/.test(key)) return
        newtab.param[key] = data[key]
      })
      MKEmitter.emit('modifyTabs', newtab, true)
    }
  }
  render() {
    const { config } = this.props
    const { level, selectYear, selectMonth, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月', year: '年'}
    return (
      <div className="mk-calendar">
      <div className={'mk-calendar' + (config.setting.linkbtn ? ' open-pop' : '') + (config.wrap.click ? ' open-menu' : '')}>
        <div className="mk-calendar-control">
          <Select value={selectYear} onChange={this.yearChange}>
            {yearlist.map(item => (<Option key={item} value={item}>{item}年</Option>))}
@@ -448,8 +568,23 @@
                      <tr key={m}>
                        {cell.children.map((d, i) => (
                          <td key={i}>
                            <div className={'day-wrap' + (d.$disable ? ' disabled' : '')}>
                              {d.label}
                            <div style={d.style} className={'day-wrap' + (d.$disable ? ' disabled' : '')} onClick={() => !d.$disable && this.triggerDay(d)}>
                              {d.subData.length > 0 ? <Popover mouseEnterDelay={0.3} overlayClassName={'calendar-day-pop' + (config.wrap.click ? ' open-menu' : '')} content={
                                <div onClick={(e) => e.stopPropagation()}>
                                  {d.subData.map((data, index) => (
                                    <div key={index} className="message" onClick={() => this.openView(data)}>
                                      <Badge color={data.$color} text={
                                        <span>
                                          {data.$message}
                                          <span style={{color: 'rgba(0,0,0,.45)'}}>({data.$startTime + ' ~ ' + data.$endTime})</span>
                                        </span>}
                                      />
                                    </div>
                                  ))}
                                </div>
                              } trigger="hover">
                                {d.label}
                              </Popover> : d.label}
                            </div>
                          </td>
                        ))}
@@ -472,7 +607,7 @@
                  <tr key={m}>
                    {cell.children.map((d, i) => (
                      <td key={i}>
                        <div className={'month-wrap' + (d.$disable ? ' disabled' : '')}>
                        <div className={'month-wrap' + (d.$disable ? ' disabled' : '')} onClick={() => !d.$disable && this.triggerDay(d)}>
                          <div className="header">
                            <div className="message">
                              {d.label}
@@ -483,7 +618,13 @@
                              <span className="right">{d.jr}</span>
                            </div>
                          </div>
                          <ul className="content"></ul>
                          <ul className="content">
                            {d.subData.map((data, index) => (
                              <li key={index} className="message" onClick={(e) => this.openView(data, e)}>
                                <Badge color={data.$color} text={data.$message} />
                              </li>
                            ))}
                          </ul>
                        </div>
                      </td>
                    ))}
@@ -499,7 +640,13 @@
                  <div className="header">
                    {item.label}
                  </div>
                  <ul className="content"></ul>
                  <ul className="content">
                    {item.subData.map((data, index) => (
                      <li key={index} className="message" onClick={() => this.openView(data)}>
                        <Badge color={data.$color} text={`${data.$message} (${data.$startTime} ~ ${data.$endTime})`}/>
                      </li>
                    ))}
                  </ul>
                </div>
              </Col>
            ))}