2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/tabviews/zshare/calendar/index.jsx

@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Select, Radio, Row, Col, Popover, Badge } from 'antd'
import { Select, Radio, Row, Col, Popover, Badge, Spin } from 'antd'
import moment from 'moment'

// import Utils from '@/utils/utils.js'
import './index.scss'

const { Option } = Select
@@ -13,6 +12,8 @@
  static propTpyes = {
    data: PropTypes.any,            // 事件数据
    calendar: PropTypes.any,
    changeDate: PropTypes.func,
    triggerDate: PropTypes.func,
    loading: false
  }

@@ -48,7 +49,7 @@
    let level = _levels[0]
    let monthlist = null

    if (_levels.includes('month')) {
    if (_levels.includes('month') || _levels.includes('year')) {
      monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
    }

@@ -63,10 +64,12 @@

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let datelist = this.mountdata(this.state.datelist, nextProps.data)
      let datelist = this.getDateList(this.state.selectYear)
      let monthlist = null
      
      datelist = this.mountdata(datelist, nextProps.data)

      if (this.state.levels.includes('month')) {
      if (this.state.levels.includes('month') || this.state.levels.includes('year')) {
        monthlist = datelist.filter(item => item.month === this.state.selectMonth)[0]
      }

@@ -82,27 +85,26 @@
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    return !is(fromJS(this.props.loading), fromJS(nextProps.loading)) || !is(fromJS(this.state), fromJS(nextState))
  }

  mountdata = (datelist, data) => {
    const { calendar } = this.props

    let datalist = []
    let levels = {
      black: 1,
      red: 2,
      orange: 3,
      yellow: 4,
      green: 5,
      lightgreen: 6,
      cyan: 7,
      blue: 8,
      purple: 9,
      white: 10
    let colors = {
      transparent: 'rgba(0, 0, 0, 0)',
      red: 'rgba(208, 2, 27, 1)',
      orange: 'rgba(245, 166, 35, 1)',
      yellow: 'rgba(248, 231, 28, 1)',
      green: 'rgba(126, 211, 33, 1)',
      cyan: 'rgba(80, 227, 194, 1)',
      blue: 'rgba(24, 144, 255, 1)',
      purple: 'rgba(189, 16, 224, 1)',
      gray: 'rgba(155, 155, 155, 1)'
    }

    data.forEach(item => {
    data && data.forEach(item => {
      let startTime = item[calendar.startfield]
      let endTime = item[calendar.endfield]
      let color = item[calendar.colorfield]
@@ -111,64 +113,61 @@
      if (!endTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(endTime)) return
      if (!item[calendar.remarkfield]) return

      let equal = endTime.substr(0, 4) === startTime.substr(0, 4)

      datalist.push({
        color: color,
        level: color && levels[color] ? levels[color] : 100,
        color: colors[color] || color,
        remark: item[calendar.remarkfield],
        startMonth: startTime.substr(0, 4) + startTime.substr(5, 2),
        endMonth: endTime.substr(0, 4) + endTime.substr(5, 2),
        start: startTime.substr(0, 4) + startTime.substr(5, 2) + startTime.substr(8, 2),
        startTime: `${startTime.substr(5, 2)}-${startTime.substr(8, 2)}`,
        startTime: equal ? `${startTime.substr(5, 2)}-${startTime.substr(8, 2)}` : `${startTime.substr(0, 4)}-${startTime.substr(5, 2)}-${startTime.substr(8, 2)}`,
        end: endTime.substr(0, 4) + endTime.substr(5, 2) + endTime.substr(8, 2),
        endTime: `${endTime.substr(5, 2)}-${endTime.substr(8, 2)}`
        endTime: equal ?  `${endTime.substr(5, 2)}-${endTime.substr(8, 2)}` : `${endTime.substr(0, 4)}-${endTime.substr(5, 2)}-${endTime.substr(8, 2)}`
      })
    })

    if (datalist.length === 0) return datelist

    datalist.sort((a, b) => a.level - b.level)

    let styles = [
      {background: 'black', color: '#ffffff'},
      {background: 'red', color: '#ffffff'},
      {background: 'orange', color: '#ffffff'},
      {background: 'yellow', color: 'rgba(0,0,0,.65)'},
      {background: 'green', color: '#ffffff'},
      {background: 'lightgreen', color: 'rgba(0,0,0,.65)'},
      {background: 'cyan', color: 'rgba(0,0,0,.65)'},
      {background: 'blue', color: '#ffffff'},
      {background: 'purple', color: '#ffffff'},
      {background: 'white', color: 'rgba(0,0,0,.65)'},
    ]

    return datelist.map(month => {
      month.subData = []
      datalist.forEach(item => {
        if (item.startMonth <= month.time && item.endMonth >= month.time) {
          month.subData.push(item)
        }
      })
      month.style = this.getStyle(month.subData[0])
      month.sublist = month.sublist.map(week => {
        week.sublist = week.sublist.map(day => {
          if (!day) return null

          day.subData = []
          datalist.forEach(item => {
            if (item.start <= day.time && item.end >= day.time) {
              day.subData.push(item)
            }
          })

          if (day.subData[0]) {
            day.style = styles[day.subData[0].level - 1] || null
          }

          day.style = this.getStyle(day.subData[0])
          return day
        })

        return week
      })

      return month
    })
  }

  getStyle = (item ) => {
    if (!item || !item.color) return null
    let style = {background: item.color}
    
    if (/rgb/ig.test(item.color)) {
      try {
        let colors = item.color.match(/\d+/g)
        if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
          style.color = '#ffffff'
        }
      } catch (e) {}
    }

    return style
  }

  getDateList = (selectYear) => {
@@ -199,7 +198,7 @@
        }
      }

      let re = 7 - _weeklist[_weeklist.length - 1].sublist.length
      let re = 7 - _weeklist.slice(-1)[0].sublist.length
      for (let i = 0; i < re; i++) {
        _weeklist[_weeklist.length - 1].sublist.push(null)
      }
@@ -221,41 +220,59 @@
  }

  yearChange = (value) => {
    const { calendar, data } = this.props
    const { levels, selectMonth } = this.state
    let datelist = this.getDateList(value)
    let monthlist = null

    if (levels.includes('month')) {
    if (levels.includes('month') || levels.includes('year')) {
      monthlist = datelist.filter(item => item.month === selectMonth)[0]
    }
    
    if (calendar.refresh !== 'true') {
      datelist = this.mountdata(datelist, data)

    this.setState({ selectYear: value, datelist, monthlist })

    if (this.props.changeDate) {
      this.props.changeDate(value)
      this.setState({ selectYear: value, datelist, monthlist })
    } else {
      this.setState({ selectYear: value, datelist, monthlist }, () => {
        this.props.changeDate(value)
      })
    }
  }

  monthChange = (value) => {
    const { datelist } = this.state
    const { datelist, levels, selectYear } = this.state

    if (!levels.includes('month')) {
      if (this.props.triggerDate) {
        this.props.triggerDate({
          time: `${selectYear}${value}01`
        })
      }
      return
    }

    this.setState({
      level: 'month',
      selectMonth: value,
      monthlist: datelist.filter(item => item.month === value)[0]
    })
  }

  triggerDay = (item) => {

    if (this.props.triggerDate) {
      this.props.triggerDate(item)
    }
  }

  render() {
    const { loading } = this.props
    const { level, selectMonth, selectYear, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月', year: '年'}
    console.log(loading)

    return (
      <div className="mk-calendar">
        {loading ? <div className="loading-data"><Spin /></div> : null}
        <div className="mk-calendar-control">
          <Select value={selectYear} onChange={this.yearChange}>
            {yearlist.map(item => (<Option key={item} value={item}>{item}年</Option>))}
@@ -296,7 +313,7 @@
                      <tr key={cell.week}>
                        {cell.sublist.map((d, i) => (
                          <td key={i}>
                            {d ? <div className={'day-wrap ' + d.class} style={d.style || null} onClick={() => this.triggerDay(d)}>
                            {d ? <div className="day-wrap" style={d.style || null} onClick={() => this.triggerDay(d)}>
                              {d.subData.length > 0 ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
                                <div>
                                  {d.subData.map((data, index) => (
@@ -341,8 +358,8 @@
                          </div>
                          <ul className="content">
                            {d.subData.map((data, index) => (
                              <li key={index} className="message" title={data.remark}>
                                <Badge color={data.color} text={data.remark} />
                              <li key={index} className="message">
                                <Badge color={d.style ? (data.color === d.style.background ? '#ffffff' : data.color) : data.color} text={data.remark} />
                              </li>
                            ))}
                          </ul>
@@ -357,14 +374,14 @@
          {level === 'year' && monthlist ? <Row className="year-calendar">
            {datelist.map(item => (
              <Col span={8} key={item.month}>
                <div className="year-wrap">
                  <div className="header">
                <div className="year-wrap" style={item.style || null} onClick={() => this.monthChange(item.month)}>
                  <div className="header" style={item.style ? null : {color: '#1890ff'}}>
                    {item.label}
                  </div>
                  <ul className="content">
                    {item.subData.map((data, index) => (
                      <li key={index} className="message" title={data.remark}>
                        <Badge color={data.color} text={data.remark} />
                      <li key={index} className="message">
                        <Badge color={item.style ? (data.color === item.style.background ? '#ffffff' : data.color) : data.color} text={`${data.remark} (${data.startTime} ~ ${data.endTime})`}/>
                      </li>
                    ))}
                  </ul>