Przeglądaj źródła

feat(user): 添加用户禁用/启用功能并优化用户列表显示- 在用户列表中添加禁用/启用按钮,实现用户状态切换
- 修正用户姓名字段显示错误,改为正确显示真实姓名- 在用户列表中添加账号状态列,展示用户当前状态
- 优化用户详情对话框,移除不必要的确定按钮
- 更新删除用户提示信息,使其更加明确

fugui001 6 miesięcy temu
rodzic
commit
e3a00a758e

+ 9 - 0
src/api/system/business/apiUsers/types.ts

@@ -108,6 +108,15 @@ export interface UserVO {
    * 上一次登录ip
    */
   lastLoginIp: string;
+
+  /**
+   * 状态
+   */
+  statusText: string;
+  /**
+   * 真实姓名
+   */
+  realName: string;
 }
 
 export interface UserForm extends BaseEntity {

+ 47 - 5
src/views/system/business/apiUsers/index.vue

@@ -62,7 +62,7 @@
         <!--        <el-table-column type="selection" width="55" align="center" />-->
         <el-table-column label="用户id" align="center" prop="id" v-if="true" />
         <el-table-column label="登录名称" align="center" prop="loginName" />
-        <el-table-column label="用户姓名" align="center" prop="loginName" />
+        <el-table-column label="用户姓名" align="center" prop="realName" />
         <el-table-column label="用户手机号码" align="center" prop="phone" />
         <el-table-column label="注册时间" align="center" prop="createAt" width="180">
           <template #default="scope">
@@ -79,21 +79,36 @@
         <el-table-column label="积分数" align="center" prop="" />
         <el-table-column label="门票数" align="center" prop="" />
         <el-table-column label="比赛数" align="center" prop="" />
+        <el-table-column label="账号状态" align="center" prop="statusText" />
 
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="查看" placement="top">
               <el-button link type="primary" icon="View" @click="handleUpdate(scope.row)" v-hasPermi="['business:user:edit']"></el-button>
             </el-tooltip>
-            <!--            <el-tooltip content="删除" placement="top">
+
+            <!-- 禁用/启用 按钮 -->
+            <el-tooltip :content="scope.row.status === 1 ? '禁用' : '启用'" placement="top">
+              <el-button
+                link
+                type="primary"
+                :icon="scope.row.status === 1 ? 'Lock' : 'Unlock'"
+                @click="toggleStatus(scope.row)"
+                v-hasPermi="['business:user:edit']"
+              ></el-button>
+            </el-tooltip>
+
+            <el-tooltip content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['business:user:remove']"></el-button>
-            </el-tooltip>-->
+            </el-tooltip>
+
           </template>
         </el-table-column>
       </el-table>
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
+
     <!-- 查看用户详情对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
@@ -131,7 +146,7 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <!--          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>-->
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -279,6 +294,33 @@ const handleUpdate = async (row?: UserVO) => {
   dialog.title = '查看【用户详情】';
 };
 
+const toggleStatus = (row) => {
+  const newStatus = row.status === 1 ? 0 : 1;
+  const confirmText = newStatus === 0 ? '禁用' : '启用';
+  row.status=newStatus;
+  // 弹出确认框
+  ElMessageBox.confirm(`确认要${confirmText}用户【${row.nickName || row.loginName}】吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      // 调用 API 接口更新状态
+      updateUser(row).then((response) => {
+        if (response.code === 200) {
+          ElMessage.success(confirmText + '成功');
+          // 刷新列表
+          handleQuery();
+        } else {
+          ElMessage.error('操作失败:' + response.msg);
+        }
+      });
+    })
+    .catch(() => {
+      // 取消操作
+    });
+};
+
 /** 提交按钮 */
 const submitForm = () => {
   userFormRef.value?.validate(async (valid: boolean) => {
@@ -299,7 +341,7 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: UserVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
+  await proxy?.$modal.confirm('是否确认删除【用户管理】编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
   await delUser(_ids);
   proxy?.$modal.msgSuccess('删除成功');
   await getList();