aurora-admin/frameworks/RangeQuickPicker.vue2.vue

<template>
  <div class="kole-range" v-click-outside="close">
    <div class="kole-range-trigger" :class="{ 'is-focus': open }" @click="open = !open">
      <span v-if="modelValue.start && modelValue.end">{{ modelValue.start }} <span class="kole-range-sep">~</span> {{ modelValue.end }}</span>
      <span v-else class="kole-range-placeholder">请选择时间范围</span>
    </div>
    <div v-show="open" class="kole-range-pop">
      <div class="kole-range-presets">
        <button
          v-for="(p, i) in presets"
          :key="i"
          class="kole-range-preset"
          :class="{ 'is-active': activeIndex === i }"
          @click="applyPreset(i)"
        >{{ p.label }}</button>
      </div>
      <div class="kole-range-custom">
        <input type="date" v-model="start" />
        <span class="kole-range-tilde">~</span>
        <input type="date" v-model="end" />
      </div>
      <div class="kole-range-actions">
        <button class="kole-range-cancel" @click="close">取消</button>
        <button class="kole-range-ok" @click="confirm">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
function fmt(d) {
  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
}
function presetRange(p) {
  var end = new Date(); end.setHours(0, 0, 0, 0);
  var start = new Date(end);
  if (p.year === 'this') start = new Date(end.getFullYear(), 0, 1);
  else if (p.month === 'this') start = new Date(end.getFullYear(), end.getMonth(), 1);
  else if (p.month === 'last') { start = new Date(end.getFullYear(), end.getMonth() - 1, 1); end = new Date(end.getFullYear(), end.getMonth(), 0); }
  else { start.setDate(end.getDate() + (p.days || 0)); if (p.len) start.setDate(end.getDate() - (p.len - 1)); }
  return { start: fmt(start), end: fmt(end) };
}

export default {
  name: 'KoleRangeQuickPicker',
  directives: {
    clickOutside: {
      bind(el, binding) {
        el.__doc = function (e) { if (!el.contains(e.target)) binding.value(); };
        document.addEventListener('click', el.__doc);
      },
      unbind(el) { document.removeEventListener('click', el.__doc); }
    }
  },
  props: {
    modelValue: { type: Object, default: () => ({ start: '', end: '' }) },
    presets: {
      type: Array,
      default: () => [
        { label: '今天', days: 0 },
        { label: '昨天', days: -1, len: 1 },
        { label: '近7天', days: -6 },
        { label: '近30天', days: -29 },
        { label: '本月', month: 'this' },
        { label: '上月', month: 'last' },
        { label: '本年', year: 'this' }
      ]
    }
  },
  data() {
    return { open: false, start: this.modelValue.start, end: this.modelValue.end, activeIndex: -1 };
  },
  methods: {
    applyPreset(i) {
      const r = presetRange(this.presets[i]);
      this.start = r.start; this.end = r.end; this.activeIndex = i;
    },
    confirm() {
      this.$emit('update:modelValue', { start: this.start, end: this.end });
      this.close();
    },
    close() { this.open = false; this.activeIndex = -1; }
  }
};
</script>

<style src="./RangeQuickPicker.css"></style>