From 608eaf9145d534b43fc852084f48f4e5b67d27fb Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sat, 27 Sep 2025 14:23:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(monitor):=20=E5=AE=9E=E7=8E=B0=E5=AE=9A?=
 =?UTF-8?q?=E6=97=B6=E4=BB=BB=E5=8A=A1=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建完整的定时任务管理界面，支持表格展示和分页
- 实现新增、编辑、删除、启动、停止等核心功能
- 添加批量操作支持（批量启动、停止、删除）
- 集成字典数据显示任务类型、状态、执行策略
- 提供Cron表达式预设选择弹框，优化用户体验
- 实现搜索和筛选功能
- 遵循项目UI规范和组件使用标准
---
 src/views/monitor/job/index.vue | 1026 +++++++++++++++++++++++++++++++
 1 file changed, 1026 insertions(+)
 create mode 100644 src/views/monitor/job/index.vue

diff --git a/src/views/monitor/job/index.vue b/src/views/monitor/job/index.vue
new file mode 100644
index 0000000..27633ee
--- /dev/null
+++ b/src/views/monitor/job/index.vue
@@ -0,0 +1,1026 @@
+<template>
+  <div class="job-management p-1 bg-gray-50 h-screen flex flex-col">
+    <!-- 搜索表单和任务表格 -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-100 flex-1 flex flex-col overflow-hidden">
+      <!-- 搜索表单 -->
+      <div class="px-4 py-2 border-b border-gray-100">
+        <n-form
+          ref="searchFormRef"
+          :model="searchForm"
+          label-placement="left"
+          label-width="auto"
+          class="search-form"
+        >
+          <n-grid :cols="4" :x-gap="8" :y-gap="4">
+            <n-grid-item>
+              <n-form-item label="任务名称" path="jobName">
+                <n-input
+                  v-model:value="searchForm.jobName"
+                  placeholder="请输入任务名称"
+                  clearable
+                  @keydown.enter="handleSearch"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="任务类型" path="jobType">
+                <n-select
+                  v-model:value="searchForm.jobType"
+                  placeholder="请选择任务类型"
+                  clearable
+                  :options="getSelectOptions('sys_job_type')"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="任务状态" path="jobStatus">
+                <n-select
+                  v-model:value="searchForm.jobStatus"
+                  placeholder="请选择任务状态"
+                  clearable
+                  :options="getSelectOptions('sys_job_status')"
+                />
+              </n-form-item>
+            </n-grid-item>
+
+            <n-grid-item>
+              <n-form-item label="" path="">
+                <NSpace>
+                  <NButton type="primary" @click="handleSearch">
+                    <template #icon>
+                      <NIcon><icon-park-outline-search /></NIcon>
+                    </template>
+                    搜索
+                  </NButton>
+                  <NButton @click="handleReset">
+                    <template #icon>
+                      <NIcon><icon-park-outline-refresh /></NIcon>
+                    </template>
+                    重置
+                  </NButton>
+                </NSpace>
+              </n-form-item>
+            </n-grid-item>
+          </n-grid>
+        </n-form>
+      </div>
+
+      <!-- 表格头部操作栏 -->
+      <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
+        <div class="flex items-center gap-4">
+          <NButton type="primary" class="px-3 flex items-center" @click="handleAdd">
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <icon-park-outline-plus />
+              </NIcon>
+            </template>
+            新增
+          </NButton>
+
+          <NButton
+            type="error"
+            :disabled="selectedRowKeys.length === 0"
+            class="px-3 flex items-center"
+            @click="handleBatchDelete"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <IconParkOutlineDelete />
+              </NIcon>
+            </template>
+            删除
+          </NButton>
+
+          <NButton
+            type="info"
+            :disabled="selectedRowKeys.length === 0"
+            class="px-3 flex items-center"
+            @click="handleBatchStart"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <IconParkOutlineKey />
+              </NIcon>
+            </template>
+            启动
+          </NButton>
+
+          <NButton
+            type="warning"
+            :disabled="selectedRowKeys.length === 0"
+            class="px-3 flex items-center"
+            @click="handleBatchStop"
+          >
+            <template #icon>
+              <NIcon class="mr-1" style="transform: translateY(-1px)">
+                <IconParkOutlineClose />
+              </NIcon>
+            </template>
+            停止
+          </NButton>
+        </div>
+
+        <div class="flex items-center text-sm text-gray-500">
+          已选择 {{ selectedRowKeys.length }} 项
+        </div>
+      </div>
+
+      <!-- 数据表格 -->
+      <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <n-data-table
+          v-if="tableData.length > 0 || loading"
+          ref="tableRef"
+          :columns="columns"
+          :data="tableData"
+          :loading="loading"
+          :row-key="(row: SysJobVo) => row.jobId"
+          :checked-row-keys="selectedRowKeys"
+          :bordered="false"
+          :single-line="false"
+          size="medium"
+          class="custom-table"
+          @update:checked-row-keys="handleCheckedRowKeys"
+        />
+
+        <!-- 空状态 -->
+        <CoiEmpty
+          v-else
+          type="no-data"
+          title="暂无数据"
+          description="暂无定时任务数据"
+          :show-action="true"
+          action-text="新增任务"
+          size="medium"
+          @action="handleAdd"
+        >
+          <template #action>
+            <NButton type="primary" size="medium" round @click="handleAdd">
+              <template #icon>
+                <NIcon>
+                  <icon-park-outline-plus />
+                </NIcon>
+              </template>
+              新增任务
+            </NButton>
+          </template>
+        </CoiEmpty>
+      </div>
+
+      <!-- 分页器 -->
+      <div v-if="tableData.length > 0" class="border-t border-gray-100">
+        <CoiPagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :item-count="pagination.itemCount"
+          :show-size-picker="true"
+          :page-sizes="[10, 20, 50, 100]"
+          :show-quick-jumper="true"
+          :show-current-info="true"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
+    </div>
+
+    <!-- 任务表单弹框 -->
+    <CoiDialog
+      ref="jobDialogRef"
+      :title="modalTitle"
+      :width="800"
+      height="auto"
+      confirm-text="确定"
+      cancel-text="取消"
+      @coi-confirm="handleSubmit"
+      @coi-cancel="handleCancel"
+    >
+      <template #content>
+        <div class="px-3 py-2">
+          <n-form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            label-placement="left"
+            label-width="90px"
+            require-mark-placement="right-hanging"
+            class="compact-form"
+          >
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="任务名称" path="jobName" class="mb-2">
+                  <n-input
+                    v-model:value="formData.jobName"
+                    placeholder="请输入任务名称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="任务类型" path="jobType" class="mb-2">
+                  <n-select
+                    v-model:value="formData.jobType"
+                    placeholder="请选择任务类型"
+                    :options="getSelectOptions('sys_job_type')"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="类路径" path="classPath" class="mb-2">
+                  <n-input
+                    v-model:value="formData.classPath"
+                    placeholder="请输入类路径"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="方法名称" path="methodName" class="mb-2">
+                  <n-input
+                    v-model:value="formData.methodName"
+                    placeholder="请输入方法名称"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <n-form-item label="Cron表达式" path="cronExpression" class="mb-2">
+              <n-input-group>
+                <n-input
+                  v-model:value="formData.cronExpression"
+                  placeholder="请输入Cron表达式，如：0 0/30 * * * ?"
+                />
+                <NButton type="primary" ghost @click="showCronPresetModal = true">
+                  <template #icon>
+                    <NIcon><IconParkOutlineTime /></NIcon>
+                  </template>
+                  选择预设
+                </NButton>
+              </n-input-group>
+            </n-form-item>
+
+            <n-grid :cols="2" :x-gap="10">
+              <n-grid-item>
+                <n-form-item label="执行策略" path="policyStatus" class="mb-2">
+                  <n-select
+                    v-model:value="formData.policyStatus"
+                    placeholder="请选择执行策略"
+                    :options="getSelectOptions('sys_job_policy')"
+                  />
+                </n-form-item>
+              </n-grid-item>
+
+              <n-grid-item>
+                <n-form-item label="任务状态" path="jobStatus" class="mb-2">
+                  <n-select
+                    v-model:value="formData.jobStatus"
+                    placeholder="请选择任务状态"
+                    :options="getSelectOptions('sys_job_status')"
+                  />
+                </n-form-item>
+              </n-grid-item>
+            </n-grid>
+
+            <n-form-item label="任务参数" path="jobParams" class="mb-2">
+              <n-input
+                v-model:value="formData.jobParams"
+                type="textarea"
+                placeholder="请输入任务参数"
+                :rows="3"
+              />
+            </n-form-item>
+
+            <n-form-item label="备注信息" path="remark" class="mb-2">
+              <n-input
+                v-model:value="formData.remark"
+                type="textarea"
+                placeholder="请输入备注信息"
+                :rows="3"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </template>
+    </CoiDialog>
+
+    <!-- Cron表达式预设选择弹框 -->
+    <NModal
+      v-model:show="showCronPresetModal"
+      :mask-closable="false"
+      preset="card"
+      title="选择Cron表达式预设"
+      style="width: 600px"
+    >
+      <div class="cron-preset-content">
+        <div class="preset-description">
+          选择一个预设的时间配置，点击即可应用到Cron表达式中
+        </div>
+        <div class="cron-preset-grid">
+          <div
+            v-for="preset in cronPresets"
+            :key="preset.value"
+            class="cron-preset-item"
+            @click="handleSelectCronPresetFromModal(preset.value)"
+          >
+            <div class="preset-label">
+              {{ preset.label }}
+            </div>
+            <div class="preset-value">
+              {{ preset.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template #action>
+        <NSpace>
+          <NButton @click="showCronPresetModal = false">
+            取消
+          </NButton>
+        </NSpace>
+      </template>
+    </NModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, onMounted, ref } from 'vue'
+import type { DataTableColumns, FormInst } from 'naive-ui'
+import {
+  NButton,
+  NIcon,
+  NModal,
+  NPopconfirm,
+  NSpace,
+  NTag,
+} from 'naive-ui'
+import CoiDialog from '@/components/common/CoiDialog.vue'
+import CoiPagination from '@/components/common/CoiPagination.vue'
+import CoiEmpty from '@/components/common/CoiEmpty.vue'
+import { coiMsgBox, coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
+import { useDict } from '@/hooks/useDict'
+
+// 图标导入
+import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
+import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
+import IconParkOutlineKey from '~icons/icon-park-outline/key'
+import IconParkOutlineClose from '~icons/icon-park-outline/close'
+import IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
+import IconParkOutlineTime from '~icons/icon-park-outline/time'
+
+// API 和类型导入
+import {
+  addSysJob,
+  batchDeleteSysJob,
+  deleteSysJobById,
+  getSysJobById,
+  getSysJobListPage,
+  runSysJobNow,
+  updateSysJob,
+  updateSysJobStatus,
+} from '@/service/api/monitor/job'
+import type { SysJobForm, SysJobSearchForm, SysJobVo } from '@/service/api/monitor/job'
+
+// 字典hook - 预加载定时任务相关字典
+const { getSelectOptions } = useDict([
+  'sys_job_type', // 任务类型
+  'sys_job_policy', // 执行策略
+  'sys_job_status', // 任务状态
+])
+
+// Cron表达式预设
+const cronPresets = [
+  { label: '每分钟', value: '0 * * * * ?' },
+  { label: '每5分钟', value: '0 */5 * * * ?' },
+  { label: '每10分钟', value: '0 */10 * * * ?' },
+  { label: '每30分钟', value: '0 */30 * * * ?' },
+  { label: '每小时', value: '0 0 * * * ?' },
+  { label: '每天0点', value: '0 0 0 * * ?' },
+  { label: '每天12点', value: '0 0 12 * * ?' },
+  { label: '每周一9点', value: '0 0 9 ? * MON' },
+  { label: '每月1号0点', value: '0 0 0 1 * ?' },
+  { label: '工作日9点', value: '0 0 9 ? * MON-FRI' },
+]
+
+// 响应式数据
+const loading = ref(false)
+const tableData = ref<SysJobVo[]>([])
+const selectedRowKeys = ref<string[]>([])
+const searchFormRef = ref<FormInst>()
+const formRef = ref<FormInst>()
+const jobDialogRef = ref()
+const showCronPresetModal = ref(false)
+
+// 搜索表单
+const searchForm = ref<SysJobSearchForm>({
+  jobName: '',
+  jobType: '',
+  jobStatus: '',
+})
+
+// 分页配置
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100],
+})
+
+// 表单数据
+const isEdit = ref(false)
+const modalTitle = computed(() => isEdit.value ? '编辑定时任务' : '新增定时任务')
+
+const formData = ref<SysJobForm>({
+  jobName: '',
+  jobType: '',
+  classPath: '',
+  methodName: '',
+  cronExpression: '',
+  policyStatus: '1',
+  jobStatus: '0',
+  jobParams: '',
+  remark: '',
+})
+
+// 表单验证规则
+const rules = {
+  jobName: { required: true, message: '请输入任务名称', trigger: 'blur' },
+  jobType: { required: true, message: '请选择任务类型', trigger: 'change' },
+  classPath: { required: true, message: '请输入类路径', trigger: 'blur' },
+  methodName: { required: true, message: '请输入方法名称', trigger: 'blur' },
+  cronExpression: { required: true, message: '请输入Cron表达式', trigger: 'blur' },
+  policyStatus: { required: true, message: '请选择执行策略', trigger: 'change' },
+  jobStatus: { required: true, message: '请选择任务状态', trigger: 'change' },
+}
+
+// 表格列配置
+const columns: DataTableColumns<SysJobVo> = [
+  {
+    type: 'selection',
+  },
+  {
+    title: '序号',
+    key: 'index',
+    width: 80,
+    align: 'center',
+    render: (_, index) => index + 1 + (pagination.value.page - 1) * pagination.value.pageSize,
+  },
+  {
+    title: '任务名称',
+    key: 'jobName',
+    width: 180,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '任务类型',
+    key: 'jobType',
+    width: 120,
+    align: 'center',
+    render: (row) => {
+      const typeMap: Record<string, { type: 'primary' | 'info' | 'success', text: string }> = {
+        1: { type: 'primary', text: '管理平台' },
+        2: { type: 'info', text: '小程序' },
+        3: { type: 'success', text: 'App' },
+      }
+      const config = typeMap[row.jobType] || { type: 'primary' as const, text: '未知' }
+      return h(NTag, { type: config.type, size: 'small' }, { default: () => config.text })
+    },
+  },
+  {
+    title: 'Cron表达式',
+    key: 'cronExpression',
+    width: 140,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '执行策略',
+    key: 'policyStatus',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const policyMap: Record<string, { type: 'info' | 'warning' | 'error', text: string }> = {
+        1: { type: 'info', text: '立即执行' },
+        2: { type: 'warning', text: '执行一次' },
+        3: { type: 'error', text: '放弃执行' },
+      }
+      const config = policyMap[row.policyStatus] || { type: 'info' as const, text: '未知' }
+      return h(NTag, { type: config.type, size: 'small' }, { default: () => config.text })
+    },
+  },
+  {
+    title: '任务状态',
+    key: 'jobStatus',
+    width: 100,
+    align: 'center',
+    render: (row) => {
+      const isRunning = row.jobStatus === '0'
+      return h(NTag, {
+        type: isRunning ? 'success' : 'error',
+        size: 'small',
+      }, { default: () => isRunning ? '正常' : '暂停' })
+    },
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+    width: 160,
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'center',
+    fixed: 'right',
+    render: (row) => {
+      const buttons = []
+
+      // 编辑按钮
+      buttons.push(h(NButton, {
+        type: 'primary',
+        size: 'small',
+        class: 'action-btn-primary',
+        style: { marginRight: '8px' },
+        onClick: () => handleEdit(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlineEdit),
+        }),
+        default: () => '编辑',
+      }))
+
+      // 启动/停止按钮
+      const isRunning = row.jobStatus === '0'
+      buttons.push(h(NButton, {
+        type: isRunning ? 'warning' : 'info',
+        secondary: true,
+        size: 'small',
+        class: 'action-btn-secondary',
+        style: { marginRight: '8px' },
+        onClick: () => handleToggleStatus(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(isRunning ? IconParkOutlineClose : IconParkOutlineKey),
+        }),
+        default: () => isRunning ? '停止' : '启动',
+      }))
+
+      // 立即执行按钮
+      buttons.push(h(NButton, {
+        type: 'success',
+        secondary: true,
+        size: 'small',
+        class: 'action-btn-secondary',
+        style: { marginRight: '8px' },
+        onClick: () => handleRunNow(row),
+      }, {
+        icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+          default: () => h(IconParkOutlinePreviewOpen),
+        }),
+        default: () => '执行',
+      }))
+
+      // 删除按钮
+      buttons.push(h(NPopconfirm, {
+        onPositiveClick: () => handleDelete(row),
+      }, {
+        trigger: () => h(NButton, {
+          type: 'error',
+          secondary: true,
+          size: 'small',
+          class: 'action-btn-secondary action-btn-danger',
+        }, {
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineDelete),
+          }),
+          default: () => '删除',
+        }),
+        default: () => '确定删除此任务吗？',
+      }))
+
+      return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
+    },
+  },
+]
+
+// 获取表格数据
+async function getTableData() {
+  try {
+    loading.value = true
+    const params = {
+      pageNo: pagination.value.page,
+      pageSize: pagination.value.pageSize,
+      ...searchForm.value,
+    }
+
+    const { data } = await getSysJobListPage(params)
+    if (data) {
+      tableData.value = data.records || []
+      pagination.value.itemCount = data.total || 0
+    }
+  }
+  catch (error) {
+    coiMsgError('获取数据失败')
+    console.error('获取定时任务数据失败:', error)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 分页变化处理
+function handlePageChange(page: number) {
+  pagination.value.page = page
+  getTableData()
+}
+
+function handlePageSizeChange(pageSize: number) {
+  pagination.value.pageSize = pageSize
+  pagination.value.page = 1
+  getTableData()
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.page = 1
+  getTableData()
+}
+
+// 重置搜索
+function handleReset() {
+  searchForm.value = {
+    jobName: '',
+    jobType: '',
+    jobStatus: '',
+  }
+  pagination.value.page = 1
+  getTableData()
+}
+
+// 新增
+function handleAdd() {
+  isEdit.value = false
+  formData.value = {
+    jobName: '',
+    jobType: '',
+    classPath: '',
+    methodName: '',
+    cronExpression: '',
+    policyStatus: '1',
+    jobStatus: '0',
+    jobParams: '',
+    remark: '',
+  }
+  jobDialogRef.value?.coiOpen()
+}
+
+// 从弹框中选择Cron表达式预设
+function handleSelectCronPresetFromModal(cronValue: string) {
+  formData.value.cronExpression = cronValue
+  showCronPresetModal.value = false
+  coiMsgSuccess('Cron表达式已设置')
+}
+
+// 编辑
+async function handleEdit(row: SysJobVo) {
+  try {
+    isEdit.value = true
+    const { data } = await getSysJobById(row.jobId)
+    if (data) {
+      formData.value = {
+        jobId: data.jobId,
+        jobName: data.jobName,
+        jobType: data.jobType,
+        classPath: data.classPath,
+        methodName: data.methodName,
+        cronExpression: data.cronExpression,
+        policyStatus: data.policyStatus,
+        jobStatus: data.jobStatus,
+        jobParams: data.jobParams || '',
+        remark: data.remark || '',
+      }
+      jobDialogRef.value?.coiOpen()
+    }
+  }
+  catch (error) {
+    coiMsgError('获取任务详情失败')
+    console.error('获取任务详情失败:', error)
+  }
+}
+
+// 删除
+async function handleDelete(row: SysJobVo) {
+  try {
+    const { data } = await deleteSysJobById(row.jobId)
+    if (data === '删除成功') {
+      coiMsgSuccess('删除成功')
+      await getTableData()
+    }
+    else {
+      coiMsgError(data || '删除失败')
+    }
+  }
+  catch (error) {
+    coiMsgError('删除失败')
+    console.error('删除任务失败:', error)
+  }
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要删除的任务')
+    return
+  }
+
+  try {
+    await coiMsgBox(`确定要删除选中的 ${selectedRowKeys.value.length} 个任务吗？`, '批量删除确认')
+    const { data } = await batchDeleteSysJob(selectedRowKeys.value)
+    if (data === '批量删除成功') {
+      coiMsgSuccess('批量删除成功')
+      selectedRowKeys.value = []
+      await getTableData()
+    }
+    else {
+      coiMsgError(data || '批量删除失败')
+    }
+  }
+  catch (error) {
+    if (error !== 'cancel') {
+      coiMsgError('批量删除失败')
+      console.error('批量删除任务失败:', error)
+    }
+  }
+}
+
+// 切换任务状态
+async function handleToggleStatus(row: SysJobVo) {
+  try {
+    const newStatus = row.jobStatus === '0' ? '1' : '0'
+    const { data } = await updateSysJobStatus(row.jobId, newStatus, row.policyStatus)
+    if (data === '操作成功') {
+      coiMsgSuccess('状态修改成功')
+      await getTableData()
+    }
+    else {
+      coiMsgError(data || '状态修改失败')
+    }
+  }
+  catch (error) {
+    coiMsgError('状态修改失败')
+    console.error('修改任务状态失败:', error)
+  }
+}
+
+// 立即执行
+async function handleRunNow(row: SysJobVo) {
+  try {
+    const { data } = await runSysJobNow(row.jobId)
+    if (data === '任务执行成功') {
+      coiMsgSuccess('任务执行成功')
+    }
+    else {
+      coiMsgError(data || '任务执行失败')
+    }
+  }
+  catch (error) {
+    coiMsgError('任务执行失败')
+    console.error('立即执行任务失败:', error)
+  }
+}
+
+// 批量启动
+async function handleBatchStart() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要启动的任务')
+    return
+  }
+
+  try {
+    // 获取选中任务的详情，批量修改状态
+    for (const jobId of selectedRowKeys.value) {
+      const job = tableData.value.find(item => item.jobId === jobId)
+      if (job && job.jobStatus !== '0') {
+        await updateSysJobStatus(jobId, '0', job.policyStatus)
+      }
+    }
+    coiMsgSuccess('批量启动成功')
+    selectedRowKeys.value = []
+    await getTableData()
+  }
+  catch (error) {
+    coiMsgError('批量启动失败')
+    console.error('批量启动任务失败:', error)
+  }
+}
+
+// 批量停止
+async function handleBatchStop() {
+  if (selectedRowKeys.value.length === 0) {
+    coiMsgWarning('请选择要停止的任务')
+    return
+  }
+
+  try {
+    // 获取选中任务的详情，批量修改状态
+    for (const jobId of selectedRowKeys.value) {
+      const job = tableData.value.find(item => item.jobId === jobId)
+      if (job && job.jobStatus !== '1') {
+        await updateSysJobStatus(jobId, '1', job.policyStatus)
+      }
+    }
+    coiMsgSuccess('批量停止成功')
+    selectedRowKeys.value = []
+    await getTableData()
+  }
+  catch (error) {
+    coiMsgError('批量停止失败')
+    console.error('批量停止任务失败:', error)
+  }
+}
+
+// 表单提交
+async function handleSubmit() {
+  if (!formRef.value)
+    return
+
+  try {
+    await formRef.value.validate()
+  }
+  catch {
+    coiMsgWarning('验证失败，请检查填写内容')
+    return
+  }
+
+  try {
+    const submitData = { ...formData.value }
+    const { data } = isEdit.value ? await updateSysJob(submitData) : await addSysJob(submitData)
+
+    if (data?.includes('成功')) {
+      coiMsgSuccess(isEdit.value ? '修改成功' : '新增成功')
+      jobDialogRef.value?.coiClose()
+      await getTableData()
+    }
+    else {
+      coiMsgError(data || (isEdit.value ? '修改失败' : '新增失败'))
+    }
+  }
+  catch (error) {
+    coiMsgError(isEdit.value ? '修改失败，请检查网络连接' : '新增失败，请检查网络连接')
+    console.error('提交任务失败:', error)
+  }
+}
+
+// 取消表单
+function handleCancel() {
+  jobDialogRef.value?.coiClose()
+}
+
+// 处理选中行
+function handleCheckedRowKeys(rowKeys: string[]) {
+  selectedRowKeys.value = rowKeys
+}
+
+// 初始化
+onMounted(() => {
+  getTableData()
+})
+</script>
+
+<style scoped>
+/* 搜索表单样式 */
+.search-form :deep(.n-form-item) {
+  margin-bottom: 8px;
+}
+
+.search-form :deep(.n-form-item .n-form-item-label) {
+  font-weight: normal;
+  padding-bottom: 2px;
+}
+
+/* 紧凑表单样式 */
+.compact-form :deep(.n-form-item) {
+  margin-bottom: 8px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
+  min-height: 0 !important;
+  padding-top: 2px !important;
+}
+
+.compact-form :deep(.n-form-item .n-form-item-label) {
+  padding-bottom: 2px !important;
+}
+
+.compact-form :deep(.n-input),
+.compact-form :deep(.n-input-number),
+.compact-form :deep(.n-select),
+.compact-form :deep(.n-cascader),
+.compact-form :deep(.n-radio-group) {
+  font-size: 14px !important;
+}
+
+.compact-form :deep(.n-input .n-input__input-el),
+.compact-form :deep(.n-input-number .n-input__input-el) {
+  padding: 2px 1px !important;
+  min-height: 32px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
+  padding: 0 6px !important;
+  min-height: 30px !important;
+  line-height: 30px !important;
+}
+
+.compact-form :deep(.n-cascader .n-cascader-trigger) {
+  min-height: 32px !important;
+  padding: 2px 1px !important;
+}
+
+/* Cron表达式预设弹框样式 */
+.cron-preset-content {
+  padding: 16px 0;
+}
+
+.preset-description {
+  color: var(--n-text-color-2);
+  font-size: 13px;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.cron-preset-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.cron-preset-item {
+  padding: 12px 16px;
+  border: 1px solid var(--n-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: var(--n-card-color);
+}
+
+.cron-preset-item:hover {
+  border-color: var(--primary-color);
+  background-color: var(--primary-color-suppl);
+  transform: translateY(-1px);
+}
+
+.preset-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--n-text-color-base);
+  margin-bottom: 4px;
+}
+
+.preset-value {
+  font-size: 12px;
+  color: var(--n-text-color-2);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  background-color: var(--n-color-embedded);
+  padding: 2px 6px;
+  border-radius: 3px;
+  display: inline-block;
+}
+
+/* 表格样式 */
+.table-wrapper {
+  border-top: 1px solid var(--n-border-color);
+}
+
+.custom-table {
+  background-color: var(--n-table-color);
+}
+
+/* 操作按钮样式 */
+.action-btn-primary {
+  border-radius: 4px;
+}
+
+.action-btn-secondary {
+  border-radius: 4px;
+}
+
+.action-btn-danger {
+  border-radius: 4px;
+}
+</style>