From 2b774e34750ae6c5287808b2892d20ab82b7c397 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Fri, 22 May 2020 18:02:06 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/service-tabs.vue |   1 +
 src/pages/app_build.vue         | 378 ++++++++++++++++++++++++++++++--
 2 files changed, 362 insertions(+), 17 deletions(-)

diff --git a/src/components/service-tabs.vue b/src/components/service-tabs.vue
index 05bbab4..26157a8 100644
--- a/src/components/service-tabs.vue
+++ b/src/components/service-tabs.vue
@@ -137,6 +137,7 @@ export default {
 .service_info_tab .el-table td,
 .service_info_tab .el-table th.is-leaf {
   border: none !important;
+  line-height: 23px;
 }
 .service_info_tab .el-table::before {
   display: none;
diff --git a/src/pages/app_build.vue b/src/pages/app_build.vue
index 6e9ffda..ce0cb29 100644
--- a/src/pages/app_build.vue
+++ b/src/pages/app_build.vue
@@ -12,7 +12,51 @@
         :step="0"
         :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
       >
-        <h3 style="margin: 30px 0;">上传应用镜像</h3>
+        <el-form class="step_form" label-position="top" :model="mirrorInfo">
+          <el-form-item label="镜像名称：">
+            <el-input
+              v-model="mirrorInfo.name"
+              placeholder="请输入镜像名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="版本数：">
+            <el-input
+              v-model="mirrorInfo.version"
+              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>
+          <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>
+          </el-form-item>
+        </el-form>
         <div class="step_action">
           <el-button type="primary" @click="nextStep">
             下一步
@@ -24,8 +68,33 @@
         :step="1"
         :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
       >
-        <h3 style="margin: 30px 0;">上传部署文件</h3>
-        <div class="step_action">
+        <el-form class="step_form" label-position="top">
+          <el-form-item label="上传镜像包：">
+            <div class="description_info">
+              <i class="el-icon-warning-outline"></i>
+              <p>
+                压缩包上传提示：<br />
+                1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png；<br />
+                2.上述文件必须按照上述名称进行命名；<br />
+                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-form-item>
+        </el-form>
+        <div class="step_action" style="margin-top: 120px;">
           <el-button type="primary" plain @click="preStep">
             上一步
           </el-button>
@@ -39,7 +108,87 @@
         :step="2"
         :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
       >
-        <h3 style="margin: 30px 0;">用基础信息填写</h3>
+        <el-form class="step_form" label-position="top" :model="appInfo">
+          <el-form-item label="应用名称称：">
+            <el-input
+              v-model="appInfo.name"
+              placeholder="请输入应用名称称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="应用版本：">
+            <el-input
+              v-model="appInfo.version"
+              placeholder="请输入应用版本，例：1.0.0"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="业务领域：">
+            <el-select v-model="appInfo.area" placeholder="请选择业务领域">
+              <el-option
+                v-for="item in areas"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="应用类型：">
+            <el-select v-model="appInfo.type" placeholder="请选择应用类型">
+              <el-option
+                v-for="item in types"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </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-option
+                v-for="item in organizations"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="应用简介：">
+            <el-input
+              v-model="appInfo.app_description"
+              type="textarea"
+              placeholder="请输入应用简介"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="功能简介：">
+            <el-input
+              v-model="appInfo.function_description"
+              type="textarea"
+              placeholder="请输入功能简介"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="应用场景示例：">
+            <el-input
+              v-model="appInfo.example"
+              type="textarea"
+              placeholder="请输入应用场景示例"
+            ></el-input>
+          </el-form-item>
+        </el-form>
         <div class="step_action">
           <el-button type="primary" plain @click="preStep">
             上一步
@@ -56,16 +205,138 @@
 <script>
 import appBuildSteps from "@/components/app-build-steps";
 import appBuildStep from "@/components/app-build-step";
+import uploadFile from "@/components/upload_file";
+import cesTable from "@/components/table-um";
 
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
+    uploadFile,
+    cesTable,
   },
   data: () => ({
     step: 0,
+    mirrorList: [],
+    mirrorInfo: {
+      name: "",
+      version: "",
+      image: "",
+    },
+    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: "",
+    },
+    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);
+    },
+    sunmitMirror() {
+      console.log(this.mirrorInfo.image);
+    },
+    deleteItem(item) {
+      console.log(item);
+    },
+    getcoverList(values) {
+      console.log(values);
+    },
     preStep() {
       this.step--;
     },
@@ -81,8 +352,21 @@ export default {
 
 <style scoped>
 .app_build-container {
-  max-width: 1200px;
-  margin: -157px auto 20px;
+  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;
@@ -91,21 +375,48 @@ export default {
 }
 .step_action {
   text-align: right;
+  margin-top: 45px;
 }
-.step_action > .el-button {
-  min-width: 124px;
-  height: 44px;
+.step_action .el-button:not(:last-child) {
   margin-right: 30px;
 }
-.step_action > .el-button--primary {
-  color: #fff;
-  background-color: #0f2683;
-  border-color: #0f2683;
+.mirror_info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 12px;
+  line-height: 20px;
+  color: #8890a7;
+  margin-left: 15px;
 }
-.step_action > .el-button--primary.is-plain {
-  color: #0f2683;
-  background-color: #e1e4fb;
-  border-color: #e1e4fb;
+.mirror_info > img {
+  margin-right: 10px;
+  width: 12px;
+}
+.mirror_ation {
+  margin-top: 45px;
+}
+.form_line {
+  border: 1px solid #f4f7fc;
+  margin: 30px 0 24px;
+}
+.description_info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 20px;
+  border-radius: 10px;
+  background-color: #f8f9fd;
+  margin-bottom: 15px;
+}
+.description_info > * {
+  font-size: 12px;
+  color: #8890a7;
+  line-height: 25px;
+}
+.description_info > i {
+  font-size: 14px;
+  margin-right: 10px;
 }
 </style>
 
@@ -123,4 +434,37 @@ export default {
   .el-breadcrumb__inner {
   color: #b4c0f5;
 }
+.app_build-container .step_form {
+  max-width: 970px;
+  margin-top: 20px;
+}
+.app_build-container .step_form .el-form-item {
+  margin: 0 10px 24px;
+}
+.app_build-container .step_form .el-form-item .el-select {
+  width: 100%;
+}
+.app_build-container .step_form .el-form-item__label {
+  padding-bottom: 8px;
+  padding-left: 15px;
+  line-height: 25px;
+  color: #58617a;
+}
+.mirror_list .el-table th > .cell {
+  color: #1a2236;
+}
+.mirror_list .el-table td,
+.mirror_list .el-table th.is-leaf {
+  border: none !important;
+  line-height: 23px;
+}
+.mirror_list .el-table::before {
+  display: none;
+}
+.mirror_list .el-table {
+  width: 100%;
+}
+.mirror_list .el-table__row:nth-child(odd) td {
+  background-color: #f8f9fd;
+}
 </style>
-- 
2.26.0