全选

src/views/docker/deployEnv.vue

@@ -13,13 +13,14 @@
         <el-card>
           <el-button
             v-for="item in ns.repos"
-            :key="item.domain"
+            :key="item.appname"
             :type="dependant[ns.type] && dependant[ns.type].find(sys => sys.appname === item.appname) ? 'success' : ''"
             style="margin:3px"
             @click="selectSystem(item, ns.type)">
             {{ item.appname }}
           </el-button>
         </el-card>
+        <el-checkbox :indeterminate="isIndeterminate[ns.type]" v-model="checkAll[ns.type]" @change="handleCheckAllChange(checkAll[ns.type],ns.type)">全选</el-checkbox>
       </el-form-item>
     </el-form>
 
@@ -47,7 +48,9 @@ export default {
       dependant: {},
       repoNamespaces: [],
       currentTemplate: '',
-      templates: {}
+      templates: {},
+      checkAll: {},
+      isIndeterminate: {}
     }
   },
 
@@ -64,6 +67,10 @@ export default {
     getAllRepos() {
       getAppRepos().then(res => {
         this.repoNamespaces = res.data
+        this.repoNamespaces.forEach(item => {
+          this.checkAll[item.type] = false
+          this.isIndeterminate[item.type] = true
+        })
       })
     },
 
@@ -83,6 +90,12 @@ export default {
       }
     },
 
+    handleCheckAllChange(val, type) {
+      this.$set(this.dependant, type, [])
+      this.isIndeterminate[type] = false
+      if (val) this.dependant[type] = this.repoNamespaces.filter(item => item.type === type)[0].repos.concat()
+    },
+
     useTemplate() {
       const vm = this
       const t = this.templates.find(item => item.name === this.currentTemplate)

src/views/docker/envTemplate.vue

@@ -20,6 +20,7 @@
             {{ item.appname }}
           </el-button>
         </el-card>
+        <el-checkbox :indeterminate="isIndeterminate[ns.type]" v-model="checkAll[ns.type]" @change="handleCheckAllChange(checkAll[ns.type],ns.type)">全选</el-checkbox>
       </el-form-item>
     </el-form >
     <div style="float:right">
@@ -53,7 +54,8 @@ export default {
       currentTemplate: '',
       currentTemplateObj: {},
       templates: {},
-      loading: true
+      checkAll: {},
+      isIndeterminate: {}
     }
   },
 
@@ -66,7 +68,10 @@ export default {
     getAllRepos() {
       getAllRepos().then(res => {
         this.repoNamespaces = res.data
-        this.loading = false
+        this.repoNamespaces.forEach(item => {
+          this.checkAll[item.type] = false
+          this.isIndeterminate[item.type] = true
+        })
       })
     },
 
@@ -87,6 +92,12 @@ export default {
       }
     },
 
+    handleCheckAllChange(val, type) {
+      this.$set(this.dependant, type, [])
+      this.isIndeterminate[type] = false
+      if (val) this.dependant[type] = this.repoNamespaces.filter(item => item.type === type)[0].repos.concat()
+    },
+
     useTemplate() {
       const vm = this
       this.currentTemplateObj = this.templates.find(item => item.name === this.currentTemplate)