[feat](任务管理): 立即执行接口对接

src/page/main/auto-maintenance/task-history/list/index.vue

@@ -21,7 +21,9 @@
               <span>{{ dateStringTransform(row.exec_start_time) }}</span>
             </template>
             <template v-slot:exec_desc="{ row }">
-              <span class="can_click_text" @click="gotoPage(`/auto-maintenance/task-history/list/record?id=${row.id}`)">
+              <span
+                class="can_click_text"
+                @click="gotoPage(`/auto-maintenance/task-history/list/record?id=${row.id}&task_id=${route.query.id}`)">
                 {{ row.exec_desc }}
               </span>
             </template>

src/page/main/auto-maintenance/task-history/list/record/index.vue

@@ -3,16 +3,50 @@
     <bg-breadcrumb></bg-breadcrumb>
     <div class="main_container">
       <div class="top-container">
-        <el-button class="back" type="default" @click="router.go(-1)"> 返回 </el-button>
-        执行ping命令 / 执行说明1
+        <el-button
+          class="back"
+          type="default"
+          @click="router.replace(`/auto-maintenance/task-history/list?id=${route.query.task_id}`)">
+          返回
+        </el-button>
+        {{ state.taskName }} / {{ state.desc }}
       </div>
       <div class="middle-container">
-        <finish-use :state="true" height="calc(100vh - 330px)" :codes="state.logArr" :time="state.time"></finish-use>
+        <finish-use
+          height="calc(100vh - 330px)"
+          :state="state.state"
+          :codes="state.logArr"
+          :time="state.time"></finish-use>
       </div>
       <div class="bottom-container">
-        <el-button class="use-script" type="primary" @click="router.go(-1)"> 重新执行 </el-button>
+        <el-button class="use-script" type="primary" @click="state.useScriptShow = true"> 重新执行 </el-button>
       </div>
     </div>
+
+    <el-dialog
+      class="dialog_box"
+      title="立即执行"
+      :close-on-click-modal="false"
+      v-model="state.useScriptShow"
+      width="1024px">
+      <div>
+        <div class="dialog-tips">
+          <bg-icon icon="#bg-ic-s-circle-warning" style="color: #a9b1c7"></bg-icon> 向执行脚本传递额外的命令行变量。这是
+          ansible-playbook 的 -e 或 --extra-vars 命令行参数。使用 YAML 或 JSON 提供键/值对，此项为非必填项。
+        </div>
+        <bg-inner-tabs v-model="state.useType" :data="state.useData" style="float: left"></bg-inner-tabs>
+        <div style="clear: both"></div>
+        <div style="height: 370px">
+          <bg-code-editor v-model="state.useText"></bg-code-editor>
+        </div>
+      </div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="cancelUse">取消</el-button>
+          <el-button type="primary" @click="confirmUse">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -29,21 +63,61 @@ const router = useRouter();
 const route = useRoute();
 const state = reactive({
   time: "",
+  state: -1,
   logArr: [],
+  taskName: "",
+  desc: "",
+  useScriptShow: false,
+  useType: 0,
+  useText: "",
+  useData: ["yaml", "json"],
 });
 
-const getLog = () => {
-  axios.get(`/v1/api/automated_mainten/task_history/task_exec_log?id=${route.query.id}`).then((res) => {
+const getLog = (id) => {
+  axios.get(`/v1/api/automated_mainten/task_history/task_exec_log?id=${id}`).then((res) => {
     if (res.data.code == 200) {
       let data = res.data.data;
       state.time = secondeToHour(data.exec_time);
       state.logArr = data.exec_log.split("\n");
+      state.state = data.state;
+      state.taskName = data.task_name;
+      state.desc = data.exec_desc;
+
+      if (data.state == 0) {
+        getLog(id);
+      }
     }
   });
 };
 
+const cancelUse = () => {
+  state.useScriptShow = false;
+};
+
+const confirmUse = () => {
+  state.useScriptShow = false;
+  let params = new FormData();
+  params.append("task_id", route.query.task_id);
+  params.append("type", state.useType + 1);
+  params.append("value", state.useText);
+  axios
+    .post(`/v1/api/automated_mainten/task_manage/exec/script`, params)
+    .then((res) => {
+      if (res.data.code == 200) {
+        router.push(`/auto-maintenance/task-history/list/record?id=${res.data.data}&task_id=${route.query.task_id}`);
+        getLog(res.data.data);
+      } else {
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .finally(() => {
+      state.useType = 0;
+      state.useText = "";
+    });
+};
+
 onBeforeMount(() => {
-  getLog();
+  getLog(route.query.id);
 });
 </script>
 
@@ -76,4 +150,14 @@ onBeforeMount(() => {
     float: right;
   }
 }
+
+.dialog-tips {
+  height: 38px;
+  line-height: 38px;
+  background-color: #f7f7f9;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #404a62;
+  margin-bottom: 16px;
+}
 </style>

src/page/main/auto-maintenance/task-manage/add/finish-use.vue

@@ -4,10 +4,13 @@
       <span
         ><bg-icon style="font-size: 12px; color: #909bb6" icon="#bg-ic-time"></bg-icon> 已经过：{{ props.time }}</span
       >
-      <div class="state-show success" v-if="props.state">
+      <div class="state-show using" v-if="props.state == 0">
+        <bg-icon style="color: #2b4695" icon="#bg-ic-s-circle-restart"></bg-icon> 执行中
+      </div>
+      <div class="state-show success" v-if="props.state == 1">
         <bg-icon style="color: #429e8a" icon="#bg-ic-s-circle-check"></bg-icon> 执行成功
       </div>
-      <div class="state-show fail" v-else>
+      <div class="state-show fail" v-if="props.state == 2">
         <bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
       </div>
     </div>
@@ -15,7 +18,7 @@
       <div class="log-box">
         <div v-for="(item, i) in props.codes" :key="i" class="codes-box">
           <span class="codes-num">{{ i + 1 }}</span>
-          <span class="codes-out" v-html="item"></span>
+          <span class="codes-out" v-text="item"></span>
         </div>
       </div>
     </div>
@@ -37,8 +40,8 @@ const props = defineProps({
     default: () => [],
   },
   state: {
-    type: Boolean,
-    default: true,
+    type: Number,
+    default: 1,
   },
   time: {
     type: String,
@@ -80,6 +83,9 @@ const props = defineProps({
   .fail {
     background-color: #fbeeeb;
   }
+  .using {
+    background-color: #edf0ff;
+  }
 }
 
 .log-bg {

src/page/main/auto-maintenance/task-manage/add/index.vue

@@ -62,8 +62,9 @@
         <finish-use
           v-show="step == 3 && !state.isSave"
           v-if="state.loadComponents"
-          :state="state.status"
-          time="00:00:11"></finish-use>
+          :state="state.useStatus"
+          :codes="state.finishUseData.logArr"
+          :time="state.finishUseData.time"></finish-use>
       </div>
       <div class="content_foot apaas_button" v-if="step == 1 || step == 2 || (step == 3 && !state.isSave)">
         <el-button type="default" v-if="step == 1 || step == 2" @click="cancel"> 取消 </el-button>
@@ -72,7 +73,7 @@
         <el-button type="primary" v-if="step == 2" @click="saveTask()"> 保存 </el-button>
         <el-button type="success" v-if="step == 2" @click="useScript"> 立即执行 </el-button>
         <el-button type="default" v-if="step == 3" @click="cancel"> 返回列表 </el-button>
-        <el-button type="primary" v-if="step == 3" @click="postScript"> 重新执行 </el-button>
+        <el-button type="primary" v-if="step == 3" @click="reUseScript"> 重新执行 </el-button>
       </div>
     </div>
 
@@ -108,6 +109,7 @@ import baseInfo from "./base-info.vue";
 import useContent from "./use-content.vue";
 import finish from "./finish.vue";
 import finishUse from "./finish-use.vue";
+import { secondeToHour } from "@/services/helper.js";
 const router = useRouter();
 const route = useRoute();
 
@@ -122,9 +124,16 @@ const state = reactive({
   useData: ["yaml", "json"],
   useText: "",
   isSave: true,
+  isReuse: false,
   status: true,
+  useStatus: -1,
   pageType: 0, //0新增，1编辑，2复制
   loadComponents: false, //控制子组件的加载
+  taskId: "",
+  finishUseData: {
+    time: "",
+    logArr: [],
+  },
 });
 
 const cancel = () => {
@@ -153,7 +162,15 @@ const saveTask = async () => {
     .then(() => {
       step.value = 3;
       if (state.pageType == 0 || state.pageType == 2) {
-        postTask();
+        postTask().then((res) => {
+          if (res.data.code == 200) {
+            state.status = true;
+            ElMessage.success("保存成功");
+          } else {
+            state.status = false;
+            ElMessage.error(res.data.msg);
+          }
+        });
       } else if (state.pageType == 1) {
         editTask();
       }
@@ -182,22 +199,12 @@ const editTask = () => {
 };
 
 const postTask = () => {
-  axios
-    .post(`/v1/api/automated_mainten/task_manage/add`, {
+  return axios.post(`/v1/api/automated_mainten/task_manage/add`, {
     task_name: state.data.name,
     task_desc: state.data.desc,
     yaml_desc: state.data.useText,
     yaml_url: JSON.stringify(state.data.doc_file),
     host_group_id: state.data.pcName,
-    })
-    .then((res) => {
-      if (res.data.code == 200) {
-        state.status = true;
-        ElMessage.success("保存成功");
-      } else {
-        state.status = false;
-        ElMessage.error(res.data.msg);
-      }
   });
 };
 
@@ -217,15 +224,65 @@ const cancelUse = () => {
   state.useScriptShow = false;
 };
 
+//重新执行
+const reUseScript = () => {
+  state.useScriptShow = true;
+  state.isReuse = true;
+};
+
 const confirmUse = () => {
   state.useScriptShow = false;
   state.isSave = false;
   step.value = 3;
-  // TODO:调用接口立即执行
-  postScript();
+  if (state.isReuse) {
+    postScript(state.taskId);
+  } else {
+    postTask().then((res) => {
+      if (res.data.code == 200) {
+        state.taskId = res.data.data;
+        postScript(res.data.data);
+      } else {
+        ElMessage.error(res.data.msg);
+      }
+    });
+  }
 };
 
-const postScript = () => {};
+const getLog = (id) => {
+  axios.get(`/v1/api/automated_mainten/task_history/task_exec_log?id=${id}`).then((res) => {
+    if (res.data.code == 200) {
+      let data = res.data.data;
+      state.finishUseData.time = secondeToHour(data.exec_time);
+      state.finishUseData.logArr = data.exec_log.split("\n");
+      state.useStatus = data.state;
+
+      if (data.state == 0) {
+        getLog(id);
+      }
+    }
+  });
+};
+
+const postScript = (task_id) => {
+  let params = new FormData();
+  params.append("task_id", task_id);
+  params.append("type", state.useType + 1);
+  params.append("value", state.useText);
+  axios
+    .post(`/v1/api/automated_mainten/task_manage/exec/script`, params)
+    .then((res) => {
+      if (res.data.code == 200) {
+        getLog(res.data.data);
+      } else {
+        state.useStatus = 2;
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .finally(() => {
+      state.useType = 0;
+      state.useText = "";
+    });
+};
 
 const clearData = () => {
   baseInfoRef.value.clear();
@@ -233,6 +290,9 @@ const clearData = () => {
   state.data = {};
   step.value = 1;
   state.loadComponents = false;
+  state.isReuse = false
+  state.useStatus = -1
+  state.taskId = ''
   init();
 };
 

src/page/main/auto-maintenance/task-manage/index.vue

@@ -92,7 +92,12 @@
       </template>
     </el-dialog>
 
-    <el-dialog class="dialog_box" title="立即执行" v-model="state.useScriptShow" width="1024px">
+    <el-dialog
+      class="dialog_box"
+      title="立即执行"
+      :close-on-click-modal="false"
+      v-model="state.useScriptShow"
+      width="1024px">
       <div>
         <div class="dialog-tips">
           <bg-icon icon="#bg-ic-s-circle-warning" style="color: #a9b1c7"></bg-icon> 向执行脚本传递额外的命令行变量。这是
@@ -172,6 +177,7 @@ const state = reactive({
   dialogDelete: false, // 删除弹窗
   useScriptShow: false,
   useType: 0,
+  useText: "",
   useData: ["yaml", "json"],
   deleteType: 0, //0单个删除，1批量删除
 });
@@ -187,6 +193,25 @@ const cancelUse = () => {
 
 const confirmUse = () => {
   state.useScriptShow = false;
+  let params = new FormData();
+  params.append("task_id", state.actionRow.id);
+  params.append("type", state.useType + 1);
+  params.append("value", state.useText);
+  axios
+    .post(`/v1/api/automated_mainten/task_manage/exec/script`, params)
+    .then((res) => {
+      if (res.data.code == 200) {
+        ElMessage.success("执行成功");
+        router.push(`/auto-maintenance/task-history/list/record?id=${res.data.data}`);
+      } else {
+        ElMessage.error(res.data.msg);
+      }
+    })
+    .finally(() => {
+      state.useType = 0;
+      state.useText = "";
+      state.actionRow = null;
+    });
 };
 
 const deleteRow = (row) => {