dzhh-frontend/.svn/pristine/cb/cb07e4145ca0617ea3b2f1bbea665076c678c7ee.svn-base

<template>
    <a-date-picker
        dropdownClassName="j-date-picker"
        mode="year"
        format="YYYY"
        :placeholder="placeholder"
        @change="handleDateChange"
        v-model="yearVal"
        :open="dateopen"
        @openChange="openChangeYear"
        @panelChange="panelChangeYear"
        :disabled="disabled"
        :getCalendarContainer="getCalendarContainer"
        v-bind="$attrs"/>
</template>

<script>
import moment from 'moment'

export default {
    name: "JYearPicker",
    components:{
        moment
    },
    props: {
        placeholder: {
            type: String,
            default: '',
            required: false
        },
        value: {
            type: String,
            required: false
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false
        },
        getCalendarContainer: {
            type: Function,
            default: (node) => node.parentNode
        }
    },
    data() {
        let dateStr = this.value;
        return {
            yearVal: !dateStr?null:moment(dateStr).format('YYYY'),
            dateopen: false
        }
    },
    watch: {
        value (val) {
            if(!val){
                this.yearVal = null;
            }else{
                this.yearVal = moment(val).format('YYYY');
            }
        }
    },
    methods: {
        moment,
        handleDateChange(mom, dateStr) {
            this.$emit('change', dateStr);
            this.yearVal=null;
        },
        openChangeYear(status) {
            if (status) {
                this.dateopen = true;
            } else {
                this.dateopen = false;
            }
        },
        // 选择年之后 关闭弹框
        panelChangeYear(value) {
            this.yearVal = value;
            this.dateopen = false;
            this.$emit('input', moment(value).format("YYYY"));
        }
    }
}
</script>

<style scoped>

</style>