更新功能
This commit is contained in:
@@ -1,530 +1,203 @@
|
||||
<template>
|
||||
<div class="department-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="部门名称" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button @click="handleExpandAll">
|
||||
<template #icon><ExpandOutlined /></template>
|
||||
展开全部
|
||||
</a-button>
|
||||
<a-button @click="handleCollapseAll">
|
||||
<template #icon><CompressOutlined /></template>
|
||||
折叠全部
|
||||
</a-button>
|
||||
<a-button @click="handleExport">
|
||||
<template #icon><ExportOutlined /></template>
|
||||
导出
|
||||
</a-button>
|
||||
<a-button @click="handleImport">
|
||||
<template #icon><ImportOutlined /></template>
|
||||
导入
|
||||
</a-button>
|
||||
<a-switch
|
||||
v-model:checked="viewMode"
|
||||
checked-children="树形"
|
||||
un-checked-children="列表"
|
||||
@change="handleViewModeChange"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 树形表格 -->
|
||||
<a-table
|
||||
v-if="viewMode"
|
||||
:columns="treeColumns"
|
||||
:data-source="treeDataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:row-selection="treeRowSelection"
|
||||
:default-expanded-row-keys="expandedKeys"
|
||||
:expanded-row-keys="expandedKeys"
|
||||
@expand="handleExpand"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<div class="pages department-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item>
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入部门名称" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-avatar v-if="record.parent_id === 0" shape="square" :size="24" style="background: #1890ff">
|
||||
<template #icon><HomeOutlined /></template>
|
||||
</a-avatar>
|
||||
<a-avatar v-else shape="square" :size="24" style="background: #52c41a">
|
||||
<template #icon><ApartmentOutlined /></template>
|
||||
</a-avatar>
|
||||
<span>{{ record.name }}</span>
|
||||
<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>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAddChild(record)">添加子部门</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该部门吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 列表表格 -->
|
||||
<sc-table
|
||||
v-else
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAddChild(record)">添加子部门</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该部门吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="600"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="上级部门" name="parent_id">
|
||||
<a-tree-select
|
||||
v-model:value="formData.parent_id"
|
||||
:tree-data="departmentTree"
|
||||
allow-clear
|
||||
placeholder="请选择上级部门"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'children' }"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="部门名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入部门名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="负责人" name="leader">
|
||||
<a-input v-model:value="formData.leader" placeholder="请输入负责人" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<a-modal v-model:open="importVisible" title="导入部门" :width="500" @ok="handleImportSubmit">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-alert message="请先下载导入模板，填写完成后上传" type="info" show-icon />
|
||||
<a-button block @click="handleDownloadTemplate">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
下载导入模板
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
</a-button>
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<a-button block>
|
||||
<template #icon><UploadOutlined /></template>
|
||||
选择文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</a-modal>
|
||||
<a-button danger :disabled="selectedRows.length === 0" @click="handleBatchDelete">
|
||||
<template #icon><delete-outlined /></template>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="false"
|
||||
:row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable" @select="handleSelectChange"
|
||||
@selectAll="handleSelectAll">
|
||||
<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-popconfirm title="确定删除该部门吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑部门弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ExpandOutlined,
|
||||
CompressOutlined,
|
||||
ExportOutlined,
|
||||
ImportOutlined,
|
||||
DownloadOutlined,
|
||||
UploadOutlined,
|
||||
HomeOutlined,
|
||||
ApartmentOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'DepartmentManagement',
|
||||
name: 'authDepartment'
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const treeDataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const viewMode = ref(true)
|
||||
const expandedKeys = ref([])
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
selectedRows,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.departments.tree.get,
|
||||
searchForm: {
|
||||
keyword: ''
|
||||
},
|
||||
}))
|
||||
columns: [],
|
||||
needPagination: false,
|
||||
needSelection: true,
|
||||
immediateLoad: false
|
||||
})
|
||||
|
||||
const treeRowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '部门名称', dataIndex: 'name', key: 'name', width: 200 },
|
||||
{ title: '上级部门', dataIndex: 'parent_name', key: 'parent_name', width: 200 },
|
||||
{ title: '负责人', dataIndex: 'leader', key: 'leader', width: 120 },
|
||||
{ title: '联系电话', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 220, fixed: 'right' },
|
||||
{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
|
||||
{ title: '部门名称', dataIndex: 'name', key: 'name', width: 300 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 220, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
const treeColumns = [
|
||||
{ title: '部门名称', key: 'name', width: 300 },
|
||||
{ title: '负责人', dataIndex: 'leader', key: 'leader', width: 120 },
|
||||
{ title: '联系电话', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '操作', key: 'action', width: 220, fixed: 'right' },
|
||||
]
|
||||
|
||||
const departmentTree = ref([])
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增部门')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
|
||||
phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const importVisible = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadFile = ref(null)
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
if (viewMode.value) {
|
||||
const res = await authApi.departments.tree.get()
|
||||
treeDataSource.value = res.data
|
||||
} else {
|
||||
const res = await authApi.departments.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取部门列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchDepartmentTree = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.tree.get()
|
||||
departmentTree.value = [{ id: 0, name: '顶级部门', children: res.data }]
|
||||
} catch (error) {
|
||||
message.error('获取部门树失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleViewModeChange = () => {
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleExpand = (expanded, record) => {
|
||||
if (expanded) {
|
||||
expandedKeys.value.push(record.id)
|
||||
} else {
|
||||
expandedKeys.value = expandedKeys.value.filter((key) => key !== record.id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleExpandAll = () => {
|
||||
const getAllKeys = (data) => {
|
||||
let keys = []
|
||||
data.forEach((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
keys.push(item.id)
|
||||
keys = keys.concat(getAllKeys(item.children))
|
||||
}
|
||||
})
|
||||
return keys
|
||||
}
|
||||
expandedKeys.value = getAllKeys(treeDataSource.value)
|
||||
}
|
||||
|
||||
const handleCollapseAll = () => {
|
||||
expandedKeys.value = []
|
||||
}
|
||||
|
||||
// 新增部门
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增部门'
|
||||
formData.value = {
|
||||
parent_id: 0,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
}
|
||||
modalVisible.value = true
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleAddChild = (record) => {
|
||||
modalTitle.value = '新增子部门'
|
||||
formData.value = {
|
||||
parent_id: record.id,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
}
|
||||
modalVisible.value = true
|
||||
// 查看部门
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑部门
|
||||
const handleEdit = (record) => {
|
||||
modalTitle.value = '编辑部门'
|
||||
formData.value = { ...record }
|
||||
modalVisible.value = true
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 删除部门
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
if (formData.value.id) {
|
||||
await authApi.departments.edit.put(formData.value.id, formData.value)
|
||||
message.success('更新成功')
|
||||
const res = await authApi.departments.delete.delete(record.id)
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
await authApi.departments.add.post(formData.value)
|
||||
message.success('创建成功')
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await authApi.departments.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
console.error('删除部门失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.export.post({})
|
||||
const url = window.URL.createObjectURL(new Blob([res]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', `departments_${Date.now()}.xlsx`)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('导出成功')
|
||||
} catch (error) {
|
||||
message.error('导出失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleImport = () => {
|
||||
importVisible.value = true
|
||||
fileList.value = []
|
||||
uploadFile.value = null
|
||||
}
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'
|
||||
if (!isExcel) {
|
||||
message.error('只能上传 Excel 文件')
|
||||
return false
|
||||
}
|
||||
const isLt10M = file.size / 1024 / 1024 < 10
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
uploadFile.value = file
|
||||
fileList.value = [file]
|
||||
return false
|
||||
}
|
||||
|
||||
const handleRemove = () => {
|
||||
uploadFile.value = null
|
||||
fileList.value = []
|
||||
}
|
||||
|
||||
const handleDownloadTemplate = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.downloadTemplate.get()
|
||||
const url = window.URL.createObjectURL(new Blob([res]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', 'department_template.xlsx')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
} catch (error) {
|
||||
message.error('下载模板失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleImportSubmit = async () => {
|
||||
if (!uploadFile.value) {
|
||||
message.error('请选择文件')
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要删除的部门')
|
||||
return
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', uploadFile.value)
|
||||
|
||||
try {
|
||||
const res = await authApi.departments.import.post(formData)
|
||||
message.success(res.message || '导入成功')
|
||||
importVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('导入失败')
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除选中的 ${selectedRows.value.length} 个部门吗？如果删除项中含有子集将会被一并删除`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.departments.batchDelete.post({ ids })
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量删除部门失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchDepartmentTree()
|
||||
refreshTable()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.department-management {
|
||||
padding: 16px;
|
||||
.department-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
|
||||
@cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="上级部门" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="departments"
|
||||
:field-names="departmentFieldNames" :tree-default-expand-all="false" placeholder="请选择上级部门"
|
||||
allow-clear tree-node-filter-prop="name"
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门名称" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入部门名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="负责人" name="leader">
|
||||
<a-input v-model:value="form.leader" placeholder="请输入负责人" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-input v-model:value="form.phone" placeholder="请输入联系电话" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ offset: 5 }">
|
||||
<div style="display: flex; gap: 10px">
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'DepartmentSave'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增部门',
|
||||
edit: '编辑部门',
|
||||
show: '查看部门'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
leader: '',
|
||||
phone: '',
|
||||
sort: 0,
|
||||
parent_id: null,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序', trigger: 'change' },
|
||||
{ type: 'number', message: '排序必须为数字', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 部门数据
|
||||
const departments = ref([])
|
||||
const departmentFieldNames = {
|
||||
title: 'name',
|
||||
value: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
form.parent_id = form.parent_id || 0
|
||||
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.departments.add.post(form)
|
||||
} else {
|
||||
res = await authApi.departments.edit.put(form.id, form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 200) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
isSaveing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门树数据
|
||||
const loadDepartments = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.tree.get()
|
||||
if (res.code === 200) {
|
||||
departments.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
message.error('加载部门树失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.name = data.name
|
||||
form.leader = data.leader || ''
|
||||
form.phone = data.phone || ''
|
||||
form.sort = data.sort || 0
|
||||
form.parent_id = data.parent_id || null
|
||||
form.status = data.status !== undefined ? data.status : 1
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
loadDepartments()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="pages online-users-page">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-cards">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-card>
|
||||
<a-statistic title="在线用户总数" :value="onlineCount" :value-style="{ color: '#3f8600' }">
|
||||
<template #prefix>
|
||||
<UserOutlined style="font-size: 24px" />
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<a-card>
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="刷新间隔">
|
||||
<a-select v-model:value="refreshInterval" style="width: 150px" @change="handleRefreshIntervalChange">
|
||||
<a-select-option :value="0">不自动刷新</a-select-option>
|
||||
<a-select-option :value="5000">5秒</a-select-option>
|
||||
<a-select-option :value="10000">10秒</a-select-option>
|
||||
<a-select-option :value="30000">30秒</a-select-option>
|
||||
<a-select-option :value="60000">60秒</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleRefresh" :loading="loading">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
刷新
|
||||
</a-button>
|
||||
<a-button @click="handleRefreshAllOffline">
|
||||
<template #icon><StopOutlined /></template>
|
||||
全部下线
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入用户名" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<div class="table-content">
|
||||
<sc-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-key="rowKey"
|
||||
@refresh="refreshTable"
|
||||
>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.is_online ? 'success' : 'default'">
|
||||
{{ record.is_online ? '在线' : '离线' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #lastActive="{ record }">
|
||||
{{ formatDate(record.last_active_at) }}
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleViewSessions(record)">
|
||||
查看会话
|
||||
</a-button>
|
||||
<a-popconfirm
|
||||
title="确定强制该用户下线吗？"
|
||||
@confirm="handleOffline(record)"
|
||||
>
|
||||
<a-button type="link" size="small" danger>
|
||||
强制下线
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
@click="handleOfflineAll(record)"
|
||||
>
|
||||
全部下线
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</sc-table>
|
||||
</div>
|
||||
|
||||
<!-- 会话详情弹窗 -->
|
||||
<sessions-dialog
|
||||
v-if="dialog.sessions"
|
||||
ref="sessionsDialogRef"
|
||||
@success="handleSessionsSuccess"
|
||||
@closed="dialog.sessions = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { UserOutlined, SearchOutlined, RedoOutlined, ReloadOutlined, StopOutlined } from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import sessionsDialog from './sessions.vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'authOnlineUsers'
|
||||
})
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
keyword: ''
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
})
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 在线用户数量
|
||||
const onlineCount = ref(0)
|
||||
|
||||
// 刷新定时器
|
||||
const refreshInterval = ref(30000) // 默认30秒
|
||||
let refreshTimer = null
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
sessions: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const sessionsDialogRef = ref(null)
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '#', dataIndex: '_index', key: '_index', width: 60, align: 'center' },
|
||||
{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
|
||||
{ title: '真实姓名', dataIndex: 'real_name', key: 'real_name', width: 150 },
|
||||
{ title: '邮箱', dataIndex: 'email', key: 'email', width: 200 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '最后活跃时间', dataIndex: 'last_active_at', key: 'last_active_at', width: 180, slot: 'lastActive' },
|
||||
{ title: '最后登录IP', dataIndex: 'last_login_ip', key: 'last_login_ip', width: 150 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
// 加载在线用户数量
|
||||
const loadOnlineCount = async () => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.count.get()
|
||||
if (res.code === 200) {
|
||||
onlineCount.value = res.data || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取在线用户数量失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载在线用户列表
|
||||
const loadOnlineUsers = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
...searchForm,
|
||||
limit: pagination.pageSize
|
||||
}
|
||||
const res = await authApi.onlineUsers.list.get(params)
|
||||
loading.value = false
|
||||
|
||||
if (res.code === 200) {
|
||||
// 添加序号
|
||||
const list = res.data?.list || []
|
||||
tableData.value = list.map((item, index) => ({
|
||||
...item,
|
||||
_index: (pagination.current - 1) * pagination.pageSize + index + 1
|
||||
}))
|
||||
pagination.total = res.data?.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载在线用户列表失败:', error)
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新表格
|
||||
const refreshTable = () => {
|
||||
loadOnlineCount()
|
||||
loadOnlineUsers()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.keyword = ''
|
||||
pagination.current = 1
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 刷新按钮
|
||||
const handleRefresh = () => {
|
||||
refreshTable()
|
||||
message.success('刷新成功')
|
||||
}
|
||||
|
||||
// 刷新间隔变化
|
||||
const handleRefreshIntervalChange = (value) => {
|
||||
clearRefreshTimer()
|
||||
if (value > 0) {
|
||||
startRefreshTimer(value)
|
||||
}
|
||||
}
|
||||
|
||||
// 启动刷新定时器
|
||||
const startRefreshTimer = (interval) => {
|
||||
refreshTimer = setInterval(() => {
|
||||
refreshTable()
|
||||
}, interval)
|
||||
}
|
||||
|
||||
// 清除刷新定时器
|
||||
const clearRefreshTimer = () => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
// 查看用户会话
|
||||
const handleViewSessions = (record) => {
|
||||
dialog.sessions = true
|
||||
setTimeout(() => {
|
||||
sessionsDialogRef.value?.open().setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 强制用户下线（单个）
|
||||
const handleOffline = async (record) => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offline.post(record.id, {})
|
||||
if (res.code === 200) {
|
||||
message.success('强制下线成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('强制下线失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 强制用户所有设备下线
|
||||
const handleOfflineAll = async (record) => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offlineAll.post(record.id)
|
||||
if (res.code === 200) {
|
||||
message.success('全部下线成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('全部下线失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 全部下线
|
||||
const handleRefreshAllOffline = () => {
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '确定要强制所有在线用户下线吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
// 这里需要遍历所有在线用户并下线
|
||||
const onlineUsers = tableData.value.filter(user => user.is_online)
|
||||
for (const user of onlineUsers) {
|
||||
await authApi.onlineUsers.offlineAll.post(user.id)
|
||||
}
|
||||
message.success('全部下线成功')
|
||||
refreshTable()
|
||||
} catch (error) {
|
||||
console.error('全部下线失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 会话操作成功回调
|
||||
const handleSessionsSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return '-'
|
||||
const d = new Date(date)
|
||||
return d.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
refreshTable()
|
||||
// 启动自动刷新
|
||||
if (refreshInterval.value > 0) {
|
||||
startRefreshTimer(refreshInterval.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearRefreshTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.online-users-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.stats-cards {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.ant-card) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-title) {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
:deep(.ant-statistic-content) {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<a-modal title="用户会话详情" :open="visible" :width="800" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<div class="sessions-content">
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-info">
|
||||
<a-descriptions :column="3" bordered size="small">
|
||||
<a-descriptions-item label="用户名">{{ userInfo.username }}</a-descriptions-item>
|
||||
<a-descriptions-item label="真实姓名">{{ userInfo.real_name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">
|
||||
<a-tag :color="userInfo.is_online ? 'success' : 'default'">
|
||||
{{ userInfo.is_online ? '在线' : '离线' }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱" :span="2">{{ userInfo.email }}</a-descriptions-item>
|
||||
<a-descriptions-item label="手机号">{{ userInfo.phone }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
|
||||
<!-- 会话列表 -->
|
||||
<div class="sessions-list">
|
||||
<div class="list-header">
|
||||
<span>会话列表（{{ sessions.length }} 个）</span>
|
||||
<a-button type="link" size="small" danger @click="handleOfflineAll">
|
||||
全部下线
|
||||
</a-button>
|
||||
</div>
|
||||
<a-list :data-source="sessions" :loading="loading" size="small">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-avatar shape="square" :icon="item.device_type === 'pc' ? 'DesktopOutlined' : 'MobileOutlined'" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="session-title">
|
||||
<span>{{ getDeviceName(item.device_type) }}</span>
|
||||
<a-tag :color="item.is_online ? 'success' : 'default'" size="small">
|
||||
{{ item.is_online ? '活跃' : '过期' }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="session-info">
|
||||
<div><span class="label">IP地址：</span>{{ item.ip_address }}</div>
|
||||
<div><span class="label">登录时间：</span>{{ formatDate(item.created_at) }}</div>
|
||||
<div><span class="label">最后活跃：</span>{{ formatDate(item.last_active_at) }}</div>
|
||||
<div v-if="item.user_agent"><span class="label">浏览器：</span>{{ item.user_agent }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
<template #actions>
|
||||
<a-popconfirm
|
||||
v-if="item.is_online"
|
||||
title="确定强制该会话下线吗？"
|
||||
@confirm="handleOffline(item)"
|
||||
>
|
||||
<a-button type="link" size="small" danger>
|
||||
强制下线
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-tag v-else color="default" size="small">已过期</a-tag>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<a-empty v-if="!loading && sessions.length === 0" description="暂无会话数据" :image-size="80" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">关 闭</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
defineOptions({
|
||||
name: 'OnlineUserSessions'
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
// 用户信息
|
||||
const userInfo = reactive({
|
||||
id: '',
|
||||
username: '',
|
||||
real_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
is_online: false
|
||||
})
|
||||
|
||||
// 会话列表
|
||||
const sessions = ref([])
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载用户会话
|
||||
const loadUserSessions = async (userId) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await authApi.onlineUsers.sessions.get(userId)
|
||||
loading.value = false
|
||||
|
||||
if (res.code === 200) {
|
||||
sessions.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户会话失败:', error)
|
||||
loading.value = false
|
||||
message.error('加载会话失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
userInfo.id = data.id
|
||||
userInfo.username = data.username
|
||||
userInfo.real_name = data.real_name
|
||||
userInfo.email = data.email
|
||||
userInfo.phone = data.phone
|
||||
userInfo.is_online = data.is_online
|
||||
|
||||
// 加载会话列表
|
||||
loadUserSessions(data.id)
|
||||
}
|
||||
|
||||
// 强制会话下线
|
||||
const handleOffline = async (session) => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offline.post(userInfo.id, { token: session.token })
|
||||
if (res.code === 200) {
|
||||
message.success('强制下线成功')
|
||||
emit('success')
|
||||
// 重新加载会话列表
|
||||
loadUserSessions(userInfo.id)
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('强制下线失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 全部下线
|
||||
const handleOfflineAll = async () => {
|
||||
try {
|
||||
const res = await authApi.onlineUsers.offlineAll.post(userInfo.id)
|
||||
if (res.code === 200) {
|
||||
message.success('全部下线成功')
|
||||
emit('success')
|
||||
// 重新加载会话列表
|
||||
loadUserSessions(userInfo.id)
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('全部下线失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取设备名称
|
||||
const getDeviceName = (deviceType) => {
|
||||
const deviceMap = {
|
||||
pc: '电脑端',
|
||||
mobile: '手机端',
|
||||
tablet: '平板端',
|
||||
unknown: '未知设备'
|
||||
}
|
||||
return deviceMap[deviceType] || deviceMap.unknown
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return '-'
|
||||
const d = new Date(date)
|
||||
return d.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sessions-content {
|
||||
.user-info {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
background-color: #fafafa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.sessions-list {
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-list-item) {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.session-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.session-info {
|
||||
margin-top: 8px;
|
||||
color: #595959;
|
||||
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #8c8c8c;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,465 +1,333 @@
|
||||
<template>
|
||||
<div class="permission-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="权限名称/编码" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="类型">
|
||||
<a-select v-model:value="searchParams.type" allow-clear placeholder="请选择类型" style="width: 150px">
|
||||
<a-select-option value="menu">菜单</a-select-option>
|
||||
<a-select-option value="api">接口</a-select-option>
|
||||
<a-select-option value="button">按钮</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<div class="pages permission-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
<a-input v-model:value="menuFilterText" placeholder="搜索菜单..." allow-clear @change="handleMenuSearch">
|
||||
<template #prefix>
|
||||
<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</template>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedMenuKeys" v-model:checkedKeys="checkedMenuKeys"
|
||||
:tree-data="filteredMenuTree" :field-names="{ title: 'title', key: 'id', children: 'children' }"
|
||||
showLine checkable :check-strictly="true" :expand-on-click-node="false" @select="onMenuSelect"
|
||||
@check="onMenuCheck">
|
||||
<template #icon="{ dataRef }">
|
||||
<FolderOutlined v-if="dataRef.children" />
|
||||
<FileOutlined v-else />
|
||||
</template>
|
||||
<template #title="{ dataRef }">
|
||||
<span class="tree-node-title">{{ dataRef.title }}</span>
|
||||
<PlusOutlined class="tree-node-add" @click.stop="handleAdd(dataRef)" />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<a-button type="primary" @click="handleAdd(null)">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<a-button danger @click="handleDeleteBatch">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
删除
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
批量启用
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
批量禁用
|
||||
</a-button>
|
||||
<a-switch
|
||||
v-model:checked="viewMode"
|
||||
checked-children="树形"
|
||||
un-checked-children="列表"
|
||||
@change="handleViewModeChange"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 树形表格 -->
|
||||
<a-table
|
||||
v-if="viewMode"
|
||||
:columns="treeColumns"
|
||||
:data-source="treeDataSource"
|
||||
:loading="loading"
|
||||
:pagination="false"
|
||||
:row-selection="treeRowSelection"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-space>
|
||||
<a-icon v-if="record.icon" :type="record.icon" />
|
||||
<span>{{ record.name }}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="getTypeColor(record.type)">
|
||||
{{ getTypeLabel(record.type) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAddChild(record)">添加子权限</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该权限吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- 列表表格 -->
|
||||
<sc-table
|
||||
v-else
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-space>
|
||||
<a-icon v-if="record.icon" :type="record.icon" />
|
||||
<span>{{ record.name }}</span>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="getTypeColor(record.type)">
|
||||
{{ getTypeLabel(record.type) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleAddChild(record)">添加子权限</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该权限吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="700"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="上级权限" name="parent_id">
|
||||
<a-tree-select
|
||||
v-model:value="formData.parent_id"
|
||||
:tree-data="permissionTree"
|
||||
allow-clear
|
||||
placeholder="请选择上级权限"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'children' }"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="权限名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入权限名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="权限编码" name="code">
|
||||
<a-input v-model:value="formData.code" placeholder="请输入权限编码，如：system.user.list" />
|
||||
</a-form-item>
|
||||
<a-form-item label="权限类型" name="type">
|
||||
<a-select v-model:value="formData.type" placeholder="请选择权限类型">
|
||||
<a-select-option value="menu">菜单</a-select-option>
|
||||
<a-select-option value="api">接口</a-select-option>
|
||||
<a-select-option value="button">按钮</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="路由" name="route">
|
||||
<a-input v-model:value="formData.route" placeholder="请输入路由，如：/admin/users" />
|
||||
</a-form-item>
|
||||
<a-form-item label="组件" name="component">
|
||||
<a-input v-model:value="formData.component" placeholder="请输入组件路径" />
|
||||
</a-form-item>
|
||||
<a-form-item label="图标" name="icon">
|
||||
<a-input v-model:value="formData.icon" placeholder="请输入图标名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="元数据" name="meta">
|
||||
<a-textarea v-model:value="formData.meta" placeholder="JSON格式的元数据" :rows="3" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="header">
|
||||
<div class="title">{{ selectedMenu?.title || '请选择权限节点' }}</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
|
||||
@success="handleSaveSuccess" />
|
||||
<a-empty v-else description="请选择左侧权限节点后操作" :image-size="100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { SearchOutlined, FolderOutlined, FileOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
|
||||
import saveForm from './save.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'PermissionManagement',
|
||||
name: 'authPermission'
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
type: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
// 菜单树数据
|
||||
const menuTree = ref([])
|
||||
const filteredMenuTree = ref([])
|
||||
const selectedMenuKeys = ref([])
|
||||
const checkedMenuKeys = ref([])
|
||||
const menuFilterText = ref('')
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const treeDataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
// 当前选中的菜单
|
||||
const selectedMenu = ref(null)
|
||||
const parentId = ref(null)
|
||||
|
||||
const viewMode = ref(true)
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
|
||||
const treeRowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '权限名称', key: 'name', width: 200 },
|
||||
{ title: '权限编码', dataIndex: 'code', key: 'code', width: 200 },
|
||||
{ title: '类型', key: 'type', width: 100, align: 'center' },
|
||||
{ title: '路由', dataIndex: 'route', key: 'route', width: 200 },
|
||||
{ title: '组件', dataIndex: 'component', key: 'component', width: 200 },
|
||||
{ title: '图标', dataIndex: 'icon', key: 'icon', width: 100 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 220, fixed: 'right' },
|
||||
]
|
||||
|
||||
const treeColumns = [
|
||||
{ title: '权限名称', key: 'name', width: 300 },
|
||||
{ title: '权限编码', dataIndex: 'code', key: 'code', width: 200 },
|
||||
{ title: '类型', key: 'type', width: 100, align: 'center' },
|
||||
{ title: '路由', dataIndex: 'route', key: 'route', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '操作', key: 'action', width: 220, fixed: 'right' },
|
||||
]
|
||||
|
||||
const permissionTree = ref([])
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增权限')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
if (viewMode.value) {
|
||||
const res = await authApi.permissions.tree.get()
|
||||
treeDataSource.value = res.data
|
||||
} else {
|
||||
const res = await authApi.permissions.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取权限列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPermissionTree = async () => {
|
||||
// 加载权限树
|
||||
const loadMenuTree = async () => {
|
||||
try {
|
||||
const res = await authApi.permissions.tree.get()
|
||||
permissionTree.value = [{ id: 0, name: '顶级权限', children: res.data }]
|
||||
if (res.code === 200) {
|
||||
menuTree.value = res.data || []
|
||||
filteredMenuTree.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('获取权限树失败')
|
||||
console.error('加载权限树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
type: undefined,
|
||||
status: undefined,
|
||||
// 权限搜索
|
||||
const handleMenuSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
menuFilterText.value = keyword
|
||||
if (!keyword) {
|
||||
filteredMenuTree.value = menuTree.value
|
||||
return
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleViewModeChange = () => {
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
}
|
||||
// 递归过滤权限树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.name && node.name.toLowerCase().includes(keyword.toLowerCase())
|
||||
const filteredChildren = node.children ? filterTree(node.children) : []
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增权限'
|
||||
formData.value = {
|
||||
parent_id: 0,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
if (isMatch || filteredChildren.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
children: filteredChildren.length > 0 ? filteredChildren : undefined
|
||||
})
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
modalVisible.value = true
|
||||
|
||||
filteredMenuTree.value = filterTree(menuTree.value)
|
||||
}
|
||||
|
||||
const handleAddChild = (record) => {
|
||||
modalTitle.value = '新增子权限'
|
||||
formData.value = {
|
||||
parent_id: record.id,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
// 查找权限节点
|
||||
const findMenuNode = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.id === id) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findMenuNode(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
modalVisible.value = true
|
||||
return null
|
||||
}
|
||||
|
||||
const handleEdit = (record) => {
|
||||
modalTitle.value = '编辑权限'
|
||||
formData.value = { ...record }
|
||||
modalVisible.value = true
|
||||
// 查找父节点ID
|
||||
const findParentId = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.children && node.children.length > 0) {
|
||||
const child = node.children.find(child => child.id === id)
|
||||
if (child) {
|
||||
return node.id
|
||||
}
|
||||
const found = findParentId(node.children, id)
|
||||
if (found !== null) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 权限选择事件
|
||||
const onMenuSelect = (selectedKeys, { selected }) => {
|
||||
if (selected) {
|
||||
const menuId = selectedKeys[0]
|
||||
const menuNode = findMenuNode(menuTree.value, menuId)
|
||||
selectedMenu.value = menuNode
|
||||
parentId.value = findParentId(menuTree.value, menuId)
|
||||
} else {
|
||||
selectedMenu.value = null
|
||||
parentId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 权限勾选事件
|
||||
const onMenuCheck = (checkedKeys, info) => {
|
||||
console.log('checkedKeys:', checkedKeys, 'info:', info)
|
||||
}
|
||||
|
||||
// 新增权限
|
||||
const handleAdd = async (parentNode) => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
if (formData.value.id) {
|
||||
await authApi.permissions.edit.put(formData.value.id, formData.value)
|
||||
message.success('更新成功')
|
||||
let newMenuData = {
|
||||
parent_id: parentNode ? parentNode.id : 0,
|
||||
name: '新权限',
|
||||
code: '',
|
||||
route: '',
|
||||
component: '',
|
||||
type: 'menu',
|
||||
sort: 0,
|
||||
status: 1
|
||||
}
|
||||
|
||||
const res = await authApi.permissions.add.post(newMenuData)
|
||||
if (res.code === 200) {
|
||||
newMenuData.id = res.data.id
|
||||
message.success('添加成功')
|
||||
await loadMenuTree()
|
||||
|
||||
// 选中新增的权限
|
||||
selectedMenuKeys.value = [newMenuData.id]
|
||||
const menuNode = findMenuNode(menuTree.value, newMenuData.id)
|
||||
selectedMenu.value = menuNode
|
||||
parentId.value = parentNode ? parentNode.id : null
|
||||
} else {
|
||||
await authApi.permissions.add.post(formData.value)
|
||||
message.success('创建成功')
|
||||
message.error(res.message || '添加失败')
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
console.error('添加权限失败:', error)
|
||||
message.error('添加失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 批量删除权限
|
||||
const handleDeleteBatch = async () => {
|
||||
if (checkedMenuKeys.value.length === 0) {
|
||||
message.warning('请选择需要删除的权限')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除已选择的 ${checkedMenuKeys.value.length} 个权限吗？`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await authApi.permissions.batchDelete.post({ ids: checkedMenuKeys.value })
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
|
||||
// 如果当前选中的权限被删除了，清空选择
|
||||
if (selectedMenu.value && checkedMenuKeys.value.includes(selectedMenu.value.id)) {
|
||||
selectedMenu.value = null
|
||||
selectedMenuKeys.value = []
|
||||
}
|
||||
|
||||
checkedMenuKeys.value = []
|
||||
await loadMenuTree()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除权限失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
})
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = async () => {
|
||||
await loadMenuTree()
|
||||
// 重新设置当前选中的权限
|
||||
if (selectedMenu.value) {
|
||||
const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
|
||||
selectedMenu.value = menuNode
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await authApi.permissions.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await authApi.permissions.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchStatus = async (status = 1) => {
|
||||
try {
|
||||
await authApi.permissions.batchStatus.post({ ids: selectedRowKeys.value, status })
|
||||
message.success(status ? '批量启用成功' : '批量禁用成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
menu: 'blue',
|
||||
api: 'green',
|
||||
button: 'orange',
|
||||
}
|
||||
return colors[type] || 'default'
|
||||
}
|
||||
|
||||
const getTypeLabel = (type) => {
|
||||
const labels = {
|
||||
menu: '菜单',
|
||||
api: '接口',
|
||||
button: '按钮',
|
||||
}
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchPermissionTree()
|
||||
loadMenuTree()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.permission-management {
|
||||
padding: 16px;
|
||||
.permission-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
.left-box {
|
||||
width: 300px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
|
||||
.tree-node-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tree-node-add {
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tree-node-content-wrapper) {
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
.tree-node-add {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fff;
|
||||
height: 56px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="save-form">
|
||||
<a-form :model="form" :rules="rules" ref="dialogForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
|
||||
<!-- 第一行：权限名称和类型 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="权限名称" name="title">
|
||||
<a-input v-model:value="form.title" placeholder="权限名称" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="类型" name="type" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-radio-group v-model:value="form.type" button-style="solid">
|
||||
<a-radio-button value="menu">菜单</a-radio-button>
|
||||
<a-radio-button value="api">接口</a-radio-button>
|
||||
<a-radio-button value="button">按钮</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第二行：上级菜单和权限编码 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="上级权限" name="parent_id">
|
||||
<a-tree-select v-model:value="form.parent_id" :tree-data="menuOptions"
|
||||
:field-names="menuFieldNames" :tree-default-expand-all="false" show-icon placeholder="顶级权限"
|
||||
allow-clear tree-node-filter-prop="title" :disabled="!!menuId" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="权限编码" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="如: system.user.list" allow-clear />
|
||||
<div class="form-item-msg">格式：模块.功能.操作，系统唯一标识</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第三行：路由地址和组件路径 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="路由地址" name="path">
|
||||
<a-input v-model:value="form.path" placeholder="/system/users" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="组件路径" name="component">
|
||||
<a-input v-model:value="form.component" placeholder="system/users/index" allow-clear>
|
||||
<template #addonBefore>pages/</template>
|
||||
</a-input>
|
||||
<div class="form-item-msg">顶级菜单或有子菜单的父节点不需要填写</div>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 第四行：菜单图标和排序 -->
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="菜单图标" name="icon">
|
||||
<sc-icon-picker v-model:value="form.icon" placeholder="请选择图标" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" :max="10000" style="width: 100%" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<a-divider />
|
||||
|
||||
<!-- 选项设置区域 -->
|
||||
<div class="options-section">
|
||||
<h4>选项设置</h4>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否隐藏" name="hidden" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
|
||||
<a-checkbox v-model:checked="form.hidden">隐藏菜单</a-checkbox>
|
||||
<a-checkbox v-model:checked="form.hiddenBreadcrumb">隐藏面包屑</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否缓存" name="keepAlive" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.keepAlive" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="是否固定" name="affix" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
|
||||
<a-switch v-model:checked="form.affix" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 状态 -->
|
||||
<a-divider />
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="状态" name="status" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
||||
<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-form-item :wrapper-col="{ span: 18, offset: 4 }" style="margin-top: 32px">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSave" :loading="loading" size="large">保存</a-button>
|
||||
<a-button @click="$emit('cancel')" size="large">取消</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import ScIconPicker from '@/components/scIconPicker/index.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'PermissionSave'
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
menu: { type: [Object, Array], default: () => [] },
|
||||
menuId: { type: [Number, String], default: null },
|
||||
parentId: { type: [Number, String], default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'cancel'])
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
parent_id: 0,
|
||||
name: '',
|
||||
title: '',
|
||||
path: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
type: 'menu',
|
||||
status: 1,
|
||||
// meta 字段内容
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
keepAlive: false,
|
||||
affix: false
|
||||
})
|
||||
|
||||
// 状态开关计算属性
|
||||
const statusChecked = computed({
|
||||
get: () => form.status === 1,
|
||||
set: (val) => {
|
||||
form.status = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择类型', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 菜单选项
|
||||
const menuOptions = ref([])
|
||||
const menuFieldNames = {
|
||||
value: 'id',
|
||||
label: 'title',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 简单化菜单树，排除自己和子节点
|
||||
const treeToMap = (tree, excludeId = null) => {
|
||||
const map = []
|
||||
tree.forEach(item => {
|
||||
if (item.id === excludeId) return // 排除自己
|
||||
const obj = {
|
||||
id: item.id,
|
||||
parent_id: item.parent_id,
|
||||
title: item.title,
|
||||
children: item.children && item.children.length > 0 ? treeToMap(item.children, excludeId) : null
|
||||
}
|
||||
map.push(obj)
|
||||
})
|
||||
return map
|
||||
}
|
||||
|
||||
// 查找权限节点
|
||||
const findMenuNode = (tree, id) => {
|
||||
for (const node of tree) {
|
||||
if (node.id === id) {
|
||||
return node
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
const found = findMenuNode(node.children, id)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// 监听菜单树变化
|
||||
watch(
|
||||
() => props.menu,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
// 排除当前编辑的节点，避免选择自己作为父节点
|
||||
menuOptions.value = treeToMap(newVal, props.menuId)
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
// 监听 menuId 变化，从菜单树中查找并赋值
|
||||
watch(
|
||||
() => props.menuId,
|
||||
(newVal) => {
|
||||
if (newVal && props.menu && props.menu.length > 0) {
|
||||
const menuNode = findMenuNode(props.menu, newVal)
|
||||
if (menuNode) {
|
||||
setData(menuNode, props.parentId)
|
||||
}
|
||||
} else if (!newVal) {
|
||||
// 清空表单
|
||||
setData({
|
||||
id: '',
|
||||
parent_id: props.parentId || 0,
|
||||
name: '',
|
||||
title: '',
|
||||
route: '',
|
||||
component: '',
|
||||
icon: '',
|
||||
sort: 0,
|
||||
type: 'menu',
|
||||
status: 1,
|
||||
hidden: false,
|
||||
hiddenBreadcrumb: false,
|
||||
keepAlive: false,
|
||||
affix: false
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 加载权限详情
|
||||
const loadMenuDetail = async (id) => {
|
||||
try {
|
||||
const res = await authApi.permissions.detail.get(id)
|
||||
if (res.code === 200 && res.data) {
|
||||
setData(res.data, props.parentId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载权限详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
loading.value = true
|
||||
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
id: form.id || undefined,
|
||||
parent_id: form.parent_id || 0,
|
||||
name: form.name,
|
||||
title: form.title,
|
||||
path: form.path,
|
||||
component: form.component,
|
||||
icon: form.icon,
|
||||
sort: form.sort,
|
||||
type: form.type,
|
||||
status: form.status,
|
||||
meta: {
|
||||
hidden: form.hidden,
|
||||
hiddenBreadcrumb: form.hiddenBreadcrumb,
|
||||
keepAlive: form.keepAlive,
|
||||
affix: form.affix
|
||||
}
|
||||
}
|
||||
|
||||
let res = {}
|
||||
if (form.id) {
|
||||
res = await authApi.permissions.edit.put(form.id, submitData)
|
||||
} else {
|
||||
res = await authApi.permissions.add.post(submitData)
|
||||
}
|
||||
|
||||
loading.value = false
|
||||
if (res.code === 200) {
|
||||
message.success('保存成功')
|
||||
emit('success')
|
||||
} else {
|
||||
message.error(res.message || '保存失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data, pid) => {
|
||||
form.id = data.id || ''
|
||||
form.parent_id = data.parent_id !== undefined ? data.parent_id : (pid || 0)
|
||||
form.name = data.name || ''
|
||||
form.title = data.title || ''
|
||||
form.path = data.path || ''
|
||||
form.component = data.component || ''
|
||||
form.icon = data.icon || ''
|
||||
form.sort = data.sort || 0
|
||||
form.type = data.type || 'menu'
|
||||
form.status = data.status !== undefined ? data.status : 1
|
||||
|
||||
// 解析 meta 字段
|
||||
const meta = data.meta && typeof data.meta === 'string' ? JSON.parse(data.meta) : (data.meta || {})
|
||||
form.hidden = meta.hidden || false
|
||||
form.hiddenBreadcrumb = meta.hiddenBreadcrumb || false
|
||||
form.keepAlive = meta.keepAlive || false
|
||||
form.affix = meta.affix || false
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
if (props.menuId) {
|
||||
loadMenuDetail(props.menuId)
|
||||
} else if (props.parentId) {
|
||||
form.parent_id = props.parentId
|
||||
}
|
||||
})
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
setData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.save-form {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
|
||||
.form-item-msg {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.options-section {
|
||||
margin-top: 16px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-divider) {
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,436 +1,309 @@
|
||||
<template>
|
||||
<div class="role-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="角色名称/编码" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchCopy">
|
||||
<template #icon><CopyOutlined /></template>
|
||||
批量复制
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
批量启用
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
批量禁用
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<sc-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="pages role-page">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="角色名称">
|
||||
<a-input v-model:value="searchForm.keyword" placeholder="请输入角色名称" allow-clear
|
||||
style="width: 180px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 100px">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" size="small" @click="handlePermissions(record)">权限</a-button>
|
||||
<a-button type="link" size="small" @click="handleCopy(record)">复制</a-button>
|
||||
<a-popconfirm title="确定要删除该角色吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
<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-dropdown :disabled="selectedRows.length === 0">
|
||||
<a-button :disabled="selectedRows.length === 0">
|
||||
批量操作
|
||||
<down-outlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="handleBatchStatus">
|
||||
<check-circle-outlined />批量启用/禁用
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleBatchCopy">
|
||||
<copy-outlined />批量复制
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item @click="handleBatchDelete" danger>
|
||||
<delete-outlined />批量删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-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" :row-selection="rowSelection" @refresh="refreshTable"
|
||||
@paginationChange="handlePaginationChange" @select="handleSelectChange" @selectAll="handleSelectAll">
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="600"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="角色名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入角色名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="角色编码" name="code">
|
||||
<a-input v-model:value="formData.code" placeholder="请输入角色编码" :disabled="!!formData.id" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-textarea v-model:value="formData.description" placeholder="请输入描述" :rows="3" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 权限分配弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="permissionVisible"
|
||||
title="分配权限"
|
||||
:width="600"
|
||||
@ok="handlePermissionSubmit"
|
||||
@cancel="permissionVisible = false"
|
||||
>
|
||||
<a-tree
|
||||
v-model:checkedKeys="checkedPermissions"
|
||||
checkable
|
||||
:tree-data="permissionTree"
|
||||
:field-names="{ title: 'name', key: 'id', children: 'children' }"
|
||||
default-expand-all
|
||||
/>
|
||||
</a-modal>
|
||||
|
||||
<!-- 复制弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="copyVisible"
|
||||
title="复制角色"
|
||||
:width="500"
|
||||
@ok="handleCopySubmit"
|
||||
@cancel="copyVisible = false"
|
||||
>
|
||||
<a-form ref="copyFormRef" :model="copyFormData" :rules="copyFormRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="角色名称" name="name">
|
||||
<a-input v-model:value="copyFormData.name" placeholder="请输入角色名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="角色编码" name="code">
|
||||
<a-input v-model:value="copyFormData.code" placeholder="请输入角色编码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-textarea v-model:value="copyFormData.description" placeholder="请输入描述" :rows="3" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="copyFormData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<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="handlePermission(record)">权限</a-button>
|
||||
<a-button type="link" size="small" @click="handleCopy(record)">复制</a-button>
|
||||
<a-popconfirm title="确定删除该角色吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑角色弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
|
||||
<!-- 权限设置弹窗 -->
|
||||
<permission-dialog v-if="dialog.permission" ref="permissionDialogRef" @success="permissionSuccess"
|
||||
@closed="dialog.permission = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
CopyOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import permissionDialog from './permission.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleManagement',
|
||||
name: 'authRole'
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRows,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.roles.list.get,
|
||||
searchForm: {
|
||||
keyword: '',
|
||||
status: null
|
||||
},
|
||||
}))
|
||||
columns: [],
|
||||
needPagination: true,
|
||||
needSelection: true
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
permission: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const permissionDialogRef = ref(null)
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '角色名称', dataIndex: 'name', key: 'name', width: 150 },
|
||||
{ title: '角色编码', dataIndex: 'code', key: 'code', width: 150 },
|
||||
{ title: '描述', dataIndex: 'description', key: 'description', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 250, fixed: 'right' },
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80, align: 'center' },
|
||||
{ title: '角色名称', dataIndex: 'name', key: 'name', width: 200 },
|
||||
{ title: '角色编码', dataIndex: 'code', key: 'code', width: 200 },
|
||||
{ title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 100, align: 'center' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 260, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增角色')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const permissionVisible = ref(false)
|
||||
const currentRole = ref(null)
|
||||
const permissionTree = ref([])
|
||||
const checkedPermissions = ref([])
|
||||
|
||||
const copyVisible = ref(false)
|
||||
const copyFormData = ref({})
|
||||
const copyFormRef = ref(null)
|
||||
const copyFormRules = {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await authApi.roles.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
} catch (error) {
|
||||
message.error('获取角色列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPermissionTree = async () => {
|
||||
try {
|
||||
const res = await authApi.permissions.tree.get()
|
||||
permissionTree.value = res.data
|
||||
} catch (error) {
|
||||
message.error('获取权限树失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 新增角色
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增角色'
|
||||
formData.value = {
|
||||
status: 1,
|
||||
sort: 0,
|
||||
}
|
||||
modalVisible.value = true
|
||||
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) => {
|
||||
modalTitle.value = '编辑角色'
|
||||
formData.value = { ...record }
|
||||
modalVisible.value = true
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 删除角色
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
if (formData.value.id) {
|
||||
await authApi.roles.edit.put(formData.value.id, formData.value)
|
||||
message.success('更新成功')
|
||||
const res = await authApi.roles.delete.delete(record.id)
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
await authApi.roles.add.post(formData.value)
|
||||
message.success('创建成功')
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await authApi.roles.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
console.error('删除角色失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await authApi.roles.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要删除的角色')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchStatus = async (status = 1) => {
|
||||
try {
|
||||
await authApi.roles.batchStatus.post({ ids: selectedRowKeys.value, status })
|
||||
message.success(status ? '批量启用成功' : '批量禁用成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handlePermissions = async (record) => {
|
||||
currentRole.value = record
|
||||
permissionVisible.value = true
|
||||
try {
|
||||
const res = await authApi.roles.permissions.get(record.id)
|
||||
checkedPermissions.value = res.data.map((p) => p.id)
|
||||
} catch (error) {
|
||||
message.error('获取角色权限失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handlePermissionSubmit = async () => {
|
||||
try {
|
||||
await authApi.roles.permissions.post(currentRole.value.id, {
|
||||
permission_ids: checkedPermissions.value,
|
||||
})
|
||||
message.success('分配权限成功')
|
||||
permissionVisible.value = false
|
||||
} catch (error) {
|
||||
message.error('分配权限失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = (record) => {
|
||||
copyFormData.value = {
|
||||
name: `${record.name}_copy`,
|
||||
code: `${record.code}_copy`,
|
||||
description: record.description,
|
||||
status: record.status,
|
||||
}
|
||||
copyVisible.value = true
|
||||
}
|
||||
|
||||
const handleCopySubmit = async () => {
|
||||
try {
|
||||
await copyFormRef.value.validate()
|
||||
await authApi.roles.copy.post(selectedRowKeys.value[0] || currentRole.value.id, copyFormData.value)
|
||||
message.success('复制成功')
|
||||
copyVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除选中的 ${selectedRows.value.length} 个角色吗？`,
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.roles.batchDelete.post({ ids })
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量删除角色失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
message.error(error.message || '复制失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleBatchCopy = async () => {
|
||||
try {
|
||||
await authApi.roles.batchCopy.post({
|
||||
ids: selectedRowKeys.value,
|
||||
name: copyFormData.value.name,
|
||||
code: copyFormData.value.code,
|
||||
})
|
||||
message.success('批量复制成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量复制失败')
|
||||
// 批量更新状态
|
||||
const handleBatchStatus = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要操作的角色')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '确定要批量启用/禁用选中的角色吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const status = selectedRows.value[0].status === 1 ? 0 : 1
|
||||
const res = await authApi.roles.batchStatus.post({ ids, status })
|
||||
if (res.code === 200) {
|
||||
message.success('操作成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量更新状态失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchPermissionTree()
|
||||
})
|
||||
// 复制角色
|
||||
const handleCopy = (record) => {
|
||||
// TODO: 实现复制角色弹窗
|
||||
message.info('复制角色功能开发中...')
|
||||
}
|
||||
|
||||
// 批量复制角色
|
||||
const handleBatchCopy = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要复制的角色')
|
||||
return
|
||||
}
|
||||
// TODO: 实现批量复制角色弹窗
|
||||
message.info('批量复制角色功能开发中...')
|
||||
}
|
||||
|
||||
// 权限设置
|
||||
const handlePermission = (record) => {
|
||||
if (!record && selectedRows.value.length !== 1) {
|
||||
message.error('请选择一个角色进行权限设置')
|
||||
return
|
||||
}
|
||||
const roleData = record || selectedRows.value[0]
|
||||
dialog.permission = true
|
||||
setTimeout(() => {
|
||||
permissionDialogRef.value?.open().setData(roleData)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 权限设置成功回调
|
||||
const permissionSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.role-management {
|
||||
padding: 16px;
|
||||
.role-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<div class="permission-content">
|
||||
<div class="permission-tree">
|
||||
<a-tree ref="menuTreeRef" v-model:checkedKeys="checkedPermissionIds" :tree-data="permissionTree"
|
||||
:field-names="fieldNames" :checkable="true" :default-expand-all="true"
|
||||
:check-strictly="false" :selectable="false">
|
||||
<template #title="{ name }">
|
||||
{{ name }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
const menuTreeRef = ref()
|
||||
|
||||
// 权限树数据
|
||||
const permissionTree = ref([])
|
||||
const checkedPermissionIds = ref([])
|
||||
|
||||
// 树字段映射
|
||||
const fieldNames = {
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
role_id: '',
|
||||
permission_ids: []
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 提交保存
|
||||
const submit = async () => {
|
||||
try {
|
||||
isSaveing.value = true
|
||||
|
||||
// 获取选中的权限 ID
|
||||
form.permission_ids = checkedPermissionIds.value || []
|
||||
|
||||
const res = await authApi.roles.permissions.post(form.role_id, { permission_ids: form.permission_ids })
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 200) {
|
||||
emit('success', form)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存权限失败:', error)
|
||||
isSaveing.value = false
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取权限树
|
||||
const loadPermissionTree = async () => {
|
||||
try {
|
||||
const res = await authApi.permissions.tree.get()
|
||||
permissionTree.value = res.data || []
|
||||
} catch (error) {
|
||||
console.error('获取权限树失败:', error)
|
||||
message.error('获取权限树失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取角色已有权限
|
||||
const loadRolePermissions = async (roleId) => {
|
||||
try {
|
||||
const res = await authApi.roles.permissions.get(roleId)
|
||||
if (res.code === 200 && res.data) {
|
||||
checkedPermissionIds.value = res.data.map(item => item.id)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取角色权限失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = async (data) => {
|
||||
form.role_id = data.id
|
||||
checkedPermissionIds.value = []
|
||||
|
||||
// 加载角色已有的权限
|
||||
await loadRolePermissions(data.id)
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
loadPermissionTree()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.permission-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.permission-tree {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e8e8e8;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :footer="null"
|
||||
@cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="角色名称" name="name">
|
||||
<a-input v-model:value="form.name" placeholder="请输入角色名称" allow-clear></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色编码" name="code">
|
||||
<a-input v-model:value="form.code" placeholder="请输入角色编码" allow-clear :disabled="mode === 'edit'"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色描述" name="description">
|
||||
<a-textarea v-model:value="form.description" placeholder="请输入角色描述" :rows="4" allow-clear></a-textarea>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="form.sort" :min="0" :step="1" style="width: 100%" placeholder="请输入排序" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增角色',
|
||||
edit: '编辑角色',
|
||||
show: '查看角色'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
sort: 1,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 状态开关计算属性
|
||||
const statusChecked = computed({
|
||||
get: () => form.status === 1,
|
||||
set: (val) => {
|
||||
form.status = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [
|
||||
{ required: true, message: '请输入角色编码', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '角色编码只能包含字母、数字和下划线', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '请输入排序', trigger: 'change' },
|
||||
{ type: 'number', message: '排序必须为数字', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
let res = {}
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.roles.add.post(form)
|
||||
} else {
|
||||
res = await authApi.roles.edit.put(form.id, form)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 200) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
isSaveing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.name = data.name
|
||||
form.code = data.code
|
||||
form.description = data.description || ''
|
||||
form.sort = data.sort
|
||||
form.status = data.status !== undefined ? data.status : 1
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,524 +1,550 @@
|
||||
<template>
|
||||
<div class="user-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="用户名/真实姓名/邮箱" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门">
|
||||
<a-tree-select
|
||||
v-model:value="searchParams.department_id"
|
||||
:tree-data="departmentTree"
|
||||
allow-clear
|
||||
show-search
|
||||
placeholder="请选择部门"
|
||||
style="width: 200px"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'children' }"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色">
|
||||
<a-select v-model:value="searchParams.role_id" allow-clear placeholder="请选择角色" style="width: 150px">
|
||||
<a-select-option v-for="role in roles" :key="role.id" :value="role.id">
|
||||
{{ role.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
<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="filteredDepartmentTree"
|
||||
:field-names="{ title: 'name', key: 'id', children: 'children' }" show-line @select="onDeptSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<apartment-outlined v-if="dataRef.children && dataRef.children.length > 0" />
|
||||
<user-outlined v-else />
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="tool-bar">
|
||||
<div class="left-panel">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear
|
||||
style="width: 140px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名">
|
||||
<a-input v-model:value="searchForm.real_name" placeholder="请输入姓名" allow-clear
|
||||
style="width: 140px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱">
|
||||
<a-input v-model:value="searchForm.email" placeholder="请输入邮箱" allow-clear
|
||||
style="width: 160px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchForm.status" placeholder="请选择状态" allow-clear style="width: 100px">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleUserReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<a-dropdown :disabled="selectedRows.length === 0">
|
||||
<a-button :disabled="selectedRows.length === 0">
|
||||
批量操作
|
||||
<down-outlined />
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="handleBatchStatus">
|
||||
<check-circle-outlined />批量启用/禁用
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleBatchDepartment">
|
||||
<apartment-outlined />批量分配部门
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleBatchRoles">
|
||||
<team-outlined />批量分配角色
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item @click="handleBatchDelete" danger>
|
||||
<delete-outlined />批量删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-dropdown>
|
||||
<a-button>
|
||||
更多
|
||||
<down-outlined />
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="handleImport">
|
||||
<import-outlined />导入用户
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleExport">
|
||||
<export-outlined />导出用户
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="handleDownloadTemplate">
|
||||
<download-outlined />下载模板
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button @click="handleExport">
|
||||
<template #icon><ExportOutlined /></template>
|
||||
导出
|
||||
</a-button>
|
||||
<a-button @click="handleImport">
|
||||
<template #icon><ImportOutlined /></template>
|
||||
导入
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
批量启用
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
批量禁用
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<sc-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'avatar'">
|
||||
<a-avatar :src="record.avatar" :size="40">
|
||||
<template #icon><UserOutlined /></template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" :row-selection="rowSelection" @refresh="refreshTable"
|
||||
@paginationChange="handlePaginationChange" @select="handleSelectChange" @selectAll="handleSelectAll">
|
||||
<template #avatar="{ record }">
|
||||
<a-avatar :src="record.avatar" :size="32">
|
||||
<template #icon><user-outlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'roles'">
|
||||
<a-tag v-for="role in record.roles" :key="role.id" color="blue">{{ role.name }}</a-tag>
|
||||
<template #department="{ record }">
|
||||
{{ record.department?.name || '-' }}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<template #roles="{ record }">
|
||||
<a-tag v-for="role in record.roles" :key="role.id" color="blue">
|
||||
{{ role.name }}
|
||||
</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-button type="link" size="small" @click="handleResetPassword(record)">重置密码</a-button>
|
||||
<a-popconfirm title="确定要删除该用户吗？" @confirm="handleDelete(record.id)">
|
||||
<a-popconfirm title="确定删除该用户吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="600"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input v-model:value="formData.username" placeholder="请输入用户名" :disabled="!!formData.id" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="!formData.id" label="密码" name="password">
|
||||
<a-input-password v-model:value="formData.password" placeholder="请输入密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="真实姓名" name="real_name">
|
||||
<a-input v-model:value="formData.real_name" placeholder="请输入真实姓名" />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone">
|
||||
<a-input v-model:value="formData.phone" placeholder="请输入手机号" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门" name="department_id">
|
||||
<a-tree-select
|
||||
v-model:value="formData.department_id"
|
||||
:tree-data="departmentTree"
|
||||
placeholder="请选择部门"
|
||||
:field-names="{ label: 'name', value: 'id', children: 'children' }"
|
||||
tree-default-expand-all
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="角色" name="role_ids">
|
||||
<a-select v-model:value="formData.role_ids" mode="multiple" placeholder="请选择角色" :options="roleOptions" />
|
||||
</a-form-item>
|
||||
<a-form-item label="头像" name="avatar">
|
||||
<sc-upload v-model="formData.avatar" :limit="1" accept="image/*" list-type="picture-card" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 导入弹窗 -->
|
||||
<a-modal v-model:open="importVisible" title="导入用户" :width="500" @ok="handleImportSubmit">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-alert message="请先下载导入模板，填写完成后上传" type="info" show-icon />
|
||||
<a-button block @click="handleDownloadTemplate">
|
||||
<template #icon><DownloadOutlined /></template>
|
||||
下载导入模板
|
||||
</a-button>
|
||||
<a-upload
|
||||
:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<a-button block>
|
||||
<template #icon><UploadOutlined /></template>
|
||||
选择文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-space>
|
||||
</a-modal>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑用户弹窗 -->
|
||||
<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 setup>
|
||||
import { ref, computed, onMounted, h } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
ExportOutlined,
|
||||
ImportOutlined,
|
||||
DownloadOutlined,
|
||||
UploadOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import scUpload from '@/components/scUpload/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import roleDialog from './role.vue'
|
||||
import authApi from '@/api/auth'
|
||||
import { useTable } from '@/hooks/useTable'
|
||||
|
||||
defineOptions({
|
||||
name: 'UserManagement',
|
||||
name: 'authUser'
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
department_id: undefined,
|
||||
role_id: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
// 使用useTable hooks
|
||||
const {
|
||||
tableRef,
|
||||
searchForm,
|
||||
tableData,
|
||||
loading,
|
||||
pagination,
|
||||
selectedRows,
|
||||
rowSelection,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePaginationChange,
|
||||
handleSelectChange,
|
||||
handleSelectAll,
|
||||
refreshTable
|
||||
} = useTable({
|
||||
api: authApi.users.list.get,
|
||||
searchForm: {
|
||||
username: '',
|
||||
real_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department_id: null,
|
||||
status: null
|
||||
},
|
||||
}))
|
||||
columns: [],
|
||||
needPagination: true,
|
||||
needSelection: true
|
||||
})
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
role: false,
|
||||
department: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const roleDialogRef = ref(null)
|
||||
const departmentDialogRef = ref(null)
|
||||
|
||||
// 部门树数据
|
||||
const departmentTree = ref([])
|
||||
const filteredDepartmentTree = ref([])
|
||||
const selectedDeptKeys = ref([])
|
||||
const departmentKeyword = ref('')
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ title: '头像', key: 'avatar', width: 80, align: 'center' },
|
||||
{ title: '用户名', dataIndex: 'username', key: 'username', width: 120 },
|
||||
{ title: '真实姓名', dataIndex: 'real_name', key: 'real_name', width: 120 },
|
||||
{ title: '头像', dataIndex: 'avatar', key: 'avatar', width: 80, align: 'center', slot: 'avatar' },
|
||||
{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
|
||||
{ title: '姓名', dataIndex: 'real_name', key: 'real_name', width: 150 },
|
||||
{ title: '邮箱', dataIndex: 'email', key: 'email', width: 180 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '部门', dataIndex: 'department_name', key: 'department_name', width: 150 },
|
||||
{ title: '角色', key: 'roles', width: 200 },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '部门', dataIndex: 'department', key: 'department', slot: 'department', width: 150 },
|
||||
{ title: '角色', dataIndex: 'roles', key: 'roles', width: 200, slot: 'roles' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center', slot: 'status' },
|
||||
{ title: '最后登录', dataIndex: 'last_login_at', key: 'last_login_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 200, fixed: 'right' },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 280, align: 'center', slot: 'action', fixed: 'right' }
|
||||
]
|
||||
|
||||
const departmentTree = ref([])
|
||||
const roles = ref([])
|
||||
const roleOptions = computed(() => roles.value.map((r) => ({ label: r.name, value: r.id })))
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增用户')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
real_name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
|
||||
email: [{ type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }],
|
||||
phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const importVisible = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadFile = ref(null)
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await authApi.users.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
} catch (error) {
|
||||
message.error('获取用户列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchDepartments = async () => {
|
||||
// 加载部门树
|
||||
const loadDepartmentTree = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.tree.get()
|
||||
departmentTree.value = [{ id: 0, name: '顶级部门', children: res.data }]
|
||||
} catch (error) {
|
||||
message.error('获取部门树失败')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchRoles = async () => {
|
||||
try {
|
||||
const res = await authApi.roles.all.get()
|
||||
roles.value = res.data
|
||||
} catch (error) {
|
||||
message.error('获取角色列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
department_id: undefined,
|
||||
role_id: undefined,
|
||||
status: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增用户'
|
||||
formData.value = {
|
||||
status: 1,
|
||||
role_ids: [],
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (record) => {
|
||||
modalTitle.value = '编辑用户'
|
||||
formData.value = {
|
||||
...record,
|
||||
role_ids: record.roles?.map((r) => r.id) || [],
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
if (formData.value.id) {
|
||||
await authApi.users.edit.put(formData.value.id, formData.value)
|
||||
message.success('更新成功')
|
||||
} else {
|
||||
await authApi.users.add.post(formData.value)
|
||||
message.success('创建成功')
|
||||
if (res.code === 200) {
|
||||
departmentTree.value = res.data || []
|
||||
filteredDepartmentTree.value = res.data || []
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
console.error('加载部门树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await authApi.users.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
// 部门搜索
|
||||
const handleDeptSearch = (e) => {
|
||||
const keyword = e.target?.value || ''
|
||||
departmentKeyword.value = keyword
|
||||
if (!keyword) {
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await authApi.users.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
// 递归过滤部门树
|
||||
const filterTree = (nodes) => {
|
||||
return nodes.reduce((acc, node) => {
|
||||
const isMatch = node.name && node.name.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 handleBatchStatus = async (status = 1) => {
|
||||
try {
|
||||
await authApi.users.batchStatus.post({ ids: selectedRowKeys.value, status })
|
||||
message.success(status ? '批量启用成功' : '批量禁用成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('操作失败')
|
||||
// 重置 - 覆盖useTable的handleReset以添加额外逻辑
|
||||
const handleUserReset = () => {
|
||||
searchForm.username = ''
|
||||
searchForm.real_name = ''
|
||||
searchForm.email = ''
|
||||
searchForm.phone = ''
|
||||
searchForm.status = null
|
||||
searchForm.department_id = null
|
||||
selectedDeptKeys.value = []
|
||||
departmentKeyword.value = ''
|
||||
filteredDepartmentTree.value = departmentTree.value
|
||||
handleReset()
|
||||
}
|
||||
|
||||
// 部门选择事件
|
||||
const onDeptSelect = (selectedKeys) => {
|
||||
if (selectedKeys && selectedKeys.length > 0) {
|
||||
searchForm.department_id = selectedKeys[0]
|
||||
} else {
|
||||
searchForm.department_id = null
|
||||
}
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleResetPassword = (record) => {
|
||||
const input = h('input', {
|
||||
type: 'password',
|
||||
placeholder: '请输入新密码',
|
||||
onInput: (e) => {
|
||||
record.newPassword = e.target.value
|
||||
},
|
||||
})
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要删除的用户')
|
||||
return
|
||||
}
|
||||
|
||||
modal.confirm({
|
||||
title: '重置密码',
|
||||
content: h('div', { style: { marginTop: '16px' } }, [input]),
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定删除选中的 ${selectedRows.value.length} 个用户吗？`,
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
if (!record.newPassword) {
|
||||
message.error('请输入新密码')
|
||||
return Promise.reject()
|
||||
}
|
||||
try {
|
||||
await authApi.users.edit.put(record.id, { password: record.newPassword })
|
||||
message.success('重置密码成功')
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.users.batchDelete.post({ ids })
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('重置密码失败')
|
||||
return Promise.reject()
|
||||
console.error('批量删除用户失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 批量更新状态
|
||||
const handleBatchStatus = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要操作的用户')
|
||||
return
|
||||
}
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认操作',
|
||||
content: '确定要批量启用/禁用选中的用户吗？',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const status = selectedRows.value[0].status === 1 ? 0 : 1
|
||||
const res = await authApi.users.batchStatus.post({ ids, status })
|
||||
if (res.code === 200) {
|
||||
message.success('操作成功')
|
||||
selectedRows.value = []
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量更新状态失败:', error)
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 批量分配部门
|
||||
const handleBatchDepartment = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要分配部门的用户')
|
||||
return
|
||||
}
|
||||
// TODO: 实现批量分配部门弹窗
|
||||
message.info('批量分配部门功能开发中...')
|
||||
}
|
||||
|
||||
// 批量分配角色
|
||||
const handleBatchRoles = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
message.warning('请选择要分配角色的用户')
|
||||
return
|
||||
}
|
||||
// TODO: 实现批量分配角色弹窗
|
||||
message.info('批量分配角色功能开发中...')
|
||||
}
|
||||
|
||||
// 导出数据
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const res = await authApi.users.export.post({})
|
||||
const url = window.URL.createObjectURL(new Blob([res]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', `users_${Date.now()}.xlsx`)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('导出成功')
|
||||
const ids = selectedRows.value.map(item => item.id)
|
||||
const res = await authApi.users.export.post({ ids: ids.length > 0 ? ids : undefined })
|
||||
if (res) {
|
||||
// 创建下载链接
|
||||
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `users_${Date.now()}.xlsx`
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
message.success('导出成功')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导出失败:', error)
|
||||
message.error('导出失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleImport = () => {
|
||||
importVisible.value = true
|
||||
fileList.value = []
|
||||
uploadFile.value = null
|
||||
}
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel'
|
||||
if (!isExcel) {
|
||||
message.error('只能上传 Excel 文件')
|
||||
return false
|
||||
}
|
||||
const isLt10M = file.size / 1024 / 1024 < 10
|
||||
if (!isLt10M) {
|
||||
message.error('文件大小不能超过 10MB')
|
||||
return false
|
||||
}
|
||||
uploadFile.value = file
|
||||
fileList.value = [file]
|
||||
return false
|
||||
}
|
||||
|
||||
const handleRemove = () => {
|
||||
uploadFile.value = null
|
||||
fileList.value = []
|
||||
}
|
||||
|
||||
// 下载模板
|
||||
const handleDownloadTemplate = async () => {
|
||||
try {
|
||||
const res = await authApi.users.downloadTemplate.get()
|
||||
const url = window.URL.createObjectURL(new Blob([res]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', 'user_template.xlsx')
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
if (res) {
|
||||
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = 'user_template.xlsx'
|
||||
link.click()
|
||||
window.URL.revokeObjectURL(url)
|
||||
message.success('下载成功')
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('下载模板失败')
|
||||
console.error('下载模板失败:', error)
|
||||
message.error('下载失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleImportSubmit = async () => {
|
||||
if (!uploadFile.value) {
|
||||
message.error('请选择文件')
|
||||
return
|
||||
}
|
||||
// 导入用户
|
||||
const handleImport = () => {
|
||||
// TODO: 实现导入弹窗
|
||||
message.info('导入功能开发中...')
|
||||
}
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append('file', uploadFile.value)
|
||||
// 重置密码
|
||||
const handleResetPassword = (record) => {
|
||||
Modal.confirm({
|
||||
title: '重置密码',
|
||||
content: '确定要重置该用户的密码吗？重置后密码为: 123456',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
// TODO: 实现重置密码接口
|
||||
message.success('密码重置成功')
|
||||
} catch (error) {
|
||||
console.error('重置密码失败:', error)
|
||||
message.error('重置密码失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
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 authApi.users.import.post(formData)
|
||||
message.success(res.message || '导入成功')
|
||||
importVisible.value = false
|
||||
fetchData()
|
||||
const res = await authApi.users.delete.delete(record.id)
|
||||
if (res.code === 200) {
|
||||
message.success('删除成功')
|
||||
refreshTable()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('导入失败')
|
||||
console.error('删除用户失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 角色设置成功回调
|
||||
const handleRoleSuccess = () => {
|
||||
refreshTable()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchDepartments()
|
||||
fetchRoles()
|
||||
loadDepartmentTree()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-management {
|
||||
padding: 16px;
|
||||
.user-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<a-modal title="角色设置" :open="visible" :width="500" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<div class="role-content">
|
||||
<a-checkbox-group v-model:value="checkedRoles" style="width: 100%">
|
||||
<a-space direction="vertical" style="width: 100%">
|
||||
<a-checkbox v-for="role in roleList" :key="role.id" :value="role.id" style="width: 100%">
|
||||
{{ role.name }}
|
||||
</a-checkbox>
|
||||
</a-space>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
role_ids: []
|
||||
})
|
||||
|
||||
// 选中的角色
|
||||
const checkedRoles = ref([])
|
||||
|
||||
// 角色列表
|
||||
const roleList = ref([])
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 提交保存
|
||||
const submit = async () => {
|
||||
try {
|
||||
isSaveing.value = true
|
||||
|
||||
// 获取选中的角色 ID
|
||||
form.role_ids = checkedRoles.value || []
|
||||
|
||||
const res = await authApi.users.batchRoles.post({
|
||||
ids: [form.id],
|
||||
role_ids: form.role_ids
|
||||
})
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 200) {
|
||||
emit('success', form)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存角色失败:', error)
|
||||
isSaveing.value = false
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取角色列表
|
||||
const getRoles = async () => {
|
||||
try {
|
||||
const res = await authApi.roles.all.get()
|
||||
roleList.value = res.data || []
|
||||
} catch (error) {
|
||||
console.error('获取角色列表失败:', error)
|
||||
message.error('获取角色列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
checkedRoles.value = data.roles ? data.roles.map(item => item.id) : []
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
getRoles()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.role-content {
|
||||
padding: 20px 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :mask-closable="false"
|
||||
:footer="null" @cancel="handleCancel">
|
||||
<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
|
||||
:wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="头像" name="avatar">
|
||||
<sc-upload v-model="form.avatar" :cropper="true" :aspectRatio="1" title="上传头像"></sc-upload>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input v-model:value="form.username" placeholder="请输入用户名" allow-clear :disabled="mode === 'edit'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="真实姓名" name="real_name">
|
||||
<a-input v-model:value="form.real_name" placeholder="请输入真实姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input v-model:value="form.email" placeholder="请输入邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号" name="phone">
|
||||
<a-input v-model:value="form.phone" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
<template v-if="mode === 'add'">
|
||||
<a-form-item label="登录密码" name="password">
|
||||
<a-input-password v-model:value="form.password" placeholder="请输入登录密码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="password2">
|
||||
<a-input-password v-model:value="form.password2" placeholder="请再次输入密码" allow-clear />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item label="所属部门" name="department_id">
|
||||
<a-tree-select v-model:value="form.department_id" :tree-data="department"
|
||||
:field-names="departmentFieldNames" :tree-default-expand-all="false" show-icon placeholder="请选择部门" allow-clear
|
||||
tree-node-filter-prop="name" />
|
||||
</a-form-item>
|
||||
<a-form-item label="所属角色" name="role_ids">
|
||||
<a-select v-model:value="form.role_ids" mode="multiple" placeholder="请选择角色" allow-clear style="width: 100%">
|
||||
<a-select-option v-for="role in rolesList" :key="role.id" :value="role.id">
|
||||
{{ role.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-switch v-model:checked="statusChecked" checked-children="启用" un-checked-children="禁用" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import scUpload from '@/components/scUpload/index.vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const mode = ref('add')
|
||||
const titleMap = {
|
||||
add: '新增用户',
|
||||
edit: '编辑用户',
|
||||
show: '查看用户'
|
||||
}
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
username: '',
|
||||
avatar: '',
|
||||
real_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department_id: null,
|
||||
role_ids: [],
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 状态开关计算属性
|
||||
const statusChecked = computed({
|
||||
get: () => form.status === 1,
|
||||
set: (val) => {
|
||||
form.status = val ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// 表单引用
|
||||
const dialogForm = ref()
|
||||
|
||||
// 验证规则
|
||||
const rules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '用户名长度在 3 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
real_name: [
|
||||
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '真实姓名长度在 2 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入登录密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (form.password2 !== '') {
|
||||
dialogForm.value?.validateFields('password2')
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value !== form.password) {
|
||||
return Promise.reject(new Error('两次输入密码不一致!'))
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 部门数据
|
||||
const department = ref([])
|
||||
const departmentFieldNames = {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 角色列表
|
||||
const rolesList = ref([])
|
||||
|
||||
// 显示对话框
|
||||
const open = (openMode = 'add') => {
|
||||
mode.value = openMode
|
||||
visible.value = true
|
||||
return {
|
||||
setData,
|
||||
open,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 加载部门树数据
|
||||
const loadDepartment = async () => {
|
||||
try {
|
||||
const res = await authApi.departments.tree.get()
|
||||
if (res.code === 200) {
|
||||
department.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载角色列表
|
||||
const loadRoles = async () => {
|
||||
try {
|
||||
const res = await authApi.roles.all.get()
|
||||
if (res.code === 200) {
|
||||
rolesList.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载角色列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交方法
|
||||
const submit = async () => {
|
||||
try {
|
||||
await dialogForm.value.validate()
|
||||
isSaveing.value = true
|
||||
|
||||
const submitData = {
|
||||
username: form.username,
|
||||
avatar: form.avatar,
|
||||
real_name: form.real_name,
|
||||
email: form.email,
|
||||
phone: form.phone,
|
||||
department_id: form.department_id,
|
||||
role_ids: form.role_ids,
|
||||
status: form.status
|
||||
}
|
||||
|
||||
if (mode.value === 'add') {
|
||||
submitData.password = form.password
|
||||
}
|
||||
|
||||
let res = {}
|
||||
if (mode.value === 'add') {
|
||||
res = await authApi.users.add.post(submitData)
|
||||
} else {
|
||||
res = await authApi.users.edit.put(form.id, submitData)
|
||||
}
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 200) {
|
||||
emit('success', form, mode.value)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('表单验证失败', error)
|
||||
isSaveing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表单注入数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.username = data.username
|
||||
form.avatar = data.avatar
|
||||
form.real_name = data.real_name
|
||||
form.email = data.email
|
||||
form.phone = data.phone
|
||||
form.department_id = data.department_id
|
||||
form.role_ids = data.roles ? data.roles.map(item => item.id) : []
|
||||
form.status = data.status !== undefined ? data.status : 1
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
loadDepartment()
|
||||
loadRoles()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user