600 lines
12 KiB
Vue
600 lines
12 KiB
Vue
|
<!--
|
|||
|
|
页面开发示例代码
|
|||
|
|
展示项目中页面组件的编写规范和最佳实践
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
/**
|
|||
|
|
* 导入顺序规范：
|
|||
|
|
* 1. Vue 框架相关
|
|||
|
|
* 2. 第三方库
|
|||
|
|
* 3. 工具函数
|
|||
|
|
* 4. API 接口
|
|||
|
|
* 5. 状态管理
|
|||
|
|
* 6. 本地组件
|
|||
|
|
*/
|
|||
|
|
import { ref, reactive, computed, onMounted, onShow, watch } from 'vue';
|
|||
|
|
import { getUserList, getRoleList, createUser, updateUser, deleteUser, type User } from '@/api/user';
|
|||
|
|
import { useUserStore } from '@/store/user';
|
|||
|
|
import { debounce } from '@/utils/common';
|
|||
|
|
import UserForm from './components/UserForm.vue';
|
|||
|
|
|
|||
|
|
// ✅ 页面配置（使用 definePage 宏）
|
|||
|
|
definePage({
|
|||
|
|
style: {
|
|||
|
|
navigationBarTitleText: '用户管理',
|
|||
|
|
// 可以添加其他页面配置
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 响应式数据定义
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 加载状态
|
|||
|
|
const loading = ref(false);
|
|||
|
|
|
|||
|
|
// 用户列表
|
|||
|
|
const userList = ref<User[]>([]);
|
|||
|
|
|
|||
|
|
// 搜索参数
|
|||
|
|
const searchParams = reactive({
|
|||
|
|
keyword: '',
|
|||
|
|
status: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 分页参数
|
|||
|
|
const pagination = reactive({
|
|||
|
|
current: 1,
|
|||
|
|
size: 10,
|
|||
|
|
total: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 选中的用户列表
|
|||
|
|
const selectedUsers = ref<number[]>([]);
|
|||
|
|
|
|||
|
|
// 是否显示表单弹窗
|
|||
|
|
const showUserForm = ref(false);
|
|||
|
|
|
|||
|
|
// 表单模式（add/edit）
|
|||
|
|
const formMode = ref<'add' | 'edit'>('add');
|
|||
|
|
|
|||
|
|
// 当前编辑的用户
|
|||
|
|
const currentUser = ref<User | null>(null);
|
|||
|
|
|
|||
|
|
// 角色列表（用于用户表单）
|
|||
|
|
const roleList = ref([]);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 计算属性
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 表格选中状态
|
|||
|
|
const isAllSelected = computed(() => {
|
|||
|
|
return userList.value.length > 0 && selectedUsers.value.length === userList.value.length;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isIndeterminate = computed(() => {
|
|||
|
|
return selectedUsers.value.length > 0 && selectedUsers.value.length < userList.value.length;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 方法定义
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// ✅ 初始化数据
|
|||
|
|
/**
|
|||
|
|
* 初始化页面数据
|
|||
|
|
*/
|
|||
|
|
const initData = async () => {
|
|||
|
|
await Promise.all([getUserData(), getRoleData()]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 获取用户列表
|
|||
|
|
/**
|
|||
|
|
* 获取用户列表数据
|
|||
|
|
*/
|
|||
|
|
const getUserData = async () => {
|
|||
|
|
loading.value = true;
|
|||
|
|
try {
|
|||
|
|
const result = await getUserList({
|
|||
|
|
...searchParams,
|
|||
|
|
page: pagination.current,
|
|||
|
|
size: pagination.size,
|
|||
|
|
});
|
|||
|
|
userList.value = result.data;
|
|||
|
|
pagination.total = result.total;
|
|||
|
|
// 清空选中状态
|
|||
|
|
selectedUsers.value = [];
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取用户列表失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '获取数据失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 获取角色列表
|
|||
|
|
/**
|
|||
|
|
* 获取角色列表（用于用户表单）
|
|||
|
|
*/
|
|||
|
|
const getRoleData = async () => {
|
|||
|
|
try {
|
|||
|
|
const result = await getRoleList();
|
|||
|
|
roleList.value = result;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取角色列表失败:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 防抖搜索
|
|||
|
|
/**
|
|||
|
|
* 防抖搜索处理
|
|||
|
|
*/
|
|||
|
|
const handleSearch = debounce(() => {
|
|||
|
|
pagination.current = 1; // 重置页码
|
|||
|
|
getUserData();
|
|||
|
|
}, 500);
|
|||
|
|
|
|||
|
|
// ✅ 搜索框输入
|
|||
|
|
/**
|
|||
|
|
* 搜索框输入处理
|
|||
|
|
* @param value 输入值
|
|||
|
|
*/
|
|||
|
|
const handleSearchInput = (value: string) => {
|
|||
|
|
searchParams.keyword = value;
|
|||
|
|
handleSearch();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 清空搜索
|
|||
|
|
/**
|
|||
|
|
* 清空搜索条件
|
|||
|
|
*/
|
|||
|
|
const handleSearchClear = () => {
|
|||
|
|
searchParams.keyword = '';
|
|||
|
|
handleSearch();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 分页改变
|
|||
|
|
/**
|
|||
|
|
* 分页改变处理
|
|||
|
|
* @param page 页码
|
|||
|
|
*/
|
|||
|
|
const handlePageChange = (page: number) => {
|
|||
|
|
pagination.current = page;
|
|||
|
|
getUserData();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 添加用户
|
|||
|
|
/**
|
|||
|
|
* 打开添加用户弹窗
|
|||
|
|
*/
|
|||
|
|
const handleAddUser = () => {
|
|||
|
|
formMode.value = 'add';
|
|||
|
|
currentUser.value = null;
|
|||
|
|
showUserForm.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 编辑用户
|
|||
|
|
/**
|
|||
|
|
* 打开编辑用户弹窗
|
|||
|
|
* @param user 用户信息
|
|||
|
|
*/
|
|||
|
|
const handleEditUser = (user: User) => {
|
|||
|
|
formMode.value = 'edit';
|
|||
|
|
currentUser.value = { ...user };
|
|||
|
|
showUserForm.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 删除用户
|
|||
|
|
/**
|
|||
|
|
* 删除用户确认
|
|||
|
|
* @param user 用户信息
|
|||
|
|
*/
|
|||
|
|
const handleDeleteUser = (user: User) => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认删除',
|
|||
|
|
content: `确定要删除用户"${user.nickname}"吗？`,
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
await confirmDelete(user.id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 确认删除
|
|||
|
|
/**
|
|||
|
|
* 确认删除用户
|
|||
|
|
* @param id 用户ID
|
|||
|
|
*/
|
|||
|
|
const confirmDelete = async (id: number) => {
|
|||
|
|
try {
|
|||
|
|
await deleteUser(id);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '删除成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
});
|
|||
|
|
// 刷新列表
|
|||
|
|
getUserData();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('删除用户失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '删除失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 批量删除
|
|||
|
|
/**
|
|||
|
|
* 批量删除用户
|
|||
|
|
*/
|
|||
|
|
const handleBatchDelete = () => {
|
|||
|
|
if (selectedUsers.value.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择要删除的用户',
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认删除',
|
|||
|
|
content: `确定要删除选中的 ${selectedUsers.value.length} 个用户吗？`,
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
try {
|
|||
|
|
// 这里应该调用批量删除 API
|
|||
|
|
// await batchDeleteUsers(selectedUsers.value);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '批量删除成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
});
|
|||
|
|
getUserData();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('批量删除失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '删除失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 全选/取消全选
|
|||
|
|
/**
|
|||
|
|
* 表格全选切换
|
|||
|
|
* @param checked 是否选中
|
|||
|
|
*/
|
|||
|
|
const handleSelectAll = (checked: boolean) => {
|
|||
|
|
if (checked) {
|
|||
|
|
selectedUsers.value = userList.value.map((user) => user.id);
|
|||
|
|
} else {
|
|||
|
|
selectedUsers.value = [];
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 单选切换
|
|||
|
|
/**
|
|||
|
|
* 单个用户选择切换
|
|||
|
|
* @param user 用户信息
|
|||
|
|
*/
|
|||
|
|
const handleSelectItem = (user: User) => {
|
|||
|
|
const index = selectedUsers.value.indexOf(user.id);
|
|||
|
|
if (index === -1) {
|
|||
|
|
selectedUsers.value.push(user.id);
|
|||
|
|
} else {
|
|||
|
|
selectedUsers.value.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 表单提交成功
|
|||
|
|
/**
|
|||
|
|
* 用户表单提交成功回调
|
|||
|
|
*/
|
|||
|
|
const handleFormSuccess = () => {
|
|||
|
|
showUserForm.value = false;
|
|||
|
|
currentUser.value = null;
|
|||
|
|
// 刷新列表
|
|||
|
|
getUserData();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ✅ 状态切换
|
|||
|
|
/**
|
|||
|
|
* 切换用户状态
|
|||
|
|
* @param user 用户信息
|
|||
|
|
*/
|
|||
|
|
const handleToggleStatus = async (user: User) => {
|
|||
|
|
try {
|
|||
|
|
await updateUser({
|
|||
|
|
id: user.id,
|
|||
|
|
status: user.status === 0 ? 1 : 0,
|
|||
|
|
});
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '状态更新成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
});
|
|||
|
|
// 刷新列表
|
|||
|
|
getUserData();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('更新状态失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '操作失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期钩子
|
|||
|
|
*/
|
|||
|
|
onMounted(() => {
|
|||
|
|
initData();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onShow(() => {
|
|||
|
|
// 页面显示时刷新数据（可选）
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="user-manage-page">
|
|||
|
|
<!-- ✅ 搜索栏 -->
|
|||
|
|
<view class="search-bar">
|
|||
|
|
<view class="search-input">
|
|||
|
|
<input
|
|||
|
|
v-model="searchParams.keyword"
|
|||
|
|
placeholder="请输入用户名或昵称"
|
|||
|
|
@input="handleSearchInput"
|
|||
|
|
@clear="handleSearchClear"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<picker
|
|||
|
|
:value="searchParams.status"
|
|||
|
|
@change="handleStatusChange"
|
|||
|
|
:range="[{label:'全部', value:''}, {label:'正常', value:0}, {label:'禁用', value:1}]"
|
|||
|
|
range-key="label"
|
|||
|
|
>
|
|||
|
|
<view class="status-picker">
|
|||
|
|
<text>{{ searchParams.status === '' ? '全部' : searchParams.status === 0 ? '正常' : '禁用' }}</text>
|
|||
|
|
<text class="arrow">▼</text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 操作栏 -->
|
|||
|
|
<view class="action-bar">
|
|||
|
|
<button class="add-btn" @click="handleAddUser">添加用户</button>
|
|||
|
|
<button
|
|||
|
|
class="delete-btn"
|
|||
|
|
:disabled="selectedUsers.length === 0"
|
|||
|
|
@click="handleBatchDelete"
|
|||
|
|
>
|
|||
|
|
批量删除 ({{ selectedUsers.length }})
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 用户表格 -->
|
|||
|
|
<view class="user-table">
|
|||
|
|
<view class="table-header">
|
|||
|
|
<checkbox
|
|||
|
|
:checked="isAllSelected"
|
|||
|
|
:indeterminate="isIndeterminate"
|
|||
|
|
@tap="handleSelectAll"
|
|||
|
|
/>
|
|||
|
|
<text class="th">用户名</text>
|
|||
|
|
<text class="th">昵称</text>
|
|||
|
|
<text class="th">状态</text>
|
|||
|
|
<text class="th">操作</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="table-body" v-if="!loading && userList.length > 0">
|
|||
|
|
<view
|
|||
|
|
v-for="user in userList"
|
|||
|
|
:key="user.id"
|
|||
|
|
class="table-row"
|
|||
|
|
>
|
|||
|
|
<checkbox
|
|||
|
|
:checked="selectedUsers.includes(user.id)"
|
|||
|
|
@tap="handleSelectItem(user)"
|
|||
|
|
/>
|
|||
|
|
<text class="td">{{ user.username }}</text>
|
|||
|
|
<text class="td">{{ user.nickname }}</text>
|
|||
|
|
<view class="td">
|
|||
|
|
<text
|
|||
|
|
class="status-badge"
|
|||
|
|
:class="{ 'status-active': user.status === 0 }"
|
|||
|
|
@tap="handleToggleStatus(user)"
|
|||
|
|
>
|
|||
|
|
{{ user.status === 0 ? '正常' : '禁用' }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="td action-buttons">
|
|||
|
|
<button class="edit-btn" @tap="handleEditUser(user)">编辑</button>
|
|||
|
|
<button class="delete-btn" @tap="handleDeleteUser(user)">删除</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 加载中 -->
|
|||
|
|
<view class="loading-container" v-if="loading">
|
|||
|
|
<text>加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 空数据 -->
|
|||
|
|
<view class="empty-container" v-if="!loading && userList.length === 0">
|
|||
|
|
<text>暂无数据</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 分页 -->
|
|||
|
|
<view class="pagination" v-if="pagination.total > 0">
|
|||
|
|
<text>共 {{ pagination.total }} 条记录</text>
|
|||
|
|
<!-- 这里可以使用 uni-app 的分页组件 -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- ✅ 用户表单弹窗 -->
|
|||
|
|
<user-form
|
|||
|
|
v-model="showUserForm"
|
|||
|
|
:mode="formMode"
|
|||
|
|
:user="currentUser"
|
|||
|
|
:role-list="roleList"
|
|||
|
|
@success="handleFormSuccess"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.user-manage-page {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 搜索栏 */
|
|||
|
|
.search-bar {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.search-input {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-picker {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
.arrow {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 操作栏 */
|
|||
|
|
.action-bar {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.add-btn,
|
|||
|
|
.delete-btn {
|
|||
|
|
padding: 20rpx 40rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-btn {
|
|||
|
|
background: #4a90ff;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
background: #f56c6c;
|
|||
|
|
color: white;
|
|||
|
|
|
|||
|
|
&[disabled] {
|
|||
|
|
background: #ccc;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 表格 */
|
|||
|
|
.user-table {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
font-weight: 600;
|
|||
|
|
|
|||
|
|
.th {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.td {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-badge {
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
background: #f56c6c;
|
|||
|
|
color: white;
|
|||
|
|
|
|||
|
|
&.status-active {
|
|||
|
|
background: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
|
|||
|
|
&.edit-btn {
|
|||
|
|
background: #4a90ff;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.delete-btn {
|
|||
|
|
background: #f56c6c;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 空状态 */
|
|||
|
|
.loading-container,
|
|||
|
|
.empty-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 100rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 分页 */
|
|||
|
|
.pagination {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
</style>
|