增加全选功能

src/apps/AppBroadcast/selectEquipment.vue

@@ -10,7 +10,7 @@
           </AiAreaPicker>
         </div>
         <u-search v-model="keyword" :clearabled="true" placeholder="请输入设备名称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666"
-          height="58" @search="getList" @clear="handerClear"></u-search>
+                  height="58" @search="getList" @clear="handerClear"></u-search>
       </div>
     </AiTopFixed>
     <div class="record">
@@ -29,6 +29,11 @@
     </div>
     <AiEmpty v-if="!list.length"></AiEmpty>
     <div class="btn">
+      <li class="selectAll fill" @click="handleSelectAll">
+        <img v-if="selectAll" src="./img/select-blue.png"/>
+        <img v-else src="./img/cir.png"/>
+        <span>全选</span>
+      </li>
       <div @click="confirm">确定选择</div>
     </div>
   </div>
@@ -45,7 +50,8 @@ export default {
       areaName: '',
       keyword: '',
       list: [],
-      selectList: []
+      selectList: [],
+      selectAll: false
     }
   },
   computed: {...mapState(['user'])},
@@ -79,6 +85,10 @@ export default {
     checkClick(index) {
       this.list[index].isCheck = !this.list[index].isCheck
     },
+    handleSelectAll() {
+      this.selectAll = !this.selectAll
+      this.list.map(e => e.isCheck = this.selectAll)
+    },
     confirm() {
       this.selectList = []
       this.list.map(item => {
@@ -201,6 +211,7 @@ export default {
     border-top: 1px solid #ddd;
     padding: 24px 32px 24px 0;
     box-sizing: border-box;
+    display: flex;
 
     div {
       width: 192px;
@@ -213,6 +224,19 @@ export default {
       font-size: 32px;
       float: right;
     }
+
+    .selectAll {
+      display: flex;
+      align-items: center;
+      padding-left: 32px;
+      height: 100%;
+
+      & > img {
+        width: 44px;
+        height: 44px;
+        margin-right: 16px;
+      }
+    }
   }
 }
 </style>