From 8d550b905777f0e8c63177a634c4090ac63c8509 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Thu, 11 Apr 2024 21:49:49 +0800
Subject: [PATCH] =?UTF-8?q?:hammer:=20=E8=AE=A1=E5=88=92=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/about/change-log.md                      |   2 +-
 .../meta/expression/next-cron-modal/index.vue |   1 -
 .../components/connect-log-detail-drawer.vue  |   6 +-
 .../components/exec-job-detail-drawer.vue     | 229 ++++++++----------
 .../components/exec-job-form-drawer.vue       |   2 +-
 .../exec-job/components/exec-job-table.vue    |   4 +-
 .../exec/exec-job/types/table.columns.ts      |   6 +-
 7 files changed, 104 insertions(+), 146 deletions(-)

diff --git a/docs/about/change-log.md b/docs/about/change-log.md
index 2fb584c1..0f3894e1 100644
--- a/docs/about/change-log.md
+++ b/docs/about/change-log.md
@@ -15,7 +15,7 @@
 * 🔨 优化 orion-ops-framework 配置规范化
 * 🔨 优化 前端 props 命名规范化
 
-[如何升级](/about/update.md?id=_v103)
+[如何升级](/about/update.md?id=_v104)
 
 ## v1.0.3
 
diff --git a/orion-ops-ui/src/components/meta/expression/next-cron-modal/index.vue b/orion-ops-ui/src/components/meta/expression/next-cron-modal/index.vue
index f270a46c..70975549 100644
--- a/orion-ops-ui/src/components/meta/expression/next-cron-modal/index.vue
+++ b/orion-ops-ui/src/components/meta/expression/next-cron-modal/index.vue
@@ -61,7 +61,6 @@
         // 表达式正确
         next.value = data.next;
         setVisible(true);
-
       } else {
         // 表达式错误
         setVisible(false);
diff --git a/orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue b/orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
index 59117ae5..a929f1b2 100644
--- a/orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
+++ b/orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
@@ -101,16 +101,12 @@
   import { dateFormat } from '@/utils';
   import { copy } from '@/hooks/copy';
 
-  const { getDictValue } = useDictStore();
+  const { getDictValue, toOptions } = useDictStore();
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
 
   const record = ref<HostConnectLogQueryResponse>({} as HostConnectLogQueryResponse);
 
-  const emits = defineEmits(['clear']);
-
-  const { toOptions } = useDictStore();
-
   // 打开
   const open = (s: any) => {
     record.value = s;
diff --git a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
index 444e435c..38fee99a 100644
--- a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
@@ -1,70 +1,73 @@
 <template>
   <a-drawer v-model:visible="visible"
-            :title="title"
-            :width="470"
+            title="计划执行任务详情"
+            width="50%"
             :mask-closable="false"
             :unmount-on-close="true"
-            :ok-button-props="{ disabled: loading }"
-            :cancel-button-props="{ disabled: loading }"
-            :on-before-ok="handlerOk"
+            ok-text="关闭"
+            :hide-cancel="true"
             @cancel="handleClose">
-    <a-spin class="full modal-form" :loading="loading">
-      <a-form :model="formModel"
-              ref="formRef"
-              label-align="right"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 18 }"
-              :rules="formRules">
-        <!-- 任务名称 -->
-        <a-form-item field="name" label="任务名称">
-          <a-input v-model="formModel.name"
-                   placeholder="请输入任务名称"
-                   allow-clear />
-        </a-form-item>
-        <!-- 执行序列 -->
-        <a-form-item field="execSeq" label="执行序列">
-          <a-input-number v-model="formModel.execSeq"
-                          placeholder="请输入执行序列"
-                          hide-button />
-        </a-form-item>
-        <!-- cron 表达式 -->
-        <a-form-item field="expression" label="cron 表达式">
-          <a-input v-model="formModel.expression"
-                   placeholder="请输入cron 表达式"
-                   allow-clear />
-        </a-form-item>
-        <!-- 超时时间 -->
-        <a-form-item field="timeout" label="超时时间">
-          <a-input-number v-model="formModel.timeout"
-                          placeholder="请输入超时时间"
-                          hide-button />
-        </a-form-item>
-        <!-- 执行命令 -->
-        <a-form-item field="command" label="执行命令">
-          <a-input v-model="formModel.command"
-                   placeholder="请输入执行命令"
-                   allow-clear />
-        </a-form-item>
-        <!-- 命令参数 -->
-        <a-form-item field="parameterSchema" label="命令参数">
-          <a-input v-model="formModel.parameterSchema"
-                   placeholder="请输入命令参数"
-                   allow-clear />
-        </a-form-item>
-        <!-- 任务状态 -->
-        <a-form-item field="status" label="任务状态">
-          <a-select v-model="formModel.status"
-                    :options="toOptions(execJobStatusKey)"
-                    placeholder="任务状态" />
-        </a-form-item>
-        <!-- 最近执行id -->
-        <a-form-item field="recentLogId" label="最近执行id">
-          <a-input-number v-model="formModel.recentLogId"
-                          placeholder="请输入最近执行id"
-                          hide-button />
-        </a-form-item>
-      </a-form>
-    </a-spin>
+    <a-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="修改时间">
+        {{ 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>
   </a-drawer>
 </template>
 
@@ -75,93 +78,38 @@
 </script>
 
 <script lang="ts" setup>
-  import type { ExecJobUpdateRequest } from '@/api/exec/exec-job';
+  import type { ExecJobQueryResponse } from '@/api/exec/exec-job';
   import { ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
-  import formRules from '../types/form.rules';
-  import { execJobStatusKey } from '../types/const';
-  import { createExecJob, updateExecJob } from '@/api/exec/exec-job';
-  import { Message } from '@arco-design/web-vue';
   import { useDictStore } from '@/store';
+  import { dateFormat } from '@/utils';
+  import { copy } from '@/hooks/copy';
+  import { getExecJob } from '@/api/exec/exec-job';
+  import { execJobStatusKey } from '@/views/exec/exec-job/types/const';
 
-  const emits = defineEmits(['added', 'updated']);
-
+  const { getDictValue, toOptions } = useDictStore();
   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 record = ref<ExecJobQueryResponse>({} as ExecJobQueryResponse);
 
-  const defaultForm = (): ExecJobUpdateRequest => {
-    return {
-      id: undefined,
-      name: undefined,
-      execSeq: undefined,
-      expression: undefined,
-      timeout: undefined,
-      command: undefined,
-      parameterSchema: undefined,
-      status: undefined,
-      recentLogId: undefined,
-    };
-  };
-
-  // 打开新增
-  const openAdd = () => {
-    title.value = '添加计划执行';
-    isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-  };
-
-  // 打开修改
-  const openUpdate = (record: any) => {
-    title.value = '修改计划执行';
-    isAddHandle.value = false;
-    renderForm({ ...defaultForm(), ...record });
-    setVisible(true);
-  };
-
-  // 渲染表单
-  const renderForm = (record: any) => {
-    formModel.value = Object.assign({}, record);
-  };
-
-  defineExpose({ openAdd, openUpdate });
-
-  // 确定
-  const handlerOk = async () => {
-    setLoading(true);
+  // 打开
+  const open = async (id: any) => {
+    // 查询计划任务
     try {
-      // 验证参数
-      const error = await formRef.value.validate();
-      if (error) {
-        return false;
-      }
-      if (isAddHandle.value) {
-        // 新增
-        await createExecJob(formModel.value);
-        Message.success('创建成功');
-        emits('added');
-      } else {
-        // 修改
-        await updateExecJob(formModel.value);
-        Message.success('修改成功');
-        emits('updated');
-      }
-      // 清空
-      handlerClear();
+      setLoading(true);
+      const { data } = await getExecJob(id);
+      record.value = data;
+      setVisible(true);
     } catch (e) {
-      return false;
     } finally {
       setLoading(false);
     }
   };
 
+  defineExpose({ open });
+
   // 关闭
   const handleClose = () => {
     handlerClear();
@@ -175,5 +123,20 @@
 </script>
 
 <style lang="less" scoped>
+  .detail-container {
+    padding: 24px;
+  }
 
+  :deep(.arco-descriptions-item-value) {
+    color: var(--color-text-1);
+  }
+
+  .host-label {
+    margin-top: -8px;
+    display: block;
+  }
+
+  .command-editor {
+    height: calc(100vh - 378px);
+  }
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
index 9de57260..6b6d4c56 100644
--- a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
@@ -249,7 +249,7 @@
 
   .command-editor {
     width: 100%;
-    height: 48vh;
+    height: calc(100vh - 318px);
   }
 
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-table.vue b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-table.vue
index bc135926..d8301218 100644
--- a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-table.vue
+++ b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-table.vue
@@ -107,8 +107,8 @@
           {{ getDictValue(execJobStatusKey, record.status) }}
         </a-tag>
       </template>
-      <!-- 最近任务状态 -->
-      <template #recentLogStatus="{ record }">
+      <!-- 最近任务 -->
+      <template #recentLog="{ record }">
         <!-- 最近任务 -->
         <div class="flex-center" v-if="record.recentLogId">
           <!-- 执行状态 -->
diff --git a/orion-ops-ui/src/views/exec/exec-job/types/table.columns.ts b/orion-ops-ui/src/views/exec/exec-job/types/table.columns.ts
index 5a11c7d9..1b890575 100644
--- a/orion-ops-ui/src/views/exec/exec-job/types/table.columns.ts
+++ b/orion-ops-ui/src/views/exec/exec-job/types/table.columns.ts
@@ -38,9 +38,9 @@ const columns = [
     align: 'center',
     width: 112,
   }, {
-    title: '最近任务状态',
-    dataIndex: 'recentLogStatus',
-    slotName: 'recentLogStatus',
+    title: '最近任务',
+    dataIndex: 'recentLog',
+    slotName: 'recentLog',
     align: 'left',
     width: 184,
   }, {