feat: 新增任务调度模块

SnailJob（灵活，可靠和快速的分布式任务重试和分布式任务调度平台）
2025-11-11 12:57:10 +08:00 · 2024-07-18 07:22:09 +00:00
parent 137f3a9684
commit e8c1d4b69b
21 changed files with 3166 additions and 1338 deletions
--- a/src/views/schedule/log/LogDetailModal.vue
+++ b/src/views/schedule/log/LogDetailModal.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="任务日志详情"
+    :width="width >= 1500 ? 1500 : '100%'"
+    :footer="false"
+  >
+    <a-layout style="height: 500px">
+      <a-layout-sider :resize-directions="['right']">
+        <a-tabs size="large" position="left">
+          <a-tab-pane v-for="item in dataList" :key="item.id">
+            <template #title>
+              <span @click="onLogDetail(item)">{{ item.clientInfo.split('@')[1] }}</span>
+            </template>
+          </a-tab-pane>
+        </a-tabs>
+      </a-layout-sider>
+      <a-layout-content>
+        <GiCodeView :code-json="content" />
+      </a-layout-content>
+    </a-layout>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { type JobInstanceQuery, type JobInstanceResp, type JobLogResp, listJobInstance, listJobInstanceLog } from '@/apis'
+import dayjs from "dayjs";
+
+const { width } = useWindowSize()
+const queryForm = reactive<JobInstanceQuery>({})
+const dataList = ref<JobInstanceResp[]>([])
+const loading = ref(false)
+// 查询列表数据
+const getInstanceList = async (query: JobInstanceQuery = { ...queryForm }) => {
+  try {
+    loading.value = true
+    const res = await listJobInstance(query)
+    dataList.value = res.data
+  } finally {
+    loading.value = false
+  }
+}
+
+const visible = ref(false)
+// 详情
+const onDetail = (record: JobLogResp) => {
+  visible.value = true
+  // 更新 queryForm
+  queryForm.jobId = record.jobId
+  queryForm.taskBatchId = record.id
+  getInstanceList()
+}
+
+// 格式化日志
+const formatLog = (log: any) => {
+  const date = new Date(Number.parseInt(log.time_stamp))
+  return `${dayjs(date).format('YYYY-MM-DD HH:mm:ss')} ${log.level} [${log.thread}] ${log.location} - ${log.message}`
+}
+
+const content = ref('')
+// 日志输出
+const onLogDetail = async (record: JobInstanceResp) => {
+  // todo startId根据第一次查询 如果有返回!=0则需要在查一次
+  const res = await listJobInstanceLog({
+    taskBatchId: record.taskBatchId,
+    jobId: record.jobId,
+    taskId: record.id,
+    startId: 0,
+    fromIndex: 0,
+    size: 50
+  })
+  content.value = res.data.message.map(formatLog).join('\n')
+}
+
+defineExpose({ onDetail })
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/schedule/log/index.vue
+++ b/src/views/schedule/log/index.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="table-page">
+    <GiTable
+      title="任务日志"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-select
+          v-model="queryForm.groupName"
+          placeholder="请选择任务组"
+          :options="groupList"
+          style="width: 200px"
+          @change="search"
+        />
+        <a-input v-model="queryForm.jobName" placeholder="请输入任务名称" allow-clear @change="search" />
+        <a-select
+          v-model="queryForm.taskBatchStatus"
+          placeholder="请选择状态"
+          :options="job_execute_status_enum"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        />
+        <DateRangePicker v-model="queryForm.datetimeRange" @change="search" />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #taskBatchStatus="{ record }">
+        <GiCellTag :value="record.taskBatchStatus" :dict="job_execute_status_enum" />
+      </template>
+      <template #operationReason="{ record }">
+        <GiCellTag :value="record.operationReason" :dict="job_execute_reason_enum" />
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link @click="onDetail(record)">详情</a-link>
+          <a-popconfirm content="是否确定停止本次执行?" type="warning" @ok="onStop(record)">
+            <a-link v-if="record.taskBatchStatus === 2" v-permission="['schedule:log:stop']" status="danger">停止</a-link>
+          </a-popconfirm>
+          <a-popconfirm content="是否确定重试本次执行?" type="warning" @ok="onRetry(record)">
+            <a-link
+              v-if="record.taskBatchStatus === 4 || record.taskBatchStatus === 5 || record.taskBatchStatus === 6"
+              v-permission="['schedule:log:retry']"
+              status="danger"
+            >
+              重试
+            </a-link>
+          </a-popconfirm>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <JobLogDetailModal ref="JobLogDetailModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Message } from '@arco-design/web-vue'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+import JobLogDetailModal from './LogDetailModal.vue'
+import { type JobLogQuery, type JobLogResp, listGroup, listJobLog, retryJob, stopJob } from '@/apis'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { useTable } from '@/hooks'
+import { useDict } from '@/hooks/app'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+defineOptions({ name: 'ScheduleLog' })
+
+const { job_execute_reason_enum, job_execute_status_enum } = useDict('job_execute_reason_enum', 'job_execute_status_enum')
+
+const queryForm = reactive<JobLogQuery>({
+  datetimeRange: [
+    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  ]
+})
+const {
+  tableData: dataList,
+  pagination,
+  loading,
+  search
+} = useTable((page) => listJobLog({ ...queryForm, ...page }), { immediate: false })
+
+const columns: TableInstanceColumns[] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
+  },
+  { title: '任务组', dataIndex: 'groupName', width: 80, ellipsis: true, tooltip: true },
+  { title: '任务名称', dataIndex: 'jobName', width: 80, ellipsis: true, tooltip: true },
+  { title: '调度时间', dataIndex: 'createDt', width: 80 },
+  { title: '执行状态', dataIndex: 'taskBatchStatus', slotName: 'taskBatchStatus', width: 50, align: 'center' },
+  { title: '执行备注', dataIndex: 'operationReason', slotName: 'operationReason', width: 80, ellipsis: true, tooltip: true },
+  { title: '执行时间', dataIndex: 'executionAt', width: 80 },
+  {
+    title: '操作',
+    slotName: 'action',
+    width: 60,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['schedule:log:stop', 'schedule:log:retry'])
+  }
+]
+
+const groupList = ref()
+// 查询任务组列表
+const getGroupList = async () => {
+  const { data } = await listGroup()
+  groupList.value = data?.map((item: string) => ({
+    label: item,
+    value: item
+  }))
+}
+
+// 重置
+const reset = () => {
+  queryForm.taskBatchStatus = undefined
+  queryForm.datetimeRange = undefined
+  search()
+}
+
+// 停止
+const onStop = (record: JobLogResp) => {
+  stopJob(record.id).then(() => {
+    Message.success('停止成功')
+  })
+}
+
+// 重试
+const onRetry = (record: JobLogResp) => {
+  retryJob(record.id).then(() => {
+    Message.success('重试成功')
+  })
+}
+
+const JobLogDetailModalRef = ref<InstanceType<typeof JobLogDetailModal>>()
+// 查看日志详情
+const onDetail = (record: JobLogResp) => {
+  JobLogDetailModalRef.value?.onDetail(record)
+}
+
+const route = useRoute()
+onMounted(() => {
+  if (route.query) {
+    queryForm.jobId = route.query.jobId ? Number.parseInt(route.query.jobId as string, 10) : undefined
+    queryForm.groupName = route.query.groupName ? route.query.groupName : undefined
+    queryForm.jobName = route.query.jobName ? route.query.jobName : undefined
+  }
+  getGroupList()
+  search()
+})
+</script>
+
+<style scoped lang="scss"></style>