SaaS-lib/lib/saas/view/config/configDate.vue

<!-- @format -->

<template>
  <span style="color: #37abc4; cursor: pointer" class="config-input" @click="editTime()">
    {{ timeValue.expectedValue || '-' }}
  </span>
  <a-modal
    v-model:visible="visibleTime"
    title="选择"
    @ok="changeDate"
    :mask="false"
    style="top: 150px">
    <div class="modal-time-picker">
      <a-time-picker
        format="HH:mm"
        v-model:value="startTimeValue"
        valueFormat="HH:mm"
        :allowClear="false"
        v-model:open="startOpen"
        @change="_onChange"
        :disabledHours="startDisabledHours"
        :disabledMinutes="startDisabledMinutes" />~
      <a-time-picker
        format="HH:mm"
        valueFormat="HH:mm"
        v-model:value="endTimeValue"
        :allowClear="false"
        v-model:open="endOpen"
        @change="_onChange"
        :disabledHours="endDisabledHours"
        :disabledMinutes="endDisabledMinutes" />
    </div>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import moment from 'moment';

  export default defineComponent({
    props: {
      timeValue: {
        type: Object,
      },
      index: {
        type: Number,
      },
      listKey: {
        type: String,
      },
      // text: {
      //   type: String,
      //   default: '',
      // },
    },
    emits: ['changeDate', 'blur'],
    setup(props, ctx) {
      const startOpen = ref(false);
      const endOpen = ref(false);
      const time = props.timeValue.expectedValue.split('-');
      let startTimeValue = ref(time[0]);
      let startTimeValue1 = moment(time[0], 'HH:mm');
      let endTimeValue = ref(time[1]);
      let endTimeValue1 = moment(time[1], 'HH:mm');
      const visibleTime = ref<boolean>(false);
      let timeValue = ref('');
      const editTime = () => {
        visibleTime.value = true;
      };
      const changeDate = () => {
        visibleTime.value = false;
        let value = {
          configValue: timeValue.value,
          index: props.index,
          key: props.listKey,
        };
        ctx.emit('changeDate', value);
        // console.log(timeValue.value);
      };
      const handleClose = () => {
        startOpen.value = false;
        endOpen.value = false;
      };
      const _onChange = () => {
        // console.log('change', startTimeValue.value, endTimeValue.value);
        timeValue.value = startTimeValue.value + '-' + endTimeValue.value;

        return;
        let start: string = startTimeValue.value._d.toString();
        let end: string = endTimeValue.value._d.toString();
        let startTime = start.split(' ');
        let endTime = end.split(' ');
        startTimeValue.value = startTime[4].split(':')[0] + ':' + startTime[4].split(':')[1];
        endTimeValue.value = endTime[4].split(':')[0] + ':' + endTime[4].split(':')[1];
        timeValue.value = startTimeValue.value + '-' + endTimeValue.value;
      };
      const startDisabledHours = () => {
        let disHours = [];
        let starthours: Number;
        if (endTimeValue.value == undefined) {
          let time = endTimeValue.value.split(':');
          starthours = time[0];
        } else {
          let time = endTimeValue.value;
          starthours = time.split(':')[0];
        }
        for (let i = 24; i > starthours; i--) {
          disHours.push(i);
        }
        return disHours;
      };
      const endDisabledHours = () => {
        let disHours = [];
        let endhours: Number;
        if (startTimeValue.value == undefined) {
          let time = startTimeValue.value.split(':');
          endhours = time[0];
        } else {
          let time = startTimeValue.value;
          endhours = time.split(':')[0];
        }
        for (let i = 0; i < endhours; i++) {
          disHours.push(i);
        }
        return disHours;
      };
      const startDisabledMinutes = (selectedHour: any) => {
        let time: Number[] = [];
        let endhours: Number;
        let endMinutes: Number;
        let disminutes = [];
        if (endTimeValue.value == undefined) {
          time = startTimeValue.value.split(':');
          endhours = time[0];
          endMinutes = time[1];
          if (selectedHour == endhours) {
            for (var i = 59; i > endMinutes; i--) {
              disminutes.push(i);
            }
          }
        } else {
          time = endTimeValue.value.split(':');
          endhours = time[0];
          endMinutes = time[1];
          if (selectedHour == endhours) {
            for (var i = 59; i > endMinutes; i--) {
              disminutes.push(i);
            }
          }
        }
        return disminutes;
      };
      const endDisabledMinutes = (selectedHour: any) => {
        let time: Number[] = [];
        let endhours: Number;
        let endMinutes: Number;
        let disminutes = [];
        if (startTimeValue.value == undefined) {
          time = startTimeValue.value.split(':');
          endhours = time[0];
          endMinutes = time[1];
          if (selectedHour == endhours) {
            for (var i = 0; i < endMinutes; i++) {
              disminutes.push(i);
            }
          }
        } else {
          time = startTimeValue.value.split(':');
          endhours = time[0];
          endMinutes = time[1];
          if (selectedHour == endhours) {
            for (var i = 0; i < endMinutes; i++) {
              disminutes.push(i);
            }
          }
        }
        return disminutes;
      };
      return {
        editTime,
        time,
        _onChange,
        startDisabledHours,
        endDisabledHours,
        startDisabledMinutes,
        endDisabledMinutes,
        visibleTime,
        endOpen,
        startOpen,
        startTimeValue,
        endTimeValue,
        startTimeValue1,
        endTimeValue1,
        changeDate,
        handleClose,
      };
    },
  });
</script>
<style scoped>
  .modal-time-picker {
    margin-left: 50px;
  }

  :deep(.ant-time-picker) {
    width: 150px;
  }
</style>