From ab092009afb260f9c4e5c2e296d901815ade232c Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Wed, 3 Jun 2020 17:04:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=9E=84=E5=BB=BA=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css              |   6 +
 src/components/apass-table.vue        |   2 +-
 src/components/cropper.vue            |  36 +-
 src/pages/service_shop/sjfwDetail.vue |  30 +-
 src/pages/workbench/app_build.vue     | 644 ++++++++++++++++----------
 5 files changed, 431 insertions(+), 287 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index b14a51d..bd44169 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -499,6 +499,7 @@ width: 620px!important;
 /* 应用超市详情页公共样式 */
 .sevice_detail {
   max-width: 1200px;
+  padding-top: 1px;
   margin: 0 auto;
 }
 
@@ -535,6 +536,11 @@ width: 620px!important;
   background-color: #e1e4fb;
   border-color: #e1e4fb;
 }
+.apass_button .el-button.is-disabled, 
+.apass_button .el-button.is-disabled:focus, 
+.apass_button .el-button.is-disabled:hover {
+  cursor: not-allowed;
+}
 .apass_table .el-table th > .cell {
   color: #1a2236;
 }
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
index 4ba0f48..56beb8b 100644
--- a/src/components/apass-table.vue
+++ b/src/components/apass-table.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="apass_table">
     <el-table :data="data">
-      <el-table-column :width="paddingLeft - 10"></el-table-column>
+      <el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column>
       <el-table-column
         v-for="(item, index) in header"
         :label="item.label"
diff --git a/src/components/cropper.vue b/src/components/cropper.vue
index a9378f1..087bdc3 100644
--- a/src/components/cropper.vue
+++ b/src/components/cropper.vue
@@ -7,7 +7,7 @@
         id="uploads"
         class="up_input"
         accept="image/png, image/jpeg, image/gif, image/jpg"
-        @change="uploadImg($event,1)"
+        @change="uploadImg($event, 1)"
       />
     </div>
     <!-- 弹出层-裁剪 -->
@@ -41,8 +41,12 @@
           </div>
         </div>
         <el-row class="footerBtn" align="center">
-          <el-button type="primary" size="small" round @click="cut('blob')">确认</el-button>
-          <el-button type="primary" size="small" round @click="handleClose">取消</el-button>
+          <el-button type="primary" size="small" round @click="cut('blob')"
+            >确认</el-button
+          >
+          <el-button type="primary" size="small" round @click="handleClose"
+            >取消</el-button
+          >
         </el-row>
       </div>
     </el-dialog>
@@ -53,7 +57,7 @@
 import { VueCropper } from "vue-cropper";
 export default {
   components: {
-    VueCropper
+    VueCropper,
   },
   data() {
     return {
@@ -64,7 +68,7 @@ export default {
         canMoveBox: true, //截图框不能拖动
         autoCropWidth: 200, //截图框宽度
         autoCropHeight: 200, //截图框高度
-        centerBox: false //截图框被限制在图片里面
+        centerBox: false, //截图框被限制在图片里面
       },
       previews: {}, //实时预览图数据
       attach: {
@@ -72,10 +76,10 @@ export default {
         userId: "",
         customaryUrl: "", //原图片路径
         laterUrl: "", //裁剪后图片路径
-        attachType: "photo" //附件类型
+        attachType: "photo", //附件类型
       },
       fileName: "", //本机文件地址
-      uploadImgRelaPath: "" //上传后图片地址
+      uploadImgRelaPath: "", //上传后图片地址
     };
   },
   methods: {
@@ -90,7 +94,7 @@ export default {
     //加载图片信息
     find() {
       this.userId = sessionStorage.getItem("userId");
-      this.$http.post("ssapi", this.attach).then(res => {
+      this.$http.post("ssapi", this.attach).then((res) => {
         console.log(res);
       });
     },
@@ -105,7 +109,7 @@ export default {
       //fileReader 接口，用于异步读取文件数据
       var reader = new FileReader();
       reader.readAsDataURL(file); //重要 以dataURL形式读取文件
-      reader.onload = e => {
+      reader.onload = (e) => {
         // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
 
         let data = e.target.result;
@@ -120,25 +124,23 @@ export default {
     //确认截图,上传
     cut(type) {
       var formData = new FormData();
-      this.$refs.cropper.getCropBlob(res => {
+      this.$refs.cropper.getCropBlob((res) => {
         //res是裁剪后图片的bolb对象
         formData.append("file", res, this.userId);
         formData.append("directory", "image");
         let url = "/awecloud/static/image/upload";
         this.$http
           .post(url, formData, {
-            contentType: false,
-            processData: false,
-            headers: { "Content-Type": "multipart/form-data" }
+            headers: { "Content-Type": "multipart/form-data" },
           })
-          .then(res => {
+          .then((res) => {
             // 上传图片后服务器返回访问路径
             this.$emit("getNewUrl", res.data.data);
             this.handleClose();
           });
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -191,4 +193,4 @@ export default {
 .cropper_dia .el-dialog {
   width: 860px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/service_shop/sjfwDetail.vue b/src/pages/service_shop/sjfwDetail.vue
index 299d784..e2e6c56 100644
--- a/src/pages/service_shop/sjfwDetail.vue
+++ b/src/pages/service_shop/sjfwDetail.vue
@@ -42,27 +42,19 @@ export default {
     },
   },
   methods: {
-    getDataFromApi(_url) {
-      return new Promise((resolve, reject) => {
-        this.$http
-          .get(_url)
-          .then((response) => {
-            resolve(response.body);
-          })
-          .catch(function(error) {
-            reject(error);
-          });
-      });
-    },
     init() {
-      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
-        ({ sjfw }) => {
-          this.baseInfo = sjfw;
-        },
-        (error) => {
+      this.$http
+        .get("/apaas/serviceapp/v3/servicemarket/detail", {
+          params: {
+            serviceId: 666,
+          },
+        })
+        .then((response) => {
+          console.log(response.data);
+        })
+        .catch(function(error) {
           console.log(error);
-        }
-      );
+        });
     },
   },
   mounted() {
diff --git a/src/pages/workbench/app_build.vue b/src/pages/workbench/app_build.vue
index d29923c..a1d3383 100644
--- a/src/pages/workbench/app_build.vue
+++ b/src/pages/workbench/app_build.vue
@@ -12,52 +12,74 @@
         :step="0"
         :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
       >
-        <el-form class="step_form" label-position="top" :model="mirrorInfo">
-          <el-form-item label="镜像名称：">
+        <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="mirrorInfo.name"
+              v-model="image_info.image_name"
               placeholder="请输入镜像名称"
             ></el-input>
           </el-form-item>
-          <el-form-item label="版本数：">
+          <el-form-item label="版本号：" prop="tag">
             <el-input
-              v-model="mirrorInfo.version"
-              placeholder="请输入版本数"
+              v-model="image_info.tag"
+              placeholder="请输入版本号"
             ></el-input>
           </el-form-item>
-          <el-form-item label="上传镜像包：">
-            <upload-file
-              :multiple="false"
-              :max="1"
-              type="default"
-              :readOnly="false"
-              :list="mirrorList"
-              @getNewList="getNewList"
-              :drag="true"
-            ></upload-file>
-            <p class="mirror_info">
-              <img :src="require('@/assets/imgs/ic_newdata.png')" />
-              <span>镜像文件001.rar</span>
-            </p>
-            <div class="mirror_ation">
-              <el-button type="primary" @click="sunmitMirror">
-                确认
-              </el-button>
-            </div>
+          <el-form-item label="上传镜像包：" prop="file">
+            <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-success="imageUploadSuccess"
+              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="上传镜像列表：">
-            <ces-table
-              class="mirror_list"
-              emptyText="暂无数据"
-              :border="false"
-              :headers="mirror_headers"
-              :datas="mirror_datas"
-              :isIndex="false"
-            ></ces-table>
+            <div 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="step_action">
+        <div class="apass_button step_action">
           <el-button type="primary" @click="nextStep">
             下一步
           </el-button>
@@ -68,8 +90,14 @@
         :step="1"
         :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
       >
-        <el-form class="step_form" label-position="top">
-          <el-form-item label="上传镜像包：">
+        <el-form
+          ref="step2_form"
+          class="step_form"
+          label-position="top"
+          :model="deploy_info"
+          :rules="deploy_rules"
+        >
+          <el-form-item label="上传部署文件：" prop="file">
             <div class="description_info">
               <i class="el-icon-warning-outline"></i>
               <p>
@@ -79,26 +107,29 @@
                 3.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。
               </p>
             </div>
-            <upload-file
-              :multiple="false"
-              :max="1"
-              type="default"
-              :readOnly="false"
-              :list="mirrorList"
-              @getNewList="getNewList"
-              :drag="true"
-            ></upload-file>
-            <p class="mirror_info">
-              <img :src="require('@/assets/imgs/ic_newdata.png')" />
-              <span>镜像文件001.rar</span>
-            </p>
+            <el-upload
+              ref="step2_upload"
+              :auto-upload="false"
+              :limit="1"
+              :data="app_info"
+              action="/apaas/hubApi/market/app"
+              :on-change="deployUploadChange"
+              :on-success="deployUploadSuccess"
+              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="step_action" style="margin-top: 120px;">
+        <div class="apass_button step_action" style="margin-top: 120px;">
           <el-button type="primary" plain @click="preStep">
             上一步
           </el-button>
-          <el-button type="primary" @click="nextStep">
+          <el-button type="primary" @click="goToStep2('step2_form')">
             下一步
           </el-button>
         </div>
@@ -108,92 +139,107 @@
         :step="2"
         :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
       >
-        <el-form class="step_form" label-position="top" :model="appInfo">
-          <el-form-item label="应用名称称：">
+        <el-form
+          ref="step3_form"
+          class="step_form"
+          label-position="top"
+          :model="app_info"
+          :rules="app_rules"
+        >
+          <el-form-item label="应用名称：" prop="name">
             <el-input
-              v-model="appInfo.name"
-              placeholder="请输入应用名称称"
+              v-model="app_info.name"
+              placeholder="请输入应用名称"
             ></el-input>
           </el-form-item>
-          <el-form-item label="应用版本：">
+          <el-form-item label="应用版本：" prop="version">
             <el-input
-              v-model="appInfo.version"
+              v-model="app_info.version"
               placeholder="请输入应用版本，例：1.0.0"
             ></el-input>
           </el-form-item>
-          <el-form-item label="业务领域：">
-            <el-select v-model="appInfo.area" placeholder="请选择业务领域">
+          <el-form-item label="业务领域：" prop="ywly">
+            <el-select v-model="app_info.ywly" placeholder="请选择业务领域">
               <el-option
-                v-for="item in areas"
+                v-for="item in ywlys"
                 :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :label="item.name"
+                :value="item.id"
               >
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="应用类型：">
-            <el-select v-model="appInfo.type" placeholder="请选择应用类型">
+          <el-form-item label="应用类型：" prop="type">
+            <el-select v-model="app_info.type" placeholder="请选择应用类型">
               <el-option
                 v-for="item in types"
                 :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :label="item.name"
+                :value="item.id"
               >
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="上传镜像包：">
-            <upload-file
-              :multiple="false"
-              :max="1"
-              type="picture"
-              :readOnly="false"
-              :list="cover"
-              @getNewList="getcoverList"
-            ></upload-file>
-          </el-form-item>
-          <el-form-item label="所属组织：">
-            <el-select
-              v-model="appInfo.organization"
-              placeholder="请选择所属组织"
+          <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>
+          </el-form-item>
+          <el-form-item label="所属组织：" prop="org">
+            <el-select v-model="app_info.org" placeholder="请选择所属组织">
               <el-option
-                v-for="item in organizations"
+                v-for="item in orgs"
                 :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :label="item.name"
+                :value="item.id"
               >
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="应用简介：">
+          <el-form-item label="应用简介：" prop="yyjj">
             <el-input
-              v-model="appInfo.app_description"
-              type="textarea"
+              v-model="app_info.yyjj"
+              type="textywly"
               placeholder="请输入应用简介"
             ></el-input>
           </el-form-item>
-          <el-form-item label="功能简介：">
+          <el-form-item label="功能简介：" prop="gnjj">
             <el-input
-              v-model="appInfo.function_description"
-              type="textarea"
+              v-model="app_info.gnjj"
+              type="textywly"
               placeholder="请输入功能简介"
             ></el-input>
           </el-form-item>
-          <el-form-item label="应用场景示例：">
+          <el-form-item label="应用场景示例：" prop="cjsl">
             <el-input
-              v-model="appInfo.example"
-              type="textarea"
+              v-model="app_info.cjsl"
+              type="textywly"
               placeholder="请输入应用场景示例"
             ></el-input>
           </el-form-item>
         </el-form>
-        <div class="step_action">
-          <el-button type="primary" plain @click="preStep">
+        <div class="apass_button step_action">
+          <el-button
+            type="primary"
+            plain
+            :loading="submitLoading"
+            @click="preStep"
+          >
             上一步
           </el-button>
-          <el-button type="primary" @click="sunbmitAction">
+          <el-button
+            type="primary"
+            :loading="submitLoading"
+            @click="sunbmitAction('step3_form')"
+          >
             提交
           </el-button>
         </div>
@@ -205,148 +251,246 @@
 <script>
 import appBuildSteps from "@/components/app-build-steps/app-build-steps";
 import appBuildStep from "@/components/app-build-steps/app-build-step";
-import uploadFile from "@/components/upload_file";
-import cesTable from "@/components/table-um";
+import apassTable from "@/components/apass-table";
 
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
-    uploadFile,
-    cesTable,
+    apassTable,
   },
   data: () => ({
     step: 0,
-    mirrorList: [],
-    mirrorInfo: {
-      name: "",
-      version: "",
-      image: "",
+    image_info: {
+      image_name: "",
+      tag: "",
+      file: "",
     },
-    mirror_headers: [
-      { label: "", prop: "", type: "", align: "", width: 50 },
-      { label: "镜像名称", prop: "name", type: "", align: "left" },
-      { label: "版本数", prop: "version", type: "", align: "center" },
-      {
-        label: "操作",
-        type: "Button",
-        align: "center",
-        btnList: [
-          {
-            type: "action-delete",
-            label: "删除",
-          },
-        ],
-      },
-    ],
-    mirror_datas: [
-      {
-        name: "cemplat-api",
-        version: "1.0.0",
-      },
-      {
-        name: "cemplat-api",
-        version: "1.0.1",
-      },
-      {
-        name: "cemplat-api",
-        version: "1.0.2",
-      },
-      {
-        name: "cemplat-api",
-        version: "1.0.3",
-      },
-      {
-        name: "cemplat-api",
-        version: "1.0.4",
-      },
-    ],
-    appInfo: {
-      name: "",
-      version: "",
-      area: "",
-      type: "",
-      cover: "",
-      organization: "",
-      app_description: "",
-      function_description: "",
-      example: "",
+    image_rules: {
+      image_name: [
+        { required: true, message: "请输入镜像名称", trigger: "blur" },
+      ],
+      tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
     },
-    areas: [
-      {
-        name: "应急领域",
-        value: 0,
-      },
-      {
-        name: "公安领域",
-        value: 1,
-      },
-      {
-        name: "全领域",
-        value: 2,
-      },
-      {
-        name: "交通领域",
-        value: 3,
-      },
-    ],
-    types: [
-      {
-        name: "基础工具",
-        value: 0,
-      },
-      {
-        name: "通用应用",
-        value: 1,
-      },
-      {
-        name: "业务应用",
-        value: 2,
-      },
-    ],
-    organizations: [
-      {
-        name: "比格大数据",
-        value: 0,
-      },
-      {
-        name: "贵州公安厅",
-        value: 1,
-      },
-      {
-        name: "贵州交通厅",
-        value: 2,
-      },
-      {
-        name: "贵州迪爱思交通厅",
-        value: 3,
-      },
-    ],
-    cover: [],
-  }),
-  methods: {
-    getNewList(values) {
-      console.log(values);
+    step1UplaodLoading: false,
+    image_headers: [],
+    image_datas: [],
+    image_total: 0,
+    image_loading: false,
+    image_noMore: false,
+    image_page: 0,
+    deploy_info: {
+      file: "",
     },
-    sunmitMirror() {
-      console.log(this.mirrorInfo.image);
+    deploy_rules: {
+      file: [{ required: true, message: "请选择部署文件", trigger: "change" }],
     },
-    deleteItem(item) {
-      console.log(item);
+    app_info: {
+      name: "", // 应用名称
+      version: "", // 应用版本
+      ywly: "", // 业务领域id
+      type: "", // 应用类型id
+      logo: "", // 封面图片链接
+      org: "", //  所属组织机构id
+      yyjj: "", // 应用简介
+      gnjj: "", // 功能简介
+      cjsl: "", //  应用场景示例
     },
-    getcoverList(values) {
-      console.log(values);
+    app_rules: {
+      name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
+      version: [{ required: true, message: "请输入应用版本", trigger: "blur" }],
+      ywly: [{ required: true, message: "请选择业务领域", trigger: "change" }],
+      type: [{ required: true, message: "请选择应用类型", trigger: "change" }],
+      logo: [{ required: true, message: "请上传应用封面", trigger: "change" }],
+      org: [
+        { required: true, message: "请选择所属组织机构", trigger: "change" },
+      ],
+      yyjj: [{ required: true, message: "请选择应用简介", trigger: "change" }],
+      gnjj: [{ required: true, message: "请选择功能简介", trigger: "change" }],
+      cjsl: [
+        { required: true, message: "请选择应用场景示例", trigger: "change" },
+      ],
     },
+    ywlys: [],
+    types: [],
+    orgs: [],
+    submitLoading: false,
+  }),
+  methods: {
     preStep() {
       this.step--;
     },
     nextStep() {
       this.step++;
     },
-    sunbmitAction() {
-      console.log("submit action");
+    initImageList() {
+      this.$http
+        .get("/apaas/hubApi/image/imageUpList", {
+          params: {
+            page: this.image_page,
+            size: 5,
+          },
+        })
+        .then((response) => {
+          this.image_total = response.data.total;
+          this.image_datas.push(...response.data.data);
+          this.image_loading = false;
+          this.image_noMore = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    loadImageList() {
+      if (this.image_datas.length < this.image_total) {
+        this.image_loading = true;
+        this.image_page++;
+        this.initImageList();
+      } else {
+        this.image_noMore = true;
+      }
+    },
+    imageUploadChange(file) {
+      this.image_info.file = file;
+
+      /* this.$refs["step1_form"].validate((valid) => {
+        if (valid) {
+          //
+        } else {
+          return false;
+        }
+      }); */
+    },
+    imageUploadSuccess(response) {
+      console.log("新增成功", response);
+      this.$refs.step1_upload.clearFiles();
+      this.image_info.image_name = "";
+      this.image_info.tag = "";
+      this.image_info.file = "";
+      this.step1UplaodLoading = false;
+      this.image_datas = [];
+      this.image_page = 1;
+      this.initImageList();
+    },
+    submitImage(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.step1UplaodLoading = true;
+          this.$refs.step1_upload.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    deleteItem(item) {
+      this.$http
+        .delete(`/apaas/hubApi/image/del/${item.name}`)
+        .then((response) => {
+          // console.log("已删除" + item.name);
+          this.initImageList();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    deployUploadChange(file) {
+      this.deploy_info.file = file;
+    },
+    goToStep2(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.nextStep();
+        } else {
+          return false;
+        }
+      });
+    },
+    handleLogoSuccess(response) {
+      this.app_info.logo = response.data;
+    },
+    beforeLogoUpload(file) {
+      /* const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M; */
+    },
+    getYwlys() {
+      this.$http
+        .get("/apaas/hubApi/market/appTypes")
+        .then((response) => {
+          this.ywlys = response.data.data;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getTypes() {
+      this.$http
+        .get("/apaas/hubApi/market/departments")
+        .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);
+        });
+    },
+    sunbmitAction(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log("submit action");
+          this.submitLoading = true;
+          this.$refs.step2_upload.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    deployUploadSuccess(response) {
+      console.log("提交成功", response);
+      this.submitLoading = false;
+      this.$router.push("/yygl/2/0");
     },
   },
+  mounted() {
+    this.image_headers = [
+      { label: "镜像名称", prop: "name", align: "left" },
+      { label: "版本号", prop: "tag", align: "center" },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        actionList: [
+          {
+            label: "删除",
+            callback: this.deleteItem,
+          },
+        ],
+      },
+    ];
+    this.image_datas = [];
+    this.image_page = 1;
+    this.initImageList();
+    this.getYwlys();
+    this.getTypes();
+    this.getOrgs();
+  },
 };
 </script>
 
@@ -354,20 +498,6 @@ export default {
 .app_build-container {
   margin: -157px 40px 20px;
 }
-.app_build-container .el-button {
-  min-width: 124px;
-  height: 44px;
-}
-.app_build-container .el-button--primary {
-  color: #fff;
-  background-color: #0f2683;
-  border-color: #0f2683;
-}
-.app_build-container .el-button--primary.is-plain {
-  color: #0f2683;
-  background-color: #e1e4fb;
-  border-color: #e1e4fb;
-}
 .app_build-container > .app_build_steps {
   border-radius: 12px;
   background-color: #fff;
@@ -380,21 +510,8 @@ export default {
 .step_action .el-button:not(:last-child) {
   margin-right: 30px;
 }
-.mirror_info {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 12px;
-  line-height: 20px;
-  color: #8890a7;
-  margin-left: 15px;
-}
-.mirror_info > img {
-  margin-right: 10px;
-  width: 12px;
-}
-.mirror_ation {
-  margin-top: 45px;
+.upload_action {
+  margin: 20px 0 25px;
 }
 .form_line {
   border: 1px solid #f4f7fc;
@@ -418,9 +535,36 @@ export default {
   font-size: 14px;
   margin-right: 10px;
 }
+.image_list_container {
+  height: 284px;
+  overflow-y: auto;
+}
 </style>
 
 <style>
+.app_build-container .avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.app_build-container .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.app_build-container .avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.app_build-container .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
 .app_build-container .apass_breadcrumb {
   padding: 0 20px;
 }
@@ -450,21 +594,21 @@ export default {
   line-height: 25px;
   color: #58617a;
 }
-.mirror_list .el-table th > .cell {
+.image_list .el-table th > .cell {
   color: #1a2236;
 }
-.mirror_list .el-table td,
-.mirror_list .el-table th.is-leaf {
+.image_list .el-table td,
+.image_list .el-table th.is-leaf {
   border: none !important;
   line-height: 23px;
 }
-.mirror_list .el-table::before {
+.image_list .el-table::before {
   display: none;
 }
-.mirror_list .el-table {
+.image_list .el-table {
   width: 100%;
 }
-.mirror_list .el-table__row:nth-child(odd) td {
+.image_list .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
 }
 </style>
-- 
2.26.0