新增一键部署页面

src/pages/workbench/yygl/deployment.vue

+<template>
+  <div class="deployment-container">
+    <div class="apass_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
+        <el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <app-build-steps :active-step="step">
+      <app-build-step
+        title="部署基本信息"
+        :step="0"
+        :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
+      >
+        <el-form
+          ref="step1_form"
+          class="step_form"
+          label-position="top"
+          :model="image_info"
+          :rules="image_rules"
+        >
+          <el-form-item label="镜像名称：" prop="image_name">
+            <el-input
+              v-model="image_info.image_name"
+              placeholder="请输入镜像名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="版本号：" prop="tag">
+            <el-input
+              v-model="image_info.tag"
+              placeholder="请输入版本号"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="apass_button step_action">
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="应用配置"
+        :step="1"
+        :active-icon="require('@/assets/imgs/progress_ic_yingyongpz.png')"
+      >
+        <!-- content  -->
+        <div class="apass_button step_action">
+          <el-button type="primary" plain @click="preStep">
+            上一步
+          </el-button>
+          <el-button type="primary" @click="nextStep">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="应用部署"
+        :step="2"
+        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
+      >
+        <!-- content  -->
+        <div class="apass_button step_action">
+          <el-button type="primary">
+            前往查看
+          </el-button>
+          <el-button type="primary">
+            重新部署
+          </el-button>
+        </div>
+      </app-build-step>
+    </app-build-steps>
+
+    <apass-dialog
+      ref="dialog"
+      :title="dialogInfo.title"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
+  </div>
+</template>
+
+<script>
+import appBuildSteps from "@/components/app-build-steps/app-build-steps";
+import appBuildStep from "@/components/app-build-steps/app-build-step";
+import apassDialog from "@/components/apass-dialog";
+
+export default {
+  components: {
+    appBuildSteps,
+    appBuildStep,
+    apassDialog,
+  },
+  data: () => ({
+    step: 0,
+    dialogInfo: {
+      title: "",
+      msg: "",
+      submit: null,
+    },
+    image_info: {
+      image_name: "",
+      tag: "",
+      file: "",
+    },
+    image_rules: {
+      image_name: [
+        { required: true, message: "请输入镜像名称", trigger: "blur" },
+      ],
+      tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
+    },
+  }),
+  methods: {
+    preStep() {
+      this.step--;
+    },
+    nextStep() {
+      this.step++;
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.deployment-container {
+  margin: 20px 40px;
+}
+.deployment-container > .app_build_steps {
+  border-radius: 12px;
+  background-color: #fff;
+  padding: 30px;
+}
+.step_action {
+  text-align: right;
+  margin-top: 45px;
+}
+.step_action .el-button:not(:last-child) {
+  margin-right: 30px;
+}
+</style>
+
+<style>
+.deployment-container .avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.deployment-container .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.deployment-container .avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.deployment-container .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.deployment-container .step_form {
+  max-width: 970px;
+  margin-top: 20px;
+}
+.deployment-container .step_form .el-form-item {
+  margin: 0 10px 24px;
+}
+.deployment-container .step_form .el-form-item .el-select {
+  width: 100%;
+}
+.deployment-container .step_form .el-form-item__label {
+  padding-bottom: 8px;
+  padding-left: 15px;
+  line-height: 25px;
+  color: #58617a;
+}
+.image_list .el-table th > .cell {
+  color: #1a2236;
+}
+.image_list .el-table td,
+.image_list .el-table th.is-leaf {
+  border: none !important;
+  line-height: 23px;
+}
+.image_list .el-table::before {
+  display: none;
+}
+.image_list .el-table {
+  width: 100%;
+}
+.image_list .el-table__row:nth-child(odd) td {
+  background-color: #f8f9fd;
+}
+</style>

src/pages/workbench/yygl/yyglList.vue

@@ -1149,13 +1149,8 @@ export default {
       this.$refs.dialog.show();
     },
     deploymentAction(item) {
-      setTimeout(() => {
-        this.$message({
-          message: `一键部署${item.app_name}成功.`,
-          type: "success",
-        });
-      }, 200);
-    }, // FIXME: 一键部署功能设计中
+      this.$router.push(`/yygl/${this.level}/${this.type}/deployment/${item.app_id}`);
+    },
     changePageSize(value) {
       this.pageSize = value;
       this.currentPage = 1;

src/router/index.js

@@ -109,6 +109,11 @@ export default new Router({
               component: () =>
                 import("@/pages/workbench/yygl/approval_app_detail"),
             },
+            {
+              path: "/yygl/:level/:type/deployment/:app_id", // 一键部署
+              name: "appDeployment",
+              component: () => import("@/pages/workbench/yygl/deployment"),
+            },
           ],
         }, // 工作台 - 应用管理模块
         {
@@ -242,27 +247,32 @@ export default new Router({
             {
               path: "/authority/organization", // 组织管理页
               name: "organization",
-              component: () => import("@/pages/authority/organization/organization"),
+              component: () =>
+                import("@/pages/authority/organization/organization"),
             },
             {
               path: "/authority/organization/detail/:id", // 组织管理详情
               name: "organizationdetail",
-              component: () => import("@/pages/authority/organization/organizationdetail"),
+              component: () =>
+                import("@/pages/authority/organization/organizationdetail"),
             },
             {
               path: "/authority/organization/add", // 组织管理组织新增
               name: "organizationadd",
-              component: () => import("@/pages/authority/organization/organizationedit"),
+              component: () =>
+                import("@/pages/authority/organization/organizationedit"),
             },
             {
               path: "/authority/organization/edit/:id", // 组织管理组织编辑
               name: "organizationedit",
-              component: () => import("@/pages/authority/organization/organizationedit"),
+              component: () =>
+                import("@/pages/authority/organization/organizationedit"),
             },
             {
               path: "/authority/organization/user/:id", // 组织管理组织用户
               name: "organizationuser",
-              component: () => import("@/pages/authority/user/organizationuser"),
+              component: () =>
+                import("@/pages/authority/user/organizationuser"),
             },
             {
               path: "/authority/users", // 用户管理页
@@ -277,12 +287,14 @@ export default new Router({
             {
               path: "/authority/users/add", // 用户管理-新增
               name: "usersadd",
-              component: () => import("@/pages/authority/user/organizationuser"),
+              component: () =>
+                import("@/pages/authority/user/organizationuser"),
             },
             {
               path: "/authority/users/detail/:id", // 用户管理-详情
               name: "usersdetail",
-              component: () => import("@/pages/authority/user/organizationuser"),
+              component: () =>
+                import("@/pages/authority/user/organizationuser"),
             },
             {
               path: "/authority/users/permission", // 用户管理页 - 权限审批
@@ -331,9 +343,9 @@ export default new Router({
               path: "/data_analysis/my_application", // 数据分析中心
               name: "myApplicationDataAnalysis",
               component: () => import("@/pages/data-analysis/my-application"),
-            }
-          ]
-        }
+            },
+          ],
+        },
       ],
     },
     {