权限模块功能基本改写完成
This commit is contained in:
+112
-122
@@ -2,11 +2,15 @@
|
||||
<div class="pages user-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
部门分类
|
||||
<a-input v-model:value="departmentKeyword" placeholder="搜索部门..." allow-clear @change="handleDeptSearch">
|
||||
<template #prefix>
|
||||
<search-outlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedDeptKeys" :tree-data="departmentTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }" show-icon @select="onDeptSelect">
|
||||
<a-tree v-model:selectedKeys="selectedDeptKeys" :tree-data="filteredDepartmentTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }" showLine @select="onDeptSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
@@ -15,37 +19,42 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="search-bar">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名">
|
||||
<a-input v-model:value="searchForm.nickname" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.nickname" placeholder="请输入姓名" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
</a-button>
|
||||
<a-button @click="handleExport">
|
||||
<template #icon><export-outlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @change="handleTableChange" @refresh="loadData">
|
||||
<template #toolLeft>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增用户
|
||||
</a-button>
|
||||
</template>
|
||||
:pagination="pagination" :row-key="rowKey" @refresh="loadData"
|
||||
@paginationChange="handlePaginationChange">
|
||||
<template #avatar="{ record }">
|
||||
<a-avatar :src="record.avatar" :size="32">
|
||||
<template #icon><user-outlined /></template>
|
||||
@@ -56,12 +65,15 @@
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #department_title="{ record }">
|
||||
{{ record.department?.title }}
|
||||
</template>
|
||||
<template #roles="{ record }">
|
||||
<a-tag v-for="role in record.roles" :key="role.id" color="blue">
|
||||
{{ role.title }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #_action="{ record }">
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
@@ -86,14 +98,6 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
FolderOutlined,
|
||||
FileOutlined,
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import roleDialog from './role.vue'
|
||||
@@ -118,7 +122,9 @@ const roleDialogRef = ref(null)
|
||||
|
||||
// 部门树数据
|
||||
const departmentTree = ref([])
|
||||
const filteredDepartmentTree = ref([])
|
||||
const selectedDeptKeys = ref([])
|
||||
const departmentKeyword = ref('')
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
@@ -144,64 +150,23 @@ const pagination = reactive({
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 分页变化处理
|
||||
const handlePaginationChange = ({ page, pageSize }) => {
|
||||
pagination.current = page
|
||||
pagination.pageSize = pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'avatar',
|
||||
key: 'avatar',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
slot: 'avatar'
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'department_title',
|
||||
key: 'department_title',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
key: 'roles',
|
||||
width: 200,
|
||||
slot: 'roles'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
slot: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: '_action',
|
||||
key: '_action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
slot: '_action',
|
||||
fixed: 'right'
|
||||
}
|
||||
{ title: '头像', dataIndex: 'avatar', key: 'avatar', width: 80, align: 'center', slot: 'avatar' },
|
||||
{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
|
||||
{ title: '姓名', dataIndex: 'nickname', key: 'nickname', width: 150 },
|
||||
{ title: '部门', dataIndex: 'department_title', key: 'department_title', slot: 'department_title', width: 150 },
|
||||
{ title: '角色', dataIndex: 'roles', key: 'roles', width: 200, slot: 'roles' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 加载部门树
|
||||
@@ -210,12 +175,41 @@ const loadDepartmentTree = async () => {
|
||||
const res = await authApi.department.list.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
departmentTree.value = res.data || []
|
||||
filteredDepartmentTree.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 部门搜索
|
||||
const handleDeptSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
departmentKeyword.value = keyword
|
||||
if (!keyword) {
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
return
|
||||
}
|
||||
|
||||
// 递归过滤部门树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.title && node.title.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
|
||||
filteredDepartmentTree.value = filterTree(departmentTree.value)
|
||||
}
|
||||
|
||||
// 加载用户列表数据
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
@@ -240,9 +234,15 @@ const loadData = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 表格变化处理（排序、筛选）
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
// 如果需要处理排序或筛选，可以在这里添加逻辑
|
||||
console.log('表格变化:', { pagination, filters, sorter })
|
||||
}
|
||||
|
||||
// 部门选择事件
|
||||
const onDeptSelect = (selectedKeys) => {
|
||||
if (selectedKeys.length > 0) {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
searchForm.department_id = selectedKeys[0]
|
||||
} else {
|
||||
searchForm.department_id = null
|
||||
@@ -263,17 +263,25 @@ const handleReset = () => {
|
||||
searchForm.nickname = ''
|
||||
searchForm.department_id = null
|
||||
selectedDeptKeys.value = []
|
||||
departmentKeyword.value = ''
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 表格变化事件
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.current = pag.current
|
||||
pagination.pageSize = pag.pageSize
|
||||
// 刷新表格
|
||||
const refreshTable = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 导出数据
|
||||
const handleExport = () => {
|
||||
message.info('导出功能开发中...')
|
||||
// TODO: 实现导出功能
|
||||
// const params = { ...searchForm }
|
||||
// 调用导出API
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
@@ -309,7 +317,7 @@ const handleRole = (record) => {
|
||||
// 删除用户
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await window.$API.auth.users.delete.post({ id: record.id })
|
||||
const res = await authApi.users.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
@@ -358,12 +366,11 @@ onMounted(() => {
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body {
|
||||
@@ -379,23 +386,6 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.search-bar {
|
||||
height: 50px;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-form) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user