From fcd1cc8504e959cc858c86298ac5fa9dba8919f2 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Fri, 10 Jul 2020 17:52:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=9E=84=E5=BB=BA=EF=BC=88?=
 =?UTF-8?q?=E9=95=9C=E5=83=8F=E5=BD=A2=E5=BC=8F=EF=BC=89=E6=AD=A5=E9=AA=A4?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workbench/app_build.vue | 677 +++++++++++++++---------------
 1 file changed, 335 insertions(+), 342 deletions(-)

diff --git a/src/pages/workbench/app_build.vue b/src/pages/workbench/app_build.vue
index e58334b..70c9bf4 100644
--- a/src/pages/workbench/app_build.vue
+++ b/src/pages/workbench/app_build.vue
@@ -7,163 +7,14 @@
       </el-breadcrumb>
     </div>
     <app-build-steps :active-step="step">
-      <app-build-step
-        title="上传应用镜像"
-        :step="0"
-        :active-icon="require('@/assets/imgs/progress_ic_jingxiang.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-item
-            label="上传镜像包："
-            prop="file"
-            ref="step1_upload_item"
-          >
-            <el-upload
-              ref="step1_upload"
-              :auto-upload="false"
-              :data="{
-                image_name: image_info.image_name,
-                tag: image_info.tag,
-              }"
-              :limit="1"
-              :on-change="imageUploadChange"
-              :on-remove="imageUploadRemove"
-              :on-success="imageUploadSuccess"
-              :on-error="imageUploadError"
-              action="/apaas/hubApi/image/upload"
-              name="file"
-              drag
-            >
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">
-                将镜像文件拖到此处，或<em>点击上传</em>
-              </div>
-            </el-upload>
-          </el-form-item>
-          <div class="apass_button upload_action">
-            <el-button
-              type="primary"
-              @click="submitImage('step1_form')"
-              :loading="step1UplaodLoading"
-            >
-              确认
-            </el-button>
-          </div>
-          <div class="form_line"></div>
-          <el-form-item label="上传镜像列表：">
-            <div
-              v-if="image_datas"
-              class="image_list_container"
-              v-infinite-scroll="loadImageList"
-            >
-              <apass-table
-                :header="image_headers"
-                :data="image_datas"
-                :padding-left="60"
-              ></apass-table>
-              <p style="text-align: center" v-if="image_loading">加载中...</p>
-              <p
-                style="text-align: center"
-                v-if="image_noMore && image_datas.length > 0"
-              >
-                没有更多了
-              </p>
-            </div>
-          </el-form-item>
-        </el-form>
-        <div class="apass_button step_action">
-          <el-button type="primary" @click="goToStep1">
-            下一步
-          </el-button>
-        </div>
-        <image-detail ref="imageDetail"></image-detail>
-      </app-build-step>
-      <app-build-step
-        title="上传部署文件"
-        :step="1"
-        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
-      >
-        <el-form
-          ref="step2_form"
-          class="step_form"
-          label-position="top"
-          :model="deploy_info"
-          :rules="deploy_rules"
-        >
-          <el-form-item
-            label="上传部署文件："
-            prop="file"
-            ref="step2_upload_item"
-          >
-            <div class="description_info">
-              <i class="el-icon-warning-outline"></i>
-              <p
-                v-html="
-                  `1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png，templates/NOTES.txt；<br />
-                  2.上述文件必须按照上述名称进行命名；<br />
-                  3.step.yaml文件为values.yaml中的可配置参数，templates/NOTES.txt文件为应用的部署信息;<br />
-                  4.templates/NOTES.txt主要用于用户部署后的访问,可以按照如下示例进行编写：<br />
-                      &ensp;&ensp;this is a postgresql.<br />
-                      &ensp;&ensp;author : Tom<br />
-                      &ensp;&ensp;内部地址： {{ .Release.Name }}.{{ .Release.Namespace }}:5432<br />
-                  5.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。<br />`
-                "
-              ></p>
-            </div>
-            <el-upload
-              ref="step2_upload"
-              :auto-upload="false"
-              :limit="1"
-              :data="app_info"
-              action="/apaas/hubApi/market/app"
-              :on-change="deployUploadChange"
-              :on-remove="deployUploadRemove"
-              :on-success="deployUploadSuccess"
-              :on-error="deployUploadError"
-              name="file"
-              drag
-            >
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">
-                将部署文件拖到此处，或<em>点击上传</em>
-              </div>
-            </el-upload>
-          </el-form-item>
-        </el-form>
-        <div class="apass_button step_action" style="margin-top: 120px;">
-          <el-button type="primary" plain @click="preStep">
-            上一步
-          </el-button>
-          <el-button type="primary" @click="goToStep2('step2_form')">
-            下一步
-          </el-button>
-        </div>
-      </app-build-step>
       <app-build-step
         title="应用基础信息填写"
-        :step="2"
+        :step="0"
         :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
+        :done="done"
       >
         <el-form
-          ref="step3_form"
+          ref="app_info_form"
           class="step_form"
           label-position="top"
           :model="app_info"
@@ -249,23 +100,171 @@
           </el-form-item>
         </el-form>
         <div class="apass_button step_action">
+          <el-button type="primary" @click="step1Action">
+            下一步
+          </el-button>
+        </div>
+      </app-build-step>
+      <app-build-step
+        title="上传部署文件"
+        :step="1"
+        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
+      >
+        <el-form
+          ref="deploy_info_form"
+          class="step_form"
+          label-position="top"
+          :model="deploy_info"
+          :rules="deploy_rules"
+        >
+          <el-form-item
+            label="上传部署文件："
+            prop="file"
+            ref="step2_upload_item"
+          >
+            <div class="description_info">
+              <i class="el-icon-warning-outline"></i>
+              <p
+                v-html="
+                  `1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png，templates/NOTES.txt；<br />
+                  2.上述文件必须按照上述名称进行命名；<br />
+                  3.step.yaml文件为values.yaml中的可配置参数，templates/NOTES.txt文件为应用的部署信息;<br />
+                  4.templates/NOTES.txt主要用于用户部署后的访问,可以按照如下示例进行编写：<br />
+                      &ensp;&ensp;this is a postgresql.<br />
+                      &ensp;&ensp;author : Tom<br />
+                      &ensp;&ensp;内部地址： {{ .Release.Name }}.{{ .Release.Namespace }}:5432<br />
+                  5.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。<br />`
+                "
+              ></p>
+            </div>
+            <el-upload
+              ref="step2_upload"
+              :auto-upload="false"
+              :limit="1"
+              :data="app_info"
+              action="/apaas/hubApi/market/app"
+              :on-change="deployUploadChange"
+              :on-remove="deployUploadRemove"
+              :on-success="deployUploadSuccess"
+              :on-error="deployUploadError"
+              name="file"
+              drag
+            >
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">
+                将部署文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <div class="apass_button step_action" style="margin-top: 120px;">
           <el-button
             type="primary"
+            :loading="step2Loading"
             plain
-            :loading="submitLoading"
-            @click="preStep"
+            @click="step = 0"
           >
             上一步
           </el-button>
           <el-button
             type="primary"
-            :loading="submitLoading"
-            @click="sunbmitAction('step3_form')"
+            :loading="step2Loading"
+            @click="step2Action"
           >
-            提交
+            创建应用
           </el-button>
         </div>
       </app-build-step>
+      <app-build-step
+        title="上传应用镜像"
+        :step="2"
+        :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
+      >
+        <el-form
+          ref="image_info_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-item
+            label="上传镜像包："
+            prop="file"
+            ref="step1_upload_item"
+          >
+            <el-upload
+              ref="step1_upload"
+              :auto-upload="false"
+              :data="{
+                app_id: app_id,
+                image_name: image_info.image_name,
+                tag: image_info.tag,
+              }"
+              :limit="1"
+              :on-change="imageUploadChange"
+              :on-remove="imageUploadRemove"
+              :on-success="imageUploadSuccess"
+              :on-error="imageUploadError"
+              action="/apaas/hubApi/image/upload"
+              name="file"
+              drag
+            >
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">
+                将镜像文件拖到此处，或<em>点击上传</em>
+              </div>
+            </el-upload>
+          </el-form-item>
+          <div class="apass_button upload_action">
+            <el-button
+              type="primary"
+              @click="addImage"
+              :loading="addImageLoading"
+            >
+              确认
+            </el-button>
+          </div>
+          <div class="form_line"></div>
+          <el-form-item label="上传镜像列表：">
+            <div
+              v-if="image_datas"
+              class="image_list_container"
+              v-infinite-scroll="loadImageList"
+            >
+              <apass-table
+                :header="image_headers"
+                :data="image_datas"
+                :padding-left="60"
+              ></apass-table>
+
+              <p style="text-align: center" v-if="image_loading">
+                加载中...
+              </p>
+              <p style="text-align: center" v-else-if="image_noMore">
+                没有更多了
+              </p>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="apass_button step_action">
+          <el-button type="primary" @click="stepsDone">
+            完成
+          </el-button>
+        </div>
+        <image-detail ref="imageDetail"></image-detail>
+      </app-build-step>
     </app-build-steps>
 
     <apass-dialog
@@ -275,52 +274,36 @@
       :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 apassTable from "@/components/apass-table";
-import uploadFile from "@/components/general/upload_file";
-import apassDialog from "@/components/apass-dialog";
-import imageDetail from "@/components/image-detail";
-
-export default {
-  components: {
-    appBuildSteps,
-    appBuildStep,
-    apassTable,
-    uploadFile,
-    apassDialog,
-    imageDetail,
-  },
-  data: () => ({
-    step: 0,
-    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" }],
-    },
-    step1UplaodLoading: false,
-    image_headers: [],
-    image_datas: [],
-    image_total: 0,
-    image_loading: false,
-    image_noMore: false,
-    image_page: 0,
-    deploy_info: {
-      file: "",
-    },
-    deploy_rules: {
-      file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
+</template>
+
+<script>
+import appBuildSteps from "@/components/app-build-steps/app-build-steps";
+import appBuildStep from "@/components/app-build-steps/app-build-step";
+import apassTable from "@/components/apass-table";
+import uploadFile from "@/components/general/upload_file";
+import apassDialog from "@/components/apass-dialog";
+import imageDetail from "@/components/image-detail";
+
+export default {
+  components: {
+    appBuildSteps,
+    appBuildStep,
+    apassTable,
+    uploadFile,
+    apassDialog,
+    imageDetail,
+  },
+  data: () => ({
+    dialogInfo: {
+      title: "",
+      msg: "",
+      submit: null,
     },
+    step: 0,
+    ywlys: [],
+    types: [],
+    orgs: [],
+    logo: [],
     app_info: {
       name: "", // 应用名称
       version: "", // 应用版本
@@ -350,31 +333,149 @@ export default {
         { required: true, message: "请选择应用场景示例", trigger: "change" },
       ],
     },
-    ywlys: [],
-    types: [],
-    orgs: [],
-    logo: [],
-    submitLoading: false,
-    dialogInfo: {
-      title: "",
-      msg: "",
-      submit: null,
+    deploy_info: {
+      file: "",
+    },
+    deploy_rules: {
+      file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
+    },
+    step2Loading: false,
+    app_id: "",
+    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" }],
     },
+    addImageLoading: false,
+    image_headers: [],
+    image_datas: [],
+    image_total: 0,
+    image_loading: false,
+    image_noMore: false,
+    image_page: 0,
+    done: false,
   }),
   methods: {
-    preStep() {
-      this.step--;
+    getYwlys() {
+      this.$http
+        .get("/apaas/hubApi/market/businessAreas")
+        .then((response) => {
+          this.ywlys = response.data.data;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getTypes() {
+      this.$http
+        .get("/apaas/hubApi/market/appTypes")
+        .then((response) => {
+          this.types = response.data.data;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getOrgs() {
+      this.$http
+        .get("/apaas/hubApi/market/departments")
+        .then((response) => {
+          this.orgs = response.data.data;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getNewList(file) {
+      this.app_info.logo = file.url;
+    },
+    step1Action() {
+      this.$refs.app_info_form.validate((valid) => {
+        if (valid) {
+          this.step = 1;
+        } else {
+          return false;
+        }
+      });
+    },
+    getFileType(fileName) {
+      const startIndex = fileName.lastIndexOf(".");
+
+      if (startIndex != -1) {
+        return fileName
+          .substring(startIndex + 1, fileName.length)
+          .toLowerCase();
+      } else {
+        return "";
+      }
+    },
+    deployUploadChange(file) {
+      const filtType = this.getFileType(file.name);
+
+      if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
+        this.deploy_info.file = file;
+        this.$refs.step2_upload_item.clearValidate();
+      } else {
+        this.$message.error("部署文件格式错误!");
+        this.deploy_info.file = "";
+        this.$refs.step2_upload.clearFiles();
+      }
+    },
+    deployUploadRemove() {
+      this.deploy_info.file = "";
+    },
+    deployUploadSuccess(response) {
+      if (response.success == 1) {
+        this.$message({
+          message: `提交成功`,
+          type: "success",
+        });
+        this.step2Loading = false;
+        this.step = 2;
+        this.app_id = response.data;
+
+        this.image_datas = [];
+        this.image_page = 1;
+        this.initImageList();
+      } else {
+        this.$message({
+          message: response.errMsg || `提交失败`,
+          type: "warning",
+        });
+        this.step2Loading = false;
+      }
+    },
+    deployUploadError() {
+      this.$message({
+        message: `提交失败`,
+        type: "warning",
+      });
+      this.step2Loading = false;
     },
-    nextStep() {
-      this.step++;
+    step2Action() {
+      this.$refs.deploy_info_form.validate((valid) => {
+        if (valid) {
+          this.step2Loading = true;
+          this.$refs.step2_upload.submit();
+        } else {
+          return false;
+        }
+      });
     },
     initImageList() {
-      this.image_loading = true;
       this.$http
         .get("/apaas/hubApi/image/imageUpList", {
           params: {
             page: this.image_page,
             size: 10,
+            app_id: this.app_id,
           },
         })
         .then(({ data }) => {
@@ -391,8 +492,9 @@ export default {
     loadImageList() {
       if (this.image_datas.length < this.image_total) {
         this.image_page++;
+        this.image_loading = true;
         this.initImageList();
-      } else {
+      } else if (this.image_total > 0) {
         this.image_noMore = true;
       }
     },
@@ -416,7 +518,7 @@ export default {
         this.image_info.tag = "";
         this.image_info.file = "";
         this.$refs.step1_upload.clearFiles();
-        this.step1UplaodLoading = false;
+        this.addImageLoading = false;
         this.image_datas = [];
         this.image_page = 1;
         this.initImageList();
@@ -425,7 +527,7 @@ export default {
           message: response.errMsg || `上传镜像失败`,
           type: "warning",
         });
-        this.step1UplaodLoading = false;
+        this.addImageLoading = false;
       }
     },
     imageUploadError() {
@@ -433,22 +535,22 @@ export default {
         message: `上传镜像失败`,
         type: "warning",
       });
-      this.step1UplaodLoading = false;
+      this.addImageLoading = false;
     },
     imageUploadRemove() {
       this.image_info.file = "";
     },
-    submitImage(formName) {
-      this.$refs[formName].validate((valid) => {
+    addImage() {
+      this.$refs.image_info_form.validate((valid) => {
         if (valid) {
-          this.step1UplaodLoading = true;
+          this.addImageLoading = true;
           this.$refs.step1_upload.submit();
         } else {
           return false;
         }
       });
     },
-    deleteItem(item) {
+    deleteImage(item) {
       this.dialogInfo.title = "";
       this.dialogInfo.msg = "是否删除该镜像？";
       this.dialogInfo.submit = () => {
@@ -480,122 +582,19 @@ export default {
       };
       this.$refs.dialog.show();
     },
-    goToStep1() {
-      // if (this.image_total > 0) {
-      this.nextStep();
-      /* } else {
-        this.$message({
-          message: `您尚未上传任何镜像`,
-          type: "warning",
-        });
-      } */
-    },
-    goToStep2(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.nextStep();
-        } else {
-          return false;
-        }
-      });
-    },
-    getNewList(file) {
-      this.app_info.logo = file.url;
-    },
-    getYwlys() {
-      this.$http
-        .get("/apaas/hubApi/market/businessAreas")
-        .then((response) => {
-          this.ywlys = response.data.data;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    getTypes() {
-      this.$http
-        .get("/apaas/hubApi/market/appTypes")
-        .then((response) => {
-          this.types = response.data.data;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    getOrgs() {
-      this.$http
-        .get("/apaas/hubApi/market/departments")
-        .then((response) => {
-          this.orgs = response.data.data;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    deployUploadChange(file) {
-      const filtType = this.getFileType(file.name);
-
-      if (filtType === "zip" || filtType === "gz" || filtType === "tgz") {
-        this.deploy_info.file = file;
-        this.$refs.step2_upload_item.clearValidate();
-      } else {
-        this.$message.error("部署文件格式错误!");
-        this.deploy_info.file = "";
-        this.$refs.step2_upload.clearFiles();
-      }
-    },
-    deployUploadRemove() {
-      this.deploy_info.file = "";
-    },
-    deployUploadSuccess(response) {
-      if (response.success == 1) {
-        this.$message({
-          message: `提交成功`,
-          type: "success",
-        });
-        this.submitLoading = false;
-        this.$router.push("/yygl/2/0");
-      } else {
-        this.$message({
-          message: response.errMsg || `提交失败`,
-          type: "warning",
-        });
-        this.submitLoading = false;
-      }
-    },
-    deployUploadError() {
-      this.$message({
-        message: `提交失败`,
-        type: "warning",
-      });
-      this.submitLoading = false;
-    },
-    sunbmitAction(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          this.$refs.step2_upload.submit();
-        } else {
-          return false;
-        }
-      });
-    },
-    getFileType(fileName) {
-      const startIndex = fileName.lastIndexOf(".");
-
-      if (startIndex != -1) {
-        return fileName
-          .substring(startIndex + 1, fileName.length)
-          .toLowerCase();
-      } else {
-        return "";
-      }
-    },
     showImageDetail(item) {
       this.$refs.imageDetail.showDialog(item);
     },
+    stepsDone() {
+      this.done = true;
+      this.$router.push(`/yygl/${this.$store.getters.level}/0`);
+    }, // TODO: 增加成功的状态页
   },
   mounted() {
+    this.getYwlys();
+    this.getTypes();
+    this.getOrgs();
+
     this.image_headers = [
       {
         label: "镜像名称",
@@ -617,17 +616,11 @@ export default {
           {
             label: "删除",
             class: "warn",
-            callback: this.deleteItem,
+            callback: this.deleteImage,
           },
         ],
       },
     ];
-    this.image_datas = [];
-    this.image_page = 1;
-    this.initImageList();
-    this.getYwlys();
-    this.getTypes();
-    this.getOrgs();
   },
 };
 </script>
-- 
2.26.0