xiaoshi_system/src/utils/model/time/timeChoose.vue

<template>
    <div>
        <div style="width:100%">
            <el-popover
                v-if="!showTime && !showDate"
                ref="popover"
                placement="bottom"
                width="400"
                trigger="click">
            <div style="display:flex;width:100%" >
                <el-input  v-model="day" placeholder="选择时间" style="margin-right:10px;width:100%"></el-input>
                <el-time-picker
                    @change="changeTime"
                    @blur="changeTime"
                    v-model="time"
                    value-format="HH:mm:ss"
                    placeholder="选择时间">
                </el-time-picker>
            </div>
            <div style="display:flex;flex-wrap:wrap;width:100% " >
                <p style="min-width:50px;width:calc(100% / 7);text-align:center;cursor:pointer" v-for="(item,index) in list[type]" :key="index" @click="check(item)">{{ item }}</p>
            </div>
            <el-input slot="reference" v-model="value1" placeholder="选择时间"  style="width:100%"></el-input>
            </el-popover>
            <el-time-picker
                v-if="showTime"
                @change="changeTime"
                v-model="value1"
                style="width:100%"
                value-format="HH:mm:ss"
                placeholder="选择时间">
            </el-time-picker>
            <el-date-picker
                popper-class="picker-date"
                format="MM-dd HH:mm:ss"
                v-if="showDate"
                @change="changeTime"
                v-model="value1"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
        </div>
       
    </div>
</template>
<script>
import { cron } from "./mixins";
export default {
  mixins:[cron],
    props:{
      type:{
          default:'day'
      },
      cron:{},
      value:{
        default:''
      }
        
    },
    data() {
        return {
            value1:'',
            day:'',
            time:'',
            list:{
                week:['周一','周二','周三','周四','周五','周六','周日'],
                month:[]
            },
            showDate:false,
            showTime:false,
            
        }
  },
  watch: {
    type(val) {
      this.init()
     }, 
    },
  mounted() {
        this.init()
    },
  methods: {
    init() {
      this.value1 = ''
      this.day = ''
      this.time = ''
      this.showTime =this.type=='day'? true:false
      this.showDate = this.type == 'year' ? true : false
      switch (this.type) {
            case 'day':
                break;
            case 'week':
                break;
            case 'month':
                for(let i = 1;i < 32;i++){
                    this.list.month.push(i+'日')
                }
                break;
        case 'year':
                break;
      }
      if (this.type) {
        let cron = this.getCron(this.type)
        this.$emit('value', cron)
      } else if(this.cron && this.type){
         this.cronChangeDate(this.cron)
      }
      },
        check(item){
            this.$set(this,'day',item)
            if(!this.time){
               this.$set(this,'time','18:30:00') 
            }
            
            this.changeTime()
        },
        changeTime(){
            if(!this.showDate && !this.showTime){
                this.$set(this,'value1',this.day+" "+this.time)
            }
          // console.log(this.value1)
            let cron=this.getCron()
          this.$emit('value', cron)
        }
    },
}
</script>

<style lang="scss">
.el-time-panel{
    margin-top:20px;
    z-index: 9999 !important;
}
.el-picker-panel{
    z-index: 9999 !important;
}

.picker-date {
  .el-date-picker__header {
    span:nth-child(3) {      
      display: none;
    }
    button:nth-child(1) {
      display: none;
    }
    button:nth-child(5) {
      display: none;
    }
  }
}
</style>