app-govern/components/Cn-timepicker/Cn-timepicker.vue

<template>
    <view class="content">
        <picker
            mode="multiSelector"
            @change="bindPickerChange"
            @columnchange="handleColumnChange"  
            :value="multiIndex"
            :range="onlyYear ? yearsArray : multiArray"
        >
            <view class="time-season">
                <text>
                    <text v-if="showMonth">{{ year + '-' + season }} </text>
                    <text v-else-if="year">{{ year + (year ? '年' : '') + (onlyYear ? '' : season) }} </text>
                    <text v-else class="prompt">请选择时间 </text>
                </text>
            </view>
        </picker>
    </view>
</template>

<script>
export default {
    props: {
        yearsMin: {
            type: Number,
            default: 5,
        },
        yearsMax: {
            type: Number,
            default: 0,
        },
        onlyYear: {
            type: Boolean,
            default: false,
        },
        showMonth: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        const now = new Date()
        this.currentYear = now.getFullYear() // 保存当前年份
        this.currentMonth = now.getMonth() + 1 // 保存当前月份（1-12）
        this.currentSeason = Math.ceil(this.currentMonth / 3) // 保存当前季度（1-4）

        const yearArr = this.handleYear()
        const seasonArr = ['一季度', '二季度', '三季度', '四季度']
        const monthArr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        return {
            multiArray: [yearArr, this.showMonth ? monthArr : seasonArr],
            multiIndex: [this.handleYear(true), 0],
            yearsArray: [yearArr],
            year: '',
            season: '',
            // 原始完整的时间数组（用于恢复）
            fullMonthArr: [...monthArr],
            fullSeasonArr: [...seasonArr]
        }
    },
    created() {
        const now = new Date()
        this.year = now.getFullYear().toString()
        const month = now.getMonth() + 1
        
        // 初始化时就过滤当前年份的时间范围
        this.updateTimeRange(this.currentYear)

        if (this.showMonth) {
            this.multiIndex = [5, month - 1]
            this.season = month < 10 ? `0${month}` : `${month}`
        } else {
            let key = 0
            if (month >= 1 && month <= 3) {
                key = 0
                this.season = '一季度'
            } else if (month >= 4 && month <= 6) {
                key = 1
                this.season = '二季度'
            } else if (month >= 7 && month <= 9) {
                key = 2
                this.season = '三季度'
            } else {
                key = 3
                this.season = '四季度'
            }
            this.multiIndex = [5, key]
        }

        this.$emit('timeSeasonC', {
            year: this.year,
            season: this.season,
        })
    },
    methods: {
        // 处理年份
        handleYear(nowYearIndex) {
            let optionsArray = []
            let years = new Date().getFullYear()
            for (let i = years - this.yearsMin; i <= years + this.yearsMax; i++) {
                optionsArray.push(i)
            }
            if (nowYearIndex) {
                return optionsArray.indexOf(years)
            }
            return optionsArray
        },
        // 列变化事件：切换年份时动态调整时间范围
        handleColumnChange(e) {
            // 只有切换第一列（年份列）时才处理
            if (e.detail.column === 0) {
                const selectedYear = this.multiArray[0][e.detail.value]
                // 更新时间范围（月份/季度）
                this.updateTimeRange(selectedYear)
                // 修正索引：如果当前选中的时间超出新范围，重置为最后一个选项
                const timeLength = this.multiArray[1].length
                if (this.multiIndex[1] >= timeLength) {
                    this.multiIndex[1] = timeLength - 1
                }
            }
        },
        // 核心：根据选中年份更新时间范围
        updateTimeRange(selectedYear) {
            if (this.onlyYear) return // 只选年份时无需处理
            
            if (selectedYear === this.currentYear) {
                // 当前年份：只显示到当前月/当前季度
                if (this.showMonth) {
                    // 过滤月份：只保留1到当前月
                    this.multiArray[1] = this.fullMonthArr.slice(0, this.currentMonth)
                } else {
                    // 过滤季度：只保留1到当前季度
                    this.multiArray[1] = this.fullSeasonArr.slice(0, this.currentSeason)
                }
            } else {
                // 非当前年份：恢复完整的时间数组
                this.multiArray[1] = this.showMonth ? [...this.fullMonthArr] : [...this.fullSeasonArr]
            }
        },
        // 确认选择时间
        bindPickerChange: function (e) {
            this.multiIndex = e.detail.value

            this.year = this.multiArray[0][this.multiIndex[0]]
            if (this.onlyYear) {
                this.$emit('timeSeasonC', { year: this.year })
            } else {
                this.season = this.multiArray[1][this.multiIndex[1]]
                this.$emit('timeSeasonC', {
                    year: this.year,
                    season: this.season,
                })
            }
        },
    },
}
</script>

<style>
.content {
    width: 100%;
    height: 62rpx !important;
    box-sizing: border-box;
    background-color: #fff;
    padding: 10rpx 20rpx;
    line-height: 38rpx;
    border: 1px solid #e5e5e5;
    border-radius: 10rpx;
}
.time-season {
    font-size: 28rpx;
}
.prompt {
    font-size: 24rpx;
    color: grey;
}
</style>