🔨 定时执行配置.

orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue

@@ -10,7 +10,7 @@
                   type="round"
                   :checked-value="1"
                   :unchecked-value="0"
-                  :beforeChange="s => updateStatus(s as number)" />
+                  :before-change="s => updateStatus(s as number)" />
       </div>
     </template>
     <a-spin v-show="config.status" :loading="loading" class="config-form-wrapper">
@@ -223,7 +223,7 @@
   }] as FieldRule[];
 
   // 修改状态
-  const updateStatus = (e: number) => {
+  const updateStatus = async (e: number) => {
     setLoading(true);
     return updateHostConfigStatus({
       hostId: props?.hostId,

orion-ops-ui/src/views/exec/exec-command-log/components/exec-command-log-clear-modal.vue

@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visible"
            body-class="modal-form"
            title-align="start"
-           title="清空执行记录"
+           title="清空批量执行日志"
            :align-center="false"
            :draggable="true"
            :mask-closable="false"

orion-ops-ui/src/views/exec/exec-command-log/components/exec-command-log-table.vue

@@ -55,7 +55,7 @@
       <div class="table-left-bar-handle">
         <!-- 标题 -->
         <div class="table-title">
-          执行记录列表
+          批量执行日志列表
         </div>
       </div>
       <!-- 右侧操作 -->

orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel-history.vue

@@ -17,7 +17,7 @@
     <div v-else-if="!historyLogs.length" class="flex-center mt16">
       <a-empty description="无执行记录" />
     </div>
-    <!-- 执行记录 -->
+    <!-- 批量执行日志 -->
     <div v-else class="exec-history-rows">
       <div v-for="record in historyLogs"
            :key="record.id"
@@ -84,7 +84,7 @@
 
   defineExpose({ add });
 
-  // 加载执行记录
+  // 加载批量执行日志
   const fetchExecHistory = async () => {
     setLoading(true);
     try {
@@ -96,7 +96,7 @@
     }
   };
 
-  // 加载执行记录
+  // 加载批量执行日志
   onMounted(fetchExecHistory);
 
 </script>

orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue

@@ -0,0 +1,179 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="470"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin class="full modal-form" :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :label-col-props="{ span: 5 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        <!-- 任务名称 -->
+        <a-form-item field="name" label="任务名称">
+          <a-input v-model="formModel.name"
+                   placeholder="请输入任务名称"
+                   allow-clear />
+        </a-form-item>
+        <!-- 执行序列 -->
+        <a-form-item field="execSeq" label="执行序列">
+          <a-input-number v-model="formModel.execSeq"
+                          placeholder="请输入执行序列"
+                          hide-button />
+        </a-form-item>
+        <!-- cron 表达式 -->
+        <a-form-item field="expression" label="cron 表达式">
+          <a-input v-model="formModel.expression"
+                   placeholder="请输入cron 表达式"
+                   allow-clear />
+        </a-form-item>
+        <!-- 超时时间 -->
+        <a-form-item field="timeout" label="超时时间">
+          <a-input-number v-model="formModel.timeout"
+                          placeholder="请输入超时时间"
+                          hide-button />
+        </a-form-item>
+        <!-- 执行命令 -->
+        <a-form-item field="command" label="执行命令">
+          <a-input v-model="formModel.command"
+                   placeholder="请输入执行命令"
+                   allow-clear />
+        </a-form-item>
+        <!-- 命令参数 -->
+        <a-form-item field="parameterSchema" label="命令参数">
+          <a-input v-model="formModel.parameterSchema"
+                   placeholder="请输入命令参数"
+                   allow-clear />
+        </a-form-item>
+        <!-- 任务状态 -->
+        <a-form-item field="status" label="任务状态">
+          <a-select v-model="formModel.status"
+                    :options="toOptions(execJobStatusKey)"
+                    placeholder="任务状态" />
+        </a-form-item>
+        <!-- 最近执行id -->
+        <a-form-item field="recentLogId" label="最近执行id">
+          <a-input-number v-model="formModel.recentLogId"
+                          placeholder="请输入最近执行id"
+                          hide-button />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobDetailDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecJobUpdateRequest } from '@/api/exec/exec-job';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { execJobStatusKey } from '../types/const';
+  import { createExecJob, updateExecJob } from '@/api/exec/exec-job';
+  import { Message } from '@arco-design/web-vue';
+  import { useDictStore } from '@/store';
+
+  const emits = defineEmits(['added', 'updated']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+  const formRef = ref<any>();
+  const formModel = ref<ExecJobUpdateRequest>({});
+
+  const defaultForm = (): ExecJobUpdateRequest => {
+    return {
+      id: undefined,
+      name: undefined,
+      execSeq: undefined,
+      expression: undefined,
+      timeout: undefined,
+      command: undefined,
+      parameterSchema: undefined,
+      status: undefined,
+      recentLogId: undefined,
+    };
+  };
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加计划执行';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = (record: any) => {
+    title.value = '修改计划执行';
+    isAddHandle.value = false;
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createExecJob(formModel.value);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateExecJob(formModel.value);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue

@@ -0,0 +1,255 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            width="70%"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin class="full spin-wrapper" :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              layout="vertical"
+              :rules="formRules">
+        <a-row :gutter="16">
+          <!-- 任务名称 -->
+          <a-col :span="14">
+            <a-form-item field="name" label="任务名称">
+              <a-input v-model="formModel.name"
+                       placeholder="请输入任务名称"
+                       allow-clear />
+            </a-form-item>
+          </a-col>
+          <!-- 执行主机 -->
+          <a-col :span="10">
+            <a-form-item field="hostIdList" label="执行主机">
+              <div class="selected-host">
+                <!-- 已选择数量 -->
+                <span class="usn" v-if="formModel.hostIdList?.length">
+                  已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
+                </span>
+                <span class="usn pointer span-blue" @click="openSelectHost">
+                  {{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
+                </span>
+              </div>
+            </a-form-item>
+          </a-col>
+          <!-- cron -->
+          <a-col :span="14">
+            <a-form-item field="expression" label="cron">
+              <a-input v-model="formModel.expression"
+                       placeholder="请输入 cron 表达式"
+                       allow-clear>
+                <template #append>
+                  <span class="span-blue pointer usn"
+                        title="获取 cron 下次执行时间"
+                        @click="emits('testCron', formModel.expression)">
+                    测试
+                  </span>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <!-- 超时时间 -->
+          <a-col :span="10">
+            <a-form-item field="timeout" label="超时时间">
+              <a-input-number v-model="formModel.timeout"
+                              placeholder="为0则不超时"
+                              :min="0"
+                              :max="100000"
+                              hide-button>
+                <template #suffix>
+                  秒
+                </template>
+              </a-input-number>
+            </a-form-item>
+          </a-col>
+          <!-- 执行命令 -->
+          <a-col :span="24">
+            <a-form-item field="command"
+                         label="执行命令"
+                         :hide-label="true"
+                         :wrapper-col-props="{ span: 24 }"
+                         :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
+              <exec-editor v-model="formModel.command"
+                           containerClass="command-editor"
+                           theme="vs-dark"
+                           :parameter="jobBuiltinsParams" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobFormDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecJobUpdateRequest } from '@/api/exec/exec-job';
+  import { onUnmounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { jobBuiltinsParams } from '../types/const';
+  import { createExecJob, getExecJob, updateExecJob } from '@/api/exec/exec-job';
+  import { Message } from '@arco-design/web-vue';
+  import { useDictStore } from '@/store';
+  import ExecEditor from '@/components/view/exec-editor/index.vue';
+
+  const emits = defineEmits(['added', 'updated', 'openHost', 'testCron']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+  const formRef = ref<any>();
+  const formModel = ref<ExecJobUpdateRequest>({});
+
+  const defaultForm = (): ExecJobUpdateRequest => {
+    return {
+      id: undefined,
+      name: undefined,
+      expression: undefined,
+      timeout: 0,
+      command: undefined,
+      parameterSchema: '[]',
+      hostIdList: []
+    };
+  };
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加计划执行';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = async (id: any) => {
+    title.value = '修改计划执行';
+    isAddHandle.value = false;
+    renderForm({});
+    setVisible(true);
+    // 查询计划任务
+    try {
+      setLoading(true);
+      const { data } = await getExecJob(id);
+      renderForm({ ...defaultForm(), ...data });
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 渲染表单
+  const renderForm = (record: ExecJobUpdateRequest) => {
+    formModel.value = {
+      id: record.id,
+      name: record.name,
+      expression: record.expression,
+      timeout: record.timeout,
+      command: record.command,
+      parameterSchema: record.parameterSchema,
+      hostIdList: record.hostIdList,
+    };
+  };
+
+  // 设置选中主机
+  const setSelectedHost = (hosts: Array<number>) => {
+    formModel.value.hostIdList = hosts;
+  };
+
+  defineExpose({ openAdd, openUpdate, setSelectedHost });
+
+  // 打开选择主机
+  const openSelectHost = () => {
+    emits('openHost', formModel.value.hostIdList);
+  };
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createExecJob(formModel.value);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateExecJob(formModel.value);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+  // 卸载关闭
+  onUnmounted(handlerClear);
+
+</script>
+
+<style lang="less" scoped>
+  .spin-wrapper {
+    padding: 16px 20px;
+  }
+
+  .selected-host {
+    width: 100%;
+    height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--color-fill-2);
+    transition: all 0.3s;
+
+    &-count {
+      font-size: 16px;
+      font-weight: 600;
+      display: inline-block;
+      margin: 0 6px;
+    }
+
+    &:hover {
+      background: var(--color-fill-3);
+    }
+  }
+
+  .command-editor {
+    width: 100%;
+    height: 48vh;
+  }
+
+</style>

orion-ops-ui/src/views/exec/exec-job/components/exec-job-table.vue

@@ -0,0 +1,287 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  @submit="fetchTableData"
+                  @reset="fetchTableData"
+                  @keyup.enter="() => fetchTableData()">
+      <!-- id -->
+      <a-form-item field="id" label="id">
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 任务名称 -->
+      <a-form-item field="name" label="任务名称">
+        <a-input v-model="formModel.name"
+                 placeholder="请输入任务名称"
+                 allow-clear />
+      </a-form-item>
+      <!-- 执行命令 -->
+      <a-form-item field="command" label="执行命令">
+        <a-input v-model="formModel.command"
+                 placeholder="请输入执行命令"
+                 allow-clear />
+      </a-form-item>
+      <!-- 任务状态 -->
+      <a-form-item field="status" label="任务状态">
+        <a-select v-model="formModel.status"
+                  :options="toOptions(execJobStatusKey)"
+                  placeholder="请选择状态"
+                  allow-clear />
+      </a-form-item>
+    </query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          计划执行列表
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle">
+        <a-space>
+          <!-- 新增 -->
+          <a-button v-permission="['asset:exec-job:create']"
+                    type="primary"
+                    @click="emits('openAdd')">
+            新增
+            <template #icon>
+              <icon-plus />
+            </template>
+          </a-button>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="pagination"
+             :bordered="false"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)">
+      <!-- cron -->
+      <template #expression="{ record }">
+        <span class="copy-left"
+              title="复制"
+              @click="copy(record.expression, '已复制')">
+          <icon-copy />
+        </span>
+        <span class="text-copy span-blue"
+              title="查看下次执行时间"
+              @click="emits('testCron', record.expression)">
+          {{ record.expression }}
+        </span>
+      </template>
+      <!-- 命令 -->
+      <template #command="{ record }">
+        <span class="copy-left"
+              title="复制"
+              @click="copy(record.command, '已复制')">
+          <icon-copy />
+        </span>
+        <span>{{ record.command }}</span>
+      </template>
+      <!-- 任务状态 -->
+      <template #status="{ record }">
+        <!-- 状态开关 可编辑 -->
+        <a-switch v-if="hasPermission('asset:exec-job:update-status')"
+                  type="round"
+                  :default-checked="record.status === ExecJobStatus.ENABLED"
+                  :checked-text="getDictValue(execJobStatusKey, ExecJobStatus.ENABLED)"
+                  :unchecked-text="getDictValue(execJobStatusKey, ExecJobStatus.DISABLED)"
+                  :checked-value="ExecJobStatus.ENABLED"
+                  :unchecked-value="ExecJobStatus.DISABLED"
+                  :before-change="s => updateStatus(record.id, s as number)" />
+        <!-- 状态 不可编辑 -->
+        <a-tag v-else :color="getDictValue(execJobStatusKey, record.status, 'color')">
+          {{ getDictValue(execJobStatusKey, record.status) }}
+        </a-tag>
+      </template>
+      <!-- 最近任务状态 -->
+      <template #recentLogStatus="{ record }">
+        <!-- 最近任务 -->
+        <div class="flex-center" v-if="record.recentLogId">
+          <!-- 执行状态 -->
+          <a-tag class="mr8" :color="getDictValue(execStatusKey, record.recentLogStatus, 'color')">
+            {{ getDictValue(execStatusKey, record.recentLogStatus) }}
+          </a-tag>
+          <!-- 执行时间 -->
+          {{ dateFormat(new Date(record.recentLogTime), 'MM-dd HH:mm') }}
+        </div>
+        <!-- 无任务 -->
+        <div v-else class="mx8">-</div>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 详情 -->
+          <a-button type="text"
+                    size="mini"
+                    @click="emits('openDetail', record.id)">
+            详情
+          </a-button>
+          <!-- 修改 -->
+          <a-button v-permission="['asset:exec-job:update']"
+                    type="text"
+                    size="mini"
+                    @click="emits('openUpdate', record.id)">
+            修改
+          </a-button>
+          <!-- 手动触发 -->
+          <a-popconfirm content="确认要手动触发吗?"
+                        position="left"
+                        type="warning"
+                        @ok="triggerJob(record.id)">
+            <a-button v-permission="['asset:exec-job:trigger']"
+                      type="text"
+                      size="mini">
+              手动触发
+            </a-button>
+          </a-popconfirm>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec-job:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecJobQueryRequest, ExecJobQueryResponse } from '@/api/exec/exec-job';
+  import { reactive, ref, onMounted } from 'vue';
+  import { deleteExecJob, getExecJobPage, triggerExecJob, updateExecJobStatus } from '@/api/exec/exec-job';
+  import { Message } from '@arco-design/web-vue';
+  import usePermission from '@/hooks/permission';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { ExecJobStatus, execJobStatusKey, execStatusKey } from '../types/const';
+  import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { copy } from '@/hooks/copy';
+  import { dateFormat } from '@/utils';
+
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openDetail', 'testCron']);
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { hasPermission } = usePermission();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const tableRenderData = ref<ExecJobQueryResponse[]>([]);
+  const formModel = reactive<ExecJobQueryRequest>({
+    id: undefined,
+    name: undefined,
+    command: undefined,
+    status: undefined,
+    queryRecentLog: true
+  });
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecJob(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 修改状态
+  const updateStatus = async (id: number, status: number) => {
+    return updateExecJobStatus({
+      id,
+      status
+    }).then(() => {
+      return true;
+    }).catch(() => {
+      return false;
+    });
+  };
+
+  // 手动触发任务
+  const triggerJob = async (id: number) => {
+    setLoading(true);
+    try {
+      await triggerExecJob(id);
+      Message.success('已触发');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: ExecJobQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getExecJobPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  onMounted(() => {
+    fetchTableData();
+  });
+
+</script>
+
+<style lang="less" scoped>
+</style>

orion-ops-ui/src/views/exec/exec-job/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <exec-job-table ref="table"
+                    @open-add="() => drawer.openAdd()"
+                    @open-update="(e) => drawer.openUpdate(e)"
+                    @open-detail="(e) => detail.open(e)"
+                    @test-cron="openNextCron" />
+    <!-- 添加修改模态框 -->
+    <exec-job-form-drawer ref="drawer"
+                          @added="modalAddCallback"
+                          @updated="modalUpdateCallback"
+                          @open-host="(e) => hostModal.open(e)"
+                          @test-cron="openNextCron" />
+    <!-- 详情模态框 -->
+    <exec-job-detail-drawer ref="detail" />
+    <!-- cron 执行时间模态框 -->
+    <next-cron-modal ref="nextCron" />
+    <!-- 主机模态框 -->
+    <authorized-host-modal ref="hostModal"
+                           @selected="(e) => drawer.setSelectedHost(e)" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJob'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import { useDictStore } from '@/store';
+  import { CronNextTimes, dictKeys } from './types/const';
+  import ExecJobTable from './components/exec-job-table.vue';
+  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';
+
+  const render = ref(false);
+  const table = ref();
+  const drawer = ref();
+  const detail = ref();
+  const nextCron = ref();
+  const hostModal = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+  // 打开下次执行时间
+  const openNextCron = (cron: string) => {
+    nextCron.value.open({ expression: cron, times: CronNextTimes });
+  };
+
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/exec/exec-job/types/const.ts

@@ -0,0 +1,32 @@
+import type { TemplateParam } from '@/components/view/exec-editor/const';
+
+// cron 下次执行次数
+export const CronNextTimes = 5;
+
+// 计划执行状态
+export const ExecJobStatus = {
+  // 禁用
+  DISABLED: 0,
+  // 启用
+  ENABLED: 1,
+};
+
+// 任务内置参数
+export const jobBuiltinsParams: Array<TemplateParam> = [
+  {
+    name: 'sourceId',
+    desc: '计划任务id'
+  }, {
+    name: 'seq',
+    desc: '执行序列'
+  },
+];
+
+// 计划执行状态 字典项
+export const execJobStatusKey = 'execJobStatus';
+
+// 执行状态 字典项
+export const execStatusKey = 'execStatus';
+
+// 加载的字典值
+export const dictKeys = [execJobStatusKey, execStatusKey];

orion-ops-ui/src/views/exec/exec-job/types/form.rules.ts

@@ -0,0 +1,40 @@
+import type { FieldRule } from '@arco-design/web-vue';
+
+export const name = [{
+  required: true,
+  message: '请输入任务名称'
+}, {
+  maxLength: 64,
+  message: '任务名称长度不能大于64位'
+}] as FieldRule[];
+
+export const hostIdList = [{
+  required: true,
+  message: '请选择执行主机'
+}] as FieldRule[];
+
+export const expression = [{
+  required: true,
+  message: '请输入 cron 表达式'
+}, {
+  maxLength: 512,
+  message: 'cron 表达式长度不能大于512位'
+}] as FieldRule[];
+
+export const timeout = [{
+  required: true,
+  message: '请输入超时时间'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入执行命令'
+}] as FieldRule[];
+
+export default {
+  name,
+  hostIdList,
+  expression,
+  timeout,
+  command,
+} as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/exec/exec-job/types/table.columns.ts

@@ -0,0 +1,64 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '任务名称',
+    dataIndex: 'name',
+    slotName: 'name',
+    align: 'left',
+    width: 180,
+    ellipsis: true,
+  }, {
+    title: 'cron',
+    dataIndex: 'expression',
+    slotName: 'expression',
+    align: 'left',
+    width: 168,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '任务状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'center',
+    width: 112,
+  }, {
+    title: '最近任务状态',
+    dataIndex: 'recentLogStatus',
+    slotName: 'recentLogStatus',
+    align: 'left',
+    width: 184,
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 228,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue

@@ -47,6 +47,7 @@
         <!-- 执行命令 -->
         <a-form-item field="command"
                      label="执行命令"
+                     :hide-label="true"
                      :wrapper-col-props="{ span: 24 }"
                      :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
           <exec-editor v-model="formModel.command"

orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue

@@ -34,6 +34,7 @@
         <!-- 模板命令 -->
         <a-form-item field="command"
                      label="模板命令"
+                     :hide-label="true"
                      :wrapper-col-props="{ span: 24 }"
                      :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
           <exec-editor v-model="formModel.command"

orion-ops-ui/src/views/exec/exec-template/index.vue

@@ -9,12 +9,12 @@
     <exec-template-form-drawer ref="drawer"
                                @added="modalAddCallback"
                                @updated="modalUpdateCallback" />
-    <!-- 主机模态框 -->
-    <authorized-host-modal ref="hostModal"
-                           @selected="(e) => execModal.setSelectedHost(e)" />
     <!-- 执行模态框 -->
     <exec-template-exec-drawer ref="execModal"
                                @open-host="(e) => hostModal.open(e)" />
+    <!-- 主机模态框 -->
+    <authorized-host-modal ref="hostModal"
+                           @selected="(e) => execModal.setSelectedHost(e)" />
   </div>
 </template>
 

orion-ops-ui/src/views/user/operator-log/types/table.columns.ts

@@ -13,7 +13,7 @@ const columns = [
     title: '操作模块',
     dataIndex: 'module',
     slotName: 'module',
-    width: 214,
+    width: 234,
   }, {
     title: '风险等级',
     dataIndex: 'riskLevel',