Skip to content

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

[feat](任务管理): 静态页面完成

parent c151e788
Expand all Show whitespace changes
Inline Side-by-side
Showing with 496 additions and 276 deletions
src/components/bg-breadcrumb.vue
View file @ ef45054b
<template>
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-if="state.breadcrumbData.length>=2" v-for="(item,index) in state.dataArr" :to="{ path: item.path }"> {{item.name}} </el-breadcrumb-item>
<el-breadcrumb-item> {{state.breadcrumbData[state.breadcrumbData.length-1].name}} </el-breadcrumb-item>
<el-breadcrumb-item
v-if="state.breadcrumbData.length >= 2"
v-for="(item, index) in state.dataArr"
:to="{ path: item.path }">
{{ item.name }}
</el-breadcrumb-item>
<el-breadcrumb-item> {{ state.breadcrumbData[state.breadcrumbData.length - 1].name }} </el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup>
import { reactive, ref,onBeforeMount,toRefs } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "@/store";
import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const state = reactive({
dataArr:[],
breadcrumbData:[]
})
dataArr: [],
breadcrumbData: [],
});
const props = defineProps({
isMenu:{
type:Boolean,
default:false
}
})
isMenu: {
type: Boolean,
default: false,
},
});
const getBreadcrumbData = (menuObj,menu,path)=>{
//获取整体需要路径
let parentPath = menuObj[path].rowPath.slice(1,menuObj[path].rowPath.length).split('.')
getFirstPath(parentPath,menu)
//有2层以上的面包屑显示,则继续向下处理
if(parentPath.length>=2){
getOtherPath(parentPath,menu)
}
}
const getBreadcrumbData = (menuObj, menu, path) => {
//获取整体需要路径
let parentPath = menuObj[path].rowPath.slice(1, menuObj[path].rowPath.length).split(".");
getFirstPath(parentPath, menu);
//有2层以上的面包屑显示,则继续向下处理
if (parentPath.length >= 2) {
getOtherPath(parentPath, menu);
}
};
const getFirstPath = (parentPath,menu)=>{
let tempMenu = menu[parentPath[0]]
if (!props.isMenu) {
tempMenu = tempMenu.children[parentPath[1]]
}
//目录则跳转第一个子类，菜单子菜单则跳转自身
if(tempMenu.menuType==0){
if(tempMenu.children&&tempMenu.children.length){
const getFirstPath = (parentPath, menu) => {
let tempMenu = menu[parentPath[0]];
if (!props.isMenu) {
tempMenu = tempMenu.children[parentPath[1]];
}
//目录则跳转第一个子类，菜单子菜单则跳转自身
if (tempMenu.menuType == 0) {
if (tempMenu.children && tempMenu.children.length) {
for (let index = 0; index < tempMenu.children.length; index++) {
const e = tempMenu.children[index];
if(e.menuType!==0){
state.breadcrumbData.push(
{
path:e.path,
name:tempMenu.menuName
}
)
break
if (e.menuType !== 0) {
state.breadcrumbData.push({
path: e.path,
name: tempMenu.menuName,
});
break;
}
}
}
}else{
state.breadcrumbData.push(
{
path:tempMenu.path,
name:tempMenu.menuName
} else {
state.breadcrumbData.push({
path: tempMenu.path,
name: tempMenu.menuName,
});
}
)
}
}
};
const getOtherPath = (parentPath,menu)=>{
let tempMenu = menu[parentPath[0]]
let index
if (!props.isMenu) {
index = 2
tempMenu = tempMenu.children[parentPath[1]].children||[]
}else {
tempMenu = tempMenu.children || []
index = 1
}
if(tempMenu.length&&parentPath[index]){
getPath(tempMenu,parentPath,index)
}
}
const getOtherPath = (parentPath, menu) => {
let tempMenu = menu[parentPath[0]];
let index;
if (!props.isMenu) {
index = 2;
tempMenu = tempMenu.children[parentPath[1]].children || [];
} else {
tempMenu = tempMenu.children || [];
index = 1;
}
if (tempMenu.length && parentPath[index]) {
getPath(tempMenu, parentPath, index);
}
};
const getPath = (tempMenu,parentPath,index)=>{
if(!tempMenu[parentPath[index]]){
return
}
tempMenu = tempMenu[parentPath[index]]
index = index+1
state.breadcrumbData.push(
{
path:tempMenu.path,
name:tempMenu.menuName
const getPath = (tempMenu, parentPath, index) => {
if (!tempMenu[parentPath[index]]) {
return;
}
tempMenu = tempMenu[parentPath[index]];
index = index + 1;
state.breadcrumbData.push({
path: tempMenu.path,
name: tempMenu.menuName,
});
if (tempMenu.children && tempMenu.children.length && parentPath[index]) {
getPath(tempMenu.children, parentPath, index);
}
)
if(tempMenu.children&&tempMenu.children.length&&parentPath[index]){
getPath(tempMenu.children,parentPath,index)
}
}
};
onBeforeMount(()=>{
getBreadcrumbData(store.state.menuObj,store.state.menu,route.path)
state.breadcrumbData.forEach((e,idx) => {
if(idx!==state.breadcrumbData.length-1){
state.dataArr.push(e)
onBeforeMount(() => {
getBreadcrumbData(store.state.menuObj, store.state.menu, route.path);
state.breadcrumbData.forEach((e, idx) => {
if (idx !== state.breadcrumbData.length - 1) {
state.dataArr.push(e);
}
});
});
})
</script>
<style scoped>
</style>
<style scoped></style>
src/page/main/auto-maintenance/task-manage/add/finish-use.vue 0 → 100644
View file @ ef45054b
<template>
<div>
<div class="state-box">
<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">
<bg-icon style="color: #429e8a" icon="#bg-ic-s-circle-check"></bg-icon> 执行成功
</div>
<div class="state-show fail" v-else>
<bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
</div>
</div>
<div class="log-bg bg-scroll">
<div class="log-box">
<div v-for="(item, i) in stateData.codes" :key="i" class="codes-box">
<span class="codes-num">{{ item.pos + 1 }}</span>
<span class="codes-out" v-html="item.out"></span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const props = defineProps({
codes: {
type: Array,
default: () => [],
},
state: {
type: Boolean,
default: true,
},
time: {
type: String,
default: "",
},
});
const stateData = reactive({
codes: [
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
{
pos: 0,
out: "SSH password:",
},
{
pos: 1,
out: "[WARNING]: Platform darwin on host 192.168.1.199 is using the discovered Pythoninterpreter at /usr/bin/python3, but future installation of another Pythoninterpreter could change ",
},
{
pos: 2,
out: "the meaning of that path. See",
},
{
pos: 3,
out: "https://docs.ansible.com/ansible-",
},
],
});
</script>
<style lang="scss" scoped>
.state-box {
width: 100%;
height: 36px;
margin-top: -18px;
margin-bottom: 12px;
position: relative;
font-size: 14px;
color: #404a62;
span {
position: absolute;
left: 0;
top: 10px;
}
.state-show {
width: 200px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 4px;
margin: 0 auto;
}
.success {
background-color: #ecf5f4;
}
.fail {
background-color: #fbeeeb;
}
}
.log-bg {
background-color: #f7f7f9;
border-radius: 6px;
padding: 20px;
height: calc(100vh - 370px);
overflow-x: hidden;
.log-box {
width: 100%;
.codes-box {
padding: 6px 0;
display: flex;
display: -webkit-flex;
align-items: center;
font-size: 14px;
}
.codes-num {
width: 60px;
color: #8890a7;
display: inline-block;
height: inherit;
}
.codes-out {
width: calc(100% - 70px);
color: #242c43;
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
height: inherit;
}
}
}
</style>
src/page/main/auto-maintenance/task-manage/add/finish.vue
View file @ ef45054b
......@@ -2,8 +2,9 @@
<div class="step-container">
<div class="step-base">
<img src="@/assets/imgs/img_data-complete.png" />
<p class="tips">新增成功</p>
<div class="apaas_button btns">
<p class="tips" v-if="props.state">新增成功</p>
<p class="tips" v-else>新增失败</p>
<div class="apaas_button btns" v-if="props.state">
<el-button type="default" @click="goToList"> 返回列表 </el-button>
<el-button type="primary" @click="goStepOne"> 继续新增 </el-button>
</div>
......@@ -18,6 +19,13 @@ import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const props = defineProps({
state: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(["clear"]);
const goToList = () => {
......
src/page/main/auto-maintenance/task-manage/add/index.vue
View file @ ef45054b
......@@ -39,19 +39,44 @@
</el-steps>
</div>
</div>
<div class="content_main log_content_nor" :style="step == 3 ? { height: 'calc(100vh - 234px)' } : {}">
<div
class="content_main log_content_nor"
:style="step == 3 && state.isSave ? { height: 'calc(100vh - 234px)' } : {}">
<base-info v-show="step == 1" :data="state.data" ref="baseInfoRef"></base-info>
<use-content v-show="step == 2" :data="state.data" ref="useContentRef"></use-content>
<finish v-show="step == 3" @clear="clearData"></finish>
<finish v-show="step == 3 && state.isSave" :state="true" @clear="clearData"></finish>
<finish-use v-show="step == 3 && !state.isSave" :state="true" time="00:00:11"></finish-use>
</div>
<div class="content_foot apaas_button" v-if="step == 1 || step == 2">
<el-button type="default" @click="cancel"> 取消 </el-button>
<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>
<el-button type="default" v-if="step == 2" @click="confirm(-1)"> 上一步 </el-button>
<el-button type="primary" v-if="step == 1" @click="confirm(1)"> 下一步 </el-button>
<el-button type="primary" v-if="step == 2" @click="confirm(1)"> 保存 </el-button>
<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>
</div>
</div>
<el-dialog class="dialog_box" title="立即执行" 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>
......@@ -64,6 +89,7 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import baseInfo from "./base-info.vue";
import useContent from "./use-content.vue";
import finish from "./finish.vue";
import finishUse from "./finish-use.vue";
const router = useRouter();
const route = useRoute();
......@@ -73,6 +99,11 @@ const useContentRef = ref(null);
const state = reactive({
data: {},
useScriptShow: false,
useType: 0,
useData: ["yaml", "json"],
useText: "",
isSave: true,
});
const cancel = () => {
......@@ -82,34 +113,54 @@ const cancel = () => {
const confirm = async (val) => {
let flag = true;
if (val == 1) {
if (step.value == 1) {
//下一步
await baseInfoRef.value
.save()
.then()
.catch(() => {
flag = false;
});
} else if (step.value == 2) {
//保存
}
if (flag) {
step.value = step.value + val;
}
};
//保存
const saveTask = async () => {
await useContentRef.value
.save()
.then(() => {
step.value = 3;
//todo:掉接口保存，并获取状态
})
.catch(() => {});
};
const useScript = async () => {
//填写完成才可以进行执行
await useContentRef.value
.save()
.then(() => {
saveTask();
state.useScriptShow = true;
})
.catch(() => {
flag = false;
ElMessage.error("请先完善表单再执行");
});
}
}
if (flag) {
step.value = step.value + val;
}
};
const saveTask = () => {};
const cancelUse = () => {
state.useScriptShow = false;
};
const useScript = () => {};
const confirmUse = () => {
state.useScriptShow = false;
state.isSave = false;
step.value = 3;
// TODO:调用接口立即执行
postScript();
};
const postScript = () => {};
const clearData = () => {
baseInfoRef.value.clear();
......@@ -200,4 +251,14 @@ onBeforeMount(() => {});
.process_complete :deep(.el-step__head.is-finish .el-step__line) {
background: linear-gradient(to right, #2b4695 100%, #e6e9ef 0%);
}
.dialog-tips {
height: 38px;
line-height: 38px;
background-color: #f7f7f9;
border-radius: 4px;
font-size: 14px;
color: #404a62;
margin-bottom: 16px;
}
</style>
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