magiccube-vue3/package/components/month-picker/month-cell.js

vue3-js版组件库

import { computed } from 'vue'
import * as utils from '../../utils/common'

const MonthCell = {
    props: {
        modelValue: Array,
        year: [String, Number],
        enableStart: String,
        enableEnd: String,
        type: String,
        multi: Boolean,
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit }){

        const model = computed({
            get(){
                return props.modelValue || []
            },
            set(value){
                emit('update:modelValue', value)
            }
        })

        // 月份选择 月份列表
        const monthsList = computed(() => {
            const arr = []
            const selectedTime = model.value.map(n => new Date(n).getTime() || '')
            const disabledStringTime = props.enableStart? new Date(props.enableStart+'/01').getTime() : 0
            const disabledEndTime = props.enableEnd? new Date(props.enableEnd).getTime() : 99999999999999999999n
            const currentYear = new Date().getFullYear()
            for (let i = 0; i < 12; i++) {
                const _t = new Date(`${props.year}/${i+1}/1`).getTime()
                arr.push({
                    year: props.year,
                    month: i,
                    string: i + 1 + '月',
                    time: _t,
                    isChecked: selectedTime.indexOf(_t) > -1,
                    isToday: props.year === currentYear && i ===  new Date().getMonth(),
                    isDisabled: _t < disabledStringTime || _t > disabledEndTime,
                    isInclude: _t >= selectedTime[0] && _t <= selectedTime[1],
                    isRangeStart: selectedTime.indexOf(_t) === 0,
                    isRangeEnd: selectedTime.indexOf(_t) === 1,
                })
            }
            return arr
        })

        const handleClick = (e, item) => {
            e.stopPropagation()
            if (item.isDisabled) return
            let _arr = model.value
            const str = utils.dateFormat(item.time, 'YYYY/MM/DD')
            if(props.type === 'range'){
                if(_arr.length === 2){
                    _arr = [str]
                } else if(_arr.length === 1){
                    _arr.push(str)
                    emit('change', _arr)
                } else {
                    _arr.push(str)
                }
            } else if(props.multi){
                /**
                 * 如果是多选 必须要支持删除功能
                 */
                const idx = _arr.findIndex(n => n === str)
                if(idx > -1){
                    _arr.splice(idx, 1)
                } else {
                    _arr.push(str)
                }
            } else {
                /**
                 * 除去多选状态 可直接进行push之后去重操作
                 */
                _arr = [str]
                emit('change', _arr)
            }
            model.value = _arr
        }

        return () => (
            <div class="mc-month__cube">
                {
                    monthsList.value.map(n => (
                        <div class={[
                            'mc-month__cube--cell',
                            {
                                active: n.isChecked,
                                today: n.isToday,
                                disabled: n.isDisabled,
                                include: props.type === 'range' && n.isInclude,
                                start: props.type === 'range' && n.isRangeStart,
                                end: props.type === 'range' && n.isRangeEnd,
                            }
                        ]}
                        onClick={(e) => handleClick(e, n)}>
                            <span>{n.string}</span>
                        </div>
                    ))
                }
            </div>
        )
    }
}

export {MonthCell, MonthCell as default}