| | |
| | | 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 |
| | |
| | | } |
| | | |
| | | 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) => { |
| | |
| | | |
| | | let item = { |
| | | day: _day, |
| | | time: times[0] + times[1] + _day, |
| | | time: +(times[0] + times[1] + _day), |
| | | label: _day, |
| | | subData: [], |
| | | $disable: true, |
| | |
| | | |
| | | let item = { |
| | | day: _day, |
| | | time: selectYear + month + _day, |
| | | time: +(selectYear + month + _day), |
| | | label: i, |
| | | subData: [], |
| | | ...nl |
| | |
| | | |
| | | let item = { |
| | | day: _day, |
| | | time: times[0] + times[1] + _day, |
| | | time: +(times[0] + times[1] + _day), |
| | | label: i, |
| | | subData: [], |
| | | $disable: true, |
| | |
| | | |
| | | datelist.push({ |
| | | month: month, |
| | | time: selectYear + month, |
| | | time: +(selectYear + month), |
| | | label: monthName[month], |
| | | children: _weeklist, |
| | | subData: [] |
| | |
| | | } |
| | | |
| | | 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) => { |
| | |
| | | }) |
| | | } |
| | | |
| | | 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>))} |
| | |
| | | <tr key={m}> |
| | | {cell.children.map((d, i) => ( |
| | | <td key={i}> |
| | | <div className={'day-wrap' + (d.$disable ? ' disabled' : '')}> |
| | | <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> |
| | | ))} |
| | |
| | | <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} |
| | |
| | | <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> |
| | | ))} |
| | |
| | | <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> |
| | | ))} |