dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
256 lines (255 loc) • 10.6 kB
JavaScript
import { RadioButton, RadioGroup, Space, Button, Popover } from "ant-design-vue/es";
import { defineComponent, ref, watch, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, unref, createCommentVNode, isRef, createElementBlock, Fragment, renderList, renderSlot } from "vue";
import { useVModel } from "@vueuse/core";
import Picker from "../picker/index.vue";
import PopTab from "../../cron-tab/components/pop-tab.vue";
import CronTabResult from "../../cron-tab/components/cron-tab-result.vue";
import { $t } from "../../i18n/index";
import cronParser from "cron-parser";
import { zerofill } from "../../cron-tab/util";
const _hoisted_1 = { class: "cron-picker-panel-body" };
const _hoisted_2 = { class: "cron-tab-content" };
const _hoisted_3 = { class: "cron-picker-panel-item-title" };
const _hoisted_4 = { class: "cron-picker-panel-item-title" };
const _hoisted_5 = {
key: 0,
class: "footer-button"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
size: { default: "default" },
title: { default: $t("cronPicker.title") },
placement: { default: "bottomLeft" },
panelVisible: { type: Boolean },
disabled: { type: Boolean, default: false },
runtypeList: { default: () => [] },
runTypes: { default: () => [] },
runTimes: {},
format: { default: "" },
runType: {},
isHaveTab: { type: Boolean, default: false },
expression: { default: "" },
tabSelect: { default: "time" }
},
emits: ["setStatus", "handleGenCronExpr", "handleTabCronExpr", "update:panelVisible", "update:runType"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const valueRunType = useVModel(props, "runType", emit);
const handleGenCronExpr = () => {
visible.value = false;
if (!props.isHaveTab) {
emit("handleGenCronExpr");
} else {
if (modeType.value === "tab") {
emit("handleTabCronExpr", tabRegValue.value);
} else {
emit("handleGenCronExpr");
}
}
};
const visible = ref(false);
const modeType = ref(props.tabSelect);
const tabRegValue = ref(props.expression);
const previewTime = ref(10);
const previews = ref([]);
watch(tabRegValue, (newVal) => {
previews.value = generatePreview(newVal);
});
const generatePreview = (val) => {
let array = [];
try {
const interval = cronParser.parseExpression(val);
for (let i = 0; i < previewTime.value; i += 1) {
const datetime = interval.next();
const year = zerofill(datetime.getFullYear());
const month = zerofill(datetime.getMonth() + 1);
const date = zerofill(datetime.getDate());
const hour = zerofill(datetime.getHours());
const minute = zerofill(datetime.getMinutes());
const second = zerofill(datetime.getSeconds());
array.push(`${year}-${month}-${date} ${hour}:${minute}:${second}`);
}
} catch (error) {
array = ["此表达式暂时无法解析！"];
}
return array;
};
const emptyPre = () => {
previews.value = [];
};
const parse = (val) => {
previews.value = generatePreview(val);
};
watch(
() => props.expression,
(newval) => {
tabRegValue.value = newval;
},
{ immediate: true }
);
return (_ctx, _cache) => {
const _component_a_radio_button = RadioButton;
const _component_a_radio_group = RadioGroup;
const _component_a_space = Space;
const _component_a_button = Button;
const _component_a_popover = Popover;
return openBlock(), createBlock(_component_a_popover, {
trigger: "click",
title: _ctx.title,
size: _ctx.size,
placement: _ctx.placement,
visible: visible.value,
"onUpdate:visible": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
overlayClassName: !_ctx.isHaveTab ? "cron-picker-panel" : "cron-picker-panel cron-tab-panel"
}, {
content: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
_ctx.isHaveTab ? (openBlock(), createBlock(_component_a_radio_group, {
key: 0,
class: "tab-radio",
value: modeType.value,
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => modeType.value = $event)
}, {
default: withCtx(() => [
createVNode(_component_a_radio_button, { value: "time" }, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.timePicker")), 1)
]),
_: 1
}),
createVNode(_component_a_radio_button, { value: "tab" }, {
default: withCtx(() => _cache[5] || (_cache[5] = [
createTextVNode("Crontab")
])),
_: 1
})
]),
_: 1
}, 8, ["value"])) : createCommentVNode("", true),
modeType.value === "time" || !_ctx.isHaveTab ? (openBlock(), createBlock(_component_a_space, {
key: 1,
size: 24,
direction: "vertical"
}, {
default: withCtx(() => [
createVNode(_component_a_space, {
size: 8,
direction: "vertical"
}, {
default: withCtx(() => [
createElementVNode("label", _hoisted_3, toDisplayString(unref($t)("cronPicker.frequency")), 1),
createVNode(_component_a_radio_group, {
class: "cron-picker-panel-radio-group",
value: unref(valueRunType),
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => isRef(valueRunType) ? valueRunType.value = $event : null),
"button-style": "solid"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.runtypeList, (type, index2) => {
return openBlock(), createBlock(_component_a_radio_button, {
class: "cron-picker-panel-radio-button",
key: index2,
value: type.value
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(type.label), 1)
]),
_: 2
}, 1032, ["value"]);
}), 128))
]),
_: 1
}, 8, ["value"])
]),
_: 1
}),
createVNode(_component_a_space, {
size: 8,
direction: "vertical",
style: { width: "100%" }
}, {
default: withCtx(() => [
createElementVNode("label", _hoisted_4, toDisplayString(unref($t)("cronPicker.time")), 1),
createVNode(Picker, {
disabled: _ctx.disabled,
runTypes: _ctx.runTypes,
runTimes: _ctx.runTimes,
format: _ctx.format,
runType: unref(valueRunType)
}, null, 8, ["disabled", "runTypes", "runTimes", "format", "runType"])
]),
_: 1
})
]),
_: 1
})) : createCommentVNode("", true),
modeType.value === "tab" && _ctx.isHaveTab ? (openBlock(), createBlock(PopTab, {
key: 2,
modelValue: tabRegValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabRegValue.value = $event),
onParse: parse
}, null, 8, ["modelValue"])) : createCommentVNode("", true),
_ctx.isHaveTab && modeType.value === "tab" ? (openBlock(), createBlock(CronTabResult, {
key: 3,
previews: previews.value,
onEmptyPre: emptyPre
}, null, 8, ["previews"])) : createCommentVNode("", true)
]),
_ctx.isHaveTab ? (openBlock(), createElementBlock("div", _hoisted_5, [
createVNode(_component_a_button, {
class: "tab-confirm",
type: "primary",
onClick: handleGenCronExpr
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.confirm")), 1)
]),
_: 1
}),
createVNode(_component_a_button, {
class: "tab-cancel",
onClick: _cache[3] || (_cache[3] = ($event) => visible.value = false)
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.cancel")), 1)
]),
_: 1
})
])) : createCommentVNode("", true),
!_ctx.isHaveTab ? (openBlock(), createBlock(_component_a_button, {
key: 1,
class: "cron-picker-panel-confirm-button",
block: "",
type: "primary",
onClick: handleGenCronExpr
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.confirm")), 1)
]),
_: 1
})) : createCommentVNode("", true)
])
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]),
_: 3
}, 8, ["title", "size", "placement", "visible", "overlayClassName"]);
};
}
});
const index_vue_vue_type_style_index_0_scoped_48b8d6ea_lang = "";
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-48b8d6ea"]]);
export {
index as default
};