小区批量删除

src/views/modules/base/community/communityTable.vue

@@ -98,12 +98,18 @@
     </div>
 
     <div class="div_table">
-      <el-table :data="tableData"
+      <el-table ref="ref_table"
+                :data="tableData"
                 border
                 :height="tableHeight"
                 v-loading="tableLoading"
                 :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
-                style="width: 100%">
+                style="width: 100%"
+                @select-all="selectAll"
+                @selection-change="selectionChange">
+        <el-table-column type="selection"
+                         width="55">
+        </el-table-column>
         <el-table-column prop="neighborHoodName"
                          label="小区名称"
                          min-width="100">
@@ -162,6 +168,16 @@
                        :total="total">
         </el-pagination>
       </div>
+
+      <div class="div_del">
+        <el-checkbox :indeterminate="isIndeterminate"
+                     v-model="selAllFlag"
+                     @change="handleSelectAll">全选</el-checkbox>
+        <el-button style="margin-left:15px"
+                   type="red"
+                   size="small"
+                   @click="deleteBatch">删除</el-button>
+      </div>
     </div>
 
     <!-- 修改弹出框 -->
@@ -197,11 +213,14 @@ export default {
       pageSize: 20,
       pageNo: 0,
       tableLoading: true,
+      selAllFlag: false,
+      isIndeterminate: false,//复选框的不确定状态
 
       agencyObj: {},//树所选的组织对象
       ownerName: '',
       ownerPhone: '',
       tableData: [],
+      selection: [],
 
       //form相关
       formShow: false,
@@ -231,7 +250,61 @@ export default {
     ...mapGetters(['clientHeight'])
   },
   methods: {
+    handleSelectAll (selectAllFlag) {
+      this.$refs.ref_table.clearSelection();
+      if (selectAllFlag) {
+        this.tableData.forEach(row => {
+          this.$refs.ref_table.toggleRowSelection(row);
+        });
+      }
+    },
+    deleteBatch () {
+      if (this.selection.length > 0) {
+        this.$confirm("确认删除选择的小区?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.deleteCommunityBatch()
+          })
+          .catch(err => {
+            if (err == "cancel") {
+              // this.$message({
+              //   type: "info",
+              //   message: "已取消删除"
+              // });
+            }
+
+          });
+      } else {
+        this.$message.warning('请先选择要删除的小区')
+      }
+    },
+    selectAll (selection) {
+      this.selection = selection
 
+      if (selection.length > 0) {
+        this.selAllFlag = true
+      } else {
+        this.selAllFlag = false
+      }
+
+    },
+    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
+      }
+    },
     handleSearch () {
       this.loadTable()
     },
@@ -326,6 +399,26 @@ export default {
         });
     },
 
+    async deleteCommunityBatch () {
+      const url = "/gov/org/neighborhood/neighborhooddel"
+
+      let params = {
+        neighborHoodId: row.neighborHoodId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "删除成功"
+        });
+        this.$emit('refreshTree')
+        this.loadTable()
+      } else {
+        this.$message.error(msg)
+      }
+    },
     async deleteCommunity (row) {
       const url = "/gov/org/neighborhood/neighborhooddel"
 
@@ -573,6 +666,12 @@ export default {
 
 .div_table {
   margin-top: 20px;
+  position: relative;
+}
+.div_del {
+  position: absolute;
+  left: 10px;
+  bottom: 0;
 }
 .div_search {
   display: flex;