ele-admin-plus 1.4.1-beta.1 → 1.5.0-beta.1

package/es/ele-cron-panel/index.js

@@ -0,0 +1,348 @@
+import { defineComponent, ref, computed, watch, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, toDisplayString, unref, Fragment, renderList, normalizeClass, withModifiers } from "vue";
+import { useLocale } from "../ele-config-provider/receiver";
+import EleTabs from "../ele-tabs/index";
+import CronSecond from "./components/cron-second";
+import CronMinute from "./components/cron-minute";
+import CronHour from "./components/cron-hour";
+import CronDay from "./components/cron-day";
+import CronMonth from "./components/cron-month";
+import CronWeek from "./components/cron-week";
+import CronYear from "./components/cron-year";
+import { getResultItems } from "./util";
+import { cronPanelEmits, cronPanelProps } from "./props";
+const _hoisted_1 = { class: "ele-cron-panel" };
+const _hoisted_2 = { class: "ele-cron-panel-main" };
+const _hoisted_3 = { class: "ele-cron-panel-extra" };
+const _hoisted_4 = { class: "ele-cron-panel-extra-item" };
+const _hoisted_5 = { class: "ele-cron-panel-extra-header" };
+const _hoisted_6 = { class: "ele-cron-panel-extra-body" };
+const _hoisted_7 = { class: "ele-cron-panel-result" };
+const _hoisted_8 = { class: "ele-cron-panel-result-item" };
+const _hoisted_9 = { class: "ele-cron-panel-result-title" };
+const _hoisted_10 = { class: "ele-cron-panel-result-text" };
+const _hoisted_11 = { class: "ele-cron-panel-result-item" };
+const _hoisted_12 = { class: "ele-cron-panel-result-title" };
+const _hoisted_13 = { class: "ele-cron-panel-result-text" };
+const _hoisted_14 = { class: "ele-cron-panel-result-item" };
+const _hoisted_15 = { class: "ele-cron-panel-result-title" };
+const _hoisted_16 = { class: "ele-cron-panel-result-text" };
+const _hoisted_17 = { class: "ele-cron-panel-result-item" };
+const _hoisted_18 = { class: "ele-cron-panel-result-title" };
+const _hoisted_19 = { class: "ele-cron-panel-result-text" };
+const _hoisted_20 = { class: "ele-cron-panel-result-item" };
+const _hoisted_21 = { class: "ele-cron-panel-result-title" };
+const _hoisted_22 = { class: "ele-cron-panel-result-text" };
+const _hoisted_23 = { class: "ele-cron-panel-result-item" };
+const _hoisted_24 = { class: "ele-cron-panel-result-title" };
+const _hoisted_25 = { class: "ele-cron-panel-result-text" };
+const _hoisted_26 = { class: "ele-cron-panel-result-item" };
+const _hoisted_27 = { class: "ele-cron-panel-result-title" };
+const _hoisted_28 = { class: "ele-cron-panel-result-text" };
+const _hoisted_29 = { class: "ele-cron-panel-result" };
+const _hoisted_30 = { class: "ele-cron-panel-result-item" };
+const _hoisted_31 = { class: "ele-cron-panel-result-title" };
+const _hoisted_32 = { class: "ele-cron-panel-result-text ele-cron-panel-result-value" };
+const _hoisted_33 = { class: "ele-cron-panel-extra-item" };
+const _hoisted_34 = { class: "ele-cron-panel-extra-header" };
+const _hoisted_35 = { class: "ele-cron-panel-extra-body" };
+const _hoisted_36 = { class: "ele-cron-panel-test" };
+const _hoisted_37 = ["onClick"];
+const _hoisted_38 = { class: "ele-cron-panel-list-item-value" };
+const _hoisted_39 = { class: "ele-cron-panel-list-item-label" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleCronPanel" },
+  __name: "index",
+  props: cronPanelProps,
+  emits: cronPanelEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { lang } = useLocale("cronPanel", props);
+    const second = ref("*");
+    const minute = ref("*");
+    const hour = ref("*");
+    const day = ref("*");
+    const month = ref("*");
+    const week = ref("?");
+    const year = ref("");
+    const resultItems = ref([]);
+    const tabActive = ref("second");
+    const tabItems = computed(() => {
+      return [
+        { name: "second", label: lang.value.second },
+        { name: "minute", label: lang.value.minute },
+        { name: "hour", label: lang.value.hour },
+        { name: "day", label: lang.value.day },
+        { name: "month", label: lang.value.month },
+        { name: "week", label: lang.value.week },
+        { name: "year", label: lang.value.year }
+      ];
+    });
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const updateCron = () => {
+      const values = [
+        second.value,
+        minute.value,
+        hour.value,
+        day.value,
+        month.value,
+        week.value
+      ];
+      if (year.value != null && year.value !== "") {
+        values.push(year.value);
+      }
+      const cron = values.join(" ");
+      updateModelValue(cron);
+      return cron;
+    };
+    watch(hour, (h) => {
+      if (h !== "*" && second.value === "*") {
+        second.value = "0";
+      }
+      if (h !== "*" && minute.value === "*") {
+        minute.value = "0";
+      }
+    });
+    watch(day, (d) => {
+      if (d !== "?" && week.value !== "?") {
+        week.value = "?";
+      }
+    });
+    watch(week, (w) => {
+      if (w !== "?" && day.value !== "?") {
+        day.value = "?";
+      }
+    });
+    watch(
+      [second, minute, hour, day, month, week, year],
+      () => {
+        updateCron();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.modelValue,
+      (cron) => {
+        if (!cron) {
+          tabActive.value = "second";
+          second.value = "*";
+          minute.value = "*";
+          hour.value = "*";
+          day.value = "*";
+          month.value = "*";
+          week.value = "?";
+          year.value = "";
+          const str = updateCron();
+          resultItems.value = getResultItems(
+            str,
+            lang.value.resultNoData,
+            lang.value.resultNoMore
+          );
+          return;
+        }
+        const [s, m, h, d, m2, w, y] = cron.split(" ");
+        second.value = s;
+        minute.value = m;
+        hour.value = h;
+        day.value = d;
+        month.value = m2;
+        week.value = w;
+        year.value = y || "";
+        resultItems.value = getResultItems(
+          cron,
+          lang.value.resultNoData,
+          lang.value.resultNoMore
+        );
+      }
+    );
+    watch(lang, () => {
+      resultItems.value = getResultItems(
+        props.modelValue,
+        lang.value.resultNoData,
+        lang.value.resultNoMore
+      );
+    });
+    const cronListVisible = ref(false);
+    const cronList = computed(() => {
+      return [
+        { cron: "0 * * * * ?", label: lang.value.common01 },
+        { cron: "0 0 * * * ?", label: lang.value.common02 },
+        { cron: "0 0/30 * * * ?", label: lang.value.common03 },
+        { cron: "0 0/30 8-9 * * ?", label: lang.value.common04 },
+        { cron: "0 0 0 * * ?", label: lang.value.common05 },
+        { cron: "0 30 8 * * ?", label: lang.value.common06 },
+        { cron: "0 0 8,14,19 * * ?", label: lang.value.common07 },
+        { cron: "0 0 0 1 * ?", label: lang.value.common08 },
+        { cron: "0 0 2 1 * ?", label: lang.value.common09 },
+        { cron: "0 30 8 15 * ?", label: lang.value.common10 },
+        { cron: "0 0 0 L * ?", label: lang.value.common11 },
+        { cron: "0 30 8 L * ?", label: lang.value.common12 },
+        { cron: "0 30 8 ? * 6L", label: lang.value.common13 },
+        { cron: "0 0 0 ? * 1", label: lang.value.common14 },
+        { cron: "0 0 8 ? * 2-4", label: lang.value.common15 },
+        { cron: "0 0 0 1 10 ? 2025-2028", label: lang.value.common16 }
+      ];
+    });
+    const handleItemClick = (item) => {
+      hideCronList();
+      updateModelValue(item.cron);
+    };
+    const openCronList = () => {
+      cronListVisible.value = true;
+    };
+    const hideCronList = () => {
+      cronListVisible.value = false;
+    };
+    __expose({ hideCronList });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(EleTabs, {
+            addable: true,
+            type: "border-card",
+            items: tabItems.value,
+            modelValue: tabActive.value,
+            "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => tabActive.value = $event),
+            onTabAdd: openCronList
+          }, {
+            second: withCtx(() => [
+              createVNode(CronSecond, {
+                modelValue: second.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => second.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            minute: withCtx(() => [
+              createVNode(CronMinute, {
+                modelValue: minute.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            hour: withCtx(() => [
+              createVNode(CronHour, {
+                modelValue: hour.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hour.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            day: withCtx(() => [
+              createVNode(CronDay, {
+                modelValue: day.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => day.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            month: withCtx(() => [
+              createVNode(CronMonth, {
+                modelValue: month.value,
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => month.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            week: withCtx(() => [
+              createVNode(CronWeek, {
+                modelValue: week.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => week.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            year: withCtx(() => [
+              createVNode(CronYear, {
+                modelValue: year.value,
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => year.value = $event),
+                lang: unref(lang)
+              }, null, 8, ["modelValue", "lang"])
+            ]),
+            "add-icon": withCtx(() => [
+              createElementVNode("div", null, toDisplayString(unref(lang).common), 1)
+            ]),
+            _: 1
+          }, 8, ["items", "modelValue"])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, toDisplayString(unref(lang).result), 1),
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", _hoisted_8, [
+                  createElementVNode("div", _hoisted_9, toDisplayString(unref(lang).resultSecond), 1),
+                  createElementVNode("div", _hoisted_10, toDisplayString(second.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_11, [
+                  createElementVNode("div", _hoisted_12, toDisplayString(unref(lang).resultMinute), 1),
+                  createElementVNode("div", _hoisted_13, toDisplayString(minute.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_14, [
+                  createElementVNode("div", _hoisted_15, toDisplayString(unref(lang).resultHour), 1),
+                  createElementVNode("div", _hoisted_16, toDisplayString(hour.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_17, [
+                  createElementVNode("div", _hoisted_18, toDisplayString(unref(lang).resultDay), 1),
+                  createElementVNode("div", _hoisted_19, toDisplayString(day.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_20, [
+                  createElementVNode("div", _hoisted_21, toDisplayString(unref(lang).resultMonth), 1),
+                  createElementVNode("div", _hoisted_22, toDisplayString(month.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_23, [
+                  createElementVNode("div", _hoisted_24, toDisplayString(unref(lang).resultWeek), 1),
+                  createElementVNode("div", _hoisted_25, toDisplayString(week.value), 1)
+                ]),
+                createElementVNode("div", _hoisted_26, [
+                  createElementVNode("div", _hoisted_27, toDisplayString(unref(lang).resultYear), 1),
+                  createElementVNode("div", _hoisted_28, toDisplayString(year.value), 1)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_29, [
+                createElementVNode("div", _hoisted_30, [
+                  createElementVNode("div", _hoisted_31, toDisplayString(unref(lang).resultName), 1),
+                  createElementVNode("div", _hoisted_32, toDisplayString(_ctx.modelValue), 1)
+                ])
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_33, [
+            createElementVNode("div", _hoisted_34, toDisplayString(unref(lang).resultTest), 1),
+            createElementVNode("div", _hoisted_35, [
+              createElementVNode("ul", _hoisted_36, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(resultItems.value, (item) => {
+                  return openBlock(), createElementBlock("li", {
+                    key: item,
+                    class: "ele-cron-panel-test-item"
+                  }, toDisplayString(item), 1);
+                }), 128))
+              ])
+            ])
+          ])
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["ele-cron-panel-list-mask", { "is-show": cronListVisible.value }]),
+          onClick: hideCronList
+        }, [
+          createElementVNode("div", {
+            class: "ele-cron-panel-list-wrapper",
+            onClick: _cache[8] || (_cache[8] = withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(cronList.value, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.cron,
+                class: "ele-cron-panel-list-item",
+                onClick: ($event) => handleItemClick(item)
+              }, [
+                createElementVNode("div", _hoisted_38, toDisplayString(item.cron), 1),
+                createElementVNode("div", _hoisted_39, toDisplayString(item.label), 1)
+              ], 8, _hoisted_37);
+            }), 128))
+          ])
+        ], 2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-cron-panel/props.d.ts

@@ -0,0 +1,20 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { CronPanelLocale } from './types';
+
+/**
+ * 属性
+ */
+export declare const cronPanelProps: {
+    /** 绑定值 */
+    modelValue: StringConstructor;
+    /** 国际化 */
+    locale: PropType<Partial<CronPanelLocale>>;
+};
+export type CronPanelProps = ExtractPropTypes<typeof cronPanelProps>;
+/**
+ * 事件
+ */
+export declare const cronPanelEmits: {
+    /** 更新绑定值 */
+    'update:modelValue': (_value?: string) => boolean;
+};

package/es/ele-cron-panel/props.js

@@ -0,0 +1,14 @@
+const cronPanelProps = {
+  /** 绑定值 */
+  modelValue: String,
+  /** 国际化 */
+  locale: Object
+};
+const cronPanelEmits = {
+  /** 更新绑定值 */
+  "update:modelValue": (_value) => true
+};
+export {
+  cronPanelEmits,
+  cronPanelProps
+};

package/es/ele-cron-panel/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-cron-panel/style/index.js

@@ -0,0 +1,7 @@
+import "element-plus/es/components/radio-group/style/index";
+import "element-plus/es/components/radio/style/index";
+import "element-plus/es/components/input-number/style/index";
+import "element-plus/es/components/checkbox-group/style/index";
+import "element-plus/es/components/checkbox/style/index";
+import "../../ele-tabs/style/index";
+import "./index.scss";

package/es/ele-cron-panel/style/index.scss

@@ -0,0 +1,282 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-cron-panel {
+  position: relative;
+}
+
+.ele-cron-panel-main > .ele-tabs {
+  #{eleVarName('tab', 'height')}: 32px;
+
+  .el-tabs__content {
+    padding: 0;
+  }
+
+  .el-tabs__new-tab {
+    flex-shrink: 0;
+    min-width: 36px;
+    width: max-content;
+    box-sizing: border-box;
+    margin: 0 6px 0 0;
+    padding: 0 4px;
+  }
+}
+
+/* 内容 */
+.ele-cron-panel-content {
+  height: 360px;
+  padding: 12px 20px 0 20px;
+  overflow: auto;
+  box-sizing: border-box;
+
+  .el-radio-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: min-content;
+    min-width: 100%;
+
+    & > .el-radio {
+      margin: 0;
+
+      & + .el-radio {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  /* 指定选择项 */
+  .ele-cron-panel-options-wrapper {
+    padding: 4px 0 0 0;
+    align-items: flex-start;
+  }
+
+  .ele-cron-panel-options {
+    white-space: normal;
+    padding: 6px 0 0 2px;
+    box-sizing: border-box;
+
+    .el-checkbox {
+      margin: 0;
+      width: 66px;
+      height: 26px;
+    }
+  }
+
+  /* 范围输入项 */
+  .ele-cron-panel-item-wrapper {
+    height: auto;
+  }
+
+  .ele-cron-panel-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .ele-cron-panel-item-input > .el-input-number {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ele-cron-panel-item-input,
+  .ele-cron-panel-item-input.el-checkbox {
+    width: 98px;
+  }
+}
+
+/* 底栏 */
+.ele-cron-panel-extra {
+  border: 1px solid elVar('border-color', 'light');
+  border-top: none;
+  display: flex;
+}
+
+.ele-cron-panel-extra-item {
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &:first-child {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  & + .ele-cron-panel-extra-item {
+    min-width: 220px;
+    border-left: 1px solid elVar('border-color', 'light');
+  }
+}
+
+/* 结果 */
+.ele-cron-panel-result {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+  min-width: max-content;
+
+  & + .ele-cron-panel-result {
+    margin: 12px 0 8px 0;
+  }
+}
+
+.ele-cron-panel-result-item {
+  flex-shrink: 0;
+}
+
+.ele-cron-panel-result-title {
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 2px;
+}
+
+.ele-cron-panel-result-text {
+  font-size: 12px;
+  text-align: center;
+  min-width: 32px;
+  max-width: 100%;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  border-radius: 4px;
+  border: 1px solid elVar('border-color');
+  box-sizing: border-box;
+}
+
+.ele-cron-panel-result-value {
+  min-width: 270px;
+}
+
+/* 最近运行时间 */
+.ele-cron-panel-extra-header {
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  padding: 0 16px;
+  background: elVar('fill-color', 'lighter');
+  border-bottom: 1px solid elVar('border-color', 'light');
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.ele-cron-panel-extra-body {
+  padding: 6px 12px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  .ele-cron-panel-test {
+    padding: 0;
+    margin: 0 auto;
+    width: max-content;
+    box-sizing: border-box;
+    list-style: none;
+  }
+
+  .ele-cron-panel-test-item {
+    line-height: 22px;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 4px;
+      margin: 0 6px 0 0;
+      vertical-align: 3px;
+      display: inline-block;
+      background: elVar('text-color', 'regular');
+      border-radius: 50%;
+    }
+  }
+}
+
+/* 常用列表 */
+.ele-cron-panel-list-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+
+  &:not(.is-show) {
+    pointer-events: none;
+
+    .ele-cron-panel-list-wrapper {
+      opacity: 0;
+      transform: scale(0.6);
+      pointer-events: none;
+      visibility: hidden;
+    }
+  }
+}
+
+.ele-cron-panel-list-wrapper {
+  width: max-content;
+  max-height: calc(100% - 36px);
+  margin: 36px 0 0 auto;
+  padding: 8px;
+  border-radius: 6px;
+  background: elVar('bg-color', 'overlay');
+  box-shadow: elVar('box-shadow', 'light');
+  transition: all $transition-slow;
+  transform-origin: top right;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-cron-panel-list-item {
+  padding: 6px 8px 2px 8px;
+  border: 1px solid elVar('border-color');
+  border-radius: 4px;
+  transition: all $transition-base;
+  cursor: pointer;
+
+  & + .ele-cron-panel-list-item {
+    margin-top: 8px;
+  }
+
+  &:hover {
+    background: elVar('fill-color', 'lighter');
+  }
+}
+
+.ele-cron-panel-list-item-label {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
+  opacity: 0.8;
+}
+
+.ele-cron-panel-list-item-value {
+  height: 18px;
+  line-height: 18px;
+  font-size: 12px;
+  border-radius: 4px;
+  padding: 0 6px;
+  width: max-content;
+  background: elVar('color-info', 'light-9');
+  border: 1px solid elVar('border-color');
+}
+
+/* 小屏幕 */
+@media screen and (max-width: #{$mobile-max-width}) {
+  .ele-cron-panel-content {
+    height: 220px;
+  }
+
+  .ele-cron-panel-extra {
+    flex-direction: column;
+
+    .ele-cron-panel-extra-item {
+      flex: none;
+
+      & + .ele-cron-panel-extra-item {
+        border-top: 1px solid elVar('border-color', 'light');
+        border-left: none;
+      }
+    }
+  }
+
+  .ele-cron-panel-result {
+    gap: 2px;
+  }
+}