molong/vueadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
龙渊
2026-01-22 10:13:43 +08:00
parent 155ec5c986
commit 1a3f3ecd82
10 changed files with 649 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/auth/user/index.vue
+387 -199
View File
@@ -1,218 +1,406 @@
<template>
<el-container>
<el-aside width="200px" v-loading="showGrouploading">
<el-container>
<el-header>
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
</el-header>
<el-main class="nopadding">
<el-tree ref="group" class="menu" node-key="id" :data="group" :props="{label: 'title'}" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
</el-main>
</el-container>
</el-aside>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
<el-button type="primary" plain :disabled="selection.length!=1" @click="roleSet">分配角色</el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.name" placeholder="登录账号 / 姓名" clearable></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" stripe remoteSort remoteFilter>
<el-table-column type="selection" width="50"></el-table-column>
<template #username="scope">
<div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
<el-avatar :src="scope.row.avatar" shape="square" :size="50"></el-avatar>
<div style="display: flex; flex-direction: column;">
<span>{{ scope.row.username }}</span>
<span>{{ scope.row.nickname }}</span>
</div>
</div>
<div class="pages user-page">
<div class="left-box">
<div class="header">
部门分类
</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">
<template #icon="{ dataRef }">
<folder-outlined v-if="dataRef.children" />
<file-outlined v-else />
</template>
<template #roleName="scope">
<el-tag v-for="item in scope.row?.roles" :key="item.id">{{item.title}}</el-tag>
</a-tree>
</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>
<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>
<template #department_name="scope">
{{scope.row.department?.title}}
<template #avatar="{ record }">
<a-avatar :src="record.avatar" :size="32">
<template #icon><user-outlined /></template>
</a-avatar>
</template>
<template #operation="scope">
<el-button-group>
<el-button type="success" @click="table_show(scope.row, scope.$index)">查看</el-button>
<el-button type="primary" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</el-button-group>
<template #status="{ record }">
<a-tag :color="record.status === 1 ? 'success' : 'error'">
{{ record.status === 1 ? '正常' : '禁用' }}
</a-tag>
</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 }">
<a-space>
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
<a-button type="link" size="small" @click="handleRole(record)">角色</a-button>
<a-popconfirm title="确定删除该用户吗？" @confirm="handleDelete(record)">
<a-button type="link" size="small" danger>删除</a-button>
</a-popconfirm>
</a-space>
</template>
</scTable>
</el-main>
</el-container>
</el-container>
</div>
</div>
</div>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
<role-dialog v-if="dialog.role" ref="roleDialog" @success="handleSuccess" @closed="dialog.role=false"></role-dialog>
<!-- 新增/编辑用户弹窗 -->
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
<!-- 角色设置弹窗 -->
<role-dialog v-if="dialog.role" ref="roleDialogRef" @success="handleRoleSuccess" @closed="dialog.role = false" />
</template>
<script>
import saveDialog from './save'
import roleDialog from './role'
<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'
import authApi from '@/api/auth'
export default {
name: 'auth.user',
components: {
saveDialog,
roleDialog
defineOptions({
name: 'authUser'
})
// 表格引用
const tableRef = ref(null)
// 对话框状态
const dialog = reactive({
save: false,
role: false
})
// 弹窗引用
const saveDialogRef = ref(null)
const roleDialogRef = ref(null)
// 部门树数据
const departmentTree = ref([])
const selectedDeptKeys = ref([])
// 搜索表单
const searchForm = reactive({
username: '',
nickname: '',
department_id: null
})
// 表格数据
const tableData = ref([])
const loading = ref(false)
// 分页配置
const pagination = reactive({
current: 1,
pageSize: 20,
total: 0,
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`,
pageSizeOptions: ['20', '50', '100', '200']
})
// 行key
const rowKey = 'id'
// 表格列配置
const columns = [
{
title: '头像',
dataIndex: 'avatar',
key: 'avatar',
width: 80,
align: 'center',
slot: 'avatar'
},
data() {
return {
dialog: {
save: false
},
showGrouploading: false,
groupFilterText: '',
group: [],
list: {
apiObj: this.$API.auth.users.list,
column: [
{prop: 'uid', label: 'UID', width: '80'},
{prop: 'username', label: '登录账号', width: '220'},
{prop: 'mobile', label: '手机号码', width: '120'},
{prop: 'email', label: '邮箱', width: '160'},
{prop: 'department_name', label: '所属部门', width: '120'},
{prop: 'roleName', label: '所属角色', width:'120'},
{prop: 'created_at', label: '加入时间', width:'180'},
{prop: 'last_login_at', label: '上次登录时间', width:'180'},
{prop: 'operation', label: '操作', width:'160', fixed: 'right'}
]
},
selection: [],
search: {
name: null
{
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'
}
]
// 加载部门树
const loadDepartmentTree = async () => {
try {
const res = await authApi.department.list.get({ is_tree: 1 })
if (res.code === 1) {
departmentTree.value = res.data || []
}
} catch (error) {
console.error('加载部门树失败:', error)
}
}
// 加载用户列表数据
const loadData = async () => {
loading.value = true
try {
const params = {
page: pagination.current,
limit: pagination.pageSize,
...searchForm
}
const res = await authApi.users.list.get(params)
if (res.code === 1) {
tableData.value = res.data?.data || []
pagination.total = res.data?.total || 0
} else {
message.error(res.message || '加载数据失败')
}
} catch (error) {
console.error('加载用户列表失败:', error)
message.error('加载数据失败')
} finally {
loading.value = false
}
}
// 部门选择事件
const onDeptSelect = (selectedKeys) => {
if (selectedKeys.length > 0) {
searchForm.department_id = selectedKeys[0]
} else {
searchForm.department_id = null
}
pagination.current = 1
loadData()
}
// 搜索
const handleSearch = () => {
pagination.current = 1
loadData()
}
// 重置
const handleReset = () => {
searchForm.username = ''
searchForm.nickname = ''
searchForm.department_id = null
selectedDeptKeys.value = []
pagination.current = 1
loadData()
}
// 表格变化事件
const handleTableChange = (pag) => {
pagination.current = pag.current
pagination.pageSize = pag.pageSize
loadData()
}
// 新增用户
const handleAdd = () => {
dialog.save = true
setTimeout(() => {
saveDialogRef.value?.open('add')
}, 0)
}
// 查看用户
const handleView = (record) => {
dialog.save = true
setTimeout(() => {
saveDialogRef.value?.open('show').setData(record)
}, 0)
}
// 编辑用户
const handleEdit = (record) => {
dialog.save = true
setTimeout(() => {
saveDialogRef.value?.open('edit').setData(record)
}, 0)
}
// 设置角色
const handleRole = (record) => {
dialog.role = true
setTimeout(() => {
roleDialogRef.value?.open().setData(record)
}, 0)
}
// 删除用户
const handleDelete = async (record) => {
try {
const res = await window.$API.auth.users.delete.post({ id: record.id })
if (res.code === 1) {
message.success('删除成功')
loadData()
} else {
message.error(res.message || '删除失败')
}
} catch (error) {
console.error('删除用户失败:', error)
message.error('删除失败')
}
}
// 保存成功回调
const handleSaveSuccess = (data, mode) => {
if (mode === 'add') {
loadData()
} else if (mode === 'edit') {
loadData()
}
}
// 角色设置成功回调
const handleRoleSuccess = () => {
loadData()
}
// 初始化
onMounted(() => {
loadDepartmentTree()
loadData()
})
</script>
<style scoped lang="scss">
.user-page {
display: flex;
flex-direction: row;
height: 100%;
padding: 0;
.left-box {
width: 260px;
border-right: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
background: #fff;
.header {
height: 50px;
line-height: 50px;
padding: 0 16px;
font-weight: 500;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
}
.body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
}
.right-box {
flex: 1;
display: flex;
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;
}
}
},
watch: {
groupFilterText(val) {
this.$refs.group.filter(val);
}
},
mounted() {
this.getGroup()
},
methods: {
//添加
add(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
},
//编辑
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//查看
table_show(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
},
//删除
async table_del(row, index){
var reqData = {id: row.uid}
var res = await this.$API.auth.users.delete.post(reqData);
if(res.code == 1){
this.$refs.table.refresh()
this.$message.success("删除成功")
}else{
this.$message.error(res.message)
}
},
//批量删除
async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
type: 'warning'
}).then(async () => {
var ids = this.selection.map(item => item.uid)
var reqData = {ids: ids}
var res = await this.$API.auth.users.delete.post(reqData);
if(res.code == 1){
this.$refs.table.refresh()
this.$message.success("删除成功")
}else{
this.$message.error(res.message)
}
}).catch(() => {
})
},
//权限设置
roleSet(){
if(this.selection.length != 1){
this.$message.error("请选择一条数据")
return false;
}
this.dialog.role = true
this.$nextTick(() => {
this.$refs.roleDialog.open().setData(this.selection[0])
})
},
insertData(){
this.dialog.insert = true
this.$nextTick(() => {
this.$refs.insertDialog.open()
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//加载树数据
async getGroup(){
this.showGrouploading = true;
var res = await this.$API.auth.department.list.get({is_tree: 1});
this.showGrouploading = false;
var allNode ={id: '', title: '所有'}
res.data.unshift(allNode);
this.group = res.data;
},
//树过滤
groupFilterNode(value, data){
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//树点击事件
groupClick(data){
var params = {
department_id: data.id
}
this.$refs.table.reload(params)
},
//搜索
upsearch(){
this.$refs.table.upData(this.search)
},
//本地更新数据
handleSuccess(){
this.$refs.table.refresh()
.table-content {
flex: 1;
overflow: hidden;
background: #f5f5f5;
}
}
}
</script>
<style>
</style>