update：前端增加job页面

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 SwitchJob = (jobId) => GET('/api/jobs/switch/' + jobId)
+export const SwitchJob = (jobId, status) => GET('/api/jobs/switch/' + jobId, {status: status})
 export const GetLogs = (jobId) => GET('/api/jobs/logs')

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

@@ -1,82 +1,87 @@
 <template>
-  <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;">
-        <div style="margin: 0 20%;">
-          <el-form-item label="执行对象">
-            <el-select v-model="addForm.targets" multiple style="width: 100%">
-              <el-option label="本机" value="localhost"/>
-            </el-select>
-            <el-button style="margin-top:10px;width: 100%;">添加执行对象</el-button>
+  <el-dialog v-model="visible" width="50%" destroy-on-close>
+    <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="Module">
+                <el-select placeholder="选择模块" v-model="addForm.ansible_args.module">
+                  <el-option v-for="module in moduleArray" :key="module.value" :label="module.value"
+                             :value="module.value"/>
+                </el-select>
+                <el-input v-model="addForm.ansible_args.module_args" style="padding: 5px" placeholder="请输入命令参数"/>
+              </el-tab-pane>
+              <el-tab-pane label="Playbook">在脚本页面创建脚本，然后这里选择对应脚本</el-tab-pane>
+            </el-tabs>
           </el-form-item>
         </div>
 
-      </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>
+        <!--执行对象-->
+        <div v-show="active === 1" style="margin-top: 20px;">
+          <div style="margin: 0 20%;">
+            <el-form-item label="执行对象">
+              <el-select v-model="addForm.targets" multiple style="width: 100%">
+                <el-option label="本机" value="localhost"/>
+              </el-select>
+              <el-button style="margin-top:10px;width: 100%;">添加执行对象</el-button>
+            </el-form-item>
+          </div>
 
-              </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>
+        </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="addForm.trigger_args.run_date" 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="addForm.trigger_args.cron" placeholder="格式:分 时 日 月 周"/>
+                    <span>开始时间</span>
+                    <el-date-picker v-model="addForm.trigger_args.start_date" style="width: 100%;" type="datetime"
+                                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"/>
+                    <span>结束时间</span>
+                    <el-date-picker v-model="addForm.trigger_args.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>
 
+        <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>
+  </el-dialog>
 </template>
 
 <script>
@@ -90,27 +95,38 @@
   import {PostNewCronJob, PutCronJob} from '@/api/jobs'
   import {ElNotification} from 'element-plus'
 
-  const props = defineProps(['job', 'visible'])
-  const emit = defineEmits(['update:visible'])
+  const emit = defineEmits(['success'])
 
+  const moduleArray = [
+    {
+      value: 'ping'
+    },
+    {
+      value: 'shell'
+    }
+  ]
+
+  const visible = ref(false)
   const active = ref(0)
-  const addForm = reactive({
+  const addForm = reactive({})
+  const initForm = {
     id: null,
     name: null,
     targets: null,
     trigger: 'date',
-    trigger_args: null,
-    command: null,
-    type: '0'
-  })
+    trigger_args: {
+      run_date: null,
+      cron: null,
+      start_date: null,
+      end_date: null
+    },
+    ansible_args: {
+      module: '',
+      module_args: '',
+      playbook: ''
+    }
+  }
 
-  const intervalArgs = ref(null)
-  const dateArgs = ref(null)
-  const cronArgs = reactive({
-    cron: null,
-    start_date: null,
-    end_date: null
-  })
   const targets = ref([])
 
   const hostList = [
@@ -124,54 +140,65 @@
     }
   ]
 
-  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 => {
+  // 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
+  //   }
+  //
+  // }
+
+
+  async function handleAdd() {
+    if (addForm.id === null) {
+      try {
+        let response = await PostNewCronJob(addForm)
         ElNotification({
           title: 'success',
-          message: '任务添加成功:' + response,
+          message: '任务添加成功:',
           type: 'success'
         })
-      }).catch(error => {
+      } catch (error) {
         console.log(error)
-      })
+      }
+
     } else {
-      PutCronJob(addForm).then(response => {
+      try {
+        let response = await PutCronJob(addForm)
         ElNotification({
           title: 'success',
-          message: '任务修改成功:' + response,
+          message: '任务修改成功:',
           type: 'success'
         })
-      }).catch(error => {
+      } catch (error) {
         console.log(error)
-      })
+      }
     }
-
-    emit('update:visible', false)
+    visible.value = false
+    emit('success')
   }
 
   watch(() => addForm.trigger, (trigger) => {
     console.log(trigger)
   })
 
+  function add() {
+    active.value = 0
+    Object.assign(addForm, JSON.parse(JSON.stringify(initForm)))
+    visible.value = true
+  }
+
+  function edit(job) {
+    console.log(job)
+    active.value = 0
+    Object.assign(addForm, JSON.parse(JSON.stringify(job)))
+    visible.value = true
+  }
+
+  defineExpose({add, edit})
+
 </script>
 
 <style scoped>

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

@@ -17,15 +17,15 @@
     <el-table-column label="类型">
       <template #default="scope">
         <el-tag effect="dark" :type="scope.row.trigger === 'cron'? 'success':'info'">
-          {{ scope.row.trigger === 'cron' ? 'Cron' : 'Date'}}
+          {{ scope.row.trigger === 'cron' ? 'Cron' : 'Date' }}
         </el-tag>
       </template>
     </el-table-column>
     <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.id)"/>
+        <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"
+                   @change="handleStatus(scope.row.id,scope.row.status)"/>
       </template>
     </el-table-column>
     <el-table-column label="操作">
@@ -42,9 +42,7 @@
                  style="margin-top: 10px;"
   />
 
-  <el-dialog v-model="addDrawer" title="任务编辑" destroy-on-close>
-    <add-job v-model:visible="addDrawer" :job="jobInfo"/>
-  </el-dialog>
+  <add-job ref="addJobRef" @success="freshCurrentPage"/>
 
   <el-dialog v-model="logDrawer" title="任务日志" destroy-on-close>
     <job-logs :job="jobInfo"/>
@@ -68,6 +66,7 @@
 
   const addDrawer = ref(false)
   const logDrawer = ref(false)
+  const addJobRef = ref(null)
   let jobInfo = null
 
   const searchForm = {
@@ -86,14 +85,17 @@
   } = usePagination('/api/jobs/search', searchForm)
 
   function handleEdit(job) {
-    jobInfo = job
-    addDrawer.value = true
+    if (job === null){
+      addJobRef.value.add()
+    } else {
+      addJobRef.value.edit(job)
+    }
   }
 
-  function handleStatus(jobId) {
-    SwitchJob(jobId).then(() => {
+  function handleStatus(jobId,status) {
+    SwitchJob(jobId,status).then(() => {
       freshCurrentPage()
-    }).catch(error=>{
+    }).catch(error => {
       freshCurrentPage()
     })
   }