@wocwin/t-ui-plus
Version:
Page level components developed based on Element Plus.
194 lines (189 loc) • 7.68 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "TDatePicker"
},
__name: "index",
props: {
modelValue: {},
plusTime: { type: Boolean, default: false },
type: { default: "date" },
shortcuts: {},
isPickerOptions: { type: Boolean, default: false }
},
emits: ["update:modelValue", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const attrs = vue.useAttrs();
const slots = vue.useSlots();
let time = vue.computed({
get() {
return props.modelValue;
},
set(val) {
emits("update:modelValue", val);
}
});
const DatePicker = vue.ref();
const attrsBind = vue.computed(() => {
const baseAttrs = {
date: { "value-format": "YYYY-MM-DD", placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F" },
dates: { "value-format": "YYYY-MM-DD", placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F" },
week: { format: "YYYY \u7B2C ww \u5468", placeholder: "\u8BF7\u9009\u62E9\u5468" },
month: { "value-format": "YYYY-MM", format: "YYYY-MM", placeholder: "\u8BF7\u9009\u62E9\u6708" },
months: { "value-format": "YYYY-MM", format: "YYYY-MM", placeholder: "\u8BF7\u9009\u62E9\u6708" },
year: { "value-format": "YYYY", format: "YYYY", placeholder: "\u8BF7\u9009\u62E9\u5E74" },
years: { "value-format": "YYYY", format: "YYYY", placeholder: "\u8BF7\u9009\u62E9\u5E74" },
daterange: {
"value-format": "YYYY-MM-DD",
"range-separator": "~",
"start-placeholder": "\u8BF7\u9009\u62E9\u5F00\u59CB\u65E5\u671F",
"end-placeholder": "\u8BF7\u9009\u62E9\u7ED3\u675F\u65E5\u671F"
},
monthrange: {
"value-format": "YYYY-MM",
"range-separator": "~",
"start-placeholder": "\u8BF7\u9009\u62E9\u5F00\u59CB\u6708\u4EFD",
"end-placeholder": "\u8BF7\u9009\u62E9\u7ED3\u675F\u6708\u4EFD"
},
datetime: {
format: "YYYY-MM-DD HH:mm:ss",
"value-format": "YYYY-MM-DD HH:mm:ss",
placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F\u65F6\u95F4"
},
datetimerange: {
format: "YYYY-MM-DD HH:mm:ss",
"value-format": "YYYY-MM-DD HH:mm:ss",
"range-separator": "~",
"start-placeholder": "\u8BF7\u9009\u62E9\u5F00\u59CB\u65E5\u671F",
"end-placeholder": "\u8BF7\u9009\u62E9\u7ED3\u675F\u65E5\u671F"
}
};
const typeAttrs = baseAttrs[props.type] || {};
return {
...typeAttrs,
...attrs
};
});
const state = vue.reactive({
dateOptions: props.shortcuts
});
const getShortcuts = (type) => {
const shortcuts = {
date: [
{ text: "\u4ECA\u5929", value: /* @__PURE__ */ new Date() },
{ text: "\u6628\u5929", value: () => subtractDays(/* @__PURE__ */ new Date(), 1) },
{ text: "\u4E00\u5468\u524D", value: () => subtractDays(/* @__PURE__ */ new Date(), 7) }
],
daterange: [
{ text: "\u6700\u8FD1\u4E00\u5468", value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()] },
{ text: "\u6700\u8FD1\u4E00\u4E2A\u6708", value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()] },
{ text: "\u6700\u8FD1\u4E09\u4E2A\u6708", value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()] }
],
monthrange: [
{ text: "\u672C\u6708", value: [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()] },
{ text: "\u4ECA\u5E74\u81F3\u4ECA", value: () => [new Date((/* @__PURE__ */ new Date()).getFullYear(), 0), /* @__PURE__ */ new Date()] },
{ text: "\u6700\u8FD1\u516D\u4E2A\u6708", value: () => [subtractMonths(/* @__PURE__ */ new Date(), 6), /* @__PURE__ */ new Date()] }
],
datetime: [
{ text: "\u4ECA\u5929", value: /* @__PURE__ */ new Date() },
{ text: "\u6628\u5929", value: () => subtractDays(/* @__PURE__ */ new Date(), 1) },
{ text: "\u4E00\u5468\u524D", value: () => subtractDays(/* @__PURE__ */ new Date(), 7) }
],
datetimerange: [
{ text: "\u6700\u8FD1\u4E00\u5468", value: () => [subtractDays(/* @__PURE__ */ new Date(), 7), /* @__PURE__ */ new Date()] },
{ text: "\u6700\u8FD1\u4E00\u4E2A\u6708", value: () => [subtractDays(/* @__PURE__ */ new Date(), 30), /* @__PURE__ */ new Date()] },
{ text: "\u6700\u8FD1\u4E09\u4E2A\u6708", value: () => [subtractDays(/* @__PURE__ */ new Date(), 90), /* @__PURE__ */ new Date()] }
]
};
return shortcuts[type] || [];
};
const subtractDays = (date, days) => {
const newDate = new Date(date);
newDate.setDate(newDate.getDate() - days);
return newDate;
};
const subtractMonths = (date, months) => {
const newDate = new Date(date);
newDate.setMonth(newDate.getMonth() - months);
return newDate;
};
const dateChange = (val) => {
if (props.type === "daterange" && val) {
let [startTime, endTime] = val;
if (props.plusTime) {
startTime += " 00:00:00";
endTime += " 23:59:59";
}
time.value = [startTime, endTime];
emits("change", [startTime, endTime]);
DatePicker.value.getElementsByClassName("el-range-input")[0].blur();
DatePicker.value.getElementsByClassName("el-range-input")[1].blur();
} else {
emits("change", val);
if (props.type.includes("range")) {
DatePicker.value.getElementsByClassName("el-range-input")[0].blur();
DatePicker.value.getElementsByClassName("el-range-input")[1].blur();
} else {
DatePicker.value.getElementsByClassName("el-input__inner")[0].blur();
}
}
};
if (props.isPickerOptions) {
state.dateOptions = getShortcuts(props.type);
}
vue.watch(
() => props.shortcuts,
(val) => {
if (props.isPickerOptions) {
state.dateOptions = getShortcuts(props.type);
} else {
state.dateOptions = val;
}
},
{ deep: true }
);
const clear = () => {
emits("update:modelValue", null);
};
__expose({ state, clear });
return (_ctx, _cache) => {
const _component_el_date_picker = vue.resolveComponent("el-date-picker");
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: "t-date-picker",
ref_key: "DatePicker",
ref: DatePicker
},
[
vue.createVNode(_component_el_date_picker, vue.mergeProps({
type: _ctx.type,
modelValue: vue.unref(time),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(time) ? time.value = $event : time = $event),
shortcuts: state.dateOptions,
onChange: dateChange
}, attrsBind.value), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(slots), (_index, name) => {
return {
name,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
})
]), 1040, ["type", "modelValue", "shortcuts"])
],
512
/* NEED_PATCH */
);
};
}
});
exports.default = _sfc_main;