dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
300 lines (299 loc) • 13 kB
JavaScript
import { Radio, InputNumber, CheckboxGroup, RadioGroup } from "ant-design-vue/es";
import { defineComponent, ref, computed, watch, openBlock, createBlock, withCtx, createVNode, unref, createTextVNode, toDisplayString, createCommentVNode, createElementBlock, Fragment, createElementVNode } from "vue";
import { generateArray } from "../util";
import { TYPE, Alias } from "../constant";
import { $t } from "../../i18n/index";
const _hoisted_1 = { class: "check-box" };
const _hoisted_2 = { class: "check-box-list" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "cron-base",
props: {
modelValue: {
type: String
},
field: {
type: Object,
default: () => {
}
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const radioValue = ref(TYPE.EVERY);
const props = __props;
const emits = __emit;
const range = ref([props.field.min, props.field.min + 1]);
const rangeLeft = ref([props.field.min, props.field.max - 1]);
const step = ref([props.field.min, 1]);
const stepLeft = ref([props.field.min, props.field.max]);
const wellRight = ref([props.field.min, props.field.max]);
const stepRight = ref([1, props.field.max]);
const specify = ref([]);
const specifies = ref(generateArray(props.field.min, props.field.max));
const weekday = ref(1);
const lastDayOfWeek = ref(1);
const well = ref([1, props.field.min]);
const rangeRight = computed(() => {
const { min, max } = props.field;
return [range.value[0] + 1, max];
});
const isUnspecific = computed(() => {
return ["date", "month", "week"].includes(props.field.value);
});
const label = computed(() => {
return {
every: `${$t("cronPicker.every")}${Alias[props.field.value]}`,
start: props.field.value === "week" ? `${$t("cronPicker.from")}${$t("cronPicker.weekly")}` : $t("cronPicker.from"),
middle: props.field.value === "week" ? `~${$t("cronPicker.weekly")}` : "~",
end: props.field.value === "week" ? `${$t("cronPicker.dailyExecution")}` : `${$t("cronPicker.every")}${Alias[props.field.value]}${$t("cronPicker.execute")}`,
rangeMiddle: props.field.value === "week" ? $t("cronPicker.startEvery") : `${Alias[props.field.value]}${$t("cronPicker.startEvery")}`,
rangeEnd: props.field.value === "week" ? `${$t("cronPicker.day")}${$t("cronPicker.executeOnce")}` : `${Alias[props.field.value]}${$t("cronPicker.executeOnce")}`
};
});
const currentValue = computed(() => {
const type = radioValue.value;
switch (type) {
case TYPE.EVERY:
case TYPE.UNSPECIFIC:
return type;
case TYPE.RANGE:
return range.value.join(type);
case TYPE.STEP:
return step.value.join(type);
case TYPE.WELL:
return well.value.join(type);
case TYPE.WEEKDAY:
return `${weekday.value}${type}`;
case TYPE.LAST_DAY:
return props.field.value === "date" ? type : `${lastDayOfWeek.value}${type}`;
case TYPE.SPECIFY:
return specify.value.length ? [...specify.value].sort((a, b) => a - b).join(type) : `${specifies.value[0].value}`;
default:
return "*";
}
});
watch(currentValue, (newVal) => {
emits("update:modelValue", newVal);
});
watch(
() => props.modelValue,
(newVal) => {
const nowValue = newVal;
if ([TYPE.EVERY, TYPE.UNSPECIFIC].includes(nowValue)) {
radioValue.value = nowValue;
} else if (nowValue.includes(TYPE.RANGE)) {
radioValue.value = TYPE.RANGE;
range.value = nowValue.split(TYPE.RANGE).map((i) => parseInt(i));
} else if (nowValue.includes(TYPE.STEP)) {
radioValue.value = TYPE.STEP;
step.value = nowValue.split(TYPE.STEP).map((i) => parseInt(i));
} else if (nowValue.includes(TYPE.WELL)) {
radioValue.value = TYPE.WELL;
well.value = nowValue.split(TYPE.WELL).map((i) => parseInt(i));
} else if (nowValue.includes(TYPE.WEEKDAY)) {
radioValue.value = TYPE.WEEKDAY;
weekday.value = parseInt(nowValue);
} else if (nowValue.includes(TYPE.LAST_DAY)) {
radioValue.value = TYPE.LAST_DAY;
lastDayOfWeek.value = parseInt(nowValue);
} else {
radioValue.value = TYPE.SPECIFY;
specify.value = nowValue.split(TYPE.SPECIFY).map((i) => parseInt(i));
}
},
{ immediate: true }
);
const onrangeLeftChange = (value) => {
const [start, end] = range.value;
if (value >= end) {
range.value[1] = value + 1;
}
};
const onCheckboxGroupChange = (value) => {
if (value.length === 0) {
radioValue.value = TYPE.EVERY;
} else {
radioValue.value = TYPE.SPECIFY;
}
};
return (_ctx, _cache) => {
const _component_a_radio = Radio;
const _component_a_input_number = InputNumber;
const _component_a_checkbox_group = CheckboxGroup;
const _component_a_radio_group = RadioGroup;
return openBlock(), createBlock(_component_a_radio_group, {
class: "radio-group",
value: radioValue.value,
"onUpdate:value": _cache[9] || (_cache[9] = ($event) => radioValue.value = $event)
}, {
default: withCtx(() => [
createVNode(_component_a_radio, {
value: unref(TYPE).EVERY
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(label.value.every), 1)
]),
_: 1
}, 8, ["value"]),
isUnspecific.value ? (openBlock(), createBlock(_component_a_radio, {
key: 0,
value: unref(TYPE).UNSPECIFIC
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.unspecific")), 1)
]),
_: 1
}, 8, ["value"])) : createCommentVNode("", true),
createVNode(_component_a_radio, {
value: unref(TYPE).RANGE
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(label.value.start) + " ", 1),
createVNode(_component_a_input_number, {
value: range.value[0],
"onUpdate:value": _cache[0] || (_cache[0] = ($event) => range.value[0] = $event),
valueModifiers: { tirm: true },
min: rangeLeft.value[0],
max: rangeLeft.value[1],
onChange: onrangeLeftChange
}, null, 8, ["value", "min", "max"]),
createTextVNode(" " + toDisplayString(label.value.middle) + " ", 1),
createVNode(_component_a_input_number, {
value: range.value[1],
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => range.value[1] = $event),
valueModifiers: { tirm: true },
min: rangeRight.value[0],
max: rangeRight.value[1]
}, null, 8, ["value", "min", "max"]),
createTextVNode(" " + toDisplayString(label.value.end), 1)
]),
_: 1
}, 8, ["value"]),
__props.field.value != "week" ? (openBlock(), createBlock(_component_a_radio, {
key: 1,
value: unref(TYPE).STEP
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(label.value.start) + " ", 1),
createVNode(_component_a_input_number, {
value: step.value[0],
"onUpdate:value": _cache[2] || (_cache[2] = ($event) => step.value[0] = $event),
valueModifiers: { tirm: true },
min: stepLeft.value[0],
max: stepLeft.value[1],
onChange: onrangeLeftChange
}, null, 8, ["value", "min", "max"]),
createTextVNode(" " + toDisplayString(label.value.rangeMiddle) + " ", 1),
createVNode(_component_a_input_number, {
value: step.value[1],
"onUpdate:value": _cache[3] || (_cache[3] = ($event) => step.value[1] = $event),
valueModifiers: { tirm: true },
min: stepRight.value[0],
max: stepRight.value[1]
}, null, 8, ["value", "min", "max"]),
createTextVNode(" " + toDisplayString(label.value.rangeEnd), 1)
]),
_: 1
}, 8, ["value"])) : createCommentVNode("", true),
__props.field.value === "date" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
createVNode(_component_a_radio, {
value: unref(TYPE).WEEKDAY
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.monthly")) + " ", 1),
createVNode(_component_a_input_number, {
value: weekday.value,
"onUpdate:value": _cache[4] || (_cache[4] = ($event) => weekday.value = $event),
valueModifiers: { trim: true },
min: rangeLeft.value[0],
max: rangeLeft.value[1]
}, null, 8, ["value", "min", "max"]),
createTextVNode(" " + toDisplayString(unref($t)("cronPicker.day")) + toDisplayString(unref($t)("cronPicker.workly")), 1)
]),
_: 1
}, 8, ["value"]),
createVNode(_component_a_radio, {
value: unref(TYPE).LAST_DAY
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.lastDay")), 1)
]),
_: 1
}, 8, ["value"])
], 64)) : createCommentVNode("", true),
__props.field.value === "week" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
createVNode(_component_a_radio, {
value: unref(TYPE).WELL
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.which")) + " ", 1),
createVNode(_component_a_input_number, {
value: well.value[0],
"onUpdate:value": _cache[5] || (_cache[5] = ($event) => well.value[0] = $event),
valueModifiers: { trim: true },
min: 1,
max: 4
}, null, 8, ["value"]),
createTextVNode(" " + toDisplayString(unref($t)("cronPicker.weekOfWeek")) + " ", 1),
createVNode(_component_a_input_number, {
value: well.value[1],
"onUpdate:value": _cache[6] || (_cache[6] = ($event) => well.value[1] = $event),
valueModifiers: { trim: true },
min: wellRight.value[0],
max: wellRight.value[1]
}, null, 8, ["value", "min", "max"])
]),
_: 1
}, 8, ["value"]),
createVNode(_component_a_radio, {
value: unref(TYPE).LAST_DAY
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref($t)("cronPicker.lastWeek")) + " ", 1),
createVNode(_component_a_input_number, {
value: lastDayOfWeek.value,
"onUpdate:value": _cache[7] || (_cache[7] = ($event) => lastDayOfWeek.value = $event),
valueModifiers: { trim: true },
min: wellRight.value[0],
max: wellRight.value[1]
}, null, 8, ["value", "min", "max"])
]),
_: 1
}, 8, ["value"])
], 64)) : createCommentVNode("", true),
createVNode(_component_a_radio, {
value: unref(TYPE).SPECIFY
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createTextVNode(toDisplayString(unref($t)("cronPicker.appoint")) + " ", 1),
createElementVNode("div", _hoisted_2, [
createVNode(_component_a_checkbox_group, {
value: specify.value,
"onUpdate:value": _cache[8] || (_cache[8] = ($event) => specify.value = $event),
options: specifies.value,
onChange: onCheckboxGroupChange
}, null, 8, ["value", "options"])
])
])
]),
_: 1
}, 8, ["value"])
]),
_: 1
}, 8, ["value"]);
};
}
});
const cronBase_vue_vue_type_style_index_0_scoped_26db80df_lang = "";
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const cronBase = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26db80df"]]);
export {
cronBase as default
};