front-end/ghsApp/src/components/module/dateSelect.vue

<template>
    <view class="select-bg_bx">
        <view v-if="isShowTit" @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
            <text>{{defaultDateName}}</text>
            <text v-if="placeholder" style="color: #ccc;">{{placeholder}}</text>
            <i v-if="isShowMore" class="iconfont iconsanjiao_xia"></i>
        </view>
        <view v-else @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
          <text v-if="placeholder" style="color: #ccc;">{{placeholder}}</text>
        </view>
        <view class="select-mark-view" v-show="dropdownShow" @click="switchCut"></view>
        <view v-if="dropdownShow" :style="{top}" class="select-fixed_bx">
            <slot>
                <view class="select-item-box">
                    <view class="title">快捷</view>
                    <view class="item-child_box">
                        <button
                            v-for="(item,index) in getDictionariesInfo.dateDefaultOption"
                            :key="index"
                            @click="changeDateOption(item)"
                            :class="['admin-button-com','mini-btn',selectItemId === item.id?'blue':'default']">
                            {{item.name}}
                        </button>
                    </view>
                </view>


                <view class="select-item-box">
                    <view class="title">按月份</view>
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month" @change="bindMonthChange" >
                        <view class="item-child_box">
                            <view class="admin-button-com mini-btn default custom" >{{showMonth||'选择月份'}}</view>
                        </view>
                    </picker>
                </view>


                <view class="select-item-box">
                    <view class="title">自定义</view>
                    <view class="item-child_box" >
                        <view class="admin-button-com mini-btn default custom" @click="showDatePicker(0)">{{startDate || '选择开始日期'}}</view>
                        <view class="admin-button-com mini-btn default custom" @click="showDatePicker(1)">{{endDate || '选择结束日期'}}</view>
                        <view class="admin-button-com mini-btn blue custom" @click="customDateConfirm()">确认</view>
                    </view>
                </view>

            </slot>
        </view>
        <mx-date-picker :show="showPicker" format="yyyy-mm-dd" type="date" :value="defaultPickerDate" :show-tips="true" @confirm="confirmPicker" @cancel="cancelPicker" />
    </view>
</template>
<script>
import DropdownList from "@/components/plugin/dropdown-list";
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import {mapGetters} from "vuex";
export default {
    name:'dateSelect',
    components:{
        DropdownList,MxDatePicker
    },
    props:{
        top:{
            type: String,
            default: 'auto'
        },
        selectItemId:{
            type:[String,Number],
            default:''
        },
        isShowTit:{
            type: Boolean,
            default: true
        },
        isShowMore:{
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: ''
        },
        defaultShowName:{
            type: String,
            default: '今天'
        }
    },
    data(){
        return {
            defaultPickerDate:'',
            showPicker: false,
            dropdownShow: false,
            selectItem:'',
            startDate:'',
            endDate:'',
            dateIndex:0,
            defaultDateName:'今天',
            showMonth:null
        }
    },
	watch:{
		defaultShowName: {
			handler(newVal) {
                this.defaultDateName = newVal
            },
            immediate:true
        }
    },
    computed:{
        ...mapGetters(["getDictionariesInfo"])
    },
    mounted(){
        let nowDate = new Date();
		let currentDate = nowDate.Format("yyyy-MM-dd")
        this.defaultPickerDate = currentDate
    },
    onLoad(){
    },
    methods:{
        bindMonthChange(e){
            this.dropdownShow = !this.dropdownShow
            this.dropdownShow = false;
            this.defaultDateName = e.target.value
            console.log(e)
            this.$emit('selectDateFn',{searchTime:'byMonth',startTime:e.target.value})
        },
        showDatePicker(index){//显示
            this.showPicker = true;
            this.dateIndex = index
        },
        confirmPicker(e) {//选择
             if(this.dateIndex == 0){
                this.startDate = e.value
             }else{
                this.endDate = e.value
             }
             this.showPicker = false;
        },
        customDateConfirm() {
            if(this.$util.isEmpty(this.startDate)){
                this.$msg('请选择开始日期')
                return false
            }
            if(this.$util.isEmpty(this.endDate)){
                this.$msg('请选择开始日期')
                return false
            }
            this.dropdownShow = false
            this.defaultDateName = '自定义'
            this.$emit('selectDateFn',{searchTime:'custom',startTime:this.startDate,endTime:this.endDate})
        },
        cancelPicker(){
            this.showPicker = false;
        },
        switchCut(){
            this.dropdownShow = !this.dropdownShow
        },
        changeDateOption(val){
            this.dropdownShow = false;
            this.defaultDateName = val.name;
            this.$emit('selectDateFn',{searchTime:val.value})
        }
    }
}
</script>
<style lang="scss" scoped>
.select-bg_bx {
    .select-title {
        color: #666666;
        font-size: 26upx;
        & .iconsanjiao_xia {
            margin-left: 10upx;
        }
        &.select_corlor {
            color: #3385FF;
            & .iconsanjiao_xia {
                transform: rotate(180deg);
            }
        }
    }
    .select-mark-view {
        height: 100vh;
        height: 100%;
        position: fixed;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        left: 0;
        top: 0upx;
        z-index: 20;
    }
    & .select-fixed_bx {
        position: fixed;
        width: 100%;
        background-color: #FFFFFF;
        left: 0;
        z-index: 29;
        padding:50upx 30upx 40upx;
        border-radius: 0upx 0upx 20upx 20upx;
        transition: all 0.5s ease-in-out;
        & .select-item-box {
            & .title {
                font-size: 24upx;
                color: #333333;
                font-weight: 600;
                text-align: left;
            }
            & .item-child_box {
                padding: 20upx 0 0;
                align-items: center;
                & .admin-button-com {
                    margin-bottom: 20upx;
                    padding: 25upx 50upx;
                    margin-right: 20upx;
                    &.custom {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>