111 lines
2.6 KiB
Vue
111 lines
2.6 KiB
Vue
<script>
|
|
import PropTypes from '@/components/_util/vue-types'
|
|
import BaseMixin from '@/components/_util/BaseMixin'
|
|
import { hasProp } from '@/components/_util/props-util'
|
|
import MonthTable from './MonthTable'
|
|
|
|
function goYear (direction) {
|
|
const next = this.sValue.clone()
|
|
next.add(direction, 'year')
|
|
this.setAndChangeValue(next)
|
|
}
|
|
|
|
function noop () {
|
|
|
|
}
|
|
|
|
const MonthPanel = {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
// onChange: PropTypes.func,
|
|
disabledDate: PropTypes.func,
|
|
// onSelect: PropTypes.func,
|
|
},
|
|
|
|
data () {
|
|
const { value, defaultValue } = this
|
|
// bind methods
|
|
this.nextYear = goYear.bind(this, 1)
|
|
this.previousYear = goYear.bind(this, -1)
|
|
return {
|
|
sValue: value || defaultValue,
|
|
}
|
|
},
|
|
watch: {
|
|
value (val) {
|
|
this.setState({
|
|
sValue: val,
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
setAndChangeValue (value) {
|
|
this.setValue(value)
|
|
this.__emit('change', value)
|
|
},
|
|
|
|
setAndSelectValue (value) {
|
|
this.setValue(value)
|
|
this.__emit('select', value)
|
|
},
|
|
|
|
setValue (value) {
|
|
if (!hasProp(this, 'value')) {
|
|
this.setState({
|
|
sValue: value,
|
|
})
|
|
}
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { sValue, cellRender, contentRender, locale, rootPrefixCls, disabledDate, $listeners = {}} = this
|
|
const year = sValue.year()
|
|
const prefixCls = `${rootPrefixCls}-month-panel`
|
|
return (
|
|
<div class={prefixCls}>
|
|
<div>
|
|
<div class={`${prefixCls}-header`}>
|
|
<a
|
|
class={`${prefixCls}-prev-year-btn`}
|
|
role='button'
|
|
onClick={this.previousYear}
|
|
title={locale.previousYear}
|
|
/>
|
|
|
|
<a
|
|
class={`${prefixCls}-year-select`}
|
|
role='button'
|
|
onClick={$listeners.yearPanelShow || noop}
|
|
title={locale.yearSelect}
|
|
>
|
|
<span class={`${prefixCls}-year-select-content`}>{year}</span>
|
|
<span class={`${prefixCls}-year-select-arrow`}>x</span>
|
|
</a>
|
|
|
|
<a
|
|
class={`${prefixCls}-next-year-btn`}
|
|
role='button'
|
|
onClick={this.nextYear}
|
|
title={locale.nextYear}
|
|
/>
|
|
</div>
|
|
<div class={`${prefixCls}-body`}>
|
|
<MonthTable
|
|
disabledDate={disabledDate}
|
|
onSelect={this.setAndSelectValue}
|
|
locale={locale}
|
|
value={sValue}
|
|
cellRender={cellRender}
|
|
contentRender={contentRender}
|
|
prefixCls={prefixCls}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
},
|
|
}
|
|
|
|
export default MonthPanel
|
|
</script>
|