保留博物馆的批量操作

src/views/museum/index.vue

@@ -2,16 +2,31 @@
   <div class="app-container">
     <div class="top-bar">
       <SearchBar :config="searchConfig" @search="search" @reset="reset" />
+    </div>
+    <div class="tools">
       <PermissionButton
         perms="sys:dept:add"
         size="mini"
         type="primary"
         @click.native="handleOperation('add')"
         button
+        style="margin-right: 16px"
       >
         <i class="el-icon-plus"></i>
         添加</PermissionButton
       >
+      <!-- <PermissionButton
+        perms="sys:dept:deleted"
+        size="mini"
+        type="danger"
+        plain
+        @click.native="handleOperation('multiDelete')"
+        button
+        :disabled="multiDisabled"
+      >
+        <i class="el-icon-delete"></i>
+        批量删除</PermissionButton
+      > -->
     </div>
 
     <el-table
@@ -23,9 +38,12 @@
       stripe
       default-expand-all
       v-loading="loading"
+      @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" width="55" />
       <el-table-column type="index" width="50" label="序号" align="center">
       </el-table-column>
+
       <el-table-column
         align="center"
         prop="name"
@@ -63,16 +81,6 @@
       </el-table-column>
       <el-table-column align="center" prop="latitude" label="纬度">
       </el-table-column>
-      <!-- <el-table-column
-        align="center"
-        prop="intro"
-        label="简介"
-        show-overflow-tooltip
-      >
-        <template slot-scope="scope">
-          <span v-html="scope.row.intro"></span>
-        </template>
-      </el-table-column> -->
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
           <PermissionButton
@@ -161,6 +169,7 @@ export default {
       tableData: [],
       imgList: [],
       imgViewerVisible: false,
+      multipleSelection: [],
     };
   },
   computed: {
@@ -173,6 +182,9 @@ export default {
         }
       };
     },
+    multiDisabled() {
+      return this.multipleSelection.length === 0;
+    },
   },
   created() {
     this.loadData(true);
@@ -279,8 +291,17 @@ export default {
             this.loadData(true);
           }
           break;
+        case "multiDelete":
+          this.multiDelete();
+          break;
       }
     },
+    multiDelete() {
+      const ids = this.multipleSelection.map((item) => {
+        return item.id;
+      });
+      const request = deleteMuseum;
+    },
     async handleChangeStatus(row) {
       const callback = this.loadData;
       this.$bizCommon.changeStatus(row, editMuseum, callback);
@@ -350,6 +371,11 @@ export default {
   align-items: center;
   margin-bottom: 20px;
 }
+.tools {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
 
 .pagination {
   margin: 16px;