优化定时任务详情页展示&补充执行时间字段

src/assets/styles/ruoyi.scss

@@ -280,6 +280,74 @@
 .detail-value { color: #303133; flex: 1; word-break: break-all; }
 .detail-location { color: #999; font-size: 12px; }
 
+.method-tag {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
+.code-body { padding: 14px; }
+.code-wrap {
+  background: #f7f9fb;
+  border: 1px solid #e8ecf0;
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 260px;
+  position: relative;
+}
+.code-action {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+}
+.code-action .el-button { 
+  height: 24px; 
+  font-size: 12px; 
+  padding: 4px 8px; 
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #dcdcdc;
+}
+.code-action .el-button:hover { 
+  background: #ffffff;
+  border-color: #409EFF;
+}
+.code-pre {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.6;
+  font-family: Consolas, 'SFMono-Regular', monospace;
+  color: #444;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  max-height: 240px;
+  display: block;
+}
+
+/* error */
+.error-title { color: #c0392b !important; }
+.error-title i { color: #c0392b !important; }
+.error-body { padding: 12px 16px; }
+.error-msg {
+  background: #fff8f8;
+  border-left: 3px solid #e74c3c;
+  border-radius: 3px;
+  padding: 8px 12px;
+  color: #c0392b;
+  font-size: 12px;
+  line-height: 1.7;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
 /* http method */
 .method-GET    { background: #e8f5e9; color: #27ae60; }
 .method-POST   { background: #e3f2fd; color: #1565c0; }

src/views/monitor/job/detail.vue

@@ -0,0 +1,225 @@
+<template>
+  <el-dialog :title="type === 'log' ? '调度日志详细' : '任务详细'" v-model="dialogVisible" width="780px" append-to-body>
+    <div class="detail-wrap">
+      <template v-if="type === 'log'">
+        <!-- 基本信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><InfoFilled /></el-icon> 基本信息
+          </div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">日志编号</span><span class="detail-value">{{ logForm.jobLogId }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">执行状态</span>
+                <el-tag v-if="logForm.status == 0" type="success" size="small">正常</el-tag>
+                <el-tag v-else type="danger" size="small">失败</el-tag>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">开始时间</span><span class="detail-value">{{ logForm.startTime }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">结束时间</span><span class="detail-value">{{ logForm.endTime }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">记录时间</span><span class="detail-value">{{ logForm.createTime }}</span></div>
+            </el-col>
+            <el-col :span="12" v-if="logForm.status == 0 && logForm.startTime && logForm.endTime">
+              <div class="detail-item"><span class="detail-label">执行耗时</span><span class="detail-value">{{ costTime }} 毫秒</span></div>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 任务信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Clock /></el-icon> 任务信息
+          </div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务名称</span><span class="detail-value">{{ logForm.jobName }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">任务分组</span>
+                <dict-tag :options="sys_job_group" :value="logForm.jobGroup" />
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="24">
+              <div class="detail-item"><span class="detail-label">日志信息</span><span class="detail-value">{{ logForm.jobMessage }}</span></div>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 调用目标 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Operation /></el-icon> 调用目标
+          </div>
+          <div class="code-body">
+            <div class="code-wrap"><pre class="code-pre">{{ logForm.invokeTarget || '（无）' }}</pre></div>
+          </div>
+        </div>
+        <!-- 异常信息 -->
+        <div class="detail-card" v-if="logForm.status == 1">
+          <div class="detail-card-title error-title">
+            <el-icon><Warning /></el-icon> 异常信息
+          </div>
+          <div class="error-body"><div class="error-msg">{{ logForm.exceptionInfo }}</div></div>
+        </div>
+      </template>
+
+      <template v-else>
+        <!-- 任务配置 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Setting /></el-icon> 任务配置
+          </div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务编号</span><span class="detail-value">{{ jobForm.jobId }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务名称</span><span class="detail-value">{{ jobForm.jobName }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">任务分组</span>
+                <dict-tag :options="sys_job_group" :value="jobForm.jobGroup" />
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">执行状态</span>
+                <el-tag v-if="jobForm.status == 0" type="success" size="small">正常</el-tag>
+                <el-tag v-else type="info" size="small">暂停</el-tag>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 调度信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Calendar /></el-icon> 调度信息
+          </div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">cron 表达式</span><span class="detail-value mono">{{ jobForm.cronExpression }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">下次执行时间</span><span class="detail-value">{{ parseTime(jobForm.nextValidTime) }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">执行策略</span>
+                <el-tag v-if="jobForm.misfirePolicy == 0" type="info" size="small">默认策略</el-tag>
+                <el-tag v-else-if="jobForm.misfirePolicy == 1" type="warning" size="small">立即执行</el-tag>
+                <el-tag v-else-if="jobForm.misfirePolicy == 2" type="primary" size="small">执行一次</el-tag>
+                <el-tag v-else-if="jobForm.misfirePolicy == 3" type="danger" size="small">放弃执行</el-tag>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">并发执行</span>
+                <el-tag v-if="jobForm.concurrent == 0" type="success" size="small">允许</el-tag>
+                <el-tag v-else type="danger" size="small">禁止</el-tag>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 执行方法 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Operation /></el-icon> 执行方法
+          </div>
+          <div class="code-body">
+            <div class="code-wrap"><pre class="code-pre">{{ jobForm.invokeTarget || '（无）' }}</pre></div>
+          </div>
+        </div>
+        <!-- 元信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title">
+            <el-icon><Document /></el-icon> 元信息
+          </div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">创建人</span><span class="detail-value">{{ jobForm.createBy || '-' }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">创建时间</span><span class="detail-value">{{ jobForm.createTime }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">更新人</span><span class="detail-value">{{ jobForm.updateBy || '-' }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">更新时间</span><span class="detail-value">{{ jobForm.updateTime || '-' }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row" v-if="jobForm.remark">
+            <el-col :span="24">
+              <div class="detail-item"><span class="detail-label">备注</span><span class="detail-value">{{ jobForm.remark }}</span></div>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="JobDetail">
+import type { SysJob } from '@/types/api/monitor/job'
+import type { SysJobLog } from '@/types/api/monitor/jobLog'
+
+type DetailType = 'job' | 'log'
+
+const props = defineProps<{
+  visible: boolean
+  row: SysJob | SysJobLog
+  type?: DetailType
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void
+}>()
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val: boolean) => emit('update:visible', val)
+})
+
+const { proxy } = getCurrentInstance()!
+const { sys_job_group } = proxy!.useDict('sys_job_group')
+
+const jobForm = computed<SysJob>(() => props.row as SysJob)
+const logForm = computed<SysJobLog>(() => props.row as SysJobLog)
+
+const costTime = computed<number>(() => {
+  const { startTime, endTime } = logForm.value
+  if (!startTime || !endTime) return 0
+  return new Date(endTime).getTime() - new Date(startTime).getTime()
+})
+</script>
+
+<style scoped>
+.detail-label {
+  width: 80px;
+}
+</style>

src/views/monitor/job/index.vue

@@ -233,58 +233,12 @@
      </el-dialog>
 
       <!-- 任务日志详细 -->
-      <el-dialog title="任务详细" v-model="openView" width="700px" append-to-body>
-         <el-form :model="form" label-width="120px">
-            <el-row>
-               <el-col :span="12">
-                  <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
-                  <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
-                  <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="任务状态：">
-                     <div v-if="form.status == 0">正常</div>
-                     <div v-else-if="form.status == 1">暂停</div>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="是否并发：">
-                     <div v-if="form.concurrent == 0">允许</div>
-                     <div v-else-if="form.concurrent == 1">禁止</div>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="执行策略：">
-                     <div v-if="form.misfirePolicy == 0">默认策略</div>
-                     <div v-else-if="form.misfirePolicy == 1">立即执行</div>
-                     <div v-else-if="form.misfirePolicy == 2">执行一次</div>
-                     <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
-                  </el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button @click="openView = false">关 闭</el-button>
-            </div>
-         </template>
-      </el-dialog>
+      <job-detail v-model:visible="openView" :row="form" type="job" />
    </div>
 </template>
 
 <script setup lang="ts" name="Job">
+import JobDetail from './detail'
 import Crontab from '@/components/Crontab/index.vue'
 import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
 import type { JobQueryParams, SysJob } from '@/types/api/monitor/job'
@@ -334,11 +288,6 @@ function getList() {
   })
 }
 
-/** 任务组名字典翻译 */
-function jobGroupFormat(row: SysJob): string {
-  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup!)
-}
-
 /** 取消按钮 */
 function cancel() {
   open.value = false
@@ -379,23 +328,6 @@ function handleSelectionChange(selection: SysJob[]) {
   multiple.value = !selection.length
 }
 
-// 更多操作触发
-function handleCommand(command: string, row: SysJob) {
-  switch (command) {
-    case "handleRun":
-      handleRun(row)
-      break
-    case "handleView":
-      handleView(row)
-      break
-    case "handleJobLog":
-      handleJobLog(row)
-      break
-    default:
-      break
-  }
-}
-
 // 任务状态修改
 function handleStatusChange(row: SysJob) {
   const text = row.status === "0" ? "启用" : "停用"

src/views/monitor/job/log.vue

@@ -133,44 +133,12 @@
       />
 
       <!-- 调度日志详细 -->
-      <el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
-         <el-form :model="form" label-width="100px">
-            <el-row>
-               <el-col :span="12">
-                  <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
-                  <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
-                  <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="执行状态：">
-                     <div v-if="form.status == 0">正常</div>
-                     <div v-else-if="form.status == 1">失败</div>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button @click="open = false">关 闭</el-button>
-            </div>
-         </template>
-      </el-dialog>
+      <job-detail v-model:visible="open" :row="form" type="log" />
    </div>
 </template>
 
 <script setup lang="ts" name="JobLog">
+import JobDetail from './detail'
 import { getJob } from "@/api/monitor/job"
 import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog"
 import type { SysJobLog, JobLogQueryParams } from '@/types/api/monitor/jobLog'

src/views/monitor/operlog/detail.vue

@@ -152,69 +152,3 @@ function copyText(str?: string): void {
   }
 }
 </script>
-
-<style scoped>
-.method-tag {
-  display: inline-block;
-  padding: 1px 7px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 700;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
-.code-body { padding: 14px; }
-.code-wrap {
-  background: #f7f9fb;
-  border: 1px solid #e8ecf0;
-  border-radius: 4px;
-  overflow: hidden;
-  max-height: 260px;
-  position: relative;
-}
-.code-action {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-}
-.code-action .el-button {
-  height: 24px;
-  font-size: 12px;
-  padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid #dcdcdc;
-}
-.code-action .el-button:hover {
-  background: #ffffff;
-  border-color: var(--el-color-primary);
-}
-.code-pre {
-  margin: 0;
-  padding: 12px 14px;
-  font-size: 12px;
-  line-height: 1.6;
-  font-family: Consolas, 'SFMono-Regular', monospace;
-  color: #444;
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow: auto;
-  max-height: 240px;
-  display: block;
-}
-.error-title { color: #c0392b !important; }
-.error-title .el-icon { color: #c0392b !important; }
-.error-body { padding: 12px 16px; }
-.error-msg {
-  background: #fff8f8;
-  border-left: 3px solid #e74c3c;
-  border-radius: 3px;
-  padding: 8px 12px;
-  color: #c0392b;
-  font-size: 12px;
-  line-height: 1.7;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-</style>