dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
206 lines (205 loc) • 8.57 kB
JavaScript
import { InputNumber, SelectOption, Select, Button } from "ant-design-vue/es";
import { defineComponent, computed, ref, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, unref, withDirectives, vShow } from "vue";
import { timeUnits } from "../../utils/config";
import { $t } from "../../../i18n/index";
import { isTimeNumber, compareDate } from "../../utils/index";
const _hoisted_1 = { class: "dm-date-picker__relative" };
const _hoisted_2 = { class: "custom-time-box" };
const _hoisted_3 = { class: "start-time-box" };
const _hoisted_4 = { class: "time-text" };
const _hoisted_5 = { class: "end-time-box" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
customRelativeStartUnits: { default: () => [] },
customRelativeEndUnits: { default: () => [] },
disabledRelativeEndUnit: { type: Boolean, default: false },
relativeStartMaxValue: {}
},
emits: ["change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const quickStartUnits = computed(() => {
return props.customRelativeStartUnits.length ? props.customRelativeStartUnits : timeUnits;
});
const quickEndUnits = computed(() => {
return props.disabledRelativeEndUnit ? [] : props.customRelativeEndUnits.length ? props.customRelativeEndUnits : timeUnits;
});
const startMaxValue = computed(() => {
return props.relativeStartMaxValue === -1 ? null : startTimeUnit.value === quickStartUnits.value[quickStartUnits.value.length - 1].value ? props.relativeStartMaxValue : null;
});
const isError = ref(false);
const errorMsg = ref("");
const startTimeValue = ref(5);
const startTimeUnit = ref(quickStartUnits.value[0].value || "s");
const endTimeValue = ref("now");
const endTimeUnit = ref("");
const showEndTimeValue = ref(false);
const validateDate = () => {
let startFlag = isTimeNumber(startTimeValue.value);
let endFlag = true;
if (endTimeValue.value !== "now") {
endFlag = isTimeNumber(endTimeValue.value);
}
if (startFlag && endFlag) {
let result = compareDate(
startTimeValue.value,
startTimeUnit.value,
endTimeValue.value,
endTimeUnit.value
);
isError.value = !result.isValid;
errorMsg.value = result.msg;
return result.isValid;
} else {
isError.value = true;
errorMsg.value = $t("datePicker.invalidTime");
return false;
}
};
const emit = __emit;
const onSubmit = () => {
if (validateDate()) {
let startTime = `-${startTimeValue.value}${startTimeUnit.value}`;
let endTime = "now";
if (endTimeValue.value != "now") {
endTime = `-${endTimeValue.value}${endTimeUnit.value}`;
}
let value = {
date: [startTime, endTime],
type: "relative"
};
emit("change", value);
} else {
console.warn("验证有误");
}
};
const changeUnit = (type) => {
if (endTimeUnit.value == "") {
endTimeValue.value = "now";
showEndTimeValue.value = false;
} else {
endTimeValue.value = "1";
showEndTimeValue.value = true;
}
if (type === "start") {
startTimeValue.value = props.relativeStartMaxValue !== -1 && startTimeUnit.value === quickStartUnits.value[quickStartUnits.value.length - 1].value && startTimeValue.value > props.relativeStartMaxValue ? props.relativeStartMaxValue : startTimeValue.value;
}
validateDate();
};
const setValue = (startTime, endTime) => {
let start_obj = startTime.match(/^-(\d+)(s|m|h|d|w|mon|q|y)$/);
let end_obj = endTime.match(/^-(\d+)(s|m|h|d|w|mon|q|y)$/);
if (start_obj && end_obj) {
startTimeValue.value = start_obj[1];
startTimeUnit.value = start_obj[2];
endTimeValue.value = end_obj[1];
endTimeUnit.value = end_obj[2];
showEndTimeValue.value = true;
} else if (start_obj && endTime == "now") {
startTimeValue.value = start_obj[1];
startTimeUnit.value = start_obj[2];
endTimeValue.value = "now";
endTimeUnit.value = "";
showEndTimeValue.value = false;
}
validateDate();
};
__expose({ setValue });
return (_ctx, _cache) => {
const _component_a_input_number = InputNumber;
const _component_a_select_option = SelectOption;
const _component_a_select = Select;
const _component_a_button = Button;
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createVNode(_component_a_input_number, {
id: "inputNumber",
value: startTimeValue.value,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => startTimeValue.value = $event),
min: 1,
max: startMaxValue.value,
onChange: _cache[1] || (_cache[1] = ($event) => validateDate())
}, null, 8, ["value", "max"]),
createVNode(_component_a_select, {
value: startTimeUnit.value,
"onUpdate:value": _cache[2] || (_cache[2] = ($event) => startTimeUnit.value = $event),
onChange: _cache[3] || (_cache[3] = ($event) => changeUnit("start")),
dropdownMatchSelectWidth: false
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(quickStartUnits.value, (item, index) => {
return openBlock(), createBlock(_component_a_select_option, {
key: index,
value: item.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.label), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 1
}, 8, ["value"])
]),
createElementVNode("div", _hoisted_4, toDisplayString(unref($t)("datePicker.relative.to")), 1),
createElementVNode("div", _hoisted_5, [
withDirectives(createVNode(_component_a_input_number, {
id: "inputNumber",
value: endTimeValue.value,
"onUpdate:value": _cache[4] || (_cache[4] = ($event) => endTimeValue.value = $event),
min: 1,
onChange: _cache[5] || (_cache[5] = ($event) => validateDate())
}, null, 8, ["value"]), [
[vShow, showEndTimeValue.value]
]),
createVNode(_component_a_select, {
value: endTimeUnit.value,
"onUpdate:value": _cache[6] || (_cache[6] = ($event) => endTimeUnit.value = $event),
onChange: _cache[7] || (_cache[7] = ($event) => changeUnit("end")),
dropdownMatchSelectWidth: false
}, {
default: withCtx(() => [
createVNode(_component_a_select_option, { value: "" }, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("datePicker.relative.now")), 1)
]),
_: 1
}),
(openBlock(true), createElementBlock(Fragment, null, renderList(quickEndUnits.value, (item, index) => {
return openBlock(), createBlock(_component_a_select_option, {
key: index,
value: item.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.label), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 1
}, 8, ["value"]),
createVNode(_component_a_button, {
type: "primary",
onClick: onSubmit
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("datePicker.confirm")), 1)
]),
_: 1
})
])
]),
withDirectives(createElementVNode("div", { class: "error-text" }, toDisplayString(errorMsg.value), 513), [
[vShow, isError.value]
])
]);
};
}
});
export {
_sfc_main as default
};