@94ai/nf-double-half-year 3.1.37 → 3.1.39

package/package/config.ts

@@ -0,0 +1,40 @@
+/**
+ * 半年对应筛选项
+ */
+export const halfYearOptions = [
+  {
+    label: '上半年',
+    value: 1,
+    months: [1, 2, 3, 4, 5, 6]
+  },
+  {
+    label: '下半年',
+    value: 2,
+    months: [7, 8, 9, 10, 11, 12]
+  },
+];
+
+/**
+ * 获取半年对应的月份
+ * @returns
+ */
+export function getHarfYearOptionMonths(value) {
+  for (let item of halfYearOptions) {
+    if (item.value == value) {
+      return item.months;
+    }
+  }
+  return []
+}
+
+/**
+ * 获取日期对应季度
+ * @returns
+ */
+export function getHarfYearItemOfMonth(month) {
+  for (let item of halfYearOptions) {
+    if (item.months.includes(month)) {
+      return item;
+    }
+  }
+}

package/package/index.ts

@@ -0,0 +1,8 @@
+import NfDoubleHalfYear from './nf-double-half-year.vue'
+import { Vue2, PluginObject } from 'vue-demi'
+
+NfDoubleHalfYear.install = (app: typeof Vue2) => {
+  app!.component('nf-double-half-year', NfDoubleHalfYear)
+}
+
+export default NfDoubleHalfYear as typeof NfDoubleHalfYear & PluginObject<undefined>

package/package/nf-double-half-year.vue

@@ -0,0 +1,301 @@
+<template>
+   <el-popover
+      class="nf-double-half-year nf-half-year-range-picker"
+      v-model="nfDoubleQuatterPopoverVisible"
+      :placement="placement"
+      :transition="transition"
+      :disabled="disabled"
+      :offset="offset"
+      :popper-class="(popperClass || '') + ' nf-double-half-year nf-half-year-range-picker'"
+      :trigger="trigger"
+      :visible-arrow="visibleArrow"
+      :popper-options="popperOptions"
+      :open-delay="openDelay"
+      :close-delay="closeDelay"
+      :tabindex="tabindex"
+      @show="$emit('show')"
+      @after-enter="$emit('after-enter')"
+      @hide="$emit('hide')"
+      @after-leave="$emit('after-leave')"
+      :append-to-body="appendToBody"
+    >
+      <el-date-picker slot="reference"
+                      ref="nfDoubleHalfYearElDatePicker"
+                      popper-class="nf-double-half-year nf-half-year-range-picker-el-date-picker"
+                      type="monthrange"
+                      @focus="handleOpenPicker"
+                      :value="showValue"
+                      @change="handleChange"
+                      @blur="$emit('blur', $event)"
+                      :validate-event="false"
+                      :disabled="disabled"
+                      :readonly="readonly"
+                      :range-separator="rangeSeparator"
+                      :clear-icon="clearIcon"
+                      :prefix-icon="prefixIcon"
+                      :clearable="clearable"
+                      :size="size"
+                      :start-placeholder="startPlaceholder"
+                      :end-placeholder="endPlaceholder" >
+      </el-date-picker>
+      <div class="nf-half-year-range-picker__content">
+        <half-year-picker-item :year.sync="startYear"
+                                :half-year="startHalfYear"
+                                :showRight="false"
+                                @on-half-year-click="handleStartQuarterClick"
+                                @on-year-change="handleStartYearChange"></half-year-picker-item>
+        <half-year-picker-item :year.sync="endYear"
+                                :showLeft="false"
+                                :half-year.sync="endHalfYear"
+                                @on-half-year-click="handleEndQuarterClick"
+                                @on-year-change="handleEndYearChange"></half-year-picker-item>
+      </div>
+    </el-popover>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+} from 'vue-demi'
+
+export default defineComponent({
+  name: 'NfDoubleHalfYear',
+})
+</script>
+<script setup lang="ts">
+import HalfYearPickerItem from './nf-half-year-picker-item.vue'
+import {
+  ref,
+  defineProps,
+  defineEmits,
+  computed,
+  watch,
+  nextTick
+} from 'vue-demi'
+import {
+  endOf,
+  formatDate,
+  getNextYear,
+  getHalfYear,
+  startOf
+} from './util'
+import { getHarfYearOptionMonths } from './config'
+import { HalfYearItem } from './types'
+
+const props = withDefaults(defineProps<{
+  // [起始日期，结束日期]
+  value?: string[],
+  size?: 'mini' | 'small' | 'medium' | 'large',
+  rangeSeparator?: string,
+  readonly?: boolean,
+  clearable?: boolean,
+  startPlaceholder?: string,
+  endPlaceholder?: string,
+  format?: Function,
+  disabled?: boolean,
+  prefixIcon?: string,
+  clearIcon?: string,
+  transition?: string,
+  placement?: string,
+  popperClass?: string,
+  trigger?: string,
+  offset?: number,
+  visibleArrow?: boolean,
+  popperOptions?: Object,
+  openDelay?: number,
+  closeDelay?: number,
+  tabindex?: number,
+  appendToBody?: boolean
+}>(), {
+  // [起始日期，结束日期]
+  value: undefined,
+  size: 'mini',
+  rangeSeparator: '-',
+  readonly: false,
+  clearable: true,
+  startPlaceholder: '开始半年',
+  endPlaceholder: '结束半年',
+  disabled: false,
+  offset: 0,
+  prefixIcon: 'el-icon-date',
+  clearIcon: 'el-icon-circle-close',
+  transition: 'el-zoom-in-top',
+  placement: 'bottom-start',
+  popperClass: '',
+  trigger: 'click',
+  visibleArrow: true,
+  openDelay: undefined,
+  closeDelay: 200,
+  tabindex: 0,
+  appendToBody: true,
+  format: (data:string) => (data),
+  popperOptions: () => ({ boundariesElement: 'body', gpuAcceleration: false }),
+})
+
+const emits = defineEmits<{
+  (e: 'update:value', val: string[] | null): void,
+  (e: 'input', val: string[] | null): void,
+  (e: 'change', value: (HalfYearItem & { startDate: string, endDate: string})[]): void
+  (e: 'show', value:undefined): void
+  (e: 'after-enter', value:undefined): void
+  (e: 'hide', value: undefined): void
+  (e: 'after-leave', value:undefined): void
+  (e: 'blur', value: any ): void
+  (e: 'focus', value: any): void
+}>()
+
+const now = new Date()
+const nfDoubleQuatterPopoverVisible = ref(false)
+// 开始
+const startYear = ref(now.getFullYear())
+const startHalfYear = ref<string[]>([])
+// 结束
+const endYear = ref(now.getFullYear() + 1)
+const endHalfYear = ref<string[]>([])
+// 整合后的月份
+const halfYear = ref<HalfYearItem[]>([])
+const nfDoubleHalfYearElDatePicker = ref()
+
+
+const formatValue = computed(() => {
+  if (props.value) {
+    const startDate = new Date(props.value[0])
+    const endDate = new Date(props.value[1])
+    const startHalfyear = getHalfYear(startDate)
+    const endHalfyear = getHalfYear(endDate)
+    const res = [`${startDate.getFullYear()}-${startHalfyear === 2 ? '下半年' : '上半年'}`, `${endDate.getFullYear()}-${endHalfyear === 2 ? '下半年' : '上半年'}`]
+    if (props.format) {
+      return props.format(res)
+    }
+    return res
+  }
+  return null
+})
+
+const showValue = computed(() => {
+  if (props.value) {
+    const startDate = new Date(props.value[0])
+    const endDate = new Date(props.value[1])
+    return [`${startDate.getFullYear()}-${getHalfYear(startDate)}`, `${endDate.getFullYear()}-${getHalfYear(endDate)}`]
+  }
+  return null
+})
+
+watch(() => {
+  return formatValue.value
+}, () => {
+  nextTick(() => {
+    if (nfDoubleHalfYearElDatePicker.value && formatValue.value) {
+      nfDoubleHalfYearElDatePicker.value.userInput = formatValue.value
+    }
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+
+watch(() => {
+  return nfDoubleHalfYearElDatePicker.value?.userInput
+}, (current) => {
+  if (!current && formatValue.value && nfDoubleHalfYearElDatePicker.value) {
+    nextTick(() => {
+      nfDoubleHalfYearElDatePicker.value.userInput = formatValue.value
+    })
+  }
+})
+
+
+const handleOpenPicker = (instance) => {
+  let startDate = new Date()
+  let endDate = getNextYear(startDate)
+  if (props.value) {
+    startDate = new Date(props.value[0])
+    endDate = new Date(props.value[1])
+    startHalfYear.value = [`${startDate.getFullYear()}-${getHalfYear(startDate)}`]
+    endHalfYear.value = [`${endDate.getFullYear()}-${getHalfYear(endDate)}`]
+  }
+
+  startYear.value = startDate.getFullYear()
+  // 结束
+  endYear.value = endDate.getFullYear()
+  if (startYear.value >= endYear.value) {
+    endYear.value = startYear.value + 1
+  }
+  // 清空已选中
+  halfYear.value.splice(0, halfYear.value.length)
+  emits('focus', instance)
+}
+const handleStartYearChange = (year) => {
+  endYear.value = year + 1
+}
+const handleStartQuarterClick = (halfYearItem: HalfYearItem) => {
+  if (halfYear.value.length == 0) {
+    startHalfYear.value.splice(0, startHalfYear.value.length)
+    endHalfYear.value.splice(0, endHalfYear.value.length)
+  }
+
+  const index = startHalfYear.value.indexOf(halfYearItem.value)
+  if (index > -1) {
+    startHalfYear.value.splice(index, 1)
+  } else {
+    startHalfYear.value.push(halfYearItem.value)
+  }
+
+  halfYear.value.push(halfYearItem)
+
+  handleCheckQuarterRange()
+}
+const handleEndQuarterClick = (halfYearItem: HalfYearItem) => {
+  if (halfYear.value.length == 0) {
+    startHalfYear.value.splice(0, startHalfYear.value.length)
+    endHalfYear.value.splice(0, endHalfYear.value.length)
+  }
+  const index = endHalfYear.value.indexOf(halfYearItem.value)
+  if (index > -1) {
+    endHalfYear.value.splice(index, 1)
+  } else {
+    endHalfYear.value.push(halfYearItem.value)
+  }
+  halfYear.value.push(halfYearItem)
+  handleCheckQuarterRange()
+}
+const handleCheckQuarterRange = () => {
+  if (halfYear.value.length == 2) {
+    // 排序
+    halfYear.value.sort((a, b) => {
+      if (a.year == b.year) {
+        return a.halfYear - b.halfYear
+      } else {
+        return a.year - b.year
+      }
+    })
+    const result: (HalfYearItem & { startDate: string, endDate: string})[] = []
+    for (let item of halfYear.value) {
+      const months = getHarfYearOptionMonths(item.halfYear)
+      if(months.length) {
+        result.push({
+          ...item,
+          startDate: formatDate(startOf(new Date(item.year, months[0] - 1), 'month'), 'YYYY-MM-DD'),
+          endDate: formatDate(endOf(new Date(item.year, months[months.length - 1] - 1), 'month'), 'YYYY-MM-DD')
+        })
+      }
+    }
+    emits('update:value', [result[0].startDate, result[1].endDate])
+    emits('input', [result[0].startDate, result[1].endDate])
+    emits('change', result)
+    nfDoubleQuatterPopoverVisible.value = false
+  }
+}
+const handleEndYearChange = () => {
+  startYear.value = endYear.value - 1
+}
+const handleChange = (val) => {
+  if (!val) {
+    startHalfYear.value.splice(0, startHalfYear.value.length)
+    endHalfYear.value.splice(0, endHalfYear.value.length)
+    emits('update:value', null)
+    emits('input', null)
+  }
+}
+</script>

package/package/nf-half-year-picker-item.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="nf-double-half-year nf-half-year-picker-item">
+    <div class="nf-half-year-picker__header">
+      <i class="el-icon-d-arrow-left"
+         @click="handlePrevYear"
+         v-if="showLeft"></i>
+      <span v-else
+            class="empty-arrow"></span>
+      <div class="nf-half-year-picker__title">{{ year }}</div>
+      <i class="el-icon-d-arrow-right"
+         @click="handleNextYear"
+         v-if="showRight"></i>
+      <span v-else
+            class="empty-arrow"></span>
+    </div>
+    <div class="nf-half-year-picker__options">
+      <template v-for="item in options">
+        <div class="nf-half-year-picker__item"
+             v-bind:key="item.value"
+             :data-value="item.value"
+             @click="handleItemClick(item)"
+             :class="{
+               'nf-half-year-picker__item__today': item.value == now_half_year,
+               'nf-half-year-picker__item--active': halfYear.includes(item.value),
+             }">
+          <div class="nf-half-year-picker__item__label">{{ item.label }}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+  name: 'nf-half-year-picker-item',
+})
+</script>
+<script setup lang="ts">
+import {
+  computed,
+  defineEmits,
+  defineProps,
+  ref
+} from 'vue-demi'
+import { halfYearOptions } from './config'
+import { HalfYearItem } from './types'
+import { getHalfYear } from './util'
+
+const props = withDefaults(defineProps<{
+  // 当前年
+  year?: number,
+  // 当前半年
+  halfYear?: string[],
+  // 显示左边按钮
+  showLeft?: boolean,
+  // 显示右边按钮
+  showRight?: boolean
+}>(), {
+  // 当前年
+  year:  new Date().getFullYear(),
+  // 当前半年
+  halfYear: () => { return [] },
+  // 显示左边按钮
+  showLeft: true,
+  // 显示右边按钮
+  showRight: true
+})
+
+
+const emits = defineEmits<{
+  (e: 'on-half-year-click', val: HalfYearItem): void,
+  (e: 'update:year', value: number): void
+  (e: 'on-year-change', value: number): void
+}>()
+const now = new Date();
+const now_year = ref(now.getFullYear());
+const now_half_year = `${now_year.value}-${getHalfYear(now)}`
+const options = computed(() => {
+  return halfYearOptions.map(item => {
+    return {
+      label: item.label,
+      value: `${props.year}-${item.value}`,
+      year: props.year,
+      halfYear: item.value,
+    }
+  })
+})
+
+
+const handleItemClick = (item) => {
+  emits('on-half-year-click', item);
+}
+
+const handlePrevYear = () => {
+  const year = props.year - 1;
+  emits('update:year', year);
+  emits('on-year-change', year);
+}
+
+const handleNextYear = () => {
+  const year = props.year + 1;
+  emits('update:year', year);
+  emits('on-year-change', year);
+}
+</script>
+

package/package/style/css.ts

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/css/nf-double-half-year.css'

package/package/style/index.ts

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/nf-double-half-year.scss'

package/package/types.ts

@@ -0,0 +1,6 @@
+export interface HalfYearItem {
+  label: '上半年' | '下半年',
+  value: string,
+  year: number,
+  halfYear: 1 | 2,
+}

package/package/util.ts

@@ -0,0 +1,58 @@
+export function getHalfYear(date = new Date()) {
+  const currMonth = date.getMonth() + 1
+  return Math.floor((currMonth % 6 == 0 ? (currMonth / 6) : (currMonth / 6 + 1)))
+}
+
+export function getNextYear(date = new Date()) {
+  return new Date(date.setFullYear(date.getFullYear() + 1))
+}
+
+export function endOf(now = new Date(), unit) {
+  if (unit === 'year') {
+    return new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999);
+  }
+  if (unit === 'month') {
+    return new Date(new Date(now.getFullYear(), now.getMonth() + 1, 1).getTime() - 1);
+  }
+  if (unit === 'week') {
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate() + (6 - now.getDay()), 23, 59, 59, 999);
+  }
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+}
+
+export function startOf(date, unit) {
+  const newDate = new Date(date)
+  if (unit === 'year') {
+    newDate.setMonth(0)
+    newDate.setDate(1)
+    newDate.setHours(0, 0, 0, 0)
+  } else if (unit === 'month') {
+    newDate.setDate(1)
+    newDate.setHours(0, 0, 0, 0)
+  } else if (unit === '') {
+    newDate.setHours(0, 0, 0, 0)
+  } else if (unit === 'hour') {
+    newDate.setMinutes(0, 0, 0)
+  } else if (unit === 'minute') {
+    newDate.setSeconds(0, 0)
+  } else if (unit === 'second') {
+    newDate.setMilliseconds(0)
+  }
+  return newDate
+}
+
+export function formatDate(date, format) {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const seconds = date.getSeconds()
+  format = format.replace('YYYY', year)
+  format = format.replace('MM', String(month).padStart(2, '0'))
+  format = format.replace('DD', String(day).padStart(2, '0'))
+  format = format.replace('HH', String(hours).padStart(2, '0'))
+  format = format.replace('mm', String(minutes).padStart(2, '0'))
+  format = format.replace('ss', String(seconds).padStart(2, '0'))
+  return format
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-double-half-year",
-  "version": "3.1.37",
+  "version": "3.1.39",
   "description": "> TODO: description",
   "keywords": [],
   "author": "zoujiahe <zoujiahe@94ai.com>",
@@ -14,7 +14,7 @@
     "url": "http://94ai.gitlab.com/zoujiahe/common-ui.git"
   },
   "dependencies": {
-    "@94ai/nf-theme-chalk": "^3.1.37",
+    "@94ai/nf-theme-chalk": "^1.0.0",
     "vue-demi": "^0.14.5"
   },
   "peerDependenciesMeta": {
@@ -30,5 +30,5 @@
   "types": "lib/index.d.ts",
   "main": "lib/nf-double-half-year.cjs.js",
   "module": "lib/nf-double-half-year.esm-bundler.js",
-  "gitHead": "14dfc729b9988003d4686b414e1e9c0aaa7c4dcd"
+  "gitHead": "2b60696b405feafbbaeed385e5bcf666ceefbf2c"
 }