✨ cron 生成组件.

2024-05-21 13:15:25 +08:00
parent 4f0f320fcd
commit cce511c4b4
45 changed files with 105 additions and 57 deletions
--- a/orion-visor-ui/src/assets/style/layout.less
+++ b/orion-visor-ui/src/assets/style/layout.less
@@ -66,6 +66,11 @@
  }
 }

+// -- drawer
+.drawer-form-small{
+  padding: 20px 20px 2px 20px;
+}
+
 // -- modal
 .modal-form-small {
  .arco-modal-header {
--- a/orion-visor-ui/src/components/meta/cron/generator-input/const.types.ts
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/const.types.ts
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/day-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/day-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/hour-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/hour-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/minute-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/minute-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/month-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/month-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/second-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/second-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/use-mixin.ts
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/use-mixin.ts
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/week-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/week-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/form/year-form.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/form/year-form.vue
--- a/orion-visor-ui/src/components/meta/cron/generator-input/index.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-input/index.vue
@@ -99,7 +99,7 @@
                       :placeholder="placeholder"
                       @change="onInputCronChange">
                <template #prepend>
-                  <span class="allow-click">Expression</span>
+                  <span class="allow-click">表达式</span>
                </template>
                <template #append>
                  <span class="allow-click span-blue"
@@ -124,7 +124,7 @@

 <script lang="ts">
  export default {
-    name: 'cronInput'
+    name: 'cronGeneratorInput'
  };
 </script>

--- a/orion-visor-ui/src/components/meta/cron/generator-model/index.vue
+++ b/orion-visor-ui/src/components/meta/cron/generator-model/index.vue
@@ -3,7 +3,7 @@
           modal-class="modal-form-small"
           title-align="start"
           title="cron 生成器"
-           :top="16"
+           :top="32"
           :width="780"
           :align-center="false"
           :draggable="true"
@@ -11,7 +11,7 @@
           :unmount-on-close="true"
           :body-style="{ padding: '4px 16px 8px 16px' }">
    <!-- cron 输入框 -->
-    <cron-input v-model="cronExpression" />
+    <cron-generator-input v-model="cronExpression" />
    <!-- 页脚-->
    <template #footer>
      <a-button size="small" @click="handlerClose">关闭</a-button>
@@ -26,14 +26,14 @@

 <script lang="ts">
  export default {
-    name: 'cronModal'
+    name: 'cronGeneratorModal'
  };
 </script>

 <script lang="ts" setup>
  import { ref } from 'vue';
  import useVisible from '@/hooks/visible';
-  import CronInput from '@/components/data/cron/input/index.vue';
+  import CronGeneratorInput from '../generator-input/index.vue';

  const { visible, setVisible } = useVisible();

--- a/orion-visor-ui/src/components/meta/expression/next-cron-modal/index.vue
+++ b/orion-visor-ui/src/components/meta/expression/next-cron-modal/index.vue
@@ -32,7 +32,7 @@

 <script lang="ts">
  export default {
-    name: 'nextCronModal'
+    name: 'cronNextModal'
  };
 </script>

--- a/orion-visor-ui/src/components/meta/cron/validator.ts
+++ b/orion-visor-ui/src/components/meta/cron/validator.ts
--- a/orion-visor-ui/src/components/user/user/update-password-modal/index.vue
+++ b/orion-visor-ui/src/components/user/user/update-password-modal/index.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="重置密码"
           :top="120"
--- a/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-clear-modal.vue
+++ b/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-clear-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="清空主机连接日志"
           :align-center="false"
--- a/orion-visor-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
+++ b/orion-visor-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
@@ -52,7 +52,8 @@
        <!-- 主机密钥 -->
        <a-form-item v-if="formModel.type === IdentityType.KEY"
                     field="keyId"
-                     label="主机密钥">
+                     label="主机密钥"
+                     :hide-asterisk="true">
          <host-key-selector v-model="formModel.keyId" />
        </a-form-item>
      </a-form>
--- a/orion-visor-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
+++ b/orion-visor-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
@@ -8,7 +8,7 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @cancel="handleClose">
-    <a-spin class="full modal-form-small" :loading="loading">
+    <a-spin class="full drawer-form-small" :loading="loading">
      <a-alert class="keygen-alert">
        请使用 ssh-keygen -m PEM -t rsa 生成密钥
      </a-alert>
--- a/orion-visor-ui/src/views/asset/host-list/components/host-form-modal.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
--- a/orion-visor-ui/src/views/exec/exec-command-log/components/exec-command-log-clear-modal.vue
+++ b/orion-visor-ui/src/views/exec/exec-command-log/components/exec-command-log-clear-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="清空批量执行日志"
           :align-center="false"
--- a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
+++ b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
@@ -9,7 +9,7 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @cancel="handleClose">
-    <a-spin class="full modal-form-small" :loading="loading">
+    <a-spin class="full drawer-form-small" :loading="loading">
      <!-- 命令表单 -->
      <a-form :model="formModel"
              ref="formRef"
--- a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
+++ b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
@@ -9,7 +9,7 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @cancel="handleClose">
-    <a-spin class="full modal-form-small" :loading="loading">
+    <a-spin class="full drawer-form-small" :loading="loading">
      <a-form :model="formModel"
              ref="formRef"
              label-align="right"
--- a/orion-visor-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue
+++ b/orion-visor-ui/src/views/exec/upload-task/components/upload-task-clear-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="清理上传任务"
           :top="80"
--- a/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
+++ b/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="修改权限"
           :align-center="false"
--- a/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-create-modal.vue
+++ b/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-create-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="touch ? '创建文件' : '创建文件夹'"
           :align-center="false"
--- a/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-move-modal.vue
+++ b/orion-visor-ui/src/views/host/terminal/components/sftp/sftp-move-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="移动文件"
           :align-center="false"
--- a/orion-visor-ui/src/views/host/terminal/index.vue
+++ b/orion-visor-ui/src/views/host/terminal/index.vue
@@ -165,11 +165,11 @@
    }

    &-left {
-      border-right: 1px solid var(--color-bg-content);
+      border-right: 1px var(--color-bg-content) solid;
    }

    &-right {
-      border-left: 1px solid var(--color-bg-content);
+      border-left: 1px var(--color-bg-content) solid;
    }

    &-content {
--- a/orion-visor-ui/src/views/job/exec-job-log/components/exec-job-log-clear-modal.vue
+++ b/orion-visor-ui/src/views/job/exec-job-log/components/exec-job-log-clear-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="清空计划任务日志"
           :align-center="false"
--- a/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
+++ b/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
@@ -9,7 +9,7 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @cancel="handleClose">
-    <a-spin class="full modal-form-small" :loading="loading">
+    <a-spin class="full drawer-form-small" :loading="loading">
      <a-form :model="formModel"
              ref="formRef"
              label-align="right"
@@ -51,7 +51,12 @@
                       placeholder="请输入 cron 表达式"
                       allow-clear>
                <template #append>
-                  <span class="span-blue pointer usn"
+                  <span class="span-blue usn cron-action-item"
+                        title="生成 cron 表达式"
+                        @click="emits('genCron', formModel.expression)">
+                    生成
+                  </span>
+                  <span class="span-blue usn cron-action-item"
                        title="获取 cron 下次执行时间"
                        @click="emits('testCron', formModel.expression)">
                    测试
@@ -142,7 +147,7 @@
  import { useDictStore } from '@/store';
  import ExecEditor from '@/components/view/exec-editor/index.vue';

-  const emits = defineEmits(['added', 'updated', 'openHost', 'openTemplate', 'testCron']);
+  const emits = defineEmits(['added', 'updated', 'openHost', 'openTemplate', 'testCron', 'genCron']);

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();
@@ -205,6 +210,11 @@
    };
  };

+  // 设置表达式
+  const setExpression = (expression: string) => {
+    formModel.value.expression = expression;
+  };
+
  // 设置选中主机
  const setSelectedHost = (hosts: Array<number>) => {
    formModel.value.hostIdList = hosts;
@@ -231,7 +241,7 @@
    }
  };

-  defineExpose({ openAdd, openUpdate, setSelectedHost, setWithTemplate });
+  defineExpose({ openAdd, openUpdate, setSelectedHost, setWithTemplate, setExpression });

  // 打开选择主机
  const openSelectHost = () => {
@@ -320,4 +330,26 @@
    height: calc(100vh - 264px);
  }

+  :deep(.arco-input-append) {
+    padding: 0 !important;
+  }
+
+  .cron-action-item {
+    width: 100%;
+    height: 100%;
+    padding: 0 12px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    transition: background-color .2s;
+
+    &:hover {
+      background: var(--color-fill-3);
+    }
+
+    &:first-child {
+      border-right: 1px var(--color-neutral-3) solid;
+    }
+  }
+
 </style>
--- a/orion-visor-ui/src/views/job/exec-job/index.vue
+++ b/orion-visor-ui/src/views/job/exec-job/index.vue
@@ -12,11 +12,15 @@
                          @updated="modalUpdateCallback"
                          @open-host="(e) => hostModal.open(e)"
                          @open-template="() => templateModal.open()"
-                          @test-cron="openNextCron" />
+                          @test-cron="openNextCron"
+                          @gen-cron="openGeneratorCron" />
    <!-- 任务详情模态框 -->
    <exec-job-detail-drawer ref="detail" />
    <!-- cron 执行时间模态框 -->
-    <next-cron-modal ref="nextCron" />
+    <cron-next-modal ref="nextCron" />
+    <!-- cron 生成模态框 -->
+    <cron-generator-modal ref="genModal"
+                          @ok="(e) => drawer.setExpression(e)" />
    <!-- 执行模板模态框 -->
    <exec-template-modal ref="templateModal"
                         @selected="(e) => drawer.setWithTemplate(e)" />
@@ -40,14 +44,16 @@
  import ExecJobFormDrawer from './components/exec-job-form-drawer.vue';
  import ExecJobDetailDrawer from './components/exec-job-detail-drawer.vue';
  import AuthorizedHostModal from '@/components/asset/host/authorized-host-modal/index.vue';
-  import NextCronModal from '@/components/meta/expression/next-cron-modal/index.vue';
  import ExecTemplateModal from '@/components/exec/template/modal/index.vue';
+  import CronNextModal from '@/components/meta/cron/next-modal/index.vue';
+  import CronGeneratorModal from '@/components/meta/cron/generator-model/index.vue';

  const render = ref(false);
  const table = ref();
  const drawer = ref();
  const detail = ref();
  const nextCron = ref();
+  const genModal = ref();
  const templateModal = ref();
  const hostModal = ref();

@@ -66,6 +72,11 @@
    nextCron.value.open({ expression: cron, times: CronNextTimes });
  };

+  // 打开生成表达式
+  const openGeneratorCron = (cron: string) => {
+    genModal.value.open(cron);
+  };
+
  onBeforeMount(async () => {
    const dictStore = useDictStore();
    await dictStore.loadKeys(dictKeys);
--- a/orion-visor-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
+++ b/orion-visor-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
--- a/orion-visor-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
+++ b/orion-visor-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
--- a/orion-visor-ui/src/views/system/menu/components/menu-form-modal.vue
+++ b/orion-visor-ui/src/views/system/menu/components/menu-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="30"
--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="清空操作日志"
           :align-center="false"
--- a/orion-visor-ui/src/views/user/role/components/role-form-modal.vue
+++ b/orion-visor-ui/src/views/user/role/components/role-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
--- a/orion-visor-ui/src/views/user/role/components/role-menu-grant-modal.vue
+++ b/orion-visor-ui/src/views/user/role/components/role-menu-grant-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-small"
+           modal-class="modal-form-large"
           title-align="start"
           title="分配菜单"
           width="80%"
@@ -15,7 +15,7 @@
           :on-before-ok="handlerOk"
           @close="handleClose">
    <div class="role-menu-wrapper">
-      <a-spin :loading="loading">
+      <a-spin class="full" :loading="loading">
        <a-alert class="usn mb8">
          <span>{{ roleRecord.name }} {{ roleRecord.code }}</span>
          <span class="mx8">-</span>
--- a/orion-visor-ui/src/views/user/user/components/user-form-modal.vue
+++ b/orion-visor-ui/src/views/user/user/components/user-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           :title="title"
           :top="80"
--- a/orion-visor-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
+++ b/orion-visor-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="分配角色"
           :top="120"
--- a/orion-visor-ui/src/views/user/user/components/user-reset-password-form-modal.vue
+++ b/orion-visor-ui/src/views/user/user/components/user-reset-password-form-modal.vue
@@ -1,6 +1,6 @@
 <template>
  <a-modal v-model:visible="visible"
-           body-class="modal-form-large"
+           modal-class="modal-form-large"
           title-align="start"
           title="重置密码"
           :top="120"