前端：实现任务管理相关功能页面

www/src/api/jobs.js

@@ -4,5 +4,5 @@ export const PostNewCronJob = (dict) => POST('/api/jobs/', dict)
 export const GetJobList = () => GET('/api/jobs/')
 export const DelJob = (jobId) => DELETE('/api/jobs/' + jobId)
 export const PutCronJob = (job) => PUT('/api/jobs/', job)
-export const PauseJob = (jobId) => GET('/api/jobs/pause/' + jobId)
-export const ResumeJob = (jobId) => GET('/api/jobs/resume/' + jobId)
+export const SwitchJob = (jobId) => GET('/api/jobs/switch/' + jobId)
+export const GetLogs = (jobId) => GET('/api/jobs/logs')

www/src/views/jobs/JobManage/AddJob.vue

@@ -1,42 +1,76 @@
 <template>
-  <el-form v-model="addForm" label-position="top">
-    <el-form-item label="任务名称">
-      <el-input v-model="addForm.job_id"/>
-    </el-form-item>
-    <el-form-item label="执行策略">
-      <el-tabs v-model="addForm.trigger" type="border-card" style="width: 100%">
-        <el-tab-pane label="普通任务" name="date">
-          <el-input/>
-          <el-date-picker placeholder="执行时间"/>
-        </el-tab-pane>
-        <el-tab-pane label="定时任务" name="cron">
-          <el-input v-model="addForm.cron_args.cron" placeholder="格式:分 时 日 月 周"/>
-          <el-row>
-            <el-col :span="12">
-              <el-date-picker v-model="addForm.cron_args.start_date" style="width: 100%;" type="datetime"
-                              value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"/>
-            </el-col>
-            <el-col :span="12">
-              <el-date-picker v-model="addForm.cron_args.end_date" style="width: 100%;" type="datetime"
-                              value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"/>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-      </el-tabs>
-    </el-form-item>
-    <el-form-item label="执行方式">
-      <el-tabs type="border-card" style="width: 100%">
-        <el-tab-pane label="单行命令">
-          <el-input v-model="addForm.command" style="padding: 5px" placeholder="请输入执行命令"/>
-        </el-tab-pane>
-        <el-tab-pane label="脚本">在脚本页面创建脚本，然后这里选择对应脚本</el-tab-pane>
-      </el-tabs>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="handleAdd">提交</el-button>
-      <el-button>取消</el-button>
-    </el-form-item>
-  </el-form>
+  <div style="margin: 10px 10%;">
+    <el-steps :space="200" :active="active" finish-status="success" simple>
+      <el-step title="创建任务"/>
+      <el-step title="选择执行对象"/>
+      <el-step title="设置触发器"/>
+    </el-steps>
+
+    <el-form v-model="addForm" style="margin: 10px;">
+
+      <!--任务信息-->
+      <div v-show="active===0" style="margin-top: 20px;">
+        <el-form-item label="任务名称">
+          <el-input v-model="addForm.name"/>
+        </el-form-item>
+        <el-form-item label="执行方式">
+          <el-tabs type="border-card" style="width: 100%">
+            <el-tab-pane label="单行命令">
+              <el-input v-model="addForm.command" style="padding: 5px" placeholder="请输入执行命令"/>
+            </el-tab-pane>
+            <el-tab-pane label="脚本">在脚本页面创建脚本，然后这里选择对应脚本</el-tab-pane>
+          </el-tabs>
+        </el-form-item>
+      </div>
+
+      <!--执行对象-->
+      <div v-show="active === 1" style="margin-top: 20px;">
+        <el-form-item label="执行对象">
+
+        </el-form-item>
+      </div>
+
+      <!--执行策略页面-->
+      <div v-show="active === 2" style="margin-top: 20px;">
+        <el-row>
+          <el-col :span="18" :offset="4">
+            <el-tabs tab-position="left" v-model="addForm.trigger">
+              <el-tab-pane label="定时任务" name="date">
+                <el-form-item>
+                  <span>执行时间</span>
+                  <el-date-picker v-model="dateArgs" style="width: 100%;" type="datetime"
+                                  value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择执行时间"/>
+                  <span style="color:#99a9bf">不指定时间表示立即执行。</span>
+                </el-form-item>
+
+              </el-tab-pane>
+              <el-tab-pane label="周期任务" name="cron">
+                <el-form-item>
+                  <span>执行规则</span>
+                  <el-input v-model="cronArgs.cron" placeholder="格式:分 时 日 月 周"/>
+                  <span>开始时间</span>
+                  <el-date-picker v-model="cronArgs.start_date" style="width: 100%;" type="datetime"
+                                  value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"/>
+                  <span>结束时间</span>
+                  <el-date-picker v-model="cronArgs.end_date" style="width: 100%;" type="datetime"
+                                  value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"/>
+
+                </el-form-item>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-row>
+      </div>
+
+
+      <el-form-item>
+        <el-button v-if="active===2" type="primary" @click="handleAdd">提交</el-button>
+        <el-button v-if="active !==2" type="primary" @click="active++">下一步</el-button>
+        <el-button v-if="active !== 0" @click="active--">上一步</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+
 </template>
 
 <script>
@@ -46,33 +80,50 @@
 </script>
 
 <script setup>
-  import {ref, reactive, onMounted} from 'vue'
+  import {ref, reactive, onMounted, watch} from 'vue'
   import {PostNewCronJob, PutCronJob} from '@/api/jobs'
   import {ElNotification} from 'element-plus'
 
   const props = defineProps(['job', 'visible'])
   const emit = defineEmits(['update:visible'])
+
+  const active = ref(0)
   const addForm = reactive({
-    job_id: null,
-    trigger: 'cron',
-    date_args: {
-      run_date: null
-    },
-    cron_args: {
-      cron: null,
-      start_date: null,
-      end_date: null,
-    },
+    id: null,
+    name: null,
+    trigger: 'date',
+    trigger_args: null,
     command: null,
     type: '0'
   })
 
+  const intervalArgs = ref(null)
+  const dateArgs = ref(null)
+  const cronArgs = reactive({
+    cron: null,
+    start_date: null,
+    end_date: null
+  })
+
   if (props.job !== null) {
     Object.assign(addForm, props.job)
+    if (props.job.trigger === 'cron') {
+      Object.assign(cronArgs, props.job.trigger_args)
+    } else {
+      dateArgs.value = props.job.trigger_args
+    }
+
   }
 
 
   function handleAdd() {
+    if (addForm.trigger === 'interval') {
+      addForm.trigger_args = intervalArgs.value
+    } else if (addForm.trigger == 'date') {
+      addForm.trigger_args = dateArgs.value
+    } else {
+      addForm.trigger_args = cronArgs
+    }
     if (props.job === null) {
       PostNewCronJob(addForm).then(response => {
         ElNotification({
@@ -98,6 +149,9 @@
     emit('update:visible', false)
   }
 
+  watch(() => addForm.trigger, (trigger) => {
+    console.log(trigger)
+  })
 
 </script>
 

www/src/views/jobs/JobManage/index.vue

@@ -2,7 +2,7 @@
   <el-row>
     <el-form v-model="search" inline>
       <el-form-item label="任务名">
-        <el-input v-model="search.job_id"/>
+        <el-input v-model="search.job_name"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleSearch">查询</el-button>
@@ -12,45 +12,43 @@
   </el-row>
   <el-table :data="tableData" border>
     <el-table-column type="index" label="#"/>
-    <el-table-column label="任务ID" prop="job_id"/>
-    <el-table-column label="执行命令" prop="command"/>
-    <el-table-column label="定时器(分 时 日 月 周)">
-      <template #default="scope">
-        <span>{{ scope.row.cron_args.cron }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column label="开始时间">
-      <template #default="scope">
-        <span>{{ scope.row.cron_args.start_date }}</span>
-      </template>
-    </el-table-column>
-    <el-table-column label="结束时间">
+    <el-table-column label="任务ID" prop="id"/>
+    <el-table-column label="任务名" prop="name"/>
+    <el-table-column label="类型">
       <template #default="scope">
-        <span>{{ scope.row.cron_args.end_date }}</span>
+        <el-tag v-if="scope.row.trigger === 'cron'" type="success">Cron</el-tag>
+        <el-tag v-else-if="scope.row.trigger === 'date'" type="info">Date</el-tag>
+        <el-tag v-else type="warning">Interval</el-tag>
       </template>
     </el-table-column>
-    <el-table-column label="状态" prop="status">
+    <el-table-column label="执行命令" prop="command"/>
+    <el-table-column label="状态">
       <template #default="scope">
         <el-switch v-model="scope.row.status" active-value="running" inactive-value="stop"
-                   @change="handleStatus(scope.row)"/>
+                   @change="handleStatus(scope.row.id)"/>
       </template>
     </el-table-column>
     <el-table-column label="操作">
       <template #default="scope">
         <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
-        <el-button type="danger" size="small" @click="handleDel(scope.row.job_id)">删除</el-button>
+        <el-button type="primary" size="small" @click="handleLogs(scope.row.id)">日志</el-button>
+        <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
 
-   <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" background
-                   layout="total,prev,pager,next,sizes,jumper"
-                   style="margin-top: 10px;"
-    />
+  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" background
+                 layout="total,prev,pager,next,sizes,jumper"
+                 style="margin-top: 10px;"
+  />
 
-  <el-drawer v-model="addDrawer" title="任务编辑" destroy-on-close>
+  <el-dialog v-model="addDrawer" title="任务编辑" destroy-on-close>
     <add-job v-model:visible="addDrawer" :job="jobInfo"/>
-  </el-drawer>
+  </el-dialog>
+
+  <el-dialog v-model="logDrawer" title="任务记录" destroy-on-close>
+    <add-job v-model:visible="logDrawer" :job="jobId"/>
+  </el-dialog>
 </template>
 
 <script>
@@ -63,19 +61,19 @@
 
   import {ref, onMounted, watch} from 'vue'
   import AddJob from '@/views/jobs/JobManage/AddJob.vue'
-  import {DelJob, GetJobList, PauseJob, ResumeJob} from '@/api/jobs'
-  import {ElMessage, ElMessageBox} from 'element-plus'
+  import {DelJob, GetJobList, SwitchJob} from '@/api/jobs'
   import {ConfirmDel} from '@/utils/request'
   import usePagination from '@/composables/usePagination'
 
   const addDrawer = ref(false)
+  const logDrawer = ref(false)
   let jobInfo = null
 
   const searchForm = {
-    job_id: null,
+    job_name: null,
   }
 
-   const {
+  const {
     search,
     tableData,
     currentPage,
@@ -91,17 +89,20 @@
     addDrawer.value = true
   }
 
-  function handleStatus(job) {
-    if (job.status === 'stop') {
-      PauseJob(job.job_id)
-    } else {
-      ResumeJob(job.job_id)
-    }
-    searchJobs()
+  function handleStatus(jobId) {
+    SwitchJob(jobId).then(() => {
+      freshCurrentPage()
+    }).catch(error=>{
+      freshCurrentPage()
+    })
+  }
+
+  function handleDel(job) {
+    ConfirmDel('是否确定要删除任务：' + job.name, DelJob, job.id)
   }
 
-  function handleDel(jobId) {
-    ConfirmDel('是否确定要删除任务：' + jobId, DelJob, jobId)
+  function handleLogs(jobId) {
+    logDrawer.value = true
   }
 
   watch(addDrawer, (newValue) => {