一键部署信息填写

src/pages/workbench/yygl/deployment.vue

@@ -23,24 +23,28 @@
           ref="step1_form"
           class="step_form"
           label-position="top"
-          :model="image_info"
+          :model="baseInfoForm"
           :rules="image_rules"
         >
-          <el-form-item label="镜像名称：" prop="image_name">
-            <el-input
-              v-model="image_info.image_name"
-              placeholder="请输入镜像名称"
-            ></el-input>
+          <el-form-item label="工作区域：" prop="namespace">
+             <el-select v-model="baseInfoForm.namespace" placeholder="请选择工作区域">
+              <el-option
+                v-for="item in area_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
           </el-form-item>
-          <el-form-item label="版本号：" prop="tag">
+          <el-form-item label="应用部署名称：" prop="name">
             <el-input
-              v-model="image_info.tag"
-              placeholder="请输入版本号"
+              v-model="baseInfoForm.name"
+              placeholder="请输入应用部署名称"
             ></el-input>
           </el-form-item>
         </el-form>
         <div class="apass_button step_action">
-          <el-button type="primary" @click="nextStep">
+          <el-button type="primary" @click="sub_yy_form('step1_form')">
             下一步
           </el-button>
         </div>
@@ -51,14 +55,78 @@
         :active-icon="require('@/assets/imgs/progress_ic_yingyongpz.png')"
       >
         <!-- content  -->
-        <div class="apass_button step_action">
+        <el-form
+          v-show="!senior_flag"
+          ref="step2_form"
+          class="step_form"
+          label-position="top"
+          :model="app_set"
+          :rules="app_set_rules"
+        >
+        <el-form-item label="标题：" prop="title">
+            <el-input
+              v-model="app_set.title"
+              placeholder="请输入标题"
+            ></el-input>
+          </el-form-item>
+
+        <el-form-item label="镜像版本：" prop="vision">
+         <div :class="{'select_box':true,'is_select':app_set.vision==vision}" v-for="vision in vision_arr" :key="vision" @click="app_set.vision=vision">{{vision}}</div>
+        </el-form-item>
+
+        <el-form-item label="资源限制-内存：" prop="memory" class="limitsd">
+          <el-input
+              type='number'
+              class="limitinput"
+              v-model="app_set.memory"
+              placeholder="请输入内存"
+            ></el-input>
+            <el-select v-model="app_set.memory_type" class="timeslect" placeholder="请选择内存">
+              <el-option
+                v-for="item in memory_arr"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </el-form-item>
+
+        <el-form-item label="资源限制-CPU：" prop="cpu">
+          <el-input
+              type="number"
+              v-model="app_set.cpu"
+              placeholder="请输入标题"
+            >
+              <template slot="append">M</template>
+            </el-input>
+        </el-form-item>
+
+        <el-form-item label="是否监控：" prop="watch">
+          <div class="openbgc" @click="openstart" :style="!app_set.watch?{backgroundImage:'url('+require('@/assets/imgs/btn_off_hov.png')+')'}:{}"></div>
+        </el-form-item>
+        <el-form-item label="储存容量：" prop="save_memory">
+          <div :class="{'select_box':true,'is_select':app_set.save_memory==save}" v-for="save in save_arr" :key="save" @click="app_set.save_memory=save">{{save}}</div>
+        </el-form-item>
+        </el-form>
+        <div class="senior_box" @click="senior_flag=true" v-if="!senior_flag">高级配置</div>
+        <div class="apass_button step_action" v-if="!senior_flag">
           <el-button type="primary" plain @click="preStep">
             上一步
           </el-button>
-          <el-button type="primary" @click="nextStep">
+          <el-button type="primary" @click="sub_yy_form('step2_form')">
             下一步
           </el-button>
         </div>
+        <p v-if="senior_flag" style="color: #58617a;font-size: 14px;margin-bottom:10px;margin-top:30px;">高级配置：</p>
+        <v-apaas-code  v-show="senior_flag" :datas="app_set.code"></v-apaas-code>
+        <div class="apass_button step_action" v-if="senior_flag">
+          <el-button type="primary" plain @click="deal_code(0)">
+            取消
+          </el-button>
+          <el-button type="primary" @click="deal_code(1)">
+            保存
+          </el-button>
+        </div>
       </app-build-step>
       <app-build-step
         title="应用部署"
@@ -90,34 +158,132 @@
 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";
-
+import codes from "@/components/codes";
+var checkNumber = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('不能为空'));
+        }
+        setTimeout(() => {
+          if (new RegExp("^[1-9][0-9]*$").test(value)) {
+            callback();
+          } else {
+            callback(new Error('请输入正整数'))
+          }
+        });
+      };
+var checkName = (rule, value, callback)=>{
+  if (new RegExp("^[a-z]([0-9]||[a-z]||-)*$").test(value)) {
+    callback();
+  } else {
+    callback(new Error('小写字母开头,可以由小写字母、数字、- 组成'))
+  }
+}
 export default {
   components: {
     appBuildSteps,
     appBuildStep,
     apassDialog,
+    "v-apaas-code": codes,
   },
   data: () => ({
     step: 0,
+    senior_flag:false,
+    begin_code:'',
     dialogInfo: {
       title: "",
       msg: "",
       submit: null,
     },
-    image_info: {
-      image_name: "",
-      tag: "",
-      file: "",
+    baseInfoForm: {
+      namespace: "",
+      name: "",
     },
+    app_set:{
+      title:'',
+      vision:'',
+      memory:'',
+      memory_type:1,
+      cpu:'',
+      watch:0,
+      save_memory:'',
+      code:''
+    },
+    area_options:[
+      {
+        name:'12312',
+        value:1
+      }
+    ],
+    vision_arr:['1.0.1','10.1.2','2.2.3'],
+    save_arr:['2GI','4GI','8GI','16GI','32GI','64GI','128GI','256GI','512GI'],
+    memory_arr:[
+      {
+        value:1,
+        label:'MI',
+      },
+      {
+        value:2,
+        label:'GI',
+      },
+    ],
     image_rules: {
-      image_name: [
-        { required: true, message: "请输入镜像名称", trigger: "blur" },
+      namespace: [
+        { required: true, message: "请选择工作区域", trigger: "change" },
+      ],
+      name: [
+        { required: true, message: "请输入应用部署名称", trigger: "blur" },
+        { validator: checkName, trigger: 'blur' }
+      ],
+    },
+    app_set_rules: {
+      title: [
+        { required: true, message: "请输入标题", trigger: "blur" },
+      ],
+      memory: [
+        { required: true, message: "请输入内存", trigger: "blur" },
+        { validator: checkNumber, trigger: 'blur' }
+      ],
+      cpu: [
+        { required: true, message: "请输入cpu", trigger: "blur" },
+        { validator: checkNumber, trigger: 'blur' }
       ],
-      tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
-      file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
+      vision: [{ required: true, message: "请选择版本号", trigger: "change" }],
+      save_memory: [{ required: true, message: "请选择存储容量", trigger: "change" }],
     },
   }),
   methods: {
+    get_step_info(){
+      this.$http
+        .get(`/apaas/hubApi/market/step/${this.$route.params.app_id}`)
+        .then((response) => {
+          console.log(JSON.parse(response.data.data));
+        })
+    },
+    deal_code(n){
+      if(n){
+        this.begin_code = this.app_set.code
+      }else{
+        this.app_set.code = this.begin_code
+      }
+      this.senior_flag = false
+    },
+    sub_yy_form(formName){
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.nextStep()
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+    },
+    openstart(){
+      if(this.app_set.watch){
+        this.app_set.watch = 0
+      }else{
+        this.app_set.watch = 1
+      }
+    },
     preStep() {
       this.step--;
     },
@@ -125,13 +291,20 @@ export default {
       this.step++;
     },
   },
-  mounted() {
-
+  created() {
+    this.get_step_info()
   },
 };
 </script>
 
 <style scoped>
+.openbgc{
+  width: 56px;
+	height: 23px;
+  background-image: url('~@/assets/imgs/btn_on_hov.png');
+  background-size:contain;
+  cursor: pointer;
+}
 .deployment-container {
   margin: 20px 40px;
 }
@@ -147,9 +320,60 @@ export default {
 .step_action .el-button:not(:last-child) {
   margin-right: 30px;
 }
+.select_box{
+  height: 35px;
+  width: 80px;
+  line-height: 35px;
+	background-color: #f7f8f9;
+	border-radius: 6px;
+  font-size: 14px;
+  color: #6573ae;
+  text-align: center;
+  float: left;
+  margin-right: 10px;
+  cursor: pointer;
+}
+.is_select{
+  background-color: #515fe7;
+  color: #f8f9fd;
+}
+.limitsd{
+  position: relative;
+}
+.deployment-container .step_form .el-form-item.limitsd .timeslect{
+  position: absolute;
+  width: 100px;
+  right: 0;
+  top:0;
+}
+.senior_box{
+  width: 124px;
+	height: 44px;
+	background-color: #0f2683;
+	border-radius: 8px;
+  font-size: 16px;
+  color: #f8f9fd;
+  line-height: 44px;
+  text-align: center;
+  cursor: pointer;
+}
+
 </style>
 
 <style>
+.deployment-container .step_form .el-form-item .el-input-group__append, .el-input-group__prepend{
+  border-radius: 0 8px 8px 0;
+}
+.limitsd .timeslect .el-input__inner{
+  width: 100px;
+  border-radius: 0 8px 8px 0;
+  background-color: rgba(15, 38, 131, 1);
+  color: rgba(248, 249, 253, 1);
+  border: 0;
+}
+.limitsd .limitinput .el-input__inner{
+  width: 860px;
+}
 .deployment-container .avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;