⚡ 修改包结构.

orion-visor-ui/src/views/exec/exec-job-log-view/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <div class="wrapper">
+      <exec-log-panel ref="log"
+                      type="JOB"
+                      :visible-back="false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobLogView'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { onMounted, ref, nextTick } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { getExecJobLog } from '@/api/exec/exec-job-log';
+  import ExecLogPanel from '@/components/exec/log/panel/index.vue';
+
+  const route = useRoute();
+  const log = ref();
+
+  // 初始化
+  const init = async (id: number) => {
+    // 获取执行日志
+    const { data } = await getExecJobLog(id);
+    // 打开日志
+    await nextTick(() => {
+      setTimeout(() => {
+        log.value.open(data);
+      }, 50);
+    });
+  };
+
+  onMounted(() => {
+    const idParam = route.query.id;
+    if (idParam) {
+      init(Number.parseInt(idParam as string));
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding: 16px;
+    background: var(--color-fill-2);
+
+    .wrapper {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+  }
+</style>

orion-visor-ui/src/views/exec/exec-job-log/components/exec-job-host-log-table.vue

@@ -0,0 +1,170 @@
+<template>
+  <!-- table -->
+  <a-table row-key="id"
+           ref="tableRef"
+           :loading="loading"
+           :columns="columns"
+           :data="row.hosts"
+           :expandable="expandable"
+           :scroll="{ y: '100%' }"
+           :pagination="false"
+           :bordered="false">
+    <!-- 执行主机 -->
+    <template #hostName="{ record }">
+      <span class="table-cell-value span-blue">
+        {{ record.hostName }}
+      </span>
+      <br>
+      <span class="table-cell-sub-value usn text-copy"
+            style="font-size: 12px;"
+            @click="copy(record.hostAddress)">
+        {{ record.hostAddress }}
+      </span>
+    </template>
+    <!-- 错误信息 -->
+    <template #errorMessage="{ record }">
+      <span class="span-red">
+        {{ record.errorMessage }}
+      </span>
+    </template>
+    <!-- 执行状态 -->
+    <template #status="{ record }">
+      <a-tag :color="getDictValue(execHostStatusKey, record.status, 'color')">
+        {{ getDictValue(execHostStatusKey, record.status) }}
+      </a-tag>
+    </template>
+    <!-- 执行时间 -->
+    <template #startTime="{ record }">
+      <span class="table-cell-value">
+        {{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
+      </span>
+      <br>
+      <span class="table-cell-sub-value usn" style="font-size: 12px;">
+        持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
+      </span>
+    </template>
+    <!-- 操作 -->
+    <template #handle="{ record }">
+      <div class="table-handle-wrapper">
+        <!-- 命令 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="emits('viewCommand', record.command)">
+          命令
+        </a-button>
+        <!-- 参数 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="emits('viewParams', record.parameter)">
+          参数
+        </a-button>
+        <!-- 下载 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="downloadLogFile(record.id)">
+          下载
+        </a-button>
+        <!-- 中断 -->
+        <a-popconfirm content="确认要中断命令吗, 删除后会中断执行?"
+                      position="left"
+                      type="warning"
+                      @ok="interruptedHost(record)">
+          <a-button v-permission="['asset:exec-job-log:interrupt']"
+                    type="text"
+                    size="mini"
+                    status="danger"
+                    :disabled="record.status !== execHostStatus.WAITING && record.status !== execHostStatus.RUNNING">
+            中断
+          </a-button>
+        </a-popconfirm>
+        <!-- 删除 -->
+        <a-popconfirm content="确认删除这条记录吗?"
+                      position="left"
+                      type="warning"
+                      @ok="deleteRow(record)">
+          <a-button v-permission="['asset:exec-job-log:delete']"
+                    type="text"
+                    size="mini"
+                    status="danger">
+            删除
+          </a-button>
+        </a-popconfirm>
+      </div>
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobHostLogTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecLogQueryResponse, ExecHostLogQueryResponse } from '@/api/exec/exec-log';
+  import { deleteExecJobHostLog, interruptHostExecJob } from '@/api/exec/exec-job-log';
+  import { execHostStatusKey, execHostStatus } from '@/components/exec/log/const';
+  import { useDictStore } from '@/store';
+  import useLoading from '@/hooks/loading';
+  import columns from '@/views/exec/exec-command-log/types/host-table.columns';
+  import { useExpandable } from '@/hooks/table';
+  import { dateFormat, formatDuration } from '@/utils';
+  import { downloadExecJobLogFile } from '@/api/exec/exec-job-log';
+  import { copy } from '@/hooks/copy';
+  import { downloadFile } from '@/utils/file';
+  import { Message } from '@arco-design/web-vue';
+
+  const props = defineProps<{
+    row: ExecLogQueryResponse;
+  }>();
+
+  const emits = defineEmits(['viewCommand', 'viewParams', 'refreshHost']);
+
+  const expandable = useExpandable({ width: 90 });
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  // 下载文件
+  const downloadLogFile = async (id: number) => {
+    const data = await downloadExecJobLogFile(id);
+    downloadFile(data);
+  };
+
+  // 中断执行
+  const interruptedHost = async (record: ExecHostLogQueryResponse) => {
+    try {
+      setLoading(true);
+      // 调用中断接口
+      await interruptHostExecJob({
+        hostLogId: record.id
+      });
+      Message.success('已中断');
+      record.status = execHostStatus.INTERRUPTED;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id, logId }: {
+    id: number,
+    logId: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecJobHostLog(id);
+      Message.success('删除成功');
+      emits('refreshHost', logId);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-visor-ui/src/views/exec/exec-job-log/components/exec-job-log-clear-modal.vue

@@ -0,0 +1,171 @@
+<template>
+  <a-modal v-model:visible="visible"
+           modal-class="modal-form-large"
+           title-align="start"
+           title="清空计划任务日志"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           ok-text="清空"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin class="full" :loading="loading">
+      <a-form :model="formModel"
+              label-align="right"
+              :auto-label-width="true">
+        <!-- 执行时间 -->
+        <a-form-item field="startTimeRange" label="执行时间">
+          <a-range-picker v-model="formModel.startTimeRange"
+                          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                          show-time
+                          format="YYYY-MM-DD HH:mm:ss" />
+        </a-form-item>
+        <!-- 计划任务 -->
+        <a-form-item field="sourceId" label="计划任务">
+          <exec-job-selector v-model:model-value="formModel.sourceId"
+                             v-model:name="formModel.description"
+                             allow-create
+                             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(execStatusKey)"
+                    placeholder="请选择执行状态" />
+        </a-form-item>
+        <!-- 数量限制 -->
+        <a-form-item field="limit" label="数量限制">
+          <a-input-number v-model="formModel.limit"
+                          :min="1"
+                          :max="maxClearLimit"
+                          :placeholder="`请输入数量限制 最大: ${maxClearLimit}`"
+                          hide-button
+                          allow-clear />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobLogClearModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecLogQueryRequest } from '@/api/exec/exec-log';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { execStatusKey } from '@/components/exec/log/const';
+  import { getExecJobLogCount, clearExecJobLog } from '@/api/exec/exec-job-log';
+  import { Message, Modal } from '@arco-design/web-vue';
+  import { useDictStore } from '@/store';
+  import { maxClearLimit } from '../types/const';
+  import ExecJobSelector from '@/components/exec/job/selector/index.vue';
+
+  const emits = defineEmits(['clear']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { toOptions } = useDictStore();
+
+  const formModel = ref<ExecLogQueryRequest>({});
+
+  const defaultForm = (): ExecLogQueryRequest => {
+    return {
+      id: undefined,
+      sourceId: undefined,
+      description: undefined,
+      command: undefined,
+      status: undefined,
+      startTimeRange: undefined,
+      limit: maxClearLimit,
+    };
+  };
+
+  // 打开
+  const open = (record: any) => {
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ open });
+
+  // 确定
+  const handlerOk = async () => {
+    if (!formModel.value.limit) {
+      Message.error('请输入数量限制');
+      return false;
+    }
+    setLoading(true);
+    try {
+      // 获取总数量
+      const { data } = await getExecJobLogCount(formModel.value);
+      if (data) {
+        // 清空
+        doClear(data);
+      } else {
+        // 无数据
+        Message.warning('当前条件未查询到数据');
+      }
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+    return false;
+  };
+
+  // 执行删除
+  const doClear = (count: number) => {
+    Modal.confirm({
+      title: '删除清空',
+      content: `确定要删除 ${count} 条数据吗? 确定后将立即删除且无法恢复!`,
+      onOk: async () => {
+        setLoading(true);
+        try {
+          // 调用清空
+          const { data } = await clearExecJobLog(formModel.value);
+          Message.success(`已成功清空 ${data} 条数据`);
+          emits('clear');
+          // 清空
+          setVisible(false);
+          handlerClear();
+        } catch (e) {
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,392 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  :itemOptions="{ 4: { span: 2 } }"
+                  @submit="fetchTableData"
+                  @reset="fetchTableData"
+                  @keyup.enter="() => fetchTableData()">
+      <!-- 任务名称 -->
+      <a-form-item field="description" label="任务名称">
+        <a-input v-model="formModel.description"
+                 placeholder="请输入任务名称"
+                 allow-clear />
+      </a-form-item>
+      <!-- 执行状态 -->
+      <a-form-item field="status" label="执行状态">
+        <a-select v-model="formModel.status"
+                  :options="toOptions(execStatusKey)"
+                  placeholder="请选择执行状态"
+                  allow-clear />
+      </a-form-item>
+      <!-- 执行命令 -->
+      <a-form-item field="command" label="执行命令">
+        <a-input v-model="formModel.command"
+                 placeholder="请输入执行命令"
+                 allow-clear />
+      </a-form-item>
+      <!-- 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="startTimeRange" label="执行时间">
+        <a-range-picker v-model="formModel.startTimeRange"
+                        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+                        show-time
+                        format="YYYY-MM-DD HH:mm:ss" />
+      </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-log:management:clear']"
+                    status="danger"
+                    @click="openClear">
+            清空
+            <template #icon>
+              <icon-close />
+            </template>
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗? 删除后会中断执行!`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectedRows">
+            <a-button v-permission="['asset:exec-job-log:delete']"
+                      type="primary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table v-model:selected-keys="selectedKeys"
+             row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             :row-selection="rowSelection"
+             :expandable="expandable"
+             :data="tableRenderData"
+             :pagination="pagination"
+             :bordered="false"
+             @page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size: number) => fetchTableData(1, size)"
+             @expand="loadExecHost">
+      <!-- 展开表格 -->
+      <template #expand-row="{ record }">
+        <exec-job-host-log-table :row="record"
+                                 @view-command="s => emits('viewCommand', s)"
+                                 @view-params="s => emits('viewParams', s)"
+                                 @refresh-host="refreshExecHost" />
+      </template>
+      <!-- 任务名称 -->
+      <template #description="{ record }">
+        <span class="span-blue mr4 usn">
+          #{{ record.execSeq }}
+        </span>
+        <span :title="record.description">
+          {{ record.description }}
+        </span>
+      </template>
+      <!-- 执行命令 -->
+      <template #command="{ record }">
+        <span :title="record.command">
+          {{ record.command }}
+        </span>
+      </template>
+      <!-- 执行状态 -->
+      <template #status="{ record }">
+        <a-tag :color="getDictValue(execStatusKey, record.status, 'color')">
+          {{ getDictValue(execStatusKey, record.status) }}
+        </a-tag>
+      </template>
+      <!-- 执行时间 -->
+      <template #startTime="{ record }">
+        <span class="table-cell-value">
+          {{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
+        </span>
+        <br>
+        <span class="table-cell-sub-value usn" style="font-size: 12px;">
+          持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
+        </span>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 命令 -->
+          <a-button type="text"
+                    size="mini"
+                    @click="emits('viewCommand', record.command)">
+            命令
+          </a-button>
+          <!-- 日志 -->
+          <a-button v-permission="['asset:exec-job-log:query']"
+                    type="text"
+                    size="mini"
+                    title="ctrl + 左键新页面打开"
+                    @click="(e: any) => emits('viewLog', record.id, e.ctrlKey)">
+            日志
+          </a-button>
+          <!-- 中断 -->
+          <a-popconfirm content="确定要中断执行吗?"
+                        position="left"
+                        type="warning"
+                        @ok="doInterruptExecJob(record)">
+            <a-button v-permission="['asset:exec-job-log:interrupt']"
+                      type="text"
+                      size="mini"
+                      status="danger"
+                      :disabled="record.status !== execStatus.WAITING && record.status !== execStatus.RUNNING">
+              中断
+            </a-button>
+          </a-popconfirm>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗, 删除后会中断执行?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec-job-log:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobLogTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { TableData } from '@arco-design/web-vue/es/table/interface';
+  import type { ExecLogQueryRequest, ExecLogQueryResponse } from '@/api/exec/exec-log';
+  import { reactive, ref, onMounted, onUnmounted } from 'vue';
+  import {
+    batchDeleteExecJobLog,
+    deleteExecJobLog,
+    getExecJobHostLogList,
+    getExecJobLogPage,
+    getExecJobLogStatus
+  } from '@/api/exec/exec-job-log';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { execStatus, execStatusKey } from '@/components/exec/log/const';
+  import { useExpandable, useTablePagination, useRowSelection } from '@/hooks/table';
+  import { useDictStore } from '@/store';
+  import { dateFormat, formatDuration } from '@/utils';
+  import { interruptExecJob } from '@/api/exec/exec-job-log';
+  import ExecJobHostLogTable from './exec-job-host-log-table.vue';
+
+  const emits = defineEmits(['viewCommand', 'viewParams', 'viewLog', 'openClear']);
+
+  const pagination = useTablePagination();
+  const rowSelection = useRowSelection();
+  const expandable = useExpandable();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const pullIntervalId = ref();
+  const tableRef = ref();
+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<ExecLogQueryResponse[]>([]);
+  const formModel = reactive<ExecLogQueryRequest>({
+    id: undefined,
+    description: undefined,
+    command: undefined,
+    status: undefined,
+    startTimeRange: undefined,
+  });
+
+  // 打开清理
+  const openClear = () => {
+    emits('openClear', { ...formModel, id: undefined, description: undefined });
+  };
+
+  // 删除选中行
+  const deleteSelectedRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteExecJobLog(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecJobLog(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  // 中断执行
+  const doInterruptExecJob = async (record: ExecLogQueryResponse) => {
+    try {
+      setLoading(true);
+      // 调用中断接口
+      await interruptExecJob({
+        logId: record.id
+      });
+      Message.success('已中断');
+      record.status = execStatus.COMPLETED;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 刷新执行主机
+  const refreshExecHost = (id: number) => {
+    // 获取到执行主机
+    const exec = tableRenderData.value.find(s => s.id === id);
+    if (!exec) {
+      return;
+    }
+    // 加载数据
+    getExecJobHostLogList(id).then(s => {
+      exec.hosts = s.data;
+    });
+  };
+
+  // 加载主机数据
+  const loadExecHost = async (key: number | string, record: TableData) => {
+    if (record.hosts?.length) {
+      return;
+    }
+    // 加载数据
+    const { data } = await getExecJobHostLogList(record.id);
+    record.hosts = data;
+  };
+
+  // 加载状态
+  const pullJobStatus = async () => {
+    const unCompleteIdList = tableRenderData.value
+      .filter(s => s.status === execStatus.WAITING || s.status === execStatus.RUNNING)
+      .map(s => s.id);
+    if (!unCompleteIdList.length) {
+      return;
+    }
+    // 加载未完成的状态
+    const { data: { logList, hostList } } = await getExecJobLogStatus(unCompleteIdList);
+    // 设置任务状态
+    logList.forEach(s => {
+      const tableRow = tableRenderData.value.find(r => r.id === s.id);
+      if (!tableRow) {
+        return;
+      }
+      tableRow.status = s.status;
+      tableRow.startTime = s.startTime;
+      tableRow.finishTime = s.finishTime;
+    });
+    // 设置主机状态
+    hostList.forEach(s => {
+      const host = tableRenderData.value
+        .find(r => r.id === s.logId)
+        ?.hosts
+        ?.find(r => r.id === s.id);
+      if (!host) {
+        return;
+      }
+      host.status = s.status;
+      host.startTime = s.startTime;
+      host.finishTime = s.finishTime;
+      host.exitCode = s.exitCode;
+      host.errorMessage = s.errorMessage;
+    });
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: ExecLogQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getExecJobLogPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+      selectedKeys.value = [];
+      tableRef.value.expandAll(false);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  defineExpose({
+    fetchTableData
+  });
+
+  onMounted(() => {
+    // 加载数据
+    fetchTableData();
+    // 注册状态轮询
+    pullIntervalId.value = setInterval(pullJobStatus, 10000);
+  });
+
+  onUnmounted(() => {
+    // 卸载状态轮询
+    clearInterval(pullIntervalId.value);
+  });
+
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-table-cell-fixed-expand) {
+    width: 100% !important;
+  }
+
+</style>

orion-visor-ui/src/views/exec/exec-job-log/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <exec-job-log-table ref="tableRef"
+                        @view-command="viewCommand"
+                        @view-params="viewParams"
+                        @view-log="viewLog"
+                        @open-clear="openClearModal" />
+    <!-- 清理模态框 -->
+    <exec-job-log-clear-modal ref="clearModal"
+                              @clear="clearCallback" />
+    <!-- 执行日志模态框 -->
+    <exec-log-panel-modal ref="logModal"
+                          type="JOB" />
+    <!-- json 模态框 -->
+    <json-editor-modal ref="jsonModal"
+                       :esc-to-close="true" />
+    <!-- shell 模态框 -->
+    <shell-editor-modal ref="shellModal"
+                        :footer="false"
+                        :esc-to-close="true" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobLog'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import { useDictStore } from '@/store';
+  import { dictKeys } from '@/components/exec/log/const';
+  import { useRouter } from 'vue-router';
+  import { openNewRoute } from '@/router';
+  import ExecJobLogTable from './components/exec-job-log-table.vue';
+  import ExecJobLogClearModal from './components/exec-job-log-clear-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
+  import ShellEditorModal from '@/components/view/shell-editor/modal/index.vue';
+  import ExecLogPanelModal from '@/components/exec/log/panel-modal/index.vue';
+
+  const router = useRouter();
+
+  const render = ref(false);
+  const tableRef = ref();
+  const logModal = ref();
+  const clearModal = ref();
+  const jsonModal = ref();
+  const shellModal = ref();
+
+  // 打开清理模态框
+  const openClearModal = (e: any) => {
+    clearModal.value.open(e);
+  };
+
+  // 查看命令
+  const viewCommand = (data: string) => {
+    shellModal.value.open(data, '命令');
+  };
+
+  // 查看参数
+  const viewParams = (data: string) => {
+    jsonModal.value.open(JSON.parse(data));
+  };
+
+  // 查看日志
+  const viewLog = (id: number, newWindow: boolean) => {
+    if (newWindow) {
+      // 跳转新页面
+      openNewRoute({
+        name: 'execJobLogView',
+        query: {
+          id
+        }
+      });
+    } else {
+      logModal.value.open(id);
+    }
+  };
+
+  // 清理回调
+  const clearCallback = () => {
+    tableRef.value.fetchTableData();
+  };
+
+  onBeforeMount(async () => {
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
+    render.value = true;
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,2 @@
+// 最大清理数量
+export const maxClearLimit = 1000;

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

@@ -0,0 +1,46 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 100,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '任务名称',
+    dataIndex: 'description',
+    slotName: 'description',
+    align: 'left',
+    width: 188,
+    ellipsis: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    minWidth: 238,
+    ellipsis: true,
+  }, {
+    title: '执行状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'left',
+    width: 118,
+  }, {
+    title: '执行时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 190,
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 218,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

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

@@ -0,0 +1,178 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            title="计划任务详情"
+            width="70%"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            ok-text="关闭"
+            :hide-cancel="true"
+            @cancel="handleClose">
+    <a-descriptions class="detail-container"
+                    size="large"
+                    table-layout="fixed"
+                    :label-style="{ width: '90px' }"
+                    :column="2">
+      <!-- 任务id -->
+      <a-descriptions-item label="任务id">
+        <span class="text-copy"
+              title="复制"
+              @click="copy(record.id+'')">
+          {{ record.id }}
+        </span>
+      </a-descriptions-item>
+      <!-- 任务名称 -->
+      <a-descriptions-item label="任务名称">
+        {{ record.name }}
+      </a-descriptions-item>
+      <!-- cron -->
+      <a-descriptions-item label="cron">
+        <span class="text-copy"
+              title="复制"
+              @click="copy(record.expression)">
+         {{ record.expression }}
+        </span>
+      </a-descriptions-item>
+      <!-- 超时时间 -->
+      <a-descriptions-item label="超时时间">
+        {{ record.timeout }} 秒
+      </a-descriptions-item>
+      <!-- 任务状态 -->
+      <a-descriptions-item label="任务状态">
+        <a-tag :color="getDictValue(execJobStatusKey, record.status, 'color')">
+          {{ getDictValue(execJobStatusKey, record.status) }}
+        </a-tag>
+      </a-descriptions-item>
+      <!-- 脚本执行 -->
+      <a-descriptions-item label="脚本执行">
+        {{ record.scriptExec === EnabledStatus.ENABLED ? '是' : '否' }}
+      </a-descriptions-item>
+      <!-- 创建时间 -->
+      <a-descriptions-item label="创建时间">
+        {{ dateFormat(new Date(record.createTime)) }}
+      </a-descriptions-item>
+      <!-- 修改时间 -->
+      <a-descriptions-item label="修改时间">
+        {{ dateFormat(new Date(record.updateTime)) }}
+      </a-descriptions-item>
+      <!-- 执行主机 -->
+      <a-descriptions-item :span="3">
+        <template #label>
+          <span class="host-label">执行主机</span>
+        </template>
+        <a-space wrap>
+          <a-tag v-for="host in record.hostList"
+                 :key="host.id">
+            {{ host.name }}
+          </a-tag>
+        </a-space>
+      </a-descriptions-item>
+      <!-- 执行命令 -->
+      <a-descriptions-item label="执行命令" :span="3">
+        <editor v-model="record.command"
+                language="shell"
+                theme="vs-dark"
+                container-class="command-editor"
+                :readonly="true"
+                :suggestions="false" />
+      </a-descriptions-item>
+      <!-- 执行参数 -->
+      <a-descriptions-item v-if="record.parameterSchema"
+                           label="执行参数"
+                           :span="3">
+        <editor v-model="record.parameterSchema"
+                language="json"
+                theme="vs-dark"
+                container-class="json-editor"
+                :readonly="true"
+                :suggestions="false" />
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execJobDetailDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecJobQueryResponse } from '@/api/exec/exec-job';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import { useDictStore } from '@/store';
+  import { dateFormat } from '@/utils';
+  import { copy } from '@/hooks/copy';
+  import { getExecJob } from '@/api/exec/exec-job';
+  import { EnabledStatus } from '@/types/const';
+  import { execJobStatusKey } from '../types/const';
+
+  const { getDictValue, toOptions } = useDictStore();
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const record = ref<ExecJobQueryResponse>({} as ExecJobQueryResponse);
+
+  // 打开
+  const open = async (id: any) => {
+    try {
+      // 查询计划任务
+      setLoading(true);
+      const { data } = await getExecJob(id);
+      record.value = data;
+      // 设置参数值
+      if (data.parameterSchema) {
+        const value = JSON.parse(data.parameterSchema);
+        if (value?.length) {
+          data.parameterSchema = JSON.stringify(value, undefined, 4);
+        } else {
+          data.parameterSchema = undefined as unknown as string;
+        }
+      }
+      setVisible(true);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  defineExpose({ open });
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .detail-container {
+    padding: 24px 8px 24px 24px;
+  }
+
+  :deep(.arco-descriptions-item-value) {
+    color: var(--color-text-1);
+  }
+
+  .host-label {
+    margin-top: -8px;
+    display: block;
+  }
+
+  .command-editor {
+    width: 100%;
+    height: calc(100vh - 396px);
+  }
+
+  .json-editor {
+    width: 100%;
+    height: 328px;
+  }
+
+</style>

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

@@ -0,0 +1,511 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            width="70%"
+            :esc-to-close="false"
+            :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="form-container drawer-form-small" :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :auto-label-width="true"
+              :rules="formRules">
+        <a-row :gutter="16">
+          <!-- 任务名称 -->
+          <a-col :span="13">
+            <a-form-item field="name"
+                         label="任务名称"
+                         :hide-asterisk="true">
+              <a-input v-model="formModel.name"
+                       placeholder="请输入任务名称"
+                       allow-clear />
+            </a-form-item>
+          </a-col>
+          <!-- 执行主机 -->
+          <a-col :span="11">
+            <a-form-item field="hostIdList"
+                         label="执行主机"
+                         :hide-asterisk="true">
+              <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="13">
+            <a-form-item field="expression"
+                         label="cron"
+                         :hide-asterisk="true">
+              <a-input v-model="formModel.expression"
+                       placeholder="请输入 cron 表达式"
+                       allow-clear>
+                <template #append>
+                  <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)">
+                    测试
+                  </span>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <!-- 超时时间 -->
+          <a-col :span="6">
+            <a-form-item field="timeout"
+                         label="超时时间"
+                         :hide-asterisk="true">
+              <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="5">
+            <a-form-item field="scriptExec"
+                         label="脚本执行"
+                         :hide-asterisk="true">
+              <div class="flex-center">
+                <a-switch v-model="formModel.scriptExec"
+                          type="round"
+                          :checked-value="EnabledStatus.ENABLED"
+                          :unchecked-value="EnabledStatus.DISABLED" />
+                <div class="question-right ml8">
+                  <a-tooltip position="tr" content="启用后会将命令写入脚本文件 传输到主机后执行">
+                    <icon-question-circle />
+                  </a-tooltip>
+                </div>
+              </div>
+            </a-form-item>
+          </a-col>
+          <!-- 执行命令 -->
+          <a-col :span="24">
+            <a-form-item class="command-item"
+                         field="command"
+                         label="执行命令"
+                         :hide-label="true"
+                         :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
+              <template #extra>
+                <span v-permission="['asset:exec-template:query']"
+                      class="span-blue usn pointer"
+                      @click="emits('openTemplate')">
+                  从模板中选择
+                </span>
+              </template>
+              <!-- 命令框 -->
+              <exec-editor v-model="formModel.command"
+                           container-class="command-editor"
+                           theme="vs-dark"
+                           :parameter="[...jobBuiltinParams, ...parameter]" />
+            </a-form-item>
+          </a-col>
+          <!-- 命令参数 -->
+          <a-col :span="24">
+            <a-form-item field="parameter"
+                         class="parameter-form-item"
+                         label="命令参数">
+              <!-- label -->
+              <template #label>
+                <span class="span-blue pointer" @click="addParameter">添加参数</span>
+              </template>
+              <!-- 参数 -->
+              <template v-if="parameter.length">
+                <a-input-group v-for="(item, i) in parameter"
+                               :key="i"
+                               class="parameter-item"
+                               :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
+                  <!-- 参数名 -->
+                  <a-input class="parameter-item-name"
+                           v-model="item.name"
+                           placeholder="必填"
+                           :max-length="24"
+                           allow-clear>
+                    <template #prepend>
+                      <span>参数名</span>
+                    </template>
+                  </a-input>
+                  <!-- 参数值 -->
+                  <a-input class="parameter-item-value"
+                           v-model="item.value"
+                           placeholder="必填"
+                           allow-clear>
+                    <template #prepend>
+                      <span>参数值</span>
+                    </template>
+                  </a-input>
+                  <!-- 描述 -->
+                  <a-input class="parameter-item-description"
+                           v-model="item.desc"
+                           placeholder="非必填"
+                           :max-length="64"
+                           allow-clear>
+                    <template #prepend>
+                      <span>描述</span>
+                    </template>
+                  </a-input>
+                  <a-button class="parameter-item-close icon-button"
+                            title="移除"
+                            @click="removeParameter(i)">
+                    <icon-close />
+                  </a-button>
+                </a-input-group>
+              </template>
+              <!-- 无参数 -->
+              <template v-else>
+                <span class="no-parameter">
+                  <icon-empty class="mr4" />无参数
+                </span>
+              </template>
+            </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 type { ExecTemplateQueryResponse } from '@/api/exec/exec-template';
+  import type { TemplateParam } from '@/components/view/exec-editor/const';
+  import { onUnmounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { jobBuiltinParams } from '../types/const';
+  import { createExecJob, getExecJob, updateExecJob } from '@/api/exec/exec-job';
+  import { getExecTemplateWithAuthorized } from '@/api/exec/exec-template';
+  import { Message } from '@arco-design/web-vue';
+  import { EnabledStatus } from '@/types/const';
+  import { useDictStore } from '@/store';
+  import ExecEditor from '@/components/view/exec-editor/index.vue';
+
+  const emits = defineEmits(['added', 'updated', 'openHost', 'openTemplate', 'testCron', 'genCron']);
+
+  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 parameter = ref<Array<TemplateParam>>([]);
+
+  const defaultForm = (): ExecJobUpdateRequest => {
+    return {
+      id: undefined,
+      name: undefined,
+      expression: undefined,
+      timeout: 0,
+      scriptExec: EnabledStatus.DISABLED,
+      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,
+      command: record.command,
+      timeout: record.timeout,
+      scriptExec: record.scriptExec,
+      parameterSchema: record.parameterSchema,
+      hostIdList: record.hostIdList,
+    };
+    if (record.parameterSchema) {
+      parameter.value = JSON.parse(record.parameterSchema);
+    } else {
+      parameter.value = [];
+    }
+  };
+
+  // 添加参数
+  const addParameter = () => {
+    parameter.value.push({});
+  };
+
+  // 移除参数
+  const removeParameter = (index: number) => {
+    parameter.value.splice(index, 1);
+  };
+
+  // 设置表达式
+  const setExpression = (expression: string) => {
+    formModel.value.expression = expression;
+  };
+
+  // 设置选中主机
+  const setSelectedHost = (hosts: Array<number>) => {
+    formModel.value.hostIdList = hosts;
+  };
+
+  // 通过模板设置
+  const setWithTemplate = async (record: ExecTemplateQueryResponse) => {
+    setLoading(true);
+    try {
+      // 查询模板信息
+      const { data } = await getExecTemplateWithAuthorized(record.id);
+      formModel.value = {
+        ...formModel.value,
+        name: data.name,
+        command: data.command,
+        timeout: data.timeout,
+        scriptExec: data.scriptExec,
+        parameterSchema: data.parameterSchema,
+        hostIdList: data.hostIdList,
+      };
+      if (record.parameterSchema) {
+        parameter.value = JSON.parse(record.parameterSchema);
+      } else {
+        parameter.value = [];
+      }
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  defineExpose({ openAdd, openUpdate, setSelectedHost, setWithTemplate, setExpression });
+
+  // 打开选择主机
+  const openSelectHost = () => {
+    emits('openHost', formModel.value.hostIdList);
+  };
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      // 验证并设置命令参数
+      for (const p of parameter.value) {
+        if (!p.name || !p.value) {
+          Message.warning('请补全命令参数');
+          return false;
+        }
+      }
+      formModel.value.parameterSchema = JSON.stringify(parameter.value);
+      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>
+
+  .selected-host {
+    width: 100%;
+    height: 32px;
+    padding: 0 8px;
+    border-radius: 2px;
+    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);
+    }
+  }
+
+  .form-container {
+    width: 100%;
+    min-height: 100%;
+  }
+
+  .command-item {
+    :deep(.arco-form-item-extra) {
+      margin-top: -18px;
+      width: 100%;
+      text-align: end;
+    }
+  }
+
+  .command-editor {
+    width: 100%;
+    height: calc(100vh - 324px);
+  }
+
+  :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;
+    }
+  }
+
+  .parameter-form-item {
+    user-select: none;
+    margin-top: 4px;
+
+    :deep(.arco-form-item-content) {
+      flex-direction: column;
+    }
+
+    .parameter-item-last {
+      margin-bottom: 0 !important;
+    }
+
+    .parameter-item {
+      width: 100%;
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: space-between;
+
+      & > span {
+        border-radius: 2px;
+        border-right-color: transparent;
+      }
+
+      &-name {
+        width: 30%;
+      }
+
+      &-value {
+        width: 40%;
+      }
+
+      &-description {
+        width: calc(30% - 44px);
+      }
+
+      &-close {
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        background: var(--color-fill-2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background: var(--color-fill-3);
+        }
+      }
+    }
+
+    .no-parameter {
+      background: var(--color-fill-2);
+      width: 100%;
+      height: 32px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-2);
+    }
+  }
+
+</style>

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

@@ -0,0 +1,315 @@
+<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-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectedRows">
+            <a-button v-permission="['asset:exec-job:delete']"
+                      type="primary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table v-model:selected-keys="selectedKeys"
+             row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             :row-selection="rowSelection"
+             :data="tableRenderData"
+             :pagination="pagination"
+             :bordered="false"
+             @page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size: number) => fetchTableData(1, size)">
+      <!-- cron -->
+      <template #expression="{ record }">
+        <span class="copy-left"
+              title="复制"
+              @click="copy(record.expression, true)">
+          <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, true)">
+          <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: number) => updateStatus(record.id, s)" />
+        <!-- 状态 不可编辑 -->
+        <a-tag v-else :color="getDictValue(execJobStatusKey, record.status, 'color')">
+          {{ getDictValue(execJobStatusKey, record.status) }}
+        </a-tag>
+      </template>
+      <!-- 最近执行 -->
+      <template #recentLog="{ record }">
+        <div class="flex-center" v-if="record.recentLogId && record.recentLogStatus">
+          <!-- 执行状态 -->
+          <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:ss') }}
+        </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, batchDeleteExecJob, 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 { useTablePagination, useRowSelection } from '@/hooks/table';
+  import { useDictStore } from '@/store';
+  import { copy } from '@/hooks/copy';
+  import { dateFormat } from '@/utils';
+
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openDetail', 'testCron']);
+
+  const pagination = useTablePagination();
+  const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();
+  const { hasPermission } = usePermission();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const selectedKeys = ref<number[]>([]);
+  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 deleteSelectedRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteExecJob(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 重新加载
+  const reload = () => {
+    fetchTableData();
+  };
+
+  defineExpose({ reload });
+
+  // 修改状态
+  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;
+      selectedKeys.value = [];
+    } 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-visor-ui/src/views/exec/exec-job/index.vue

@@ -0,0 +1,76 @@
+<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="() => table.reload()"
+                          @updated="() => table.reload()"
+                          @open-host="(e) => hostModal.open(e)"
+                          @open-template="() => templateModal.open()"
+                          @test-cron="openNextCron"
+                          @gen-cron="(e) => genModal.open(e)" />
+    <!-- 任务详情模态框 -->
+    <exec-job-detail-drawer ref="detail" />
+    <!-- cron 执行时间模态框 -->
+    <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)" />
+    <!-- 主机模态框 -->
+    <authorized-host-modal ref="hostModal"
+                           type="SSH"
+                           @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 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();
+
+  // 打开下次执行时间
+  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-visor-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 jobBuiltinParams: Array<TemplateParam> = [
+  {
+    name: 'sourceId',
+    desc: '计划任务id'
+  }, {
+    name: 'seq',
+    desc: '执行序列'
+  },
+];
+
+// 计划任务状态 字典项
+export const execJobStatusKey = 'execJobStatus';
+
+// 执行状态 字典项
+export const execStatusKey = 'execStatus';
+
+// 加载的字典值
+export const dictKeys = [execJobStatusKey, execStatusKey];

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

@@ -0,0 +1,51 @@
+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: '请输入超时时间'
+}, {
+  type: 'number',
+  min: 0,
+  max: 100000,
+  message: '超时时间需要在 0 - 100000 之间'
+}] as FieldRule[];
+
+export const scriptExec = [{
+  required: true,
+  message: '请选择是否使用脚本执行'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入执行命令'
+}] as FieldRule[];
+
+export default {
+  name,
+  hostIdList,
+  expression,
+  timeout,
+  scriptExec,
+  command,
+} as Record<string, FieldRule | FieldRule[]>;

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

@@ -0,0 +1,69 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 100,
+    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',
+    minWidth: 238,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '任务状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'center',
+    width: 112,
+  }, {
+    title: '最近执行',
+    dataIndex: 'recentLog',
+    slotName: 'recentLog',
+    align: 'left',
+    headerCellStyle: {
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    width: 200,
+  }, {
+    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;