🔨 执行日志.

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-table.vue.vm

@@ -89,9 +89,9 @@
              #end
              :data="tableRenderData"
              :pagination="pagination"
+             :bordered="false"
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
-             @page-size-change="(size) => fetchTableData(1, size)"
-             :bordered="false">
+             @page-size-change="(size) => fetchTableData(1, size)">
       #foreach($field in ${table.fields})
       #if(${dictMap.containsKey(${field.propertyName})})
       <!-- $field.comment -->

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/ExecLogController.java

@@ -67,7 +67,7 @@ public class ExecLogController {
     }
 
     @IgnoreLog(IgnoreLogMode.RET)
-    @GetMapping("/list")
+    @GetMapping("/host-list")
     @Operation(summary = "查询全部执行主机日志")
     @PreAuthorize("@ss.hasPermission('asset:exec-log:query')")
     public List<ExecHostLogVO> getExecHostLogList(@RequestParam("logId") Long logId) {

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecHostLogVO.java

@@ -49,9 +49,6 @@ public class ExecHostLogVO implements Serializable {
     @Schema(description = "退出码")
     private Integer exitStatus;
 
-    @Schema(description = "日志路径")
-    private String logPath;
-
     @Schema(description = "错误信息")
     private String errorMessage;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecLogVO.java

@@ -34,12 +34,6 @@ public class ExecLogVO implements Serializable {
     @Schema(description = "执行用户名")
     private String username;
 
-    @Schema(description = "执行来源")
-    private String source;
-
-    @Schema(description = "执行来源id")
-    private Long sourceId;
-
     @Schema(description = "执行描述")
     private String description;
 

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

@@ -0,0 +1,135 @@
+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 ExecHostLogCreateRequest {
+  logId?: number;
+  hostId?: number;
+  hostName?: string;
+  status?: string;
+  command?: string;
+  parameter?: string;
+  exitStatus?: number;
+  logPath?: string;
+  errorMessage?: string;
+  startTime?: string;
+  finishTime?: string;
+}
+
+/**
+ * 主机执行记录更新请求
+ */
+export interface ExecHostLogUpdateRequest extends ExecHostLogCreateRequest {
+  id?: number;
+}
+
+/**
+ * 主机执行记录查询请求
+ */
+export interface ExecHostLogQueryRequest extends Pagination {
+  searchValue?: string;
+  id?: number;
+  logId?: number;
+  hostId?: number;
+  hostName?: string;
+  status?: string;
+  command?: string;
+  parameter?: string;
+  exitStatus?: number;
+  logPath?: string;
+  errorMessage?: string;
+  startTime?: string;
+  finishTime?: string;
+}
+
+/**
+ * 主机执行记录查询响应
+ */
+export interface ExecHostLogQueryResponse extends TableData {
+  id: number;
+  logId: number;
+  hostId: number;
+  hostName: string;
+  status: string;
+  command: string;
+  parameter: string;
+  exitStatus: number;
+  logPath: string;
+  errorMessage: string;
+  startTime: number;
+  finishTime: number;
+  createTime: number;
+  updateTime: number;
+  creator: string;
+  updater: string;
+}
+
+/**
+ * 创建主机执行记录
+ */
+export function createExecHostLog(request: ExecHostLogCreateRequest) {
+  return axios.post('/asset/exec-host-log/create', request);
+}
+
+/**
+ * 更新主机执行记录
+ */
+export function updateExecHostLog(request: ExecHostLogUpdateRequest) {
+  return axios.put('/asset/exec-host-log/update', request);
+}
+
+/**
+ * 查询主机执行记录
+ */
+export function getExecHostLog(id: number) {
+  return axios.get<ExecHostLogQueryResponse>('/asset/exec-host-log/get', { params: { id } });
+}
+
+/**
+ * 批量查询主机执行记录
+ */
+export function batchGetExecHostLogList(idList: Array<number>) {
+  return axios.get<ExecHostLogQueryResponse[]>('/asset/exec-host-log/batch-get', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
+/**
+ * 查询全部主机执行记录
+ */
+export function getExecHostLogList(request: ExecHostLogQueryRequest) {
+  return axios.post<Array<ExecHostLogQueryResponse>>('/asset/exec-host-log/list', request);
+}
+
+/**
+ * 分页查询主机执行记录
+ */
+export function getExecHostLogPage(request: ExecHostLogQueryRequest) {
+  return axios.post<DataGrid<ExecHostLogQueryResponse>>('/asset/exec-host-log/query', request);
+}
+
+/**
+ * 删除主机执行记录
+ */
+export function deleteExecHostLog(id: number) {
+  return axios.delete('/asset/exec-host-log/delete', { params: { id } });
+}
+
+/**
+ * 批量删除主机执行记录
+ */
+export function batchDeleteExecHostLog(idList: Array<number>) {
+  return axios.delete('/asset/exec-host-log/batch-delete', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}

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

@@ -0,0 +1,95 @@
+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 ExecLogQueryRequest extends Pagination {
+  id?: number;
+  userId?: number;
+  description?: string;
+  command?: string;
+  status?: string;
+  startTimeRange?: string[];
+}
+
+/**
+ * 执行记录查询响应
+ */
+export interface ExecLogQueryResponse extends TableData, ExecLogQueryExtraResponse {
+  id: number;
+  userId: number;
+  username: string;
+  description: string;
+  command: string;
+  timeout: number;
+  status: string;
+  startTime: number;
+  finishTime: number;
+}
+
+/**
+ * 执行记录查询响应 拓展
+ */
+export interface ExecLogQueryExtraResponse {
+  hosts: Array<ExecHostLogQueryResponse>;
+}
+
+/**
+ * 主机执行记录查询响应
+ */
+export interface ExecHostLogQueryResponse extends TableData {
+  id: number;
+  logId: number;
+  hostId: number;
+  hostName: string;
+  status: string;
+  command: string;
+  parameter: string;
+  exitStatus: number;
+  errorMessage: string;
+  startTime: number;
+  finishTime: number;
+}
+
+/**
+ * 查询执行记录
+ */
+export function getExecLog(id: number) {
+  return axios.get<ExecLogQueryResponse>('/asset/exec-log/get', { params: { id } });
+}
+
+/**
+ * 分页查询执行记录
+ */
+export function getExecLogPage(request: ExecLogQueryRequest) {
+  return axios.post<DataGrid<ExecLogQueryResponse>>('/asset/exec-log/query', request);
+}
+
+/**
+ * 查询主机执行记录
+ */
+export function getExecHostLogList(logId: number) {
+  return axios.get<Array<ExecHostLogQueryResponse>>('/asset/exec-log/host-list', { params: { logId } });
+}
+
+/**
+ * 删除执行记录
+ */
+export function deleteExecLog(id: number) {
+  return axios.delete('/asset/exec-log/delete', { params: { id } });
+}
+
+/**
+ * 批量删除执行记录
+ */
+export function batchDeleteExecLog(idList: Array<number>) {
+  return axios.delete('/asset/exec-log/batch-delete', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}

orion-ops-ui/src/router/routes/modules/exec.ts

@@ -11,6 +11,16 @@ const EXEC: AppRouteRecordRaw = {
       path: '/exec-template',
       component: () => import('@/views/exec/exec-template/index.vue'),
     },
+    {
+      name: 'execLog',
+      path: '/exec-log',
+      component: () => import('@/views/exec/exec-log/index.vue'),
+    },
+    {
+      name: 'execHostLog',
+      path: '/exec-host-log',
+      component: () => import('@/views/exec/exec-host-log/index.vue'),
+    },
   ],
 };
 

orion-ops-ui/src/types/table.ts

@@ -3,6 +3,7 @@ import { reactive } from 'vue';
 import { useAppStore } from '@/store';
 import { isNumber } from '@/utils/is';
 import { TablePageSizeOptions } from '@/types/const';
+import { TableExpandable } from '@arco-design/web-vue/es/table/interface';
 
 /**
  * 创建列表分页
@@ -31,3 +32,14 @@ export const useRowSelection = (ext?: TableRowSelection): TableRowSelection => {
     ...ext
   });
 };
+
+/**
+ * 创建表格展开
+ */
+export const useExpandable = (ext?: TableExpandable): TableExpandable => {
+  return reactive({
+    width: 50,
+    fixed: true,
+    ...ext
+  });
+};

orion-ops-ui/src/views/exec/exec-host-log/components/exec-host-log-form-modal.vue

@@ -0,0 +1,206 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           :title="title"
+           :top="80"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :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"
+              ref="formRef"
+              label-align="right"
+              :label-col-props="{ span: 5 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        <!-- 执行日志id -->
+        <a-form-item field="logId" label="执行日志id">
+          <a-input-number v-model="formModel.logId"
+                          placeholder="请输入执行日志id"
+                          hide-button />
+        </a-form-item>
+        <!-- 主机id -->
+        <a-form-item field="hostId" label="主机id">
+          <a-input-number v-model="formModel.hostId"
+                          placeholder="请输入主机id"
+                          hide-button />
+        </a-form-item>
+        <!-- 主机名称 -->
+        <a-form-item field="hostName" label="主机名称">
+          <a-input v-model="formModel.hostName"
+                   placeholder="请输入主机名称"
+                   allow-clear />
+        </a-form-item>
+        <!-- 执行状态 -->
+        <a-form-item field="status" label="执行状态">
+          <a-select v-model="formModel.status"
+                    :options="toOptions(execHostStatusKey)"
+                    placeholder="请选择执行状态" />
+        </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="parameter" label="执行参数">
+          <a-input v-model="formModel.parameter"
+                   placeholder="请输入执行参数"
+                   allow-clear />
+        </a-form-item>
+        <!-- 退出码 -->
+        <a-form-item field="exitStatus" label="退出码">
+          <a-input-number v-model="formModel.exitStatus"
+                          placeholder="请输入退出码"
+                          hide-button />
+        </a-form-item>
+        <!-- 日志路径 -->
+        <a-form-item field="logPath" label="日志路径">
+          <a-input v-model="formModel.logPath"
+                   placeholder="请输入日志路径"
+                   allow-clear />
+        </a-form-item>
+        <!-- 错误信息 -->
+        <a-form-item field="errorMessage" label="错误信息">
+          <a-input v-model="formModel.errorMessage"
+                   placeholder="请输入错误信息"
+                   allow-clear />
+        </a-form-item>
+        <!-- 执行开始时间 -->
+        <a-form-item field="startTime" label="执行开始时间">
+          <a-date-picker v-model="formModel.startTime"
+                         style="width: 100%"
+                         placeholder="请选择执行开始时间"
+                         show-time />
+        </a-form-item>
+        <!-- 执行结束时间 -->
+        <a-form-item field="finishTime" label="执行结束时间">
+          <a-date-picker v-model="formModel.finishTime"
+                         style="width: 100%"
+                         placeholder="请选择执行结束时间"
+                         show-time />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execHostLogFormModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecHostLogUpdateRequest } from '@/api/exec/exec-host-log';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { execHostStatusKey } from '../types/const';
+  import { createExecHostLog, updateExecHostLog } from '@/api/exec/exec-host-log';
+  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<ExecHostLogUpdateRequest>({});
+
+  const defaultForm = (): ExecHostLogUpdateRequest => {
+    return {
+      id: undefined,
+      logId: undefined,
+      hostId: undefined,
+      hostName: undefined,
+      status: undefined,
+      command: undefined,
+      parameter: undefined,
+      exitStatus: undefined,
+      logPath: undefined,
+      errorMessage: undefined,
+      startTime: undefined,
+      finishTime: 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 createExecHostLog(formModel.value);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateExecHostLog(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-host-log/components/exec-host-log-table.vue

@@ -0,0 +1,257 @@
+<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>
+      <!-- 执行日志id -->
+      <a-form-item field="logId" label="执行日志id">
+        <a-input-number v-model="formModel.logId"
+                        placeholder="请输入执行日志id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 主机id -->
+      <a-form-item field="hostId" label="主机id">
+        <a-input-number v-model="formModel.hostId"
+                        placeholder="请输入主机id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 主机名称 -->
+      <a-form-item field="hostName" label="主机名称">
+        <a-input v-model="formModel.hostName"
+                 placeholder="请输入主机名称"
+                 allow-clear />
+      </a-form-item>
+      <!-- 执行状态 -->
+      <a-form-item field="status" label="执行状态">
+        <a-select v-model="formModel.status"
+                  :options="toOptions(execHostStatusKey)"
+                  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="parameter" label="执行参数">
+        <a-input v-model="formModel.parameter"
+                 placeholder="请输入执行参数"
+                 allow-clear />
+      </a-form-item>
+      <!-- 退出码 -->
+      <a-form-item field="exitStatus" label="退出码">
+        <a-input-number v-model="formModel.exitStatus"
+                        placeholder="请输入退出码"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
+      <!-- 日志路径 -->
+      <a-form-item field="logPath" label="日志路径">
+        <a-input v-model="formModel.logPath"
+                 placeholder="请输入日志路径"
+                 allow-clear />
+      </a-form-item>
+      <!-- 错误信息 -->
+      <a-form-item field="errorMessage" label="错误信息">
+        <a-input v-model="formModel.errorMessage"
+                 placeholder="请输入错误信息"
+                 allow-clear />
+      </a-form-item>
+      <!-- 执行开始时间 -->
+      <a-form-item field="startTime" label="执行开始时间">
+        <a-date-picker v-model="formModel.startTime"
+                       style="width: 100%"
+                       placeholder="请选择执行开始时间"
+                       show-time
+                       allow-clear />
+      </a-form-item>
+      <!-- 执行结束时间 -->
+      <a-form-item field="finishTime" label="执行结束时间">
+        <a-date-picker v-model="formModel.finishTime"
+                       style="width: 100%"
+                       placeholder="请选择执行结束时间"
+                       show-time
+                       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-host-log: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"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             :bordered="false">
+      <!-- 执行状态 -->
+      <template #status="{ record }">
+        {{ getDictValue(execHostStatusKey, record.status) }}
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 修改 -->
+          <a-button v-permission="['asset:exec-host-log:update']"
+                    type="text"
+                    size="mini"
+                    @click="emits('openUpdate', record)">
+            修改
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec-host-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: 'execHostLogTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecHostLogQueryRequest, ExecHostLogQueryResponse } from '@/api/exec/exec-host-log';
+  import { reactive, ref, onMounted } from 'vue';
+  import { batchDeleteExecHostLog, deleteExecHostLog, getExecHostLogPage } from '@/api/exec/exec-host-log';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { execHostStatusKey } from '../types/const';
+  import { usePagination } from '@/types/table';
+  import { useDictStore } from '@/store';
+
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const tableRenderData = ref<ExecHostLogQueryResponse[]>([]);
+  const formModel = reactive<ExecHostLogQueryRequest>({
+    id: undefined,
+    logId: undefined,
+    hostId: undefined,
+    hostName: undefined,
+    status: undefined,
+    command: undefined,
+    parameter: undefined,
+    exitStatus: undefined,
+    logPath: undefined,
+    errorMessage: undefined,
+    startTime: undefined,
+    finishTime: undefined,
+  });
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecHostLog(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 加载数据
+  const doFetchTableData = async (request: ExecHostLogQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getExecHostLogPage(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-host-log/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <exec-host-log-table ref="table"
+                  @openAdd="() => modal.openAdd()"
+                  @openUpdate="(e) => modal.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <exec-host-log-form-modal ref="modal"
+                   @added="modalAddCallback"
+                   @updated="modalUpdateCallback" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execHostLog'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import { useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+  import ExecHostLogTable from './components/exec-host-log-table.vue';
+  import ExecHostLogFormModal from './components/exec-host-log-form-modal.vue';
+
+  const render = ref(false);
+  const table = ref();
+  const modal = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+  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-host-log/types/const.ts

@@ -0,0 +1,22 @@
+/**
+ * 执行状态
+ */
+// FIXME 检查这里的类型
+export const execHostStatus = {
+  // 等待中
+  WAITING: 'WAITING',
+  // 运行中
+  RUNNING: 'RUNNING',
+  // 执行完成
+  COMPLETED: 'COMPLETED',
+  // 执行失败
+  FAILED: 'FAILED',
+  // 已中断
+  INTERRUPTED: 'INTERRUPTED',
+}
+
+// 执行状态 字典项
+export const execHostStatusKey = 'execHostStatus';
+
+// 加载的字典值
+export const dictKeys = [execHostStatusKey];

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

@@ -0,0 +1,82 @@
+import type { FieldRule } from '@arco-design/web-vue';
+
+export const logId = [{
+  required: true,
+  message: '请输入执行日志id'
+}] as FieldRule[];
+
+export const hostId = [{
+  required: true,
+  message: '请输入主机id'
+}] as FieldRule[];
+
+export const hostName = [{
+  required: true,
+  message: '请输入主机名称'
+}, {
+  maxLength: 128,
+  message: '主机名称长度不能大于128位'
+}] as FieldRule[];
+
+export const status = [{
+  required: true,
+  message: '请输入执行状态'
+}, {
+  maxLength: 12,
+  message: '执行状态长度不能大于12位'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入执行命令'
+}] as FieldRule[];
+
+export const parameter = [{
+  required: true,
+  message: '请输入执行参数'
+}] as FieldRule[];
+
+export const exitStatus = [{
+  required: true,
+  message: '请输入退出码'
+}] as FieldRule[];
+
+export const logPath = [{
+  required: true,
+  message: '请输入日志路径'
+}, {
+  maxLength: 512,
+  message: '日志路径长度不能大于512位'
+}] as FieldRule[];
+
+export const errorMessage = [{
+  required: true,
+  message: '请输入错误信息'
+}, {
+  maxLength: 255,
+  message: '错误信息长度不能大于255位'
+}] as FieldRule[];
+
+export const startTime = [{
+  required: true,
+  message: '请输入执行开始时间'
+}] as FieldRule[];
+
+export const finishTime = [{
+  required: true,
+  message: '请输入执行结束时间'
+}] as FieldRule[];
+
+export default {
+  logId,
+  hostId,
+  hostName,
+  status,
+  command,
+  parameter,
+  exitStatus,
+  logPath,
+  errorMessage,
+  startTime,
+  finishTime,
+} as Record<string, FieldRule | FieldRule[]>;

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

@@ -0,0 +1,122 @@
+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: '执行日志id',
+    dataIndex: 'logId',
+    slotName: 'logId',
+    align: 'left',
+  }, {
+    title: '主机id',
+    dataIndex: 'hostId',
+    slotName: 'hostId',
+    align: 'left',
+  }, {
+    title: '主机名称',
+    dataIndex: 'hostName',
+    slotName: 'hostName',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行参数',
+    dataIndex: 'parameter',
+    slotName: 'parameter',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '退出码',
+    dataIndex: 'exitStatus',
+    slotName: 'exitStatus',
+    align: 'left',
+  }, {
+    title: '日志路径',
+    dataIndex: 'logPath',
+    slotName: 'logPath',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '错误信息',
+    dataIndex: 'errorMessage',
+    slotName: 'errorMessage',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行开始时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.startTime && dateFormat(new Date(record.startTime));
+    },
+  }, {
+    title: '执行结束时间',
+    dataIndex: 'finishTime',
+    slotName: 'finishTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.finishTime && dateFormat(new Date(record.finishTime));
+    },
+  }, {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  }, {
+    title: '创建人',
+    dataIndex: 'creator',
+    slotName: 'creator',
+  }, {
+    title: '修改人',
+    dataIndex: 'updater',
+    slotName: 'updater',
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

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

@@ -0,0 +1,80 @@
+<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 #status="{ record }">
+      {{ getDictValue(execHostStatusKey, record.status) }}
+    </template>
+    <!-- 操作 -->
+    <template #handle="{ record }">
+      <div class="table-handle-wrapper">
+        <!-- 删除 -->
+        <a-popconfirm content="确认删除这条记录吗?"
+                      position="left"
+                      type="warning"
+                      @ok="deleteRow(record)">
+          <a-button v-permission="['asset:exec-host-log:delete']"
+                    type="text"
+                    size="mini"
+                    status="danger">
+            删除
+          </a-button>
+        </a-popconfirm>
+      </div>
+    </template>
+  </a-table>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execHostLogTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
+  import { reactive, ref, onMounted } from 'vue';
+  import { deleteExecHostLog } from '@/api/exec/exec-host-log';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { execHostStatusKey } from '../types/const';
+  import { useDictStore } from '@/store';
+  import { useExpandable } from '@/types/table';
+
+  const props = defineProps<{
+    row: ExecLogQueryResponse;
+  }>();
+
+  const expandable = useExpandable();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecHostLog(id);
+      Message.success('删除成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,199 @@
+<!--<template>-->
+<!--  <a-modal v-model:visible="visible"-->
+<!--           body-class="modal-form"-->
+<!--           title-align="start"-->
+<!--           :title="title"-->
+<!--           :top="80"-->
+<!--           :align-center="false"-->
+<!--           :draggable="true"-->
+<!--           :mask-closable="false"-->
+<!--           :unmount-on-close="true"-->
+<!--           :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"-->
+<!--              ref="formRef"-->
+<!--              label-align="right"-->
+<!--              :label-col-props="{ span: 5 }"-->
+<!--              :wrapper-col-props="{ span: 18 }"-->
+<!--              :rules="formRules">-->
+<!--        &lt;!&ndash; 任务id &ndash;&gt;-->
+<!--        <a-form-item field="userId" label="任务id">-->
+<!--          <a-input-number v-model="formModel.userId"-->
+<!--                          placeholder="请输入任务id"-->
+<!--                          hide-button />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行用户名 &ndash;&gt;-->
+<!--        <a-form-item field="username" label="执行用户名">-->
+<!--          <a-input v-model="formModel.username"-->
+<!--                   placeholder="请输入执行用户名"-->
+<!--                   allow-clear />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行来源 &ndash;&gt;-->
+<!--        <a-form-item field="source" label="执行来源">-->
+<!--          <a-input v-model="formModel.source"-->
+<!--                   placeholder="请输入执行来源"-->
+<!--                   allow-clear />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行来源id &ndash;&gt;-->
+<!--        <a-form-item field="sourceId" label="执行来源id">-->
+<!--          <a-input-number v-model="formModel.sourceId"-->
+<!--                          placeholder="请输入执行来源id"-->
+<!--                          hide-button />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行描述 &ndash;&gt;-->
+<!--        <a-form-item field="description" label="执行描述">-->
+<!--          <a-input v-model="formModel.description"-->
+<!--                   placeholder="请输入执行描述"-->
+<!--                   allow-clear />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行命令 &ndash;&gt;-->
+<!--        <a-form-item field="command" label="执行命令">-->
+<!--          <a-input v-model="formModel.command"-->
+<!--                   placeholder="请输入执行命令"-->
+<!--                   allow-clear />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 超时时间 &ndash;&gt;-->
+<!--        <a-form-item field="timeout" label="超时时间">-->
+<!--          <a-input-number v-model="formModel.timeout"-->
+<!--                          placeholder="请输入超时时间"-->
+<!--                          hide-button />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行状态 &ndash;&gt;-->
+<!--        <a-form-item field="status" label="执行状态">-->
+<!--          <a-select v-model="formModel.status"-->
+<!--                    :options="toOptions(execStatusKey)"-->
+<!--                    placeholder="请选择执行状态" />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行开始时间 &ndash;&gt;-->
+<!--        <a-form-item field="startTime" label="执行开始时间">-->
+<!--          <a-date-picker v-model="formModel.startTime"-->
+<!--                         style="width: 100%"-->
+<!--                         placeholder="请选择执行开始时间"-->
+<!--                         show-time />-->
+<!--        </a-form-item>-->
+<!--        &lt;!&ndash; 执行完成时间 &ndash;&gt;-->
+<!--        <a-form-item field="finishTime" label="执行完成时间">-->
+<!--          <a-date-picker v-model="formModel.finishTime"-->
+<!--                         style="width: 100%"-->
+<!--                         placeholder="请选择执行完成时间"-->
+<!--                         show-time />-->
+<!--        </a-form-item>-->
+<!--      </a-form>-->
+<!--    </a-spin>-->
+<!--  </a-modal>-->
+<!--</template>-->
+
+<!--<script lang="ts">-->
+<!--  export default {-->
+<!--    name: 'execLogFormModal'-->
+<!--  };-->
+<!--</script>-->
+
+<!--<script lang="ts" setup>-->
+<!--  import type { ExecLogUpdateRequest } from '@/api/exec/exec-log';-->
+<!--  import { ref } from 'vue';-->
+<!--  import useLoading from '@/hooks/loading';-->
+<!--  import useVisible from '@/hooks/visible';-->
+<!--  import formRules from '../types/form.rules';-->
+<!--  import { execStatusKey } from '../types/const';-->
+<!--  import { createExecLog, updateExecLog } from '@/api/exec/exec-log';-->
+<!--  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<ExecLogUpdateRequest>({});-->
+
+<!--  const defaultForm = (): ExecLogUpdateRequest => {-->
+<!--    return {-->
+<!--      id: undefined,-->
+<!--      userId: undefined,-->
+<!--      username: undefined,-->
+<!--      source: undefined,-->
+<!--      sourceId: undefined,-->
+<!--      description: undefined,-->
+<!--      command: undefined,-->
+<!--      timeout: undefined,-->
+<!--      status: undefined,-->
+<!--      startTime: undefined,-->
+<!--      finishTime: 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 createExecLog(formModel.value);-->
+<!--        Message.success('创建成功');-->
+<!--        emits('added');-->
+<!--      } else {-->
+<!--        // 修改-->
+<!--        await updateExecLog(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-log/components/exec-log-table.vue

@@ -0,0 +1,259 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  :itemOptions="{ 5: { span: 2 } }"
+                  @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="userId" label="执行用户">
+        <user-selector v-model="formModel.userId"
+                       placeholder="请选择执行用户"
+                       allow-clear />
+      </a-form-item>
+      <!-- 执行描述 -->
+      <a-form-item field="description" label="执行描述">
+        <a-input v-model="formModel.description"
+                 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(execStatusKey)"
+                  placeholder="请选择执行状态"
+                  allow-clear />
+      </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-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:exec-log:delete']"
+                      type="secondary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             v-model:selected-keys="selectedKeys"
+             :row-selection="rowSelection"
+             :expandable="expandable"
+             :data="tableRenderData"
+             :pagination="pagination"
+             :bordered="false"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             @expand="loadHostExecData">
+      <!-- 展开表格 -->
+      <template #expand-row="{ record }">
+        <exec-host-log-table :row="record" />
+      </template>
+      <!-- 执行状态 -->
+      <template #status="{ record }">
+        <a-tag :color="getDictValue(execStatusKey, record.status, 'color')">
+          {{ getDictValue(execStatusKey, record.status) }}
+        </a-tag>
+      </template>
+      <!-- 执行时间 -->
+      <template #startTime="{ record }">
+        <span class="start-time">
+          {{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
+        </span>
+        <br>
+        <span class="exec-duration usn">
+          持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
+        </span>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec-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: 'execLogTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecLogQueryRequest, ExecLogQueryResponse } from '@/api/exec/exec-log';
+  import { reactive, ref, onMounted } from 'vue';
+  import { batchDeleteExecLog, deleteExecLog, getExecHostLogList, getExecLogPage } from '@/api/exec/exec-log';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import { execStatusKey } from '../types/const';
+  import { useExpandable, usePagination, useRowSelection } from '@/types/table';
+  import { useDictStore } from '@/store';
+  import { dateFormat, formatDuration } from '@/utils';
+  import UserSelector from '@/components/user/user/selector/index.vue';
+  import ExecHostLogTable from './exec-host-log-table.vue';
+
+  const pagination = usePagination();
+  const rowSelection = useRowSelection();
+  const expandable = useExpandable();
+  const { loading, setLoading } = useLoading();
+  const { toOptions, getDictValue } = useDictStore();
+
+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<ExecLogQueryResponse[]>([]);
+  const formModel = reactive<ExecLogQueryRequest>({
+    id: undefined,
+    userId: undefined,
+    description: undefined,
+    command: undefined,
+    status: undefined,
+    startTimeRange: undefined,
+  });
+
+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteExecLog(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 deleteExecLog(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载主机数据
+  const loadHostExecData = async (key: number, record: ExecLogQueryResponse) => {
+    if (record.hosts) {
+      return;
+    }
+    // 加载数据
+    const { data } = await getExecHostLogList(record.id);
+    record.hosts = data;
+  };
+
+  // 加载数据
+  const doFetchTableData = async (request: ExecLogQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getExecLogPage(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>
+  .start-time {
+    color: var(--color-text-2);
+  }
+
+  .exec-duration {
+    display: flex;
+    margin-top: 4px;
+    color: var(--color-text-3);
+  }
+
+  :deep(.arco-table-cell-fixed-expand) {
+    width: 100% !important;
+  }
+
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <exec-log-table />
+    <!-- 添加修改模态框 -->
+    <!--    <exec-log-form-modal ref="modal"-->
+    <!--                   @added="modalAddCallback"-->
+    <!--                   @updated="modalUpdateCallback" />-->
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execLog'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import { useDictStore } from '@/store';
+  import { dictKeys } from './types/const';
+  import ExecLogTable from './components/exec-log-table.vue';
+
+  const render = ref(false);
+  const table = ref();
+  const modal = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+  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-log/types/const.ts

@@ -0,0 +1,38 @@
+/**
+ * 批量执行状态
+ */
+export const execStatus = {
+  // 等待中
+  WAITING: 'WAITING',
+  // 运行中
+  RUNNING: 'RUNNING',
+  // 执行完成
+  COMPLETED: 'COMPLETED',
+  // 执行失败
+  FAILED: 'FAILED',
+};
+
+/**
+ * 主机执行状态
+ */
+export const execHostStatus = {
+  // 等待中
+  WAITING: 'WAITING',
+  // 运行中
+  RUNNING: 'RUNNING',
+  // 执行完成
+  COMPLETED: 'COMPLETED',
+  // 执行失败
+  FAILED: 'FAILED',
+  // 已中断
+  INTERRUPTED: 'INTERRUPTED',
+};
+
+// 执行状态 字典项
+export const execStatusKey = 'execStatus';
+
+// 执行状态 字典项
+export const execHostStatusKey = 'execHostStatus';
+
+// 加载的字典值
+export const dictKeys = [execStatusKey, execHostStatusKey];

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

@@ -0,0 +1,76 @@
+import type { FieldRule } from '@arco-design/web-vue';
+
+export const userId = [{
+  required: true,
+  message: '请输入执行用户id'
+}] as FieldRule[];
+
+export const username = [{
+  required: true,
+  message: '请输入执行用户名'
+}, {
+  maxLength: 32,
+  message: '执行用户名长度不能大于32位'
+}] as FieldRule[];
+
+export const source = [{
+  required: true,
+  message: '请输入执行来源'
+}, {
+  maxLength: 12,
+  message: '执行来源长度不能大于12位'
+}] as FieldRule[];
+
+export const sourceId = [{
+  required: true,
+  message: '请输入执行来源id'
+}] as FieldRule[];
+
+export const description = [{
+  required: true,
+  message: '请输入执行描述'
+}, {
+  maxLength: 128,
+  message: '执行描述长度不能大于128位'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入执行命令'
+}] as FieldRule[];
+
+export const timeout = [{
+  required: true,
+  message: '请输入超时时间'
+}] as FieldRule[];
+
+export const status = [{
+  required: true,
+  message: '请输入执行状态'
+}, {
+  maxLength: 12,
+  message: '执行状态长度不能大于12位'
+}] as FieldRule[];
+
+export const startTime = [{
+  required: true,
+  message: '请输入执行开始时间'
+}] as FieldRule[];
+
+export const finishTime = [{
+  required: true,
+  message: '请输入执行完成时间'
+}] as FieldRule[];
+
+export default {
+  userId,
+  username,
+  source,
+  sourceId,
+  description,
+  command,
+  timeout,
+  status,
+  startTime,
+  finishTime,
+} as Record<string, FieldRule | FieldRule[]>;

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

@@ -0,0 +1,122 @@
+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: '执行日志id',
+    dataIndex: 'logId',
+    slotName: 'logId',
+    align: 'left',
+  }, {
+    title: '主机id',
+    dataIndex: 'hostId',
+    slotName: 'hostId',
+    align: 'left',
+  }, {
+    title: '主机名称',
+    dataIndex: 'hostName',
+    slotName: 'hostName',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行参数',
+    dataIndex: 'parameter',
+    slotName: 'parameter',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '退出码',
+    dataIndex: 'exitStatus',
+    slotName: 'exitStatus',
+    align: 'left',
+  }, {
+    title: '日志路径',
+    dataIndex: 'logPath',
+    slotName: 'logPath',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '错误信息',
+    dataIndex: 'errorMessage',
+    slotName: 'errorMessage',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行开始时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.startTime && dateFormat(new Date(record.startTime));
+    },
+  }, {
+    title: '执行结束时间',
+    dataIndex: 'finishTime',
+    slotName: 'finishTime',
+    align: 'left',
+    width: 180,
+    render: ({ record }) => {
+      return record.finishTime && dateFormat(new Date(record.finishTime));
+    },
+  }, {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  }, {
+    title: '创建人',
+    dataIndex: 'creator',
+    slotName: 'creator',
+  }, {
+    title: '修改人',
+    dataIndex: 'updater',
+    slotName: 'updater',
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

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

@@ -0,0 +1,40 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+
+const columns = [
+  {
+    title: '执行主机',
+    dataIndex: 'hostName',
+    slotName: 'hostName',
+    align: 'left',
+    width: 168,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行状态1',
+    dataIndex: 'status1',
+    slotName: 'status1',
+    align: 'left',
+    width: 118,
+  }, {
+    title: '执行时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 180,
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;

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

@@ -0,0 +1,54 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '描述',
+    dataIndex: 'description',
+    slotName: 'description',
+    align: 'left',
+    width: 168,
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '执行用户',
+    dataIndex: 'username',
+    slotName: 'username',
+    align: 'left',
+    width: 118,
+    ellipsis: true,
+  }, {
+    title: '执行状态',
+    dataIndex: 'status',
+    slotName: 'status',
+    align: 'left',
+    width: 118,
+  }, {
+    title: '执行时间',
+    dataIndex: 'startTime',
+    slotName: 'startTime',
+    align: 'left',
+    width: 180,
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;