居民信息批量删除

src/views/modules/base/resi.vue

@@ -32,11 +32,15 @@
         </el-upload>
 
       </div>
-      <el-table :data="tableData"
+      <el-table ref="ref_table" :data="tableData"
                 v-loading="tableLoading"
                 border
                 style="width: 100%"
-                class="resi-table">
+                class="resi-table"
+                @select-all="selectAll"
+                @selection-change="selectionChange">
+        <el-table-column type="selection"
+                         width="55" />
         <el-table-column label="序号"
                          type="index"
                          align="center"
@@ -86,15 +90,27 @@
           </template>
         </el-table-column>
       </el-table>
-      <div>
+      <div class="div-flex">
-        <el-pagination @size-change="handleSizeChange"
+        <div class="div_del">
-                       @current-change="handleCurrentChange"
+          <el-checkbox :indeterminate="isIndeterminate"
-                       :current-page.sync="currentPage"
+                      v-model="selAllFlag"
-                       :page-sizes="[20, 50, 100, 200]"
+                      @change="handleSelectAll">全选</el-checkbox>
-                       :page-size="pageSize"
+          <el-button style="margin-left:15px"
-                       layout="sizes, prev, pager, next"
+                    type="danger"
-                       :total="total">
+                    size="small"
-        </el-pagination>
+                    @click="deleteBatch">删除</el-button>
+        </div>
+        <div>
+          <el-pagination @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                        :current-page.sync="currentPage"
+                        :page-sizes="[20, 50, 100, 200]"
+                        :page-size="pageSize"
+                        layout="sizes, prev, pager, next, total"
+                        :total="total">
+          </el-pagination>
+        </div>
+        
       </div>
     </el-card>
 
@@ -240,6 +256,8 @@ export default {
       btnLoading: false,
       disabled: false,
       pageLoading: false,
+      selAllFlag: false,
+      isIndeterminate: false,
       dialogEditVisible: false,
       dialogVisible: false,
       uploadUlr: window.SITE_CONFIG['apiURL'] + '/epmetuser/icresiuser/importExcel',
@@ -262,6 +280,7 @@ export default {
       formList: [],
       tableHeader: [],
       tabsList: [],
+      selection: [],
 
       defaultCategotyKey: '',
 
@@ -336,6 +355,61 @@ export default {
       const { user } = this.$store.state
       return id === user.agencyId
     },
+    selectionChange (selection) {
+      this.selection = selection
+
+      if (selection.length === this.tableData.length) {
+        this.selAllFlag = true
+        this.isIndeterminate = false
+      } else if (selection.length > 0) {
+        this.selAllFlag = false
+        this.isIndeterminate = true
+      } else {
+        this.selAllFlag = false
+        this.isIndeterminate = false
+      }
+    },
+    handleSelectAll (selectAllFlag) {
+      this.$refs.ref_table.clearSelection();
+      if (selectAllFlag) {
+        this.tableData.forEach(row => {
+          this.$refs.ref_table.toggleRowSelection(row);
+        });
+      }
+    },
+    selectAll (selection) {
+      this.selection = selection
+
+      if (selection.length > 0) {
+        this.selAllFlag = true
+      } else {
+        this.selAllFlag = false
+      }
+
+    },
+    deleteBatch () {
+      if (this.selection.length > 0) {
+        this.$confirm("删除之后无法恢复，确认删除？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.deleteresiBatch()
+          })
+          .catch(err => {
+            if (err == "cancel") {
+              // this.$message({
+              //   type: "info",
+              //   message: "已取消删除"
+              // });
+            }
+
+          });
+      } else {
+        this.$message.warning('请先选择要删除的小区')
+      }
+    },
     handleSizeChange (val) {
       console.log(`每页 ${val} 条`)
       this.pageSize = val
@@ -627,7 +701,7 @@ export default {
     handleDel (row) {
       let params = {
         formCode: 'resi_base_info',
-        icResiUserId: row.icResiUserId
+        userIds: [row.icResiUserId]
       }
       console.log('row1', row)
       this.$http
@@ -926,7 +1000,29 @@ export default {
         .catch(() => {
           return this.$message.error('网络错误')
         })
-    }
+    },
+    async deleteresiBatch () {
+      if (this.selection.length === 0) return this.$message.error('请选择之后进行操作')
+      let userIds = this.selection.map(item => item.icResiUserId)
+      let params = {
+        formCode: 'resi_base_info',
+        userIds
+      }
+      this.$http
+        .post('/epmetuser/icresiuser/delete', params)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.$message.success('删除成功')
+            this.getTableData()
+          }
+        })
+        .catch((err) => {
+          console.log('row4', err)
+          return this.$message.error('网络错误')
+        })
+    },
   }
 }
 </script>
@@ -1033,4 +1129,13 @@ export default {
   margin-top: 20px;
   text-align: center;
 }
+.div-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  .div_del {
+    margin-top: 15px;
+  }
+}
 </style>