dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
177 lines (176 loc) • 6.78 kB
JavaScript
import { Input, Button, InputGroup } from "ant-design-vue/es";
import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, isRef, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
import { ConfigProvider } from "ant-design-vue";
import { CRON_TIMES_LIST, PICKER_TYPE_LIST, genRunStrByCron, COLUMNS_HEADER_MAP, DEFAULT_PICKER_FORMAT, TYPE_VALUE_RESOLVER_MAP, COLUMNS_MAP, genCronExprByType } from "../cron-picker/utils/util";
import { $t } from "../i18n/index";
import Panel from "../cron-picker/panel/index.vue";
import { useVModel } from "@vueuse/core";
const _hoisted_1 = { class: "dm-cron-picker" };
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "dm-cron-tab"
},
__name: "index",
props: {
size: { default: "default" },
trigger: { default: "click" },
title: { default: $t("cronPicker.title") },
placement: { default: "bottomLeft" },
format: { default: "" },
disabled: { type: Boolean, default: false },
value: { default: "" },
runTypes: { default: () => [] },
tabSelect: { default: "time" }
},
emits: ["input", "extra", "change", "update:value"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const runCron = useVModel(props, "value", emit);
const runType = ref(props.runTypes.length > 0 ? props.runTypes[0].value : "");
const runTimes = ref();
const unFirstInitType = ref(true);
const tabSelect = ref(props.tabSelect);
const runtypeList = computed(() => {
return props.runTypes.length > 0 ? props.runTypes : CRON_TIMES_LIST;
});
const formatPickerTime = () => {
const format = DEFAULT_PICKER_FORMAT[isValidType.value ? runType.value : "default"];
const { formatter } = TYPE_VALUE_RESOLVER_MAP[runType.value] || TYPE_VALUE_RESOLVER_MAP["default"];
return formatter(runTimes.value, props.format || format);
};
const inputValue = computed(() => {
return formatPickerTime();
});
const isValidType = computed(() => {
return PICKER_TYPE_LIST.includes(runType.value);
});
const setDefaultTime = (runTimesVal) => {
let columns = COLUMNS_MAP[runType.value] || COLUMNS_MAP["default"];
runTimes.value = runTimesVal || Object.fromEntries(
columns.map((item) => [item, ["week", "day", "month"].includes(item) ? 1 : 0])
);
};
const handleGenCronExpr = () => {
runCron.value = genCronExprByType(runType.value, runTimes.value);
};
const handleTabCronExpr = (val) => {
runCron.value = val;
};
onMounted(() => {
if (props.value) {
unFirstInitType.value = false;
const runObj = genRunStrByCron(props.value);
runType.value = runObj.runType;
runTimes.value = runObj.runTimes;
} else {
runType.value = "minute";
setDefaultTime();
}
});
watch(
() => runType.value,
() => {
if (unFirstInitType.value) {
setDefaultTime();
} else {
unFirstInitType.value = true;
}
},
{ immediate: true }
);
watch(
() => props.value,
(val) => {
if (val) {
console.log("props.value", props.value);
runCron.value = val || "";
const runObj = genRunStrByCron(props.value);
runType.value = runObj.runType;
runTimes.value = runObj.runTimes;
} else {
runType.value = "";
setDefaultTime();
}
},
{ immediate: false }
);
watch(
() => runCron.value,
(val, oldVal) => {
const dateStr = `每${COLUMNS_HEADER_MAP[runType.value]} ${inputValue.value}`;
runCron.value = val;
emit("extra", { val, dateStr });
if (val !== oldVal) {
emit("change", val);
}
}
);
return (_ctx, _cache) => {
const _component_a_input = Input;
const _component_a_button = Button;
const _component_a_input_group = InputGroup;
return openBlock(), createBlock(unref(ConfigProvider), { prefixCls: "dm-ui" }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createVNode(_component_a_input_group, {
compact: "",
style: { "display": "flex" }
}, {
default: withCtx(() => [
!_ctx.$slots.default ? (openBlock(), createBlock(_component_a_input, {
key: 0,
class: "cron-picker-input",
size: _ctx.size,
disabled: _ctx.disabled,
value: unref(runCron),
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(runCron) ? runCron.value = $event : null)
}, null, 8, ["size", "disabled", "value"])) : createCommentVNode("", true),
createVNode(Panel, {
trigger: _ctx.trigger,
title: _ctx.title,
size: _ctx.size,
placement: _ctx.placement,
runType: runType.value,
"onUpdate:runType": _cache[1] || (_cache[1] = ($event) => runType.value = $event),
runTypes: _ctx.runTypes,
runtypeList: runtypeList.value,
disabled: _ctx.disabled,
runTimes: runTimes.value,
tabSelect: tabSelect.value,
format: _ctx.format,
isHaveTab: true,
expression: unref(runCron),
onHandleGenCronExpr: handleGenCronExpr,
onHandleTabCronExpr: handleTabCronExpr
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createVNode(_component_a_button, {
size: _ctx.size,
disabled: _ctx.disabled,
class: "cron-picker-panel-button"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.usePickerBtnText")), 1)
]),
_: 1
}, 8, ["size", "disabled"])
])
]),
_: 3
}, 8, ["trigger", "title", "size", "placement", "runType", "runTypes", "runtypeList", "disabled", "runTimes", "tabSelect", "format", "expression"])
]),
_: 3
})
])
]),
_: 3
});
};
}
});
const style_less_vue_type_style_index_0_src_true_lang = "";
export {
_sfc_main as default
};