🔨 定时执行配置.

orion-ops-ui/src/api/exec/exec-command-log.ts

@@ -4,7 +4,7 @@ import axios from 'axios';
 import qs from 'query-string';
 
 /**
- * 执行记录查询请求
+ * 批量执行日志查询请求
  */
 export interface ExecCommandLogQueryRequest extends Pagination {
   id?: number;
@@ -16,7 +16,7 @@ export interface ExecCommandLogQueryRequest extends Pagination {
 }
 
 /**
- * 执行记录查询响应
+ * 批量执行日志查询响应
  */
 export interface ExecCommandLogQueryResponse extends TableData, ExecCommandLogQueryExtraResponse {
   id: number;
@@ -34,14 +34,14 @@ export interface ExecCommandLogQueryResponse extends TableData, ExecCommandLogQu
 }
 
 /**
- * 执行记录查询响应 拓展
+ * 批量执行日志查询响应 拓展
  */
 export interface ExecCommandLogQueryExtraResponse {
   hosts: Array<ExecCommandHostLogQueryResponse>;
 }
 
 /**
- * 主机执行记录查询响应
+ * 主机批量执行日志查询响应
  */
 export interface ExecCommandHostLogQueryResponse extends TableData {
   id: number;
@@ -59,7 +59,7 @@ export interface ExecCommandHostLogQueryResponse extends TableData {
 }
 
 /**
- * 执行状态查询响应
+ * 批量执行状态查询响应
  */
 export interface ExecCommandLogStatusResponse {
   logList: Array<ExecCommandLogQueryResponse>;
@@ -67,7 +67,7 @@ export interface ExecCommandLogStatusResponse {
 }
 
 /**
- * 中断命令请求
+ * 批量执行日志 tail 请求
  */
 export interface ExecCommandLogTailRequest {
   execId?: number;
@@ -75,21 +75,21 @@ export interface ExecCommandLogTailRequest {
 }
 
 /**
- * 分页查询执行记录
+ * 分页查询批量执行日志
  */
 export function getExecCommandLogPage(request: ExecCommandLogQueryRequest) {
   return axios.post<DataGrid<ExecCommandLogQueryResponse>>('/asset/exec-command-log/query', request);
 }
 
 /**
- * 查询执行记录
+ * 查询批量执行日志
  */
 export function getExecCommandLog(id: number) {
   return axios.get<ExecCommandLogQueryResponse>('/asset/exec-command-log/get', { params: { id } });
 }
 
 /**
- * 查询主机执行记录
+ * 查询主机批量执行日志
  */
 export function getExecCommandHostLogList(logId: number) {
   return axios.get<Array<ExecCommandHostLogQueryResponse>>('/asset/exec-command-log/host-list', { params: { logId } });
@@ -108,21 +108,21 @@ export function getExecCommandLogStatus(idList: Array<number>) {
 }
 
 /**
- * 查询历史执行记录
+ * 查询历史批量执行日志
  */
 export function getExecCommandLogHistory(limit: number) {
   return axios.get<Array<ExecCommandLogQueryResponse>>('/asset/exec-command-log/history', { params: { page: 1, limit } });
 }
 
 /**
- * 删除执行记录
+ * 删除批量执行日志
  */
 export function deleteExecCommandLog(id: number) {
   return axios.delete('/asset/exec-command-log/delete', { params: { id } });
 }
 
 /**
- * 批量删除执行记录
+ * 批量删除批量执行日志
  */
 export function batchDeleteExecCommandLog(idList: Array<number>) {
   return axios.delete('/asset/exec-command-log/batch-delete', {
@@ -134,35 +134,35 @@ export function batchDeleteExecCommandLog(idList: Array<number>) {
 }
 
 /**
- * 删除主机执行记录
+ * 删除主机批量执行日志
  */
 export function deleteExecCommandHostLog(id: number) {
   return axios.delete('/asset/exec-command-log/delete-host', { params: { id } });
 }
 
 /**
- * 查询操作日志数量
+ * 查询批量执行日志数量
  */
 export function getExecCommandLogCount(request: ExecCommandLogQueryRequest) {
   return axios.post<number>('/asset/exec-command-log/query-count', request);
 }
 
 /**
- * 清空操作日志
+ * 清空批量执行日志
  */
 export function clearExecCommandLog(request: ExecCommandLogQueryRequest) {
   return axios.post<number>('/asset/exec-command-log/clear', request);
 }
 
 /**
- * 查看执行日志
+ * 查看批量执行日志
  */
 export function getExecCommandLogTailToken(request: ExecCommandLogTailRequest) {
   return axios.post<string>('/asset/exec-command-log/tail', request);
 }
 
 /**
- * 下载执行日志文件
+ * 下载批量执行日志文件
  */
 export function downloadExecCommandLogFile(id: number) {
   return axios.get('/asset/exec-command-log/download', { unwrap: true, params: { id } });

orion-ops-ui/src/api/exec/exec-job-log.ts

@@ -0,0 +1,162 @@
+import type { DataGrid, Pagination } from '@/types/global';
+import type { TableData } from '@arco-design/web-vue/es/table/interface';
+import axios from 'axios';
+import qs from 'query-string';
+
+/**
+ * 计划执行日志查询请求
+ */
+export interface ExecJobLogQueryRequest extends Pagination {
+  id?: number;
+  userId?: number;
+  description?: string;
+  command?: string;
+  status?: string;
+  startTimeRange?: string[];
+}
+
+/**
+ * 计划执行日志查询响应
+ */
+export interface ExecJobLogQueryResponse extends TableData, ExecJobLogQueryExtraResponse {
+  id: number;
+  userId: number;
+  username: string;
+  description: string;
+  command: string;
+  parameterSchema: string;
+  timeout: number;
+  status: string;
+  startTime: number;
+  finishTime: number;
+  hostIdList: Array<number>;
+  hosts: Array<ExecJobHostLogQueryResponse>;
+}
+
+/**
+ * 计划执行日志查询响应 拓展
+ */
+export interface ExecJobLogQueryExtraResponse {
+  hosts: Array<ExecJobHostLogQueryResponse>;
+}
+
+/**
+ * 主机计划执行日志查询响应
+ */
+export interface ExecJobHostLogQueryResponse extends TableData {
+  id: number;
+  logId: number;
+  hostId: number;
+  hostName: string;
+  hostAddress: string;
+  status: string;
+  command: string;
+  parameter: string;
+  exitStatus: number;
+  errorMessage: string;
+  startTime: number;
+  finishTime: number;
+}
+
+/**
+ * 计划执行状态查询响应
+ */
+export interface ExecJobLogStatusResponse {
+  logList: Array<ExecJobLogQueryResponse>;
+  hostList: Array<ExecJobHostLogQueryResponse>;
+}
+
+/**
+ * 计划执行日志 tail 请求
+ */
+export interface ExecJobLogTailRequest {
+  execId?: number;
+  hostExecIdList?: Array<number>;
+}
+
+/**
+ * 分页查询计划执行日志
+ */
+export function getExecJobLogPage(request: ExecJobLogQueryRequest) {
+  return axios.post<DataGrid<ExecJobLogQueryResponse>>('/asset/exec-job-log/query', request);
+}
+
+/**
+ * 查询计划执行日志
+ */
+export function getExecJobLog(id: number) {
+  return axios.get<ExecJobLogQueryResponse>('/asset/exec-job-log/get', { params: { id } });
+}
+
+/**
+ * 查询主机计划执行日志
+ */
+export function getExecJobHostLogList(logId: number) {
+  return axios.get<Array<ExecJobHostLogQueryResponse>>('/asset/exec-job-log/host-list', { params: { logId } });
+}
+
+/**
+ * 查询命令执行状态
+ */
+export function getExecJobLogStatus(idList: Array<number>) {
+  return axios.get<ExecJobLogStatusResponse>('/asset/exec-job-log/status', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
+/**
+ * 删除计划执行日志
+ */
+export function deleteExecJobLog(id: number) {
+  return axios.delete('/asset/exec-job-log/delete', { params: { id } });
+}
+
+/**
+ * 批量删除计划执行日志
+ */
+export function batchDeleteExecJobLog(idList: Array<number>) {
+  return axios.delete('/asset/exec-job-log/batch-delete', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
+/**
+ * 删除主机计划执行日志
+ */
+export function deleteExecJobHostLog(id: number) {
+  return axios.delete('/asset/exec-job-log/delete-host', { params: { id } });
+}
+
+/**
+ * 查询计划执行日志数量
+ */
+export function getExecJobLogCount(request: ExecJobLogQueryRequest) {
+  return axios.post<number>('/asset/exec-job-log/query-count', request);
+}
+
+/**
+ * 清空计划执行日志
+ */
+export function clearExecJobLog(request: ExecJobLogQueryRequest) {
+  return axios.post<number>('/asset/exec-job-log/clear', request);
+}
+
+/**
+ * 查看计划执行日志
+ */
+export function getExecJobLogTailToken(request: ExecJobLogTailRequest) {
+  return axios.post<string>('/asset/exec-job-log/tail', request);
+}
+
+/**
+ * 下载计划执行日志文件
+ */
+export function downloadExecJobLogFile(id: number) {
+  return axios.get('/asset/exec-job-log/download', { unwrap: true, params: { id } });
+}

orion-ops-ui/src/api/exec/exec-job.ts

@@ -0,0 +1,111 @@
+import type { DataGrid, Pagination } from '@/types/global';
+import type { TableData } from '@arco-design/web-vue/es/table/interface';
+import type { HostQueryResponse } from '@/api/asset/host';
+import axios from 'axios';
+
+/**
+ * 计划执行创建请求
+ */
+export interface ExecJobCreateRequest {
+  name?: string;
+  expression?: string;
+  timeout?: number;
+  command?: string;
+  parameterSchema?: string;
+  hostIdList?: Array<number>;
+}
+
+/**
+ * 计划执行更新请求
+ */
+export interface ExecJobUpdateRequest extends ExecJobCreateRequest {
+  id?: number;
+}
+
+/**
+ * 计划执行状态更新请求
+ */
+export interface ExecJobUpdateStatusRequest {
+  id: number;
+  status: number;
+}
+
+/**
+ * 计划执行查询请求
+ */
+export interface ExecJobQueryRequest extends Pagination {
+  id?: number;
+  name?: string;
+  command?: string;
+  status?: number;
+  queryRecentLog?: boolean;
+}
+
+/**
+ * 计划执行查询响应
+ */
+export interface ExecJobQueryResponse extends TableData {
+  id: number;
+  name: string;
+  expression: string;
+  timeout: number;
+  command: string;
+  parameterSchema: string;
+  status: number;
+  recentLogId: number;
+  recentLogStatus: string;
+  recentLogTime: number;
+  createTime: number;
+  updateTime: number;
+  hostIdList: Array<number>;
+  hostList: Array<HostQueryResponse>;
+}
+
+/**
+ * 创建计划执行
+ */
+export function createExecJob(request: ExecJobCreateRequest) {
+  return axios.post('/asset/exec-job/create', request);
+}
+
+/**
+ * 更新计划执行
+ */
+export function updateExecJob(request: ExecJobUpdateRequest) {
+  return axios.put('/asset/exec-job/update', request);
+}
+
+/**
+ * 更新计划执行状态
+ */
+export function updateExecJobStatus(request: ExecJobUpdateStatusRequest) {
+  return axios.put('/asset/exec-job/update-status', request);
+}
+
+/**
+ * 查询计划执行
+ */
+export function getExecJob(id: number) {
+  return axios.get<ExecJobQueryResponse>('/asset/exec-job/get', { params: { id } });
+}
+
+/**
+ * 分页查询计划执行
+ */
+export function getExecJobPage(request: ExecJobQueryRequest) {
+  return axios.post<DataGrid<ExecJobQueryResponse>>('/asset/exec-job/query', request);
+}
+
+/**
+ * 删除计划执行
+ */
+export function deleteExecJob(id: number) {
+  return axios.delete('/asset/exec-job/delete', { params: { id } });
+}
+
+/**
+ * 手动触发计划执行任务
+ */
+export function triggerExecJob(id: number) {
+  return axios.post('/asset/exec-job/trigger', { id });
+}

orion-ops-ui/src/api/meta/expression.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+/**
+ * cron 下次执行时间请求对象
+ */
+export interface CronNextRequest {
+  expression: number;
+  times: string;
+}
+
+/**
+ * cron 下次执行时间响应对象
+ */
+export interface CronNextResponse {
+  valid: boolean;
+  next: Array<string>;
+}
+
+/**
+ * 获取 cron 下次执行时间
+ */
+export function getCronNextTime(request: CronNextRequest) {
+  return axios.get<CronNextResponse>('/infra/expression/cron-next', { params: request });
+}

orion-ops-ui/src/components/meta/expression/next-cron-modal/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <a-modal v-model:visible="visible"
+           title-align="start"
+           :top="120"
+           :width="298"
+           :body-style="{ padding: '16px' }"
+           :align-center="false"
+           :mask-closable="true"
+           :unmount-on-close="true"
+           :footer="false"
+           @close="handleClose">
+    <!-- title -->
+    <template #title>
+      <span class="modal-title">
+        未来 <span class="span-blue times">{{ request?.times }}</span> 次执行时间
+      </span>
+    </template>
+    <a-spin class="full container" :loading="loading">
+      <!-- cron 表达式 -->
+      <div class="cron-value span-blue">
+        {{ request?.expression }}
+      </div>
+      <!-- 执行时间 -->
+      <div v-for="time in next"
+           :key="time"
+           class="next-time">
+        {{ time }}
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'nextCronModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { CronNextRequest } from '@/api/meta/expression';
+  import { ref } from 'vue';
+  import { getCronNextTime } from '@/api/meta/expression';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { Message } from '@arco-design/web-vue';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const request = ref<CronNextRequest>();
+  const next = ref<Array<string>>([]);
+
+  // 打开
+  const open = async (record: CronNextRequest) => {
+    request.value = record;
+    try {
+      // 获取执行时间
+      setLoading(true);
+      const { data } = await getCronNextTime(request.value);
+      if (data.valid) {
+        // 表达式正确
+        next.value = data.next;
+        setVisible(true);
+
+      } else {
+        // 表达式错误
+        setVisible(false);
+        Message.error('cron 表达式错误');
+      }
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  defineExpose({ open });
+
+  // 关闭回调
+  const handleClose = () => {
+    handleClear();
+  };
+
+  // 清空
+  const handleClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .modal-title {
+    font-size: 14px;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .times {
+    font-weight: 600;
+  }
+
+  .cron-value {
+    margin-bottom: 8px;
+    font-weight: 600;
+  }
+
+  .next-time {
+    margin-bottom: 4px;
+    color: var(--color-text-2);
+  }
+
+</style>

orion-ops-ui/src/components/view/exec-editor/index.vue

@@ -62,7 +62,7 @@
           }
           suggestions.push({
             label: triggerPrefix + s.name,
-            kind: monaco.languages.CompletionItemKind.Field,
+            kind: monaco.languages.CompletionItemKind.Variable,
             insertText: templatePrefix + s.name + templateSuffix,
             detail: s.desc || '',
             documentation: s.desc || '',

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',