2020-08-17

king

2020-08-17 df565b506ddb2bed918befceefddcd529eb58782

 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
  }

@@ -63,7 +64,7 @@

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

      if (this.state.levels.includes('month')) {
@@ -89,18 +90,8 @@
    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 levels = { red: 1, orange: 2, yellow: 3, green: 4, cyan: 5, blue: 6, purple: 7, gray: 8 }
    let colors = { red: '#d0021b', orange: '#f5a623', yellow: '#f8e71c', green: '#7ed321', cyan: '#50e3c2', blue: '#1890ff', purple: '#bd10e0', gray: '#9b9b9b' }

    data.forEach(item => {
      let startTime = item[calendar.startfield]
@@ -112,7 +103,7 @@
      if (!item[calendar.remarkfield]) return

      datalist.push({
        color: color,
        color: colors[color] || '',
        level: color && levels[color] ? levels[color] : 100,
        remark: item[calendar.remarkfield],
        startMonth: startTime.substr(0, 4) + startTime.substr(5, 2),
@@ -129,16 +120,14 @@
    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)'},
      {background: '#d0021b', color: '#ffffff'},
      {background: '#f5a623', color: '#ffffff'},
      {background: '#f8e71c', color: '#ffffff'},
      {background: '#7ed321', color: '#ffffff'},
      {background: '#50e3c2', color: '#ffffff'},
      {background: '#1890ff', color: '#ffffff'},
      {background: '#bd10e0', color: '#ffffff'},
      {background: '#9b9b9b', color: '#ffffff'},
    ]

    return datelist.map(month => {
@@ -147,6 +136,9 @@
          month.subData.push(item)
        }
      })
      if (month.subData[0]) {
        month.style = styles[month.subData[0].level - 1] || null
      }
      month.sublist = month.sublist.map(week => {
        week.sublist = week.sublist.map(day => {
          if (!day) return null
@@ -221,6 +213,7 @@
  }

  yearChange = (value) => {
    const { calendar, data } = this.props
    const { levels, selectMonth } = this.state
    let datelist = this.getDateList(value)
    let monthlist = null
@@ -228,10 +221,14 @@
    if (levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === selectMonth)[0]
    }
    
    if (calendar.refresh !== 'true') {
      datelist = this.mountdata(datelist, data)

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

    if (this.props.changeDate) {
      this.props.changeDate(value)
    }
  }
@@ -246,16 +243,19 @@
  }

  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>))}
@@ -341,8 +341,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 +357,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.triggerDay(item)}>
                  <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>