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

package/lib/nf-double-half-year.cjs.js

@@ -0,0 +1,549 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vueDemi = require("vue-demi");
+const commonUtils = require("@94ai/common-utils");
+const vue2RuntimeHelpers = require("@94ai/vue2-runtime-helpers");
+const halfYearOptions = [
+  {
+    label: "上半年",
+    value: 1,
+    months: [1, 2, 3, 4, 5, 6]
+  },
+  {
+    label: "下半年",
+    value: 2,
+    months: [7, 8, 9, 10, 11, 12]
+  }
+];
+function getHarfYearOptionMonths(value) {
+  for (let item of halfYearOptions) {
+    if (item.value == value) {
+      return item.months;
+    }
+  }
+  return [];
+}
+const __sfc_main$1 = vueDemi.defineComponent({
+  name: "nf-half-year-picker-item"
+});
+__sfc_main$1.props = {
+  year: {
+    key: "year",
+    required: false,
+    type: Number,
+    default: (/* @__PURE__ */ new Date()).getFullYear()
+  },
+  halfYear: {
+    key: "halfYear",
+    required: false,
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  showLeft: {
+    key: "showLeft",
+    required: false,
+    type: Boolean,
+    default: true
+  },
+  showRight: {
+    key: "showRight",
+    required: false,
+    type: Boolean,
+    default: true
+  }
+};
+__sfc_main$1.setup = (__props, __ctx) => {
+  const props = __props;
+  const emits = __ctx.emit;
+  const now = /* @__PURE__ */ new Date();
+  const now_year = vueDemi.ref(now.getFullYear());
+  const now_half_year = `${now_year.value}-${commonUtils.getHalfYear(now)}`;
+  const options = vueDemi.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);
+  };
+  return {
+    now_half_year,
+    options,
+    handleItemClick,
+    handlePrevYear,
+    handleNextYear
+  };
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", {
+    staticClass: "nf-double-half-year nf-half-year-picker-item"
+  }, [_c("div", {
+    staticClass: "nf-half-year-picker__header"
+  }, [_vm.showLeft ? _c("i", {
+    staticClass: "el-icon-d-arrow-left",
+    on: {
+      "click": _vm.handlePrevYear
+    }
+  }) : _c("span", {
+    staticClass: "empty-arrow"
+  }), _c("div", {
+    staticClass: "nf-half-year-picker__title"
+  }, [_vm._v(_vm._s(_vm.year))]), _vm.showRight ? _c("i", {
+    staticClass: "el-icon-d-arrow-right",
+    on: {
+      "click": _vm.handleNextYear
+    }
+  }) : _c("span", {
+    staticClass: "empty-arrow"
+  })]), _c("div", {
+    staticClass: "nf-half-year-picker__options"
+  }, [_vm._l(_vm.options, function(item) {
+    return [_c("div", {
+      key: item.value,
+      staticClass: "nf-half-year-picker__item",
+      class: {
+        "nf-half-year-picker__item__today": item.value == _vm.now_half_year,
+        "nf-half-year-picker__item--active": _vm.halfYear.includes(item.value)
+      },
+      attrs: {
+        "data-value": item.value
+      },
+      on: {
+        "click": function($event) {
+          return _vm.handleItemClick(item);
+        }
+      }
+    }, [_c("div", {
+      staticClass: "nf-half-year-picker__item__label"
+    }, [_vm._v(_vm._s(item.label))])])];
+  })], 2)]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ vue2RuntimeHelpers.normalizeComponent(__sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
+const HalfYearPickerItem = __component__$1.exports;
+const __sfc_main = vueDemi.defineComponent({
+  name: "NfDoubleHalfYear"
+});
+__sfc_main.props = {
+  value: {
+    key: "value",
+    required: false,
+    type: Array,
+    default: void 0
+  },
+  size: {
+    key: "size",
+    required: false,
+    type: String
+  },
+  rangeSeparator: {
+    key: "rangeSeparator",
+    required: false,
+    type: String,
+    default: "-"
+  },
+  readonly: {
+    key: "readonly",
+    required: false,
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    key: "clearable",
+    required: false,
+    type: Boolean,
+    default: true
+  },
+  startPlaceholder: {
+    key: "startPlaceholder",
+    required: false,
+    type: String,
+    default: "开始半年"
+  },
+  endPlaceholder: {
+    key: "endPlaceholder",
+    required: false,
+    type: String,
+    default: "结束半年"
+  },
+  format: {
+    key: "format",
+    required: false,
+    type: Function,
+    default: (data) => data
+  },
+  disabled: {
+    key: "disabled",
+    required: false,
+    type: Boolean,
+    default: false
+  },
+  prefixIcon: {
+    key: "prefixIcon",
+    required: false,
+    type: String,
+    default: "el-icon-date"
+  },
+  clearIcon: {
+    key: "clearIcon",
+    required: false,
+    type: String,
+    default: "el-icon-circle-close"
+  },
+  transition: {
+    key: "transition",
+    required: false,
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  placement: {
+    key: "placement",
+    required: false,
+    type: String,
+    default: "bottom-start"
+  },
+  popperClass: {
+    key: "popperClass",
+    required: false,
+    type: String,
+    default: ""
+  },
+  trigger: {
+    key: "trigger",
+    required: false,
+    type: String,
+    default: "click"
+  },
+  offset: {
+    key: "offset",
+    required: false,
+    type: Number,
+    default: 0
+  },
+  visibleArrow: {
+    key: "visibleArrow",
+    required: false,
+    type: Boolean,
+    default: true
+  },
+  popperOptions: {
+    key: "popperOptions",
+    required: false,
+    type: Object,
+    default: () => ({
+      boundariesElement: "body",
+      gpuAcceleration: false
+    })
+  },
+  openDelay: {
+    key: "openDelay",
+    required: false,
+    type: Number,
+    default: void 0
+  },
+  closeDelay: {
+    key: "closeDelay",
+    required: false,
+    type: Number,
+    default: 200
+  },
+  tabindex: {
+    key: "tabindex",
+    required: false,
+    type: Number,
+    default: 0
+  },
+  appendToBody: {
+    key: "appendToBody",
+    required: false,
+    type: Boolean,
+    default: true
+  }
+};
+__sfc_main.setup = (__props, __ctx) => {
+  const props = __props;
+  const emits = __ctx.emit;
+  const now = /* @__PURE__ */ new Date();
+  const nfDoubleQuatterPopoverVisible = vueDemi.ref(false);
+  const startYear = vueDemi.ref(now.getFullYear());
+  const startHalfYear = vueDemi.ref([]);
+  const endYear = vueDemi.ref(now.getFullYear() + 1);
+  const endHalfYear = vueDemi.ref([]);
+  const halfYear = vueDemi.ref([]);
+  const nfDoubleHalfYearElDatePicker = vueDemi.ref();
+  const formatValue = vueDemi.computed(() => {
+    if (props.value) {
+      const startDate = new Date(props.value[0]);
+      const endDate = new Date(props.value[1]);
+      const startHalfyear = commonUtils.getHalfYear(startDate);
+      const endHalfyear = commonUtils.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 = vueDemi.computed(() => {
+    if (props.value) {
+      const startDate = new Date(props.value[0]);
+      const endDate = new Date(props.value[1]);
+      return [`${startDate.getFullYear()}-${commonUtils.getHalfYear(startDate)}`, `${endDate.getFullYear()}-${commonUtils.getHalfYear(endDate)}`];
+    }
+    return null;
+  });
+  vueDemi.watch(() => {
+    return formatValue.value;
+  }, () => {
+    vueDemi.nextTick(() => {
+      if (nfDoubleHalfYearElDatePicker.value && formatValue.value) {
+        nfDoubleHalfYearElDatePicker.value.userInput = formatValue.value;
+      }
+    });
+  }, {
+    deep: true,
+    immediate: true
+  });
+  vueDemi.watch(() => {
+    var _a;
+    return (_a = nfDoubleHalfYearElDatePicker.value) == null ? void 0 : _a.userInput;
+  }, (current) => {
+    if (!current && formatValue.value && nfDoubleHalfYearElDatePicker.value) {
+      vueDemi.nextTick(() => {
+        nfDoubleHalfYearElDatePicker.value.userInput = formatValue.value;
+      });
+    }
+  });
+  const handleOpenPicker = (instance) => {
+    let startDate = /* @__PURE__ */ new Date();
+    let endDate = commonUtils.getNextYear(startDate);
+    if (props.value) {
+      startDate = new Date(props.value[0]);
+      endDate = new Date(props.value[1]);
+      startHalfYear.value = [`${startDate.getFullYear()}-${commonUtils.getHalfYear(startDate)}`];
+      endHalfYear.value = [`${endDate.getFullYear()}-${commonUtils.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) => {
+    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) => {
+    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 = [];
+      for (let item of halfYear.value) {
+        const months = getHarfYearOptionMonths(item.halfYear);
+        if (months.length) {
+          result.push({
+            ...item,
+            startDate: commonUtils.formatDate(commonUtils.startOf(new Date(item.year, months[0] - 1), "month"), "YYYY-MM-DD"),
+            endDate: commonUtils.formatDate(commonUtils.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);
+    }
+  };
+  return {
+    nfDoubleQuatterPopoverVisible,
+    startYear,
+    startHalfYear,
+    endYear,
+    endHalfYear,
+    nfDoubleHalfYearElDatePicker,
+    showValue,
+    handleOpenPicker,
+    handleStartYearChange,
+    handleStartQuarterClick,
+    handleEndQuarterClick,
+    handleEndYearChange,
+    handleChange
+  };
+};
+__sfc_main.components = Object.assign({
+  HalfYearPickerItem
+}, __sfc_main.components);
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("el-popover", {
+    staticClass: "nf-double-half-year nf-half-year-range-picker",
+    attrs: {
+      "placement": _vm.placement,
+      "transition": _vm.transition,
+      "disabled": _vm.disabled,
+      "offset": _vm.offset,
+      "popper-class": (_vm.popperClass || "") + " nf-double-half-year nf-half-year-range-picker",
+      "trigger": _vm.trigger,
+      "visible-arrow": _vm.visibleArrow,
+      "popper-options": _vm.popperOptions,
+      "open-delay": _vm.openDelay,
+      "close-delay": _vm.closeDelay,
+      "tabindex": _vm.tabindex,
+      "append-to-body": _vm.appendToBody
+    },
+    on: {
+      "show": function($event) {
+        return _vm.$emit("show");
+      },
+      "after-enter": function($event) {
+        return _vm.$emit("after-enter");
+      },
+      "hide": function($event) {
+        return _vm.$emit("hide");
+      },
+      "after-leave": function($event) {
+        return _vm.$emit("after-leave");
+      }
+    },
+    model: {
+      value: _vm.nfDoubleQuatterPopoverVisible,
+      callback: function($$v) {
+        _vm.nfDoubleQuatterPopoverVisible = $$v;
+      },
+      expression: "nfDoubleQuatterPopoverVisible"
+    }
+  }, [_c("el-date-picker", {
+    ref: "nfDoubleHalfYearElDatePicker",
+    attrs: {
+      "slot": "reference",
+      "popper-class": "nf-double-half-year nf-half-year-range-picker-el-date-picker",
+      "type": "monthrange",
+      "value": _vm.showValue,
+      "validate-event": false,
+      "disabled": _vm.disabled,
+      "readonly": _vm.readonly,
+      "range-separator": _vm.rangeSeparator,
+      "clear-icon": _vm.clearIcon,
+      "prefix-icon": _vm.prefixIcon,
+      "clearable": _vm.clearable,
+      "size": _vm.size,
+      "start-placeholder": _vm.startPlaceholder,
+      "end-placeholder": _vm.endPlaceholder
+    },
+    on: {
+      "focus": _vm.handleOpenPicker,
+      "change": _vm.handleChange,
+      "blur": function($event) {
+        return _vm.$emit("blur", $event);
+      }
+    },
+    slot: "reference"
+  }), _c("div", {
+    staticClass: "nf-half-year-range-picker__content"
+  }, [_c("half-year-picker-item", {
+    attrs: {
+      "year": _vm.startYear,
+      "half-year": _vm.startHalfYear,
+      "showRight": false
+    },
+    on: {
+      "update:year": function($event) {
+        _vm.startYear = $event;
+      },
+      "on-half-year-click": _vm.handleStartQuarterClick,
+      "on-year-change": _vm.handleStartYearChange
+    }
+  }), _c("half-year-picker-item", {
+    attrs: {
+      "year": _vm.endYear,
+      "showLeft": false,
+      "half-year": _vm.endHalfYear
+    },
+    on: {
+      "update:year": function($event) {
+        _vm.endYear = $event;
+      },
+      "update:halfYear": function($event) {
+        _vm.endHalfYear = $event;
+      },
+      "update:half-year": function($event) {
+        _vm.endHalfYear = $event;
+      },
+      "on-half-year-click": _vm.handleEndQuarterClick,
+      "on-year-change": _vm.handleEndYearChange
+    }
+  })], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ vue2RuntimeHelpers.normalizeComponent(__sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+const NfDoubleHalfYear = __component__.exports;
+NfDoubleHalfYear.install = (app) => {
+  app.component("nf-double-half-year", NfDoubleHalfYear);
+};
+exports.default = NfDoubleHalfYear;