@94ai/nf-double-half-year 3.1.13

package/lib/nf-half-year-picker-item.vue.d.ts

@@ -0,0 +1,49 @@
+import { HalfYearItem } from './types';
+declare const _default: import("vue-demi").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    year?: number | undefined;
+    halfYear?: string[] | undefined;
+    showLeft?: boolean | undefined;
+    showRight?: boolean | undefined;
+}>, {
+    year: number;
+    halfYear: () => never[];
+    showLeft: boolean;
+    showRight: boolean;
+}>, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {
+    "on-half-year-click": (val: HalfYearItem) => void;
+    "update:year": (value: number) => void;
+    "on-year-change": (value: number) => void;
+}, string, Readonly<import("vue-demi").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    year?: number | undefined;
+    halfYear?: string[] | undefined;
+    showLeft?: boolean | undefined;
+    showRight?: boolean | undefined;
+}>, {
+    year: number;
+    halfYear: () => never[];
+    showLeft: boolean;
+    showRight: boolean;
+}>>>, {
+    year: number;
+    halfYear: string[];
+    showLeft: boolean;
+    showRight: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/style/css.d.ts

@@ -0,0 +1 @@
+

package/lib/style/css.js

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

package/lib/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/style/index.js

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

package/lib/types.d.ts

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

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,300 @@
+<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 '@94ai/common-utils'
+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,
+  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 '@94ai/common-utils'
+
+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.json

@@ -0,0 +1,35 @@
+{
+  "name": "@94ai/nf-double-half-year",
+  "version": "3.1.13",
+  "description": "> TODO: description",
+  "keywords": [],
+  "author": "zoujiahe <zoujiahe@94ai.com>",
+  "homepage": "https://oss.xccjh.top/common-ui/#/ai-index",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://94ai.gitlab.com/zoujiahe/common-ui.git"
+  },
+  "dependencies": {
+    "@94ai/common-utils": "^3.1.13",
+    "@94ai/nf-theme-chalk": "^3.1.13",
+    "vue-demi": "^0.14.5"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "element-ui": ">=2.13.2",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "types": "lib/index.d.ts",
+  "main": "lib/nf-double-half-year.cjs.js",
+  "module": "lib/nf-double-half-year.esm-bundler.js",
+  "gitHead": "a8c56183ccc8e979008e2d38bfde2d7d1448654c"
+}

package/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    // 这个工具可以实现自动添加CSS3前缀
+    autoprefixer: {
+      overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
+    },
+  },
+}