应用构建（镜像）接口调试

src/pages/workbench/app_build.vue

@@ -31,7 +31,11 @@
               placeholder="请输入版本号"
             ></el-input>
           </el-form-item>
-          <el-form-item label="上传镜像包：" prop="file">
+          <el-form-item
+            label="上传镜像包："
+            prop="file"
+            ref="step1_upload_item"
+          >
             <el-upload
               ref="step1_upload"
               :auto-upload="false"
@@ -41,6 +45,7 @@
               }"
               :limit="1"
               :on-change="imageUploadChange"
+              :on-remove="imageUploadRemove"
               :on-success="imageUploadSuccess"
               :on-error="imageUploadError"
               action="/apaas/hubApi/image/upload"
@@ -102,7 +107,11 @@
           :model="deploy_info"
           :rules="deploy_rules"
         >
-          <el-form-item label="上传部署文件：" prop="file">
+          <el-form-item
+            label="上传部署文件："
+            prop="file"
+            ref="step2_upload_item"
+          >
             <div class="description_info">
               <i class="el-icon-warning-outline"></i>
               <p>
@@ -119,7 +128,9 @@
               :data="app_info"
               action="/apaas/hubApi/market/app"
               :on-change="deployUploadChange"
+              :on-remove="deployUploadRemove"
               :on-success="deployUploadSuccess"
+              :on-error="deployUploadError"
               name="file"
               drag
             >
@@ -186,17 +197,17 @@
             </el-select>
           </el-form-item>
           <el-form-item label="应用封面：" prop="logo">
-            <el-upload
-              class="avatar-uploader"
-              action="/apaas/static/image/upload"
-              :data="{ directory: 'hub' }"
-              :show-file-list="false"
-              :on-success="handleLogoSuccess"
-              :before-upload="beforeLogoUpload"
-            >
-              <img v-if="app_info.logo" class="avatar" :src="app_info.logo" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+            <upload-file
+              :multiple="false"
+              :max="1"
+              type="cropper"
+              :readOnly="false"
+              fit="fill"
+              :list="logo"
+              @getNewList="getNewList"
+              ref="servicepic"
+              directory="hub"
+            ></upload-file>
           </el-form-item>
           <el-form-item label="所属组织：" prop="org">
             <el-select v-model="app_info.org" placeholder="请选择所属组织">
@@ -257,12 +268,14 @@
 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/upload_file";
 
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
     apassTable,
+    uploadFile,
   },
   data: () => ({
     step: 0,
@@ -323,6 +336,7 @@ export default {
     ywlys: [],
     types: [],
     orgs: [],
+    logo: [],
     submitLoading: false,
   }),
   methods: {
@@ -333,16 +347,17 @@ export default {
       this.step++;
     },
     initImageList() {
+      this.image_loading = true;
       this.$http
         .get("/apaas/hubApi/image/imageUpList", {
           params: {
             page: this.image_page,
-            size: 5,
+            size: 10,
           },
         })
-        .then((response) => {
-          this.image_total = response.data.total;
-          this.image_datas.push(...response.data.data);
+        .then(({ data }) => {
+          this.image_total = data.total || 0;
+          this.image_datas.push(...(data.data || []));
           this.image_loading = false;
           this.image_noMore = false;
         })
@@ -352,7 +367,6 @@ export default {
     },
     loadImageList() {
       if (this.image_datas.length < this.image_total) {
-        this.image_loading = true;
         this.image_page++;
         this.initImageList();
       } else {
@@ -360,27 +374,32 @@ export default {
       }
     },
     imageUploadChange(file) {
-      this.image_info.file = file;
-
-      /* this.$refs["step1_form"].validate((valid) => {
-        if (valid) {
-          //
-        } else {
-          return false;
-        }
-      }); */
+      if (file.raw.type !== "application/x-tar") {
+        this.$message.error("镜像文件只能是 TAR 格式!");
+        this.image_info.file = "";
+        this.$refs.step1_upload.clearFiles();
+      } else {
+        this.image_info.file = file;
+        this.$refs.step1_upload_item.clearValidate();
+      }
     },
     imageUploadSuccess(response) {
-      // console.log("新增成功", response);
-      this.$refs.step1_upload.clearFiles();
+      this.$message({
+        message: `上传镜像成功`,
+        type: "success",
+      });
       this.image_info.image_name = "";
       this.image_info.tag = "";
       this.image_info.file = "";
+      this.$refs.step1_upload.clearFiles();
       this.step1UplaodLoading = false;
       this.image_datas = [];
       this.image_page = 1;
       this.initImageList();
     },
+    imageUploadRemove() {
+      this.image_info.file = "";
+    },
     imageUploadError(response) {
       this.$message({
         message: `上传失败`,
@@ -411,9 +430,6 @@ export default {
           console.log(error);
         });
     },
-    deployUploadChange(file) {
-      this.deploy_info.file = file;
-    },
     goToStep2(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -423,20 +439,8 @@ export default {
         }
       });
     },
-    handleLogoSuccess(response) {
-      this.app_info.logo = response.data;
-    },
-    beforeLogoUpload(file) {
-      const isPic = file.type === "image/jpeg" || file.type === "image/png";
-      const isLt10M = file.size / 1024 / 1024 < 10;
-
-      if (!isPic) {
-        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
-      }
-      if (!isLt10M) {
-        this.$message.error("上传头像图片大小不能超过 10MB!");
-      }
-      return isPic && isLt10M;
+    getNewList(file) {
+      this.app_info.logo = file.url;
     },
     getYwlys() {
       this.$http
@@ -468,10 +472,38 @@ export default {
           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) {
+      this.$message({
+        message: `提交成功`,
+        type: "success",
+      });
+      this.submitLoading = false;
+      this.$router.push("/yygl/2/0");
+    },
+    deployUploadError() {
+      this.$message({
+        message: `提交失败`,
+        type: "warning",
+      });
+    },
     sunbmitAction(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          console.log("submit action");
           this.submitLoading = true;
           this.$refs.step2_upload.submit();
         } else {
@@ -479,10 +511,16 @@ export default {
         }
       });
     },
-    deployUploadSuccess(response) {
-      console.log("提交成功", response);
-      this.submitLoading = false;
-      this.$router.push("/yygl/2/0");
+    getFileType(fileName) {
+      const startIndex = fileName.lastIndexOf(".");
+
+      if (startIndex != -1) {
+        return fileName
+          .substring(startIndex + 1, fileName.length)
+          .toLowerCase();
+      } else {
+        return "";
+      }
     },
   },
   mounted() {