From 41239717c4446af79268b968557274f88a0afaeb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 15 八月 2020 10:16:07 +0800
Subject: [PATCH] 2020-08-15
---
src/tabviews/zshare/calendar/index.jsx | 171 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 139 insertions(+), 32 deletions(-)
diff --git a/src/tabviews/zshare/calendar/index.jsx b/src/tabviews/zshare/calendar/index.jsx
index abb13ee..6616507 100644
--- a/src/tabviews/zshare/calendar/index.jsx
+++ b/src/tabviews/zshare/calendar/index.jsx
@@ -12,7 +12,8 @@
class Calendar extends Component {
static propTpyes = {
data: PropTypes.any, // 浜嬩欢鏁版嵁
- levels: PropTypes.any
+ calendar: PropTypes.any,
+ loading: false
}
state = {
@@ -22,11 +23,11 @@
selectYear: moment().format('YYYY'),
selectMonth: moment().format('MM'),
datelist: null,
- monthlist: null,
+ monthlist: null
}
UNSAFE_componentWillMount() {
- const { levels } = this.props
+ const { calendar, data } = this.props
let yearlist = []
let _selectYear = +this.state.selectYear
@@ -38,17 +39,14 @@
}
let datelist = this.getDateList(this.state.selectYear)
- let _levels = null
- if (!levels) {
- _levels = ['day', 'month', 'year']
- } else {
- _levels = levels
+ if (data && data.length > 0) {
+ datelist = this.mountdata(datelist, data)
}
-
+
+ let _levels = calendar.levels
let level = _levels[0]
let monthlist = null
- level = 'month'
if (_levels.includes('month')) {
monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
@@ -65,12 +63,112 @@
UNSAFE_componentWillReceiveProps(nextProps) {
if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
-
+ let datelist = this.mountdata(this.state.datelist, nextProps.data)
+ let monthlist = null
+
+ if (this.state.levels.includes('month')) {
+ monthlist = datelist.filter(item => item.month === this.state.selectMonth)[0]
+ }
+
+ this.setState({
+ datelist: datelist,
+ monthlist
+ })
+ } else if (!is(fromJS(this.props.calendar), fromJS(nextProps.calendar))) {
+ this.setState({
+ levels: nextProps.calendar.levels
+ })
}
}
shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.state), fromJS(nextState))
+ return !is(fromJS(this.props), fromJS(nextProps)) || !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
+ }
+
+ data.forEach(item => {
+ let startTime = item[calendar.startfield]
+ let endTime = item[calendar.endfield]
+ let color = item[calendar.colorfield]
+
+ if (!startTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(startTime)) return
+ if (!endTime || !/^(1|2)\d{3}(-|\/)\d{2}(-|\/)\d{2}/.test(endTime)) return
+ if (!item[calendar.remarkfield]) return
+
+ datalist.push({
+ color: color,
+ level: color && levels[color] ? levels[color] : 100,
+ 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)}`,
+ end: endTime.substr(0, 4) + endTime.substr(5, 2) + endTime.substr(8, 2),
+ endTime: `${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 => {
+ datalist.forEach(item => {
+ if (item.startMonth <= month.time && item.endMonth >= month.time) {
+ month.subData.push(item)
+ }
+ })
+ month.sublist = month.sublist.map(week => {
+ week.sublist = week.sublist.map(day => {
+ if (!day) return null
+
+ 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
+ }
+
+ return day
+ })
+
+ return week
+ })
+
+ return month
+ })
}
getDateList = (selectYear) => {
@@ -91,10 +189,12 @@
}
for (let i = 1; i <= end; i++) {
+ let _day = i < 10 ? `0${i}` : `${i}`
+
if (_weeklist[_weeklist.length - 1].sublist.length < 7) {
- _weeklist[_weeklist.length - 1].sublist.push({day: i < 10 ? `0${i}` : `${i}`, label: i})
+ _weeklist[_weeklist.length - 1].sublist.push({day: _day, time: selectYear + month + _day, label: i, subData: []})
} else {
- let _week = {week: _weeklist.length + 1, sublist: [{day: i < 10 ? `0${i}` : `${i}`, label: i}]}
+ let _week = {week: _weeklist.length + 1, sublist: [{day: _day, time: selectYear + month + _day, label: i, subData: []}]}
_weeklist.push(_week)
}
}
@@ -106,8 +206,10 @@
datelist.push({
month: month,
+ time: selectYear + month,
label: monthName[month],
- sublist: _weeklist
+ sublist: _weeklist,
+ subData: []
})
})
@@ -128,6 +230,10 @@
}
this.setState({ selectYear: value, datelist, monthlist })
+
+ if (this.props.changeDate) {
+ this.props.changeDate(value)
+ }
}
monthChange = (value) => {
@@ -144,14 +250,10 @@
}
render() {
+ const { loading } = this.props
const { level, selectMonth, selectYear, yearlist, levels, datelist, monthlist } = this.state
const _levelName = {day: '鏃�', month: '鏈�', year: '骞�'}
- const listData = [
- { type: 'orange', content: 'This is error event 2.' },
- { type: 'cyan', content: 'This is error event 3.' },
- { type: 'green', content: 'This is error event 4.' },
- ]
-
+ console.log(loading)
return (
<div className="mk-calendar">
<div className="mk-calendar-control">
@@ -194,12 +296,17 @@
<tr key={cell.week}>
{cell.sublist.map((d, i) => (
<td key={i}>
- {d ? <div className={'day-wrap ' + d.class} onClick={() => this.triggerDay(d)}>
- {d.label ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
+ {d ? <div className={'day-wrap ' + d.class} style={d.style || null} onClick={() => this.triggerDay(d)}>
+ {d.subData.length > 0 ? <Popover mouseEnterDelay={0.3} overlayClassName="calendar-day-pop" content={
<div>
- {listData.map((data, index) => (
+ {d.subData.map((data, index) => (
<div key={index} className="message">
- <Badge color={data.type} text={data.content} />
+ <Badge color={data.color} text={
+ <span>
+ {data.remark}
+ <span style={{color: 'rgba(0,0,0,.45)'}}>({data.startTime + ' ~ ' + data.endTime})</span>
+ </span>}
+ />
</div>
))}
</div>
@@ -228,14 +335,14 @@
<tr key={cell.week}>
{cell.sublist.map((d, i) => (
<td key={i}>
- {d ? <div className="month-wrap" onClick={() => this.triggerDay(d)}>
+ {d ? <div className="month-wrap" style={d.style || null} onClick={() => this.triggerDay(d)}>
<div className="header">
{d.label}
</div>
<ul className="content">
- {[1,3,7,18,22].includes(d.label) && listData.map((data, index) => (
- <li key={index} className="message" title={data.content}>
- <Badge color={data.type} text={data.content} />
+ {d.subData.map((data, index) => (
+ <li key={index} className="message" title={data.remark}>
+ <Badge color={data.color} text={data.remark} />
</li>
))}
</ul>
@@ -255,9 +362,9 @@
{item.label}
</div>
<ul className="content">
- {['01', '05', '10'].includes(item.month) && listData.map((data, index) => (
- <li key={index} className="message" title={data.content}>
- <Badge color={data.type} text={data.content} />
+ {item.subData.map((data, index) => (
+ <li key={index} className="message" title={data.remark}>
+ <Badge color={data.color} text={data.remark} />
</li>
))}
</ul>
--
Gitblit v1.8.0