dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
338 lines (337 loc) • 8.28 kB
JavaScript
import { $t } from "../../i18n/index";
const token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Q{1,3}|([HhMsDm])\1?|"[^"]*"|'[^']*'/g;
const shorten = (arr, sLen) => {
const newArr = [];
for (let i = 0, len = arr.length; i < len; i++) {
newArr.push(arr[i].substr(0, sLen));
}
return newArr;
};
const pad = (val, len) => {
val = String(val);
len = len || 2;
while (val.length < len) {
val = "0" + val;
}
return val;
};
const CRON_TIMES_LIST = [
// {
// label: "实时",
// value: ""
// },
{
label: $t("cronPicker.values")[0],
value: "minute"
},
{
label: $t("cronPicker.values")[1],
value: "hour"
},
{
label: $t("cronPicker.values")[2],
value: "day"
},
{
label: $t("cronPicker.values")[3],
value: "week"
},
{
label: $t("cronPicker.values")[4],
value: "month"
},
{
label: $t("cronPicker.values")[5],
value: "year"
}
];
const PICKER_TYPE_LIST = ["minute", "hour", "day", "week", "month", "year"];
const COLUMNS_MAP = {
year: "month_day_hour_minute_second".split("_"),
month: "day_hour_minute_second".split("_"),
week: "week_hour_minute_second".split("_"),
day: "hour_minute_second".split("_"),
hour: "minute_second".split("_"),
minute: "second".split("_"),
default: "hour_minute_second".split("_")
};
const COLUMNS_HEADER_MAP = {
year: $t("cronPicker.year"),
month: $t("cronPicker.month"),
week: $t("cronPicker.week"),
day: $t("cronPicker.day"),
hour: $t("cronPicker.hour"),
minute: $t("cronPicker.minute"),
second: $t("cronPicker.second")
};
const WEEK_NAMES = $t("cronPicker.weekValues");
const MONTH_NAMES = $t("cronPicker.monthValues");
const COLUMNS_DATA_MAP = {
month: Array.from(new Array(12).keys()).map((v) => {
return {
text: MONTH_NAMES[v],
value: v + 1
};
}),
week: Array.from(new Array(7).keys()).map((v) => {
return {
text: WEEK_NAMES[v],
value: v + 1
};
}),
day: Array.from(new Array(31).keys()).map((v) => {
return {
text: pad(v + 1),
value: v + 1
};
}),
hour: Array.from(new Array(24).keys()).map((v) => {
return {
text: pad(v),
value: v
};
}),
minute: Array.from(new Array(60).keys()).map((v) => {
return {
text: pad(v),
value: v
};
}),
second: Array.from(new Array(60).keys()).map((v) => {
return {
text: pad(v),
value: v
};
})
};
function generatorColumnsHeader(type) {
const columns = COLUMNS_MAP[type];
return columns.map((column) => COLUMNS_HEADER_MAP[column]);
}
function generatorColumnsData(type) {
const columns = COLUMNS_MAP[type];
return columns.map((column) => ({
name: column,
data: COLUMNS_DATA_MAP[column]
}));
}
function scrollTop(el, from = 0, to, duration = 500, endCallback) {
if (typeof window !== "undefined" && !window.requestAnimationFrame) {
window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1e3 / 60);
};
}
const difference = Math.abs(from - to);
const step = Math.ceil(difference / duration * 50);
function scroll(start, end, step2) {
if (start === end) {
endCallback && endCallback();
return;
}
let d = start + step2 > end ? end : start + step2;
if (start > end) {
d = start - step2 < end ? end : start - step2;
}
if (el === window) {
typeof window !== "undefined" && window.scrollTo(d, d);
} else {
el.scrollTop = d;
}
typeof window !== "undefined" && window.requestAnimationFrame(() => scroll(d, end, step2));
}
scroll(from, to, step);
}
const DEFAULT_PICKER_FORMAT = {
year: "MM/dd HH:mm:ss",
month: "dd HH:mm:ss",
week: "ddd HH:mm:ss",
day: "HH:mm:ss",
hour: "mm:ss",
minute: "ss",
default: "HH:mm:ss"
};
const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const monthNamesShort = shorten(monthNames, 3);
shorten(dayNames, 3);
const defaulti18n = {
dayNamesShort: WEEK_NAMES,
dayNames: WEEK_NAMES,
monthNamesShort,
monthNames
};
const getPartValue = (value, type) => value[type];
const formatFlags = {
D: function(value) {
return getPartValue(value, "week");
},
DD: function(value) {
return pad(getPartValue(value, "week"));
},
d: function(value) {
return getPartValue(value, "day");
},
dd: function(value) {
return pad(getPartValue(value, "day"));
},
ddd: function(value, i18n) {
return i18n.dayNamesShort[getPartValue(value, "week") - 1];
},
dddd: function(value, i18n) {
return i18n.dayNames[getPartValue(value, "week") - 1];
},
M: function(value) {
return getPartValue(value, "month");
},
MM: function(value) {
return pad(getPartValue(value, "month"));
},
MMM: function(value, i18n) {
return i18n.monthNamesShort[getPartValue(value, "month")];
},
MMMM: function(value, i18n) {
return i18n.monthNames[getPartValue(value, "month")];
},
h: function(value) {
return getPartValue(value, "hour") % 12 || 12;
},
hh: function(value) {
return pad(getPartValue(value, "hour") % 12 || 12);
},
H: function(value) {
return getPartValue(value, "hour");
},
HH: function(value) {
return pad(getPartValue(value, "hour"));
},
m: function(value) {
return getPartValue(value, "minute");
},
mm: function(value) {
return pad(getPartValue(value, "minute"));
},
s: function(value) {
return getPartValue(value, "second");
},
ss: function(value) {
return pad(getPartValue(value, "second"));
}
};
const formatPickerTime = (value, format, i18nSettings) => {
const i18n = i18nSettings || defaulti18n;
return format.replace(token, function($0) {
return $0 in formatFlags ? formatFlags[$0](value, i18n) : $0.slice(1, $0.length - 1);
});
};
const DATE_FORMATTER = function(value, format) {
return formatPickerTime(value, format);
};
const TYPE_VALUE_RESOLVER_MAP = {
default: {
formatter: DATE_FORMATTER,
parser(text) {
if (text === void 0 || text === "")
return null;
return text;
}
},
year: {
formatter: DATE_FORMATTER
},
month: {
formatter: DATE_FORMATTER
},
week: {
formatter: DATE_FORMATTER
},
day: {
formatter: DATE_FORMATTER
},
hour: {
formatter: DATE_FORMATTER
},
minute: {
formatter: DATE_FORMATTER
}
};
const CRON_TPL = "{second} {minute} {hour} {day} {month} {week}";
const DEFAULT_CRON_VALUE = {
second: "*",
minute: "*",
hour: "*",
day: "*",
month: "*",
week: "*"
};
const renderTpl = (tpl, objVal) => {
Object.entries(objVal).map((item) => {
tpl = tpl.replace(`{${item[0]}}`, item[1]);
});
return tpl;
};
const genCronExprByType = (type, value) => {
return renderTpl(
CRON_TPL,
Object.assign(
{},
DEFAULT_CRON_VALUE,
!type || value,
type === "week" ? { day: "?" } : { week: "?" }
)
);
};
const genRunStrByCron = (cronStr) => {
const cronValues = {};
const cronArr = cronStr.split(" ");
const cronTime = ["second", "minute", "hour", "day", "month", "week"];
cronArr.forEach((value, index) => {
const key = cronTime[index];
if (value !== "*" && value !== "?") {
cronValues[key] = parseInt(value);
}
});
let unitKey = "";
if (!cronStr.includes("*")) {
unitKey = "year";
} else if (cronStr.includes("* * * * ?")) {
unitKey = "minute";
} else if (cronStr.includes("* * * ?")) {
unitKey = "hour";
} else if (cronStr.includes("* * ?")) {
unitKey = "day";
} else if (cronStr.includes("* ?")) {
unitKey = "month";
} else if (cronStr.includes("? *")) {
unitKey = "week";
}
return { runType: unitKey, runTimes: cronValues };
};
export {
COLUMNS_DATA_MAP,
COLUMNS_HEADER_MAP,
COLUMNS_MAP,
CRON_TIMES_LIST,
DEFAULT_PICKER_FORMAT,
MONTH_NAMES,
PICKER_TYPE_LIST,
TYPE_VALUE_RESOLVER_MAP,
WEEK_NAMES,
genCronExprByType,
genRunStrByCron,
generatorColumnsData,
generatorColumnsHeader,
scrollTop
};