klp-oa/klp-ui/src/components/TimeInput.vue

<template>
  <div class="time-input-group">
    <el-date-picker v-model="dateValue" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 140px;" @change="updateDateTime" />
    <span class="time-separator">@</span>
    <el-input-number :controls="false" v-model="hourValue" placeholder="时" min="0" max="23" style="width: 60px;" @change="updateDateTime" />
    <span class="time-separator">:</span>
    <el-input-number :controls="false" v-model="minuteValue" placeholder="分" min="0" max="59" style="width: 60px;" @change="updateDateTime" />
    <span class="time-separator">:00</span>
    <el-button v-if="showNowButton" type="text" size="small" @click="setToNow" style="margin-left: 8px;">此刻</el-button>
  </div>
</template>

<script>
export default {
  name: 'TimeInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    showNowButton: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dateValue: '',
      hourValue: '',
      minuteValue: ''
    };
  },
  watch: {
    value: {
      handler(newValue) {
        this.parseDateTime(newValue);
      },
      immediate: true
    }
  },
  methods: {
    parseDateTime(dateTimeStr) {
      if (!dateTimeStr) {
        this.dateValue = '';
        this.hourValue = '';
        this.minuteValue = '';
        return;
      }
      const date = new Date(dateTimeStr);
      if (!isNaN(date.getTime())) {
        this.dateValue = date.toISOString().split('T')[0];
        this.hourValue = date.getHours();
        this.minuteValue = date.getMinutes();
      }
    },
    updateDateTime() {
      if (this.dateValue && this.hourValue !== '' && this.minuteValue !== '') {
        const dateTimeStr = `${this.dateValue} ${this.hourValue}:${this.minuteValue}:00`;
        this.$emit('input', dateTimeStr);
      } else {
        this.$emit('input', '');
      }
    },
    setToNow() {
      const now = new Date();
      this.dateValue = now.toISOString().split('T')[0];
      this.hourValue = now.getHours();
      this.minuteValue = now.getMinutes();
      this.updateDateTime();
    }
  }
};
</script>

<style scoped>
.time-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-separator {
  color: #909399;
  font-size: 14px;
}
</style>