139 lines
3.4 KiB
JavaScript
139 lines
3.4 KiB
JavaScript
|
|
import PropTypes from '../../../_util/vue-types'
|
|
import BaseMixin from '../../../_util/BaseMixin'
|
|
import { getTodayTime, getMonthName } from '../util/index'
|
|
|
|
const ROW = 4
|
|
const COL = 3
|
|
|
|
function chooseMonth (month) {
|
|
const next = this.sValue.clone()
|
|
next.month(month)
|
|
this.setAndSelectValue(next)
|
|
}
|
|
|
|
function noop () {
|
|
|
|
}
|
|
|
|
const MonthTable = {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
cellRender: PropTypes.func,
|
|
prefixCls: PropTypes.string,
|
|
value: PropTypes.object,
|
|
locale: PropTypes.any,
|
|
contentRender: PropTypes.any,
|
|
disabledDate: PropTypes.func,
|
|
},
|
|
data () {
|
|
return {
|
|
sValue: this.value,
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.setState({
|
|
sValue: val,
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
setAndSelectValue (value) {
|
|
this.setState({
|
|
sValue: value,
|
|
})
|
|
this.__emit('select', value)
|
|
},
|
|
|
|
months () {
|
|
const value = this.sValue
|
|
const current = value.clone()
|
|
const months = []
|
|
let index = 0
|
|
for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
|
|
months[rowIndex] = []
|
|
for (let colIndex = 0; colIndex < COL; colIndex++) {
|
|
current.month(index)
|
|
const content = getMonthName(current)
|
|
months[rowIndex][colIndex] = {
|
|
value: index,
|
|
content,
|
|
title: content,
|
|
}
|
|
index++
|
|
}
|
|
}
|
|
return months
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const props = this.$props
|
|
const value = this.sValue
|
|
const today = getTodayTime(value)
|
|
const months = this.months()
|
|
const currentMonth = value.month()
|
|
const { prefixCls, locale, contentRender, cellRender, disabledDate } = props
|
|
const monthsEls = months.map((month, index) => {
|
|
const tds = month.map(monthData => {
|
|
let disabled = false
|
|
if (disabledDate) {
|
|
const testValue = value.clone()
|
|
testValue.month(monthData.value)
|
|
disabled = disabledDate(testValue)
|
|
}
|
|
const classNameMap = {
|
|
[`${prefixCls}-cell`]: 1,
|
|
[`${prefixCls}-cell-disabled`]: disabled,
|
|
[`${prefixCls}-selected-cell`]: monthData.value === currentMonth,
|
|
[`${prefixCls}-current-cell`]: today.year() === value.year() &&
|
|
monthData.value === today.month(),
|
|
}
|
|
let cellEl
|
|
if (cellRender) {
|
|
const currentValue = value.clone()
|
|
currentValue.month(monthData.value)
|
|
cellEl = cellRender(currentValue, locale)
|
|
} else {
|
|
let content
|
|
if (contentRender) {
|
|
const currentValue = value.clone()
|
|
currentValue.month(monthData.value)
|
|
content = contentRender(currentValue, locale)
|
|
} else {
|
|
content = monthData.content
|
|
}
|
|
cellEl = (
|
|
<a class={`${prefixCls}-month`}>
|
|
{content}
|
|
</a>
|
|
)
|
|
}
|
|
return (
|
|
<td
|
|
role='gridcell'
|
|
key={monthData.value}
|
|
onClick={disabled ? noop : chooseMonth.bind(this, monthData.value)}
|
|
title={monthData.title}
|
|
class={classNameMap}
|
|
>
|
|
{cellEl}
|
|
</td>)
|
|
})
|
|
return (<tr key={index} role='row'>{tds}</tr>)
|
|
})
|
|
|
|
return (
|
|
<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
|
|
<tbody class={`${prefixCls}-tbody`}>
|
|
{monthsEls}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
},
|
|
}
|
|
|
|
export default MonthTable
|
|
|