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

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -81,6 +81,10 @@
   margin-top: 6vh !important;
 }
 
+.el-dialog__body {
+  padding: 8px 20px !important;
+}
+
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
   overflow: auto;
   overflow-x: hidden;
@@ -268,6 +272,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; }

ruoyi-ui/src/views/monitor/job/detail.vue

@@ -0,0 +1,197 @@
+<template>
+  <el-dialog :title="type === 'log' ? '调度日志详细' : '任务详细'" :visible.sync="visible" width="780px" append-to-body @close="$emit('update:visible', false)">
+    <div class="detail-wrap">
+
+      <template v-if="type === 'log'">
+        <!-- 基本信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title"><i class="el-icon-info"></i> 基本信息</div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">日志编号</span><span class="detail-value">{{ form.jobLogId }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">执行状态</span>
+                <el-tag v-if="form.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">{{ form.startTime }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">结束时间</span><span class="detail-value">{{ form.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">{{ form.createTime }}</span></div>
+            </el-col>
+            <el-col :span="12" v-if="form.status == 0 && form.startTime && form.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"><i class="el-icon-time"></i> 任务信息</div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务名称</span><span class="detail-value">{{ form.jobName }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">任务分组</span>
+                <dict-tag :options="dict.type.sys_job_group" :value="form.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">{{ form.jobMessage }}</span></div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 调用目标 -->
+        <div class="detail-card">
+          <div class="detail-card-title"><i class="el-icon-s-operation"></i> 调用目标</div>
+          <div class="code-body">
+            <div class="code-wrap"><pre class="code-pre">{{ form.invokeTarget || '（无）' }}</pre></div>
+          </div>
+        </div>
+
+        <!-- 异常信息 -->
+        <div class="detail-card" v-if="form.status == 1">
+          <div class="detail-card-title error-title"><i class="el-icon-warning"></i> 异常信息</div>
+          <div class="error-body"><div class="error-msg">{{ form.exceptionInfo }}</div></div>
+        </div>
+
+      </template>
+
+      <template v-else>
+        <!-- 任务配置 -->
+        <div class="detail-card">
+          <div class="detail-card-title"><i class="el-icon-setting"></i> 任务配置</div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务编号</span><span class="detail-value">{{ form.jobId }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">任务名称</span><span class="detail-value">{{ form.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="dict.type.sys_job_group" :value="form.jobGroup" />
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">执行状态</span>
+                <el-tag v-if="form.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"><i class="el-icon-date"></i> 调度信息</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">{{ form.cronExpression }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">下次执行时间</span><span class="detail-value">{{ parseTime(form.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="form.misfirePolicy == 0" type="info" size="small">默认策略</el-tag>
+                <el-tag v-else-if="form.misfirePolicy == 1" type="warning" size="small">立即执行</el-tag>
+                <el-tag v-else-if="form.misfirePolicy == 2" type="primary" size="small">执行一次</el-tag>
+                <el-tag v-else-if="form.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="form.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"><i class="el-icon-s-operation"></i> 执行方法</div>
+          <div class="code-body">
+            <div class="code-wrap"><pre class="code-pre">{{ form.invokeTarget || '（无）' }}</pre></div>
+          </div>
+        </div>
+
+        <!-- 元信息 -->
+        <div class="detail-card">
+          <div class="detail-card-title"><i class="el-icon-document"></i> 元信息</div>
+          <el-row class="detail-row">
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">创建人</span><span class="detail-value">{{ form.createBy || '-' }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">创建时间</span><span class="detail-value">{{ form.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">{{ form.updateBy || '-' }}</span></div>
+            </el-col>
+            <el-col :span="12">
+              <div class="detail-item"><span class="detail-label">更新时间</span><span class="detail-value">{{ form.updateTime || '-' }}</span></div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-row" v-if="form.remark">
+            <el-col :span="24">
+              <div class="detail-item"><span class="detail-label">备注</span><span class="detail-value">{{ form.remark }}</span></div>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  dicts: ['sys_job_group'],
+  props: {
+    visible: { type: Boolean, default: false },
+    row: { type: Object, default: () => ({}) },
+    // 'job' 任务详细 | 'log' 调度日志详细
+    type: { type: String, default: 'job' }
+  },
+  computed: {
+    form() { return this.row || {} },
+    costTime() {
+      if (!this.form.startTime || !this.form.endTime) return 0
+      return new Date(this.form.endTime).getTime() - new Date(this.form.startTime).getTime()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detail-label {
+  width: 80px;
+}
+</style>

ruoyi-ui/src/views/monitor/job/index.vue

@@ -241,61 +241,17 @@
     </el-dialog>
 
     <!-- 任务日志详细 -->
-    <el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
-        <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>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="openView = false">关 闭</el-button>
-      </div>
-    </el-dialog>
+    <job-detail :visible.sync="openView" :row="form" type="job" />
   </div>
 </template>
 
 <script>
 import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
+import JobDetail from './detail'
 import Crontab from '@/components/Crontab'
 
 export default {
-  components: { Crontab },
+  components: { Crontab, JobDetail },
   name: "Job",
   dicts: ['sys_job_group', 'sys_job_status'],
   data() {

ruoyi-ui/src/views/monitor/job/log.vue

@@ -143,48 +143,18 @@
       @pagination="getList"
     />
 
-    <!-- 调度日志详细 -->
-    <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
-        <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>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="open = false">关 闭</el-button>
-      </div>
-    </el-dialog>
+    <job-log-detail :visible.sync="open" :row="form" type="log" />
   </div>
 </template>
 
 <script>
 import { getJob} from "@/api/monitor/job"
 import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog"
+import JobLogDetail from './detail'
 
 export default {
   name: "JobLog",
+  components: { JobLogDetail },
   dicts: ['sys_common_status', 'sys_job_group'],
   data() {
     return {

ruoyi-ui/src/views/monitor/operlog/detail.vue

@@ -145,71 +145,3 @@ export default {
   }
 }
 </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;
-  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-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;
-}
-</style>