update

user_web/src/view/admin/ManageUser.vue

@@ -265,7 +265,8 @@ const handleCurrentChange = (val) => {
 const selectionChange = (res) => {
     state.value.ids = [];
     res.forEach((item) => {
-        state.value.ids.push(item.id);
+        // state.value.ids.push(item.id);
+        state.value.ids.push(item);
     });
     console.log("分页多选，更新多选的相关数据", state.value.ids);
 }
@@ -320,6 +321,39 @@ const btnDel = (res) => {
     
 }
 
+/**
+ * 弹出批量删除模态框逻辑
+ */
+const btnShowDel = () => {
+    if (state.value.ids && state.value.ids.length > 0) {
+        state.value.showDel = true
+    }
+}
+
+/**
+ * 开始批量删除处理
+ */
+const btnBatchDel = () => {
+
+    console.log(
+        "开始批量删除处理", state.value.ids
+    );
+
+    ElMessage({
+        type: 'success',
+        message: '删除成功',
+    });
+
+    // 重新查找分页数据
+    pageUpdateEvent();
+
+    // 批量选中的列表重置
+    state.value.ids = [];
+    // 隐藏模态框
+    state.value.showDel = false;
+        
+}
+
 </script>
 
 <template>
@@ -441,6 +475,23 @@ const btnDel = (res) => {
             </div>
         </el-dialog>
 
+        <!-- 用于批量删除模态框 -->
+        <el-dialog v-model="state.showDel" width="600" class="del">
+            <template #header>
+                <div style="display: flex; align-items: center">
+                    <img class="del-img" src="./assets/img/manageUser/error-line.svg" alt="" />
+                    <div class="del-name">批量删除</div>
+                </div>
+            </template>
+            <span class="delBody">是否确认删除学生信息？删除后不可恢复！</span>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="state.showDel = false">取消</el-button>
+                    <el-button type="primary" @click="btnBatchDel">删除</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
     </div>
 </template>