feat: add job detail

src/views/infra/job/JobModal.vue

@@ -1,21 +1,40 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" :title="isUpdate ? t('action.edit') : t('action.create')" @ok="handleSubmit">
+  <BasicModal
-    <BasicForm @register="registerForm" />
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="isEdit ? (isUpdate ? t('action.edit') : t('action.create')) : t('action.detail')"
+    @ok="handleSubmit"
+  >
+    <BasicForm v-if="isEdit" @register="registerForm" />
+    <Description v-if="!isEdit" :column="2" @register="registerDesc" />
+    <Steps v-if="!isEdit" progress-dot :current="nextTimes && nextTimes.length" direction="vertical">
+      <template v-for="(nextTime, index) in nextTimes" :key="index">
+        <Step :title="nextTime" :description="'第' + `${index + 1}` + '次'" />
+      </template>
+    </Steps>
   </BasicModal>
 </template>
 <script lang="ts" setup name="InfraJobModal">
 import { ref, unref } from 'vue'
+import { Steps } from 'ant-design-vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { BasicForm, useForm } from '@/components/Form'
 import { BasicModal, useModalInner } from '@/components/Modal'
-import { formSchema } from './job.data'
+import { Description, useDescription } from '@/components/Description'
-import { createJob, getJob, updateJob } from '@/api/infra/job'
+import { descSchema, formSchema } from './job.data'
+import { createJob, getJob, getJobNextTimes, updateJob } from '@/api/infra/job'
+
+const Step = Steps.Step
 
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
+const isEdit = ref(true)
+
+const datas = ref()
+const nextTimes = ref()
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 120,
@@ -25,13 +44,25 @@ const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   actionColOptions: { span: 23 }
 })
 
+const [registerDesc] = useDescription({
+  schema: descSchema,
+  data: datas
+})
+
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-  resetFields()
+  isEdit.value = !!data?.isEdit
   setModalProps({ confirmLoading: false })
-  isUpdate.value = !!data?.isUpdate
+  if (!!data?.isEdit) {
-  if (unref(isUpdate)) {
+    resetFields()
-    const res = await getJob(data.record.id)
+
-    setFieldsValue({ ...res })
+    isUpdate.value = !!data?.isUpdate
+    if (unref(isUpdate)) {
+      const res = await getJob(data.record.id)
+      setFieldsValue({ ...res })
+    }
+  } else {
+    datas.value = await getJob(data.record.id)
+    nextTimes.value = await getJobNextTimes(data.record.id)
   }
 })
 

src/views/infra/job/index.vue

@@ -72,11 +72,11 @@ const [registerTable, { getForm, reload }] = useTable({
 })
 
 function handleCreate() {
-  openModal(true, { isUpdate: false })
+  openModal(true, { isEdit: true, isUpdate: false })
 }
 
 function handleEdit(record: Recordable) {
-  openModal(true, { record, isUpdate: true })
+  openModal(true, { record, isEdit: true, isUpdate: true })
 }
 
 function handleChangeStatus(record: Recordable, open: boolean) {
@@ -106,8 +106,7 @@ function handleRun(record: Recordable) {
 }
 
 function handleView(record: Recordable) {
-  // TODO
+  openModal(true, { record, isEdit: false })
-  console.info(record)
 }
 
 function handleJobLog(record: Recordable) {

src/views/infra/job/job.data.ts

@@ -1,3 +1,4 @@
+import { DescItem } from '@/components/Description'
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
@@ -116,3 +117,51 @@ export const formSchema: FormSchema[] = [
     suffix: '毫秒'
   }
 ]
+
+export const descSchema: DescItem[] = [
+  {
+    label: '任务编号',
+    field: 'id'
+  },
+  {
+    label: '任务名称',
+    field: 'name'
+  },
+  {
+    label: '任务状态',
+    field: 'status',
+    render: (curVal) => {
+      return useRender.renderDict(curVal, DICT_TYPE.INFRA_JOB_STATUS)
+    }
+  },
+  {
+    label: '处理器的名字',
+    field: 'handlerName'
+  },
+  {
+    label: '处理器的参数',
+    field: 'handlerParam'
+  },
+  {
+    label: 'Cron 表达式',
+    field: 'cronExpression'
+  },
+  {
+    label: '重试次数',
+    field: 'retryCount'
+  },
+  {
+    label: '重试间隔',
+    field: 'cronExpression',
+    render: (curVal) => {
+      return useRender.renderText(curVal, ' 毫秒')
+    }
+  },
+  {
+    label: '监控超时时间',
+    field: 'monitorTimeout',
+    render: (curVal) => {
+      return curVal > 0 ? curVal + ' 毫秒' : '未开启'
+    }
+  }
+]

src/views/infra/job/logger/JobLogModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BasicModal v-bind="$attrs" @register="registerModal" title="查看详情">
-    <Description @register="registerDesc" />
+    <Description :column="2" @register="registerDesc" />
   </BasicModal>
 </template>
 <script lang="ts" setup name="InfraJobLogModal">