Commit 636766ea authored by 徐一鸣's avatar 徐一鸣

应用构建完成状态效果

parent 4ae59482
......@@ -50,7 +50,24 @@
</template>
</ul>
<div class="steps_container">
<div class="steps_container steps_done" v-if="done">
<div class="steps_done_info">
<div class="left_container">
<img
:src="require('../../assets/imgs/steps_done.png')"
width="100%"
/>
</div>
<div class="right_container">
<p v-if="doneTitle" v-text="doneTitle"></p>
<p v-if="doneSubTitle" v-text="doneSubTitle"></p>
</div>
</div>
<div class="done_action apass_button">
<slot name="action"></slot>
</div>
</div>
<div class="steps_container" v-else>
<slot></slot>
</div>
</div>
......@@ -64,11 +81,22 @@ export default {
type: Number,
default: () => "",
},
done: {
type: Boolean,
default: () => false,
},
doneTitle: {
type: String,
default: () => "操作成功",
},
doneSubTitle: {
type: String,
default: () => "",
},
},
data: () => ({
steps: [],
}),
computed: {},
methods: {
getSteps() {
this.steps = this.$slots.default
......@@ -88,6 +116,12 @@ export default {
</script>
<style scoped>
.app_build_steps {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
.steps_header {
display: flex;
justify-content: space-between;
......@@ -152,9 +186,44 @@ export default {
.steps_header > .step_item.active .step_name {
color: #8890a7;
}
.steps_container {
border-top: 2px solid #f4f7fc;
margin-top: 20px;
flex-grow: 1;
}
.steps_done {
position: relative;
}
.steps_done_info {
position: absolute;
top: calc(50% - 40px);
left: 50%;
transform: translate(-50%, -50%);
}
.steps_done_info > * {
display: inline-block;
vertical-align: middle;
}
.steps_done_info > .left_container {
width: 70px;
font-size: 0;
margin-right: 10px;
}
.steps_done_info > .right_container > p:nth-child(1) {
font-size: 18px;
font-weight: 700;
line-height: 24px;
color: #242c43;
}
.steps_done_info > .right_container > p:nth-child(2) {
font-size: 14px;
line-height: 20px;
color: #8890a7;
margin-top: 5px;
}
.done_action {
position: absolute;
right: 0;
bottom: 0;
}
</style>
......@@ -6,7 +6,12 @@
<el-breadcrumb-item>应用构建(镜像形式)</el-breadcrumb-item>
</el-breadcrumb>
</div>
<app-build-steps :active-step="step">
<app-build-steps
:active-step="step"
:done="done"
done-title="提交成功"
done-sub-title="应用已创建,可前往应用仓库进行应用部署"
>
<app-build-step
title="应用基础信息填写"
:step="0"
......@@ -159,7 +164,7 @@
</el-form>
<div class="apass_button step_action" style="margin-top: 120px;">
<el-button
type="primary"
type="defalut"
:loading="step2Loading"
plain
@click="step = 0"
......@@ -265,6 +270,15 @@
</div>
<image-detail ref="imageDetail"></image-detail>
</app-build-step>
<template slot="action">
<el-button @click="deployAction">
前往部署
</el-button>
<el-button type="primary" @click="backToList">
返回列表
</el-button>
</template>
</app-build-steps>
<apass-dialog
......@@ -587,8 +601,16 @@ export default {
},
stepsDone() {
this.done = true;
this.$router.push(`/yygl/${this.$store.getters.level}/0`);
}, // TODO: 增加成功的状态页
},
deployAction() {
// 跳转至应用详情进行部署操作
this.$router.push(
`/yygl/0/0/detail/${this.app_id}`
);
},
backToList() {
this.$router.push(`/yygl/0/0`);
},
},
mounted() {
this.getYwlys();
......@@ -630,6 +652,7 @@ export default {
margin: -157px 40px 20px;
}
.app_build-container > .app_build_steps {
min-height: calc(100vh - 150px - 43px);
border-radius: 12px;
background-color: #fff;
padding: 30px;
......
......@@ -1097,7 +1097,7 @@ export default {
this.initDatas(this.tempFliter);
} else {
this.$message({
message: `删除${item.app_name}失败.`,
message: data.errMsg || `删除${item.app_name}失败.`,
type: "warning",
});
}
......@@ -1133,7 +1133,7 @@ export default {
this.initDatas(this.tempFliter);
} else {
this.$message({
message: `申请下架${item.app_name}失败.`,
message: data.errMsg || `申请下架${item.app_name}失败.`,
type: "warning",
});
}
......@@ -1169,7 +1169,7 @@ export default {
this.initDatas(this.tempFliter);
} else {
this.$message({
message: `删除${item.deploy_name}失败.`,
message: data.errMsg || `删除${item.deploy_name}失败.`,
type: "warning",
});
}
......@@ -1269,7 +1269,7 @@ export default {
this.showDialog();
},
editItem(item) {
this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}`);
this.$router.push(`/yygl/${this.level}/${this.type}/edit/${item.id}?source=${item.source}`);
},
onLine(item) {
this.dialogInfo.title = "提示";
......
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