feat: ✨ 增强作业执行记录页面 (#135)

src/backend/NetAdmin.Domain/Dto/Sys/JobRecord/QueryJobRecordRsp.cs

@@ -9,6 +9,10 @@ namespace NetAdmin.Domain.Dto.Sys.JobRecord;
 /// </summary>
 public sealed record QueryJobRecordRsp : Sys_JobRecord
 {
+    /// <inheritdoc cref="Sys_JobRecord.HttpStatusCode" />
+    [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
+    public new HttpStatusCode HttpStatusCode => (HttpStatusCode)base.HttpStatusCode;
+
     /// <inheritdoc cref="IFieldCreatedTime.CreatedTime" />
     [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
     public override DateTime CreatedTime { get; init; }
@@ -21,10 +25,6 @@ public sealed record QueryJobRecordRsp : Sys_JobRecord
     [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
     public override HttpMethods HttpMethod { get; init; }
 
-    /// <inheritdoc cref="Sys_JobRecord.HttpStatusCode" />
-    [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
-    public override int HttpStatusCode { get; init; }
-
     /// <inheritdoc cref="IFieldPrimary{T}.Id" />
     [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
     public override long Id { get; init; }

src/frontend/admin/src/views/sys/job/index.vue

@@ -128,7 +128,7 @@
                         </template>
                     </el-table-column>
                     <el-table-column
-                        :formatter="(row) => `${tool.groupSeparator(row.lastDuration.toFixed(0))} ms`"
+                        :formatter="(row) => (row.lastDuration ? `${tool.groupSeparator(row.lastDuration.toFixed(0))} ms` : `-`)"
                         :label="$t('耗时')"
                         align="right"
                         prop="lastDuration"

src/frontend/admin/src/views/sys/job/record/index.vue

@@ -57,11 +57,36 @@
                 row-key="id"
                 stripe>
                 <el-table-column :label="$t('唯一编码')" prop="id" sortable="custom" width="150" />
-                <el-table-column :label="$t('执行耗时（毫秒）')" align="right" prop="duration" sortable="custom" width="150" />
-                <el-table-column :label="$t('请求方法')" prop="httpMethod" sortable="custom" width="100" />
-                <el-table-column :label="$t('HTTP 状态码')" align="right" prop="httpStatusCode" sortable="custom" width="150" />
+                <el-table-column
+                    :formatter="(row) => `${tool.groupSeparator(row.duration.toFixed(0))} ms`"
+                    :label="$t('执行耗时')"
+                    align="right"
+                    prop="duration"
+                    sortable="custom"
+                    width="150" />
+                <na-col-indicator
+                    :label="$t('请求方式')"
+                    :options="
+                        Object.entries(this.$GLOBAL.enums.httpMethods).map((x) => {
+                            return { value: x[0], text: x[1][1] }
+                        })
+                    "
+                    prop="httpMethod"
+                    width="100" />
+                <el-table-column :label="$t('响应状态码')" align="center" prop="httpStatusCode" sortable="custom" width="200">
+                    <template #default="scope">
+                        <div class="indicator">
+                            <sc-status-indicator :type="scope.row.httpStatusCode === 'ok' ? 'success' : 'danger'" />
+                            <span>{{
+                                this.$GLOBAL.enums.httpStatusCodes[scope.row.httpStatusCode]
+                                    ? this.$GLOBAL.enums.httpStatusCodes[scope.row.httpStatusCode][1]
+                                    : scope.row.httpStatusCode
+                            }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
                 <el-table-column :label="$t('请求的网络地址')" prop="requestUrl" sortable="custom" />
-                <el-table-column :label="$t('创建时间')" prop="createdTime" sortable="custom" width="170" />
+                <el-table-column :label="$t('创建时间')" align="right" prop="createdTime" sortable="custom" width="170" />
                 <na-col-operation :buttons="[naColOperation.buttons[0]]" :vue="this" width="100" />
             </sc-table>
         </el-main>
@@ -78,6 +103,7 @@
 import saveDialog from './save'
 import table from '@/config/table'
 import naColOperation from '@/config/naColOperation'
+import tool from '@/utils/tool'
 
 export default {
     props: ['keywords'],
@@ -101,6 +127,9 @@ export default {
     },
     watch: {},
     computed: {
+        tool() {
+            return tool
+        },
         naColOperation() {
             return naColOperation
         },

src/frontend/admin/src/views/sys/job/record/save.vue

@@ -13,7 +13,7 @@
                     <el-form-item :label="$t('唯一编码')" prop="id"><el-input v-model="form.id" clearable /></el-form-item
                     ><el-form-item :label="$t('执行耗时（毫秒）')" prop="duration"><el-input v-model="form.duration" clearable /></el-form-item
                     ><el-form-item :label="$t('请求方法')" prop="httpMethod"><el-input v-model="form.httpMethod" clearable /></el-form-item
-                    ><el-form-item :label="$t('HTTP 状态码')" prop="httpStatusCode"><el-input v-model="form.httpStatusCode" clearable /></el-form-item
+                    ><el-form-item :label="$t('响应状态码')" prop="httpStatusCode"><el-input v-model="form.httpStatusCode" clearable /></el-form-item
                     ><el-form-item :label="$t('作业编号')" prop="jobId"><el-input v-model="form.jobId" clearable /></el-form-item
                     ><el-form-item :label="$t('请求体')" prop="requestBody"
                         ><el-input v-model="form.requestBody" clearable rows="5" type="textarea" /></el-form-item

src/frontend/admin/src/views/sys/job/save.vue

@@ -27,7 +27,7 @@
                     <el-form-item v-if="mode === 'view'" :label="$t('上次执行时间')" prop="lastExecTime">
                         <el-input v-model="form.lastExecTime" clearable />
                     </el-form-item>
-                    <el-form-item v-if="mode === 'view'" :label="$t('上次执行耗时（ms）')" prop="lastExecTime">
+                    <el-form-item v-if="mode === 'view'" :label="$t('上次执行耗时（毫秒）')" prop="lastExecTime">
                         <el-input v-model="form.lastDuration" clearable />
                     </el-form-item>
                     <el-form-item v-if="mode === 'view'" :label="$t('下次执行时间')" prop="nextExecTime">