通过数组来判断是否选中

src/api/docker.js

@@ -119,14 +119,14 @@ export function modifyIngressHost(data) {
 
 export function getNamespaceTemplate() {
   return request({
-    url: '/docker/get_namespace_template',
+    url: '/docker/get_namespace_template_new',
     method: 'get'
   })
 }
 
 export function getSystemByType() {
   return request({
-    url: '/docker/get_systems_by_type',
+    url: '/docker/get_systems_by_type_new',
     method: 'get'
   })
 }

src/views/docker/createEnv.vue

@@ -9,14 +9,14 @@
         <el-input v-model="code" placeholder="请输入"/>
       </el-form-item>
       <el-form-item label="选择模板" >
-        <el-select v-model="currentTemplate" value-key="label" style="width:100%" @change="refershTemplateSelect">
-          <el-option v-for="item in templateArray" :value="item" :label="item.label" :key="item.label" />
+        <el-select v-model="currentTemplate" value-key="preset_name" style="width:100%" @change="refershTemplateSelect">
+          <el-option v-for="item in templateArray" :value="item" :label="item.preset_name" :key="item.preset_name" />
         </el-select>
       </el-form-item>
-      <el-form-item v-for="(value,key) in system" :label="key | serviceType" :key="key">
+      <el-form-item v-for="(systemValue,systemKey) in system" :label="systemKey | upper" :key="systemKey">
         <el-card >
-          <el-button v-for="item in value" :key="item.label" :type="item.select?'success':''" style="margin:3px" @click="item.select=!item.select">
-            {{ item.label }}
+          <el-button v-for="item in systemValue" :key="item" :type="templateSystem[systemKey].includes(item) ?'success':''" style="margin:3px" @click="selectSystem(systemKey,item)">
+            {{ item }}
           </el-button>
         </el-card>
       </el-form-item>
@@ -39,6 +39,11 @@ export default {
         frontend: '前端服务'
       }
       return serviceObj[service]
+    },
+    upper: function(value) {
+      if (!value) return ''
+      value = value.toString()
+      return value[0].toUpperCase() + value.slice(1)
     }
   },
 
@@ -51,7 +56,8 @@ export default {
       code: undefined,
       templateArray: [],
       currentTemplate: undefined,
-      system: []
+      system: [],
+      templateSystem: {}
     }
   },
 
@@ -70,46 +76,41 @@ export default {
     getSystem() {
       getSystemByType().then(res => {
         this.system = res.data.data
+        for (const index in this.system) {
+          this.templateSystem[index] = []
+        }
       })
     },
 
     refershTemplateSelect(template) {
-      const keys = Object.keys(template.template)
-      for (const k of keys) {
-        for (const o of this.system[k]) {
-          if (template.template[k][o.label]) {
-            o.select = true
-          } else {
-            o.select = false
-          }
-        }
+      for (const index in template.details) {
+        this.templateSystem[index] = template.details[index]
       }
     },
 
-    fullshTemplate(template) {
-      const keys = Object.keys(template)
-      for (const k of keys) {
-        for (const o of this.systems[k]) {
-          if (template[k][o.label]) {
-            o.select = true
+    selectSystem(key, value) {
+      const temp = this.templateSystem
+      const index = this.templateSystem[key].indexOf(value)
+      this.templateSystem = {}
+      if (index >= 0) {
+        temp[key].splice(index, 1)
+        this.templateSystem = temp
       } else {
-            o.select = false
-          }
-        }
+        temp[key].push(value)
+        this.templateSystem = temp
       }
     },
 
     createData() {
-      const data = {
+      const obj = {
         code: this.code,
         namespace: this.namespace,
-        systems: this.system
+        systems: this.templateSystem
       }
-      console.log(1, data)
-      initNamespace(data).then(res => {
+      initNamespace(obj).then(res => {
         if (res.data.code === '0000') {
           this.$message({
-            message: res.data.msg,
+            message: res.data.data,
             type: 'success',
             duration: 1000
           })
@@ -122,6 +123,5 @@ export default {
       })
     }
   }
-
 }
 </script>