Skip to content

S
so-manage-ui
Commit 14418db1 authored by 张俊's avatar 张俊
Browse files
Options

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

parent f98f6192
Show whitespace changes
Inline Side-by-side
Showing with 215 additions and 38 deletions
src/page/main/auto-maintenance/task-history/list/index.vue
View file @ 14418db1
......@@ -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
View file @ 14418db1
......@@ -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
View file @ 14418db1
......@@ -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
View file @ 14418db1
......@@ -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
View file @ 14418db1
......@@ -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) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment