@fesjs/fes-design/es/time-picker/time-select.js

fes-design for PC

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { defineComponent, reactive, computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import PickerItem from './picker-item.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const prefixCls = getPrefixCls('time-picker');
function formatTime(total, step, disable) {
  let format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
  const formatData = [];
  for (let i = 0; i < total; i += step) {
    let value;
    if (format) {
      value = `${i}`.padStart(2, '0');
    } else {
      value = `${i}`;
    }
    formatData.push({
      disabled: disable && disable(Number(value)),
      value
    });
  }
  return formatData;
}
const timeSelectProps = {
  visible: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    default: ''
  },
  format: {
    type: String,
    default: 'HH:mm:ss'
  },
  hourStep: {
    type: Number,
    default: 1
  },
  minuteStep: {
    type: Number,
    default: 1
  },
  secondStep: {
    type: Number,
    default: 1
  },
  disabledHours: {
    type: Function
  },
  disabledMinutes: {
    type: Function
  },
  disabledSeconds: {
    type: Function
  },
  visibleCount: {
    type: Number,
    default: 8
  }
};
// 初始选择的时间
const initialSelectedTime = {
  hour: null,
  minute: null,
  seconds: null
};
var script = defineComponent({
  components: {
    PickerItem
  },
  props: timeSelectProps,
  emits: ['update:modelValue', 'change'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const focusKey = reactive({
      1: -1,
      2: -1,
      4: -1
    });

    // 被选中的时间
    const selectedTime = reactive(_objectSpread({}, initialSelectedTime));
    const formatSingleTime = timeFormat => props.format.indexOf(timeFormat) !== -1 ? '00' : '0';

    // 重置时间
    const resetTime = () => {
      Object.assign(selectedTime, initialSelectedTime);
    };

    // 解析时间
    const parseTime = () => {
      if (!props.modelValue) {
        Object.assign(selectedTime, initialSelectedTime);
        return;
      }
      const splitTime = props.modelValue.split(':');
      if (/H/.test(props.format)) {
        selectedTime.hour = splitTime.shift() || formatSingleTime('HH');
      }
      if (/m/.test(props.format)) {
        selectedTime.minute = splitTime.shift() || formatSingleTime('mm');
      }
      if (/s/.test(props.format)) {
        selectedTime.seconds = splitTime.shift() || formatSingleTime('ss');
      }
    };
    const setSelectedTimeDefault = () => {
      if (/H/.test(props.format) && !selectedTime.hour) {
        selectedTime.hour = formatSingleTime('HH');
      }
      if (/m/.test(props.format) && !selectedTime.minute) {
        selectedTime.minute = formatSingleTime('mm');
      }
      if (/s/.test(props.format) && !selectedTime.seconds) {
        selectedTime.seconds = formatSingleTime('ss');
      }
    };
    const canSelectHours = computed(() => {
      if (props.format.indexOf('H') !== -1) {
        return formatTime(24, props.hourStep, h => props.disabledHours && props.disabledHours(h), /HH/.test(props.format));
      }
      return null;
    });
    const changeSelectedHour = option => {
      selectedTime.hour = option.value;
      setSelectedTimeDefault();
    };
    const canSelectMinutes = computed(() => {
      if (props.format.indexOf('m') !== -1) {
        return formatTime(60, props.minuteStep, m => props.disabledMinutes && props.disabledMinutes(Number(selectedTime.hour), m), /mm/.test(props.format));
      }
      return null;
    });
    const changeSelectedMinute = option => {
      selectedTime.minute = option.value;
      setSelectedTimeDefault();
    };
    const canSelectSeconds = computed(() => {
      if (props.format.indexOf('s') !== -1) {
        return formatTime(60, props.secondStep, s => props.disabledSeconds && props.disabledSeconds(Number(selectedTime.hour), Number(selectedTime.minute), s), /ss/.test(props.format));
      }
      return null;
    });
    const changeSelectedSeconds = option => {
      selectedTime.seconds = option.value;
      setSelectedTimeDefault();
    };
    const timeString = computed(() => {
      let currentTime = '';
      const {
        hour,
        minute,
        seconds
      } = selectedTime;
      if (!(hour || minute || seconds)) {
        return currentTime;
      }
      if (/H/.test(props.format)) {
        currentTime += hour;
      }
      if (/m/.test(props.format)) {
        currentTime += currentTime.length > 0 ? `:${minute}` : minute;
      }
      if (/s/.test(props.format)) {
        currentTime += currentTime.length > 0 ? `:${seconds}` : seconds;
      }
      return currentTime;
    });
    watch(timeString, () => {
      emit('update:modelValue', timeString.value);
      emit('change', timeString.value);
    });
    watch(() => props.modelValue, () => {
      if (timeString.value !== props.modelValue) {
        parseTime();
      }
    }, {
      immediate: true
    });
    return {
      prefixCls,
      canSelectHours,
      canSelectMinutes,
      canSelectSeconds,
      changeSelectedHour,
      changeSelectedMinute,
      changeSelectedSeconds,
      focusKey,
      selectedTime,
      resetTime
    };
  }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_picker_item = resolveComponent("picker-item");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(`${_ctx.prefixCls}-content`),
    tabindex: "0"
  }, [_ctx.canSelectHours ? (openBlock(), createBlock(_component_picker_item, {
    key: 0,
    visible: _ctx.visible,
    times: _ctx.canSelectHours,
    value: _ctx.selectedTime.hour,
    focus: _ctx.focusKey['1'],
    class: normalizeClass(`${_ctx.prefixCls}-content-cell`),
    visibleCount: _ctx.visibleCount,
    onChange: _ctx.changeSelectedHour
  }, null, 8 /* PROPS */, ["visible", "times", "value", "focus", "class", "visibleCount", "onChange"])) : createCommentVNode("v-if", true), _ctx.canSelectMinutes ? (openBlock(), createBlock(_component_picker_item, {
    key: 1,
    visible: _ctx.visible,
    times: _ctx.canSelectMinutes,
    value: _ctx.selectedTime.minute,
    focus: _ctx.focusKey['2'],
    class: normalizeClass(`${_ctx.prefixCls}-content-cell`),
    visibleCount: _ctx.visibleCount,
    onChange: _ctx.changeSelectedMinute
  }, null, 8 /* PROPS */, ["visible", "times", "value", "focus", "class", "visibleCount", "onChange"])) : createCommentVNode("v-if", true), _ctx.canSelectSeconds ? (openBlock(), createBlock(_component_picker_item, {
    key: 2,
    visible: _ctx.visible,
    times: _ctx.canSelectSeconds,
    value: _ctx.selectedTime.seconds,
    focus: _ctx.focusKey['4'],
    class: normalizeClass(`${_ctx.prefixCls}-content-cell`),
    visibleCount: _ctx.visibleCount,
    onChange: _ctx.changeSelectedSeconds
  }, null, 8 /* PROPS */, ["visible", "times", "value", "focus", "class", "visibleCount", "onChange"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
}

script.render = render;
script.__file = "components/time-picker/time-select.vue";

export { script as default };