提交

web-admin/src/views/system/user/index.vue

@@ -65,11 +65,45 @@
           <div class="list-toolbar">
             <div class="list-toolbar-row">
               <div class="list-toolbar-selected">
-                <el-button class="btn-main" type="primary" @click="handleAdd">
-                  <el-icon><Plus /></el-icon>
-                  新增用户
-                </el-button>
+                已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
               </div>
+              <el-button class="btn-main" type="primary" @click="handleAdd">
+                <el-icon><Plus /></el-icon>
+                新增用户
+              </el-button>
+              <el-button
+                class="btn-ghost"
+                :disabled="selectedRows.length === 0"
+                @click="handleBatchResetPwd"
+              >
+                <el-icon><Key /></el-icon>
+                重置密码
+              </el-button>
+              <el-button
+                class="btn-ghost"
+                :disabled="selectedRows.length !== 1"
+                @click="handleToolbarView"
+              >
+                <el-icon><View /></el-icon>
+                查看
+              </el-button>
+              <el-button
+                class="btn-ghost"
+                :disabled="selectedRows.length !== 1"
+                @click="handleToolbarEdit"
+              >
+                <el-icon><Edit /></el-icon>
+                编辑
+              </el-button>
+              <el-button
+                class="btn-ghost"
+                type="danger"
+                :disabled="selectedRows.length === 0"
+                @click="handleBatchDelete"
+              >
+                <el-icon><Delete /></el-icon>
+                删除
+              </el-button>
             </div>
           </div>
 
@@ -80,8 +114,10 @@
               v-loading="loading"
               stripe
               row-key="id"
+              @selection-change="handleSelectionChange"
               @row-dblclick="handleView"
             >
+              <el-table-column type="selection" min-width="55" align="center" header-align="center" />
               <el-table-column
                 type="index"
                 label="序号"
@@ -146,22 +182,6 @@
                 align="center"
                 header-align="center"
               />
-              <el-table-column
-                label="操作"
-                min-width="400"
-                fixed="right"
-                align="center"
-                header-align="center"
-              >
-                <template #default="{ row }">
-                  <el-button class="btn-op-item" @click="handleView(row)"
-                    ><el-icon><View /></el-icon>查看</el-button
-                  >
-                  <el-button class="btn-op-item primary" @click="handleEdit(row)">编辑</el-button>
-                  <el-button class="btn-op-item" @click="handleResetPwd(row)">重置密码</el-button>
-                  <el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
-                </template>
-              </el-table-column>
             </el-table>
 
             <div class="pagination list-pager-bar">
@@ -287,7 +307,10 @@
     View,
     UserFilled,
     RefreshLeft,
-    Search
+    Search,
+    Key,
+    Edit,
+    Delete
   } from '@element-plus/icons-vue'
   import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
   import {
@@ -344,6 +367,7 @@
 
   const searchForm = reactive<{ keyword: string; status: string }>({ keyword: '', status: '' })
   const tableData = ref<Api.User.UserItem[]>([])
+  const selectedRows = ref<Api.User.UserItem[]>([])
   const loading = ref(false)
   const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
 
@@ -523,17 +547,63 @@
     }
   }
 
-  async function handleDelete(row: Api.User.UserItem) {
-    await ElMessageBox.confirm(`确定删除用户「${row.nickName}」吗？`, '提示', { type: 'warning' })
-    await fetchDeleteUser(row.id)
+  const handleSelectionChange = (rows: Api.User.UserItem[]) => {
+    selectedRows.value = rows
+  }
+
+  function requireSingleSelection(action: string): Api.User.UserItem | null {
+    if (selectedRows.value.length !== 1) {
+      ElMessage.warning(`请选择一个用户后再${action}`)
+      return null
+    }
+    return selectedRows.value[0]
+  }
+
+  function handleToolbarView() {
+    const row = requireSingleSelection('查看')
+    if (row) handleView(row)
+  }
+
+  function handleToolbarEdit() {
+    const row = requireSingleSelection('编辑')
+    if (row) handleEdit(row)
+  }
+
+  async function handleBatchDelete() {
+    const rows = selectedRows.value
+    if (!rows.length) {
+      ElMessage.warning('请至少选择一项')
+      return
+    }
+    const message =
+      rows.length === 1
+        ? `确定删除用户「${rows[0].nickName}」吗？`
+        : `确定删除选中的 ${rows.length} 个用户吗？`
+    await ElMessageBox.confirm(message, '提示', { type: 'warning' })
+    for (const row of rows) {
+      await fetchDeleteUser(row.id)
+    }
+    ElMessage.success('删除成功')
+    selectedRows.value = []
     await loadData()
   }
 
-  async function handleResetPwd(row: Api.User.UserItem) {
-    await ElMessageBox.confirm(`确定将用户「${row.nickName}」的密码重置为 111111 吗？`, '提示', {
-      type: 'warning'
-    })
-    await fetchResetPassword(row.id)
+  async function handleBatchResetPwd() {
+    const rows = selectedRows.value
+    if (!rows.length) {
+      ElMessage.warning('请至少选择一项')
+      return
+    }
+    const message =
+      rows.length === 1
+        ? `确定将用户「${rows[0].nickName}」的密码重置为 111111 吗？`
+        : `确定将选中的 ${rows.length} 个用户的密码重置为 111111 吗？`
+    await ElMessageBox.confirm(message, '提示', { type: 'warning' })
+    for (const row of rows) {
+      await fetchResetPassword(row.id)
+    }
+    ElMessage.success('密码重置成功')
+    selectedRows.value = []
   }
 
   // ---- 查看弹窗 ----