update：前端-实现“执行任务”功能

www/src/views/jobs/Execute/LogDrawer.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-drawer v-model="visible" title="执行任务日志" size="70%" destroy-on-close>
+    <div ref="terminalRef" style="width: 100%;height: 100%"/>
+  </el-drawer>
+</template>
+
+<script setup>
+  import {ref, nextTick, onBeforeUnmount} from 'vue'
+  import useTerm from '@/composables/useTerm.js'
+  import {AttachAddon} from 'xterm-addon-attach'
+
+  const visible = ref(false)
+  const terminalRef = ref(null)
+  const {term, initTerm} = useTerm(terminalRef)
+  const ws = ref(null)
+
+
+  async function show(taskId) {
+    console.log('show log drawer')
+    visible.value = true
+    await nextTick(async () => {
+      await initTerm()
+    })
+    console.log('init ok')
+    term.value.write('Welcome to use Ansible!\r\n')
+    term.value.write('正在连接中，请等待。。。。\r\n')
+    // 立即执行，后台可能还没有执行，需要等待几秒进行连接
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+    ws.value = new WebSocket(import.meta.env.VITE_APP_WS + '/api/jobs/logs/ws/' + taskId)
+    term.value.write('连接成功，等待接收执行日志！\r\n')
+    const attachAddon = new AttachAddon(ws.value)
+    term.value.loadAddon(attachAddon)
+  }
+
+  onBeforeUnmount(() => {
+    if (ws.value && ws.value.close) {
+      ws.value.close()
+    }
+  })
+
+  defineExpose({show})
+</script>
+
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,78 @@
+<template>
+  <div style="background-color:white;height: 100%;padding: 10px">
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <add-job :data="addJobData" @cancel="addDialog = false" @submit="handleSubmit"/>
+      </el-col>
+      <el-col :span="16">
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column label="#" type="index"/>
+          <el-table-column prop="job_id" label="任务ID" width="300"/>
+          <el-table-column prop="start_time" label="开始时间"/>
+          <el-table-column prop="end_time" label="结束时间"/>
+          <el-table-column label="详情">
+            <template #default="scope">
+              <el-button type="primary" @click="logDetailRef.show(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-col>
+    </el-row>
+  </div>
+
+  <log-drawer ref="logDrawerRef"/>
+  <log-detail ref="logDetailRef"/>
+</template>
+
+<script>
+  export default {
+    name: '任务执行'
+  }
+</script>
+
+<script setup>
+  import {ref, onMounted} from 'vue'
+  import AddJob from '@/views/jobs/components/AddJob.vue'
+  import LogDrawer from '@/views/jobs/Execute/LogDrawer.vue'
+  import {PostNewCronJob} from '@/api/jobs.js'
+  import usePagination from '@/composables/usePagination.js'
+  import LogDetail from '@/views/jobs/JobManage/LogDetail.vue'
+
+  const addJobData = ref(null)
+  const logDrawerRef = ref(null)
+  const logDetailRef = ref(null)
+  const searchForm = {
+    type: 1
+  }
+
+  const {
+    search,
+    tableData,
+    currentPage,
+    pageSize,
+    orderModel,
+    total,
+    freshCurrentPage,
+    handleSearch
+  } = usePagination('/api/jobs/logs', searchForm)
+
+  async function handleSubmit(job) {
+    console.log(job)
+    let jobId = await PostNewCronJob(job)
+    console.log(jobId)
+    logDrawerRef.value.show(jobId)
+  }
+
+  onMounted(() => {
+    handleSearch()
+  })
+
+
+</script>
+<style scoped>
+
+</style>

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

@@ -39,26 +39,28 @@
 </template>
 
 <script setup>
-  import {reactive, ref, computed, onMounted} from 'vue'
-  import WsTerminal from '@/components/WsTerminal.vue'
+  import {reactive, ref, computed, onMounted, nextTick} from 'vue'
   import useTerm from '@/composables/useTerm.js'
 
   const visible = ref(false)
-  // const terminalRef = ref(null)
   const taskLogInfo = reactive({})
   const taskLogs = ref('')
   const taskStats = computed(() => {
     return JSON.parse(taskLogInfo.stats)
   })
   console.log('init log detail')
-  const {term, terminalRef, initTerm} = useTerm()
+  const terminalRef = ref(null)
+  const {term, initTerm} = useTerm(terminalRef)
 
 
   async function show(log) {
     visible.value = true
     Object.assign(taskLogInfo, JSON.parse(JSON.stringify(log)))
     console.log(taskLogInfo)
-    await initTerm()
+    await nextTick(async () => {
+      await initTerm()
+    })
+
     let data = JSON.parse(taskLogInfo.log)
     data.forEach(item => {
       // taskLogs.value += item[1].msg

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

@@ -12,22 +12,15 @@
   </el-row>
   <el-table :data="tableData" border>
     <el-table-column type="index" label="#"/>
-    <el-table-column label="任务ID" prop="id"/>
     <el-table-column label="任务名" prop="name"/>
+    <el-table-column label="任务ID" prop="id"/>
     <el-table-column label="类型">
       <template #default="scope">
         <el-tag effect="dark" :type="scope.row.trigger === 'cron'? 'success':'info'">
           {{ scope.row.trigger === 'cron' ? 'Cron' : 'Date' }}
         </el-tag>
       </template>
     </el-table-column>
-    <!--    <el-table-column label="执行方式">-->
-    <!--      <template #default="scope">-->
-    <!--        <span-->
-    <!--            v-if="scope.row.ansible_args.module !== null">模块：{{ scope.row.ansible_args.module }}，参数：{{ scope.row.ansible_args.module_args }}</span>-->
-    <!--        <span v-else>脚本：{{ scope.row.ansible_args.playbook }}</span>-->
-    <!--      </template>-->
-    <!--    </el-table-column>-->
     <el-table-column label=" 状态">
       <template #default="scope">
         <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"

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

@@ -63,11 +63,7 @@
           <el-input v-model="targetHosts[index].name" disabled/>
         </el-col>
         <el-col :span="1">
-          <el-button type="danger" circle @click="targetHosts.splice(index,1)">
-            <el-icon>
-              <Minus/>
-            </el-icon>
-          </el-button>
+          <el-button style="margin-left: 5px;" type="danger" circle size="small" :icon="Minus" @click="targetHosts.splice(index,1)"/>
         </el-col>
       </el-row>