页面分析：用户管理页面user.vue
第一部分：脚本逻辑解析
1. 引入依赖
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import { NButton, NCheckbox, NCheckboxGroup, NForm, NFormItem, NImage, NInput, NSpace, NSwitch, NTag, NPopconfirm, NLayout, NLayoutSider, NLayoutContent, NTreeSelect } from 'naive-ui'
讲解：
-
这里使用了Vue3的Composition API和NaiveUI组件库。
-
ref是响应式数据的基本单位，用于定义可变状态。 -
onMounted是Vue生命周期钩子，用于在组件挂载后执行初始化逻辑。 -
NaiveUI组件是UI框架的核心，比如
NButton是按钮，NForm是表单。
实用技巧：
-
按需引入组件可以减少打包体积。
-
使用
import {} from 'naive-ui'的写法，避免引入整个库。
2. 定义组件和API
import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import { formatDate, renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
讲解：
-
CommonPage是一个通用页面布局组件。 -
CrudTable和CrudModal是封装好的表格和弹窗组件，遵循CRUD模式（增删改查）。 -
useCRUD是一个组合式函数，封装了CRUD逻辑。 -
api是API接口文件，定义了后端交互方法。
开发思维：
-
组件化开发：将功能拆分为独立组件，提高复用性。
-
封装CRUD逻辑：避免重复代码，集中管理操作逻辑。
3. 定义响应式变量
const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
讲解：
-
$table是对表格组件的引用，用于调用其方法（如handleSearch）。 -
queryItems存储查询条件，初始为空对象。 -
vPermission是一个指令，用于权限控制。
实用技巧：
-
使用
ref(null)初始化引用，确保类型安全。 -
指令可以复用逻辑，避免在模板中写重复的权限判断。
4. 使用CRUD Hook
const {
modalVisible,
modalTitle,
modalAction,
modalLoading,
handleSave,
modalForm,
modalFormRef,
handleEdit,
handleDelete,
handleAdd,
} = useCRUD({
name: '用户',
initForm: {},
doCreate: api.createUser,
doUpdate: api.updateUser,
doDelete: api.deleteUser,
refresh: () => $table.value?.handleSearch(),
})
讲解：
-
useCRUD是一个通用的CRUD逻辑封装，返回了一系列状态和方法。 -
modalVisible控制弹窗的显示/隐藏。 -
handleSave、handleEdit等是操作方法，直接调用API并刷新表格。
开发思维：
-
钩子复用：将通用逻辑抽象为Hook，减少重复代码。
-
状态集中管理：所有CRUD相关状态都在Hook中定义。
5. 初始化角色和部门数据
const roleOption = ref([])
const deptOption = ref([])
onMounted(() => {
$table.value?.handleSearch()
api.getRoleList({ page: 1, page_size: 9999 }).then((res) => (roleOption.value = res.data))
api.getDepts().then((res) => (deptOption.value = res.data))
})
讲解：
-
在组件挂载后，加载角色和部门数据，供表格和表单使用。
-
使用
onMounted确保DOM已渲染后再调用API。
实用技巧：
-
使用
.then()处理异步数据，确保数据加载完成后再赋值。 -
在API调用中传递大
page_size获取所有数据。
6. 定义表格列
const columns = [
{
title: '名称',
key: 'username',
width: 60,
align: 'center',
ellipsis: { tooltip: true },
},
// 其他列...
]
讲解：
-
表格列配置定义了表格的展示内容。
-
key对应数据字段，render用于自定义渲染。
实用技巧：
-
使用
ellipsis显示省略号，鼠标悬停显示完整内容。 -
自定义渲染函数（如
render）可以插入复杂组件。
第二部分：模板解析
1. 布局结构
讲解：
-
使用NaiveUI的
NLayout组件实现页面布局。 -
NLayoutSider是侧边栏，NLayoutContent是主内容区。
开发思维：
-
布局组件化：通过UI框架的布局组件快速构建页面结构。
-
分区明确：侧边栏放部门树，主内容区放用户表格。
2. 部门树
讲解：
-
NTree是树形组件，展示部门结构。 -
nodeProps定义节点点击事件，用于筛选用户。
实用技巧：
-
使用
default-expand-all展开所有节点，方便查看。 -
在
nodeProps中定义点击事件，实现树节点交互。
3. 表格组件
讲解：
-
CrudTable是封装好的表格组件，接收查询条件、列配置和数据获取函数。 -
v-model:query-items实现查询条件的双向绑定。
开发思维：
-
封装组件：将表格功能封装为独立组件，提高复用性。
-
插槽设计：通过
queryBar插槽自定义查询条件。
4. 弹窗表单
讲解：
-
CrudModal是弹窗组件，控制用户添加/编辑操作。 -
NForm是表单组件，配合validateAddUser实现表单验证。
实用技巧：
-
使用
v-model:visible控制弹窗显示/隐藏。 -
表单验证规则（如
validateAddUser）确保输入数据合法性。
第三部分：关键逻辑解析
1. 处理禁用状态
async function handleUpdateDisable(row) {
if (!row.id) return
const userStore = useUserStore()
if (userStore.userId === row.id) {
$message.error('当前登录用户不可禁用！')
return
}
// 更新逻辑...
}
讲解：
-
检查当前操作用户是否为登录用户，避免误操作。
-
使用
try-catch处理API调用，确保异常时恢复原状态。
开发思维：
-
权限控制：禁止用户禁用自己。
-
异常处理：保证UI状态与后端数据一致。
2. 树节点点击筛选
const nodeProps = ({ option }) => {
return {
onClick() {
if (lastClickedNodeId === option.id) {
$table.value?.handleSearch()
lastClickedNodeId = null
} else {
api.getUserList({ dept_id: option.id }).then((res) => {
$table.value.tableData = res.data
lastClickedNodeId = option.id
})
}
},
}
}
讲解：
-
点击树节点时，根据部门ID筛选用户。
-
使用
lastClickedNodeId防止重复点击触发请求。
实用技巧：
-
状态记忆：通过变量记录上次点击节点，避免无效请求。
-
API调用结果直接赋值给表格数据，实现快速筛选。
第四部分：开发总结
-
组件化思维：
-
将功能拆分为独立组件（如
CrudTable、CrudModal）。 -
复用通用逻辑（如
useCRUDHook）。
-
-
状态管理：
-
使用
ref定义响应式状态。 -
集中管理CRUD相关状态和逻辑。
-
-
API交互：
-
封装API调用，统一处理数据获取和更新。
-
使用
try-catch保证异常时的UI一致性。
-
-
用户体验优化：
-
表单验证确保输入合法性。
-
使用树形组件和筛选功能提升操作效率。
-
-
权限控制：
-
通过指令（如
vPermission）实现细粒度权限管理。 -
禁止用户禁用自己，避免系统异常。
-