✨ 新页面打开执行日志.

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

@@ -7,7 +7,14 @@
         展示最近 {{ historyCount }} 条执行记录
       </span>
     </div>
-    <div v-if="!historyLogs.length" class="flex-center mt16">
+    <!-- 加载中 -->
+    <a-skeleton v-if="loading" :animation="true">
+      <a-skeleton-line :rows="4"
+                       :line-height="40"
+                       :line-spacing="8" />
+    </a-skeleton>
+    <!-- 无数据 -->
+    <div v-else-if="!historyLogs.length" class="flex-center mt16">
       <a-empty description="无执行记录" />
     </div>
     <!-- 执行记录 -->
@@ -41,9 +48,12 @@
   import { onMounted, ref } from 'vue';
   import { getExecLogHistory } from '@/api/exec/exec-log';
   import { historyCount } from '../types/const';
+  import useLoading from '@/hooks/loading';
 
   const emits = defineEmits(['selected']);
 
+  const { loading, setLoading } = useLoading(true);
+
   const historyLogs = ref<Array<ExecLogQueryResponse>>([]);
 
   // 添加
@@ -76,8 +86,14 @@
 
   // 加载执行记录
   const fetchExecHistory = async () => {
-    const { data } = await getExecLogHistory(historyCount);
-    historyLogs.value = data;
+    setLoading(true);
+    try {
+      const { data } = await getExecLogHistory(historyCount);
+      historyLogs.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
   };
 
   // 加载执行记录

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

@@ -216,7 +216,7 @@
 </script>
 
 <style lang="less" scoped>
-  @form-width: 380px;
+  @form-width: 420px;
   @history-width: 320px;
   @command-gap: @form-width + @history-width + 32px;
 

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

@@ -29,7 +29,6 @@
   import ExecLogPanel from '@/components/exec/log/panel/index.vue';
 
   const { visible: logVisible, setVisible: setLogVisible } = useVisible();
-  const { loadKeys } = useDictStore();
 
   const log = ref();
 
@@ -43,7 +42,8 @@
 
   // 加载字典值
   onMounted(async () => {
-    await loadKeys(dictKeys);
+    const dictStore = useDictStore();
+    await dictStore.loadKeys(dictKeys);
   });
 
 </script>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="container">
+    <div class="wrapper">
+      <exec-log-panel ref="log" :visible-back="false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execExecLogView'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { onMounted, ref, nextTick } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { getExecLog } from '@/api/exec/exec-log';
+  import ExecLogPanel from '@/components/exec/log/panel/index.vue';
+
+  const route = useRoute();
+  const log = ref();
+
+  // 初始化
+  const init = async (id: number) => {
+    // 获取执行日志
+    const { data } = await getExecLog(id);
+    // 打开日志
+    await nextTick(() => {
+      setTimeout(() => {
+        log.value.open(data);
+      }, 50);
+    });
+  };
+
+  onMounted(() => {
+    const isParam = route.query.id;
+    if (isParam) {
+      init(Number.parseInt(isParam 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-ops-ui/src/views/exec/exec-log/components/exec-log-clear-modal.vue

@@ -18,6 +18,13 @@
               label-align="right"
               :label-col-props="{ span: 5 }"
               :wrapper-col-props="{ span: 18 }">
+        <!-- 执行时间 -->
+        <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="userId" label="执行用户">
           <user-selector v-model="formModel.userId"
@@ -42,13 +49,6 @@
                     :options="toOptions(execStatusKey)"
                     placeholder="请选择执行状态" />
         </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>
       </a-form>
     </a-spin>
   </a-modal>

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

@@ -163,6 +163,7 @@
           <a-button v-permission="['asset:exec:exec-command']"
                     type="text"
                     size="mini"
+                    title="ctrl + 左键新页面打开"
                     @click="(e) => emits('viewLog', record.id, e.ctrlKey)">
             日志
           </a-button>

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

@@ -36,6 +36,10 @@
   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';
+  import { useRouter } from 'vue-router';
+  import { openNewRoute } from '@/router';
+
+  const router = useRouter();
 
   const render = ref(false);
   const tableRef = ref();
@@ -62,7 +66,13 @@
   // 查看日志
   const viewLog = (id: number, newWindow: boolean) => {
     if (newWindow) {
-      // TODO openLog
+      // 跳转新页面
+      openNewRoute({
+        name: 'execLogView',
+        query: {
+          id
+        }
+      });
     } else {
       logModal.value.open(id);
     }