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

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

@@ -94,7 +94,11 @@
     <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
-      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+      <el-table-column label="任务名称" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <a class="link-type" style="cursor:pointer" @click="handleView(scope.row)">{{ scope.row.jobName }}</a>
+        </template>
+      </el-table-column>
       <el-table-column label="任务组名" align="center" prop="jobGroup">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
@@ -133,8 +137,6 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
                 v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
-              <el-dropdown-item command="handleView" icon="el-icon-view"
-                v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
               <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
                 v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
             </el-dropdown-menu>
@@ -241,61 +243,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 { 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() {
@@ -346,29 +304,29 @@ export default {
           { required: true, message: "cron执行表达式不能为空", trigger: "blur" }
         ]
       }
-    };
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询定时任务列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listJob(this.queryParams).then(response => {
-        this.jobList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.jobList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 任务组名字典翻译
     jobGroupFormat(row, column) {
-      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);
+      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup)
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -381,96 +339,96 @@ export default {
         misfirePolicy: 1,
         concurrent: 1,
         status: "0"
-      };
-      this.resetForm("form");
+      }
+      this.resetForm("form")
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm("queryForm")
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.jobId);
-      this.single = selection.length != 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map(item => item.jobId)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
     },
     // 更多操作触发
     handleCommand(command, row) {
       switch (command) {
         case "handleRun":
-          this.handleRun(row);
-          break;
+          this.handleRun(row)
+          break
         case "handleView":
-          this.handleView(row);
-          break;
+          this.handleView(row)
+          break
         case "handleJobLog":
-          this.handleJobLog(row);
-          break;
+          this.handleJobLog(row)
+          break
         default:
-          break;
+          break
       }
     },
     // 任务状态修改
     handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
+      let text = row.status === "0" ? "启用" : "停用"
       this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function() {
-        return changeJobStatus(row.jobId, row.status);
+        return changeJobStatus(row.jobId, row.status)
       }).then(() => {
-        this.$modal.msgSuccess(text + "成功");
+        this.$modal.msgSuccess(text + "成功")
       }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0";
-      });
+        row.status = row.status === "0" ? "1" : "0"
+      })
     },
     /* 立即执行一次 */
     handleRun(row) {
       this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function() {
-        return runJob(row.jobId, row.jobGroup);
+        return runJob(row.jobId, row.jobGroup)
       }).then(() => {
-        this.$modal.msgSuccess("执行成功");
-      }).catch(() => {});
+        this.$modal.msgSuccess("执行成功")
+      }).catch(() => {})
     },
     /** 任务详细信息 */
     handleView(row) {
       getJob(row.jobId).then(response => {
-        this.form = response.data;
-        this.openView = true;
-      });
+        this.form = response.data
+        this.openView = true
+      })
     },
     /** cron表达式按钮操作 */
     handleShowCron() {
-      this.expression = this.form.cronExpression;
-      this.openCron = true;
+      this.expression = this.form.cronExpression
+      this.openCron = true
     },
     /** 确定后回传值 */
     crontabFill(value) {
-      this.form.cronExpression = value;
+      this.form.cronExpression = value
     },
     /** 任务日志列表查询 */
     handleJobLog(row) {
-      const jobId = row.jobId || 0;
+      const jobId = row.jobId || 0
       this.$router.push('/monitor/job-log/index/' + jobId)
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加任务";
+      this.reset()
+      this.open = true
+      this.title = "添加任务"
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const jobId = row.jobId || this.ids;
+      this.reset()
+      const jobId = row.jobId || this.ids
       getJob(jobId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改任务";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = "修改任务"
+      })
     },
     /** 提交按钮 */
     submitForm: function() {
@@ -478,29 +436,29 @@ export default {
         if (valid) {
           if (this.form.jobId != undefined) {
             updateJob(this.form).then(() => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
           } else {
             addJob(this.form).then(() => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const jobIds = row.jobId || this.ids;
+      const jobIds = row.jobId || this.ids
       this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function() {
-        return delJob(jobIds);
+        return delJob(jobIds)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -509,5 +467,5 @@ export default {
       }, `job_${new Date().getTime()}.xlsx`)
     }
   }
-};
+}
 </script>

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 { 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 {
@@ -214,75 +184,75 @@ export default {
         jobGroup: undefined,
         status: undefined
       }
-    };
+    }
   },
   created() {
-    const jobId = this.$route.params && this.$route.params.jobId;
+    const jobId = this.$route.params && this.$route.params.jobId
     if (jobId !== undefined && jobId != 0) {
       getJob(jobId).then(response => {
-        this.queryParams.jobName = response.data.jobName;
-        this.queryParams.jobGroup = response.data.jobGroup;
-        this.getList();
-      });
+        this.queryParams.jobName = response.data.jobName
+        this.queryParams.jobGroup = response.data.jobGroup
+        this.getList()
+      })
     } else {
-      this.getList();
+      this.getList()
     }
   },
   methods: {
     /** 查询调度日志列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.jobLogList = response.rows;
-          this.total = response.total;
-          this.loading = false;
+          this.jobLogList = response.rows
+          this.total = response.total
+          this.loading = false
         }
-      );
+      )
     },
     // 返回按钮
     handleClose() {
-      const obj = { path: "/monitor/job" };
-      this.$tab.closeOpenPage(obj);
+      const obj = { path: "/monitor/job" }
+      this.$tab.closeOpenPage(obj)
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.dateRange = []
+      this.resetForm("queryForm")
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.jobLogId);
-      this.multiple = !selection.length;
+      this.ids = selection.map(item => item.jobLogId)
+      this.multiple = !selection.length
     },
     /** 详细按钮操作 */
     handleView(row) {
-      this.open = true;
-      this.form = row;
+      this.open = true
+      this.form = row
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const jobLogIds = this.ids;
+      const jobLogIds = this.ids
       this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项？').then(function() {
-        return delJobLog(jobLogIds);
+        return delJobLog(jobLogIds)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
     },
     /** 清空按钮操作 */
     handleClean() {
       this.$modal.confirm('是否确认清空所有调度日志数据项？').then(function() {
-        return cleanJobLog();
+        return cleanJobLog()
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("清空成功");
-      }).catch(() => {});
+        this.getList()
+        this.$modal.msgSuccess("清空成功")
+      }).catch(() => {})
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -291,5 +261,5 @@ export default {
       }, `log_${new Date().getTime()}.xlsx`)
     }
   }
-};
-</script>
+}
+</script>