应用构建完成状态效果

src/components/app-build-steps/app-build-steps.vue

@@ -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>

src/pages/workbench/app_build.vue

@@ -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;

src/pages/workbench/yygl/yyglList.vue

@@ -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 = "提示";