molong/laravel_swoole
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
molong
2026-02-09 23:27:16 +08:00
parent adf7457502
commit af366d76b2
8 changed files with 3282 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
resources/admin/src/pages/auth/departments/index.vue Normal file
View File

@@ -0,0 +1,530 @@
<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'">
<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-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-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>
</div>
</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 scTable from '@/components/scTable/index.vue'
defineOptions({
name: 'DepartmentManagement',
})
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
},
}))
const treeRowSelection = computed(() => ({
selectedRowKeys: selectedRowKeys.value,
onChange: (keys) => {
selectedRowKeys.value = keys
},
}))
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' },
]
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
}
const handleAddChild = (record) => {
modalTitle.value = '新增子部门'
formData.value = {
parent_id: record.id,
status: 1,
sort: 0,
}
modalVisible.value = true
}
const handleEdit = (record) => {
modalTitle.value = '编辑部门'
formData.value = { ...record }
modalVisible.value = true
}
const handleSubmit = async () => {
try {
await formRef.value.validate()
if (formData.value.id) {
await authApi.departments.edit.put(formData.value.id, formData.value)
message.success('更新成功')
} else {
await authApi.departments.add.post(formData.value)
message.success('创建成功')
}
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) {
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('请选择文件')
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('导入失败')
}
}
onMounted(() => {
fetchData()
fetchDepartmentTree()
})
</script>
<style scoped lang="scss">
.department-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
}
</style>

466
resources/admin/src/pages/auth/permissions/index.vue Normal file
View File

@@ -0,0 +1,466 @@
<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>
<a-space>
<a-button type="primary" @click="handleAdd">
<template #icon><PlusOutlined /></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-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>
</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 authApi from '@/api/auth'
import scTable from '@/components/scTable/index.vue'
defineOptions({
name: 'PermissionManagement',
})
const searchParams = ref({
keyword: '',
type: undefined,
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 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 () => {
try {
const res = await authApi.permissions.tree.get()
permissionTree.value = [{ id: 0, name: '顶级权限', children: res.data }]
} catch (error) {
message.error('获取权限树失败')
}
}
const handleSearch = () => {
pagination.value.current = 1
fetchData()
}
const handleReset = () => {
searchParams.value = {
keyword: '',
type: undefined,
status: undefined,
}
pagination.value.current = 1
fetchData()
}
const handleViewModeChange = () => {
selectedRowKeys.value = []
fetchData()
}
const handlePageChange = (page) => {
pagination.value.current = page
fetchData()
}
const handleAdd = () => {
modalTitle.value = '新增权限'
formData.value = {
parent_id: 0,
status: 1,
sort: 0,
}
modalVisible.value = true
}
const handleAddChild = (record) => {
modalTitle.value = '新增子权限'
formData.value = {
parent_id: record.id,
status: 1,
sort: 0,
}
modalVisible.value = true
}
const handleEdit = (record) => {
modalTitle.value = '编辑权限'
formData.value = { ...record }
modalVisible.value = true
}
const handleSubmit = async () => {
try {
await formRef.value.validate()
if (formData.value.id) {
await authApi.permissions.edit.put(formData.value.id, formData.value)
message.success('更新成功')
} else {
await authApi.permissions.add.post(formData.value)
message.success('创建成功')
}
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.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()
})
</script>
<style scoped lang="scss">
.permission-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
}
</style>

436
resources/admin/src/pages/auth/roles/index.vue Normal file
View File

@@ -0,0 +1,436 @@
<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'">
<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-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="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>
</div>
</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 scTable from '@/components/scTable/index.vue'
defineOptions({
name: 'RoleManagement',
})
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
},
}))
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' },
]
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
}
const handleEdit = (record) => {
modalTitle.value = '编辑角色'
formData.value = { ...record }
modalVisible.value = true
}
const handleSubmit = async () => {
try {
await formRef.value.validate()
if (formData.value.id) {
await authApi.roles.edit.put(formData.value.id, formData.value)
message.success('更新成功')
} else {
await authApi.roles.add.post(formData.value)
message.success('创建成功')
}
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) {
message.error('删除失败')
}
}
const handleBatchDelete = async () => {
try {
await authApi.roles.batchDelete.post({ ids: selectedRowKeys.value })
message.success('批量删除成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('批量删除失败')
}
}
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
}
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('批量复制失败')
}
}
onMounted(() => {
fetchData()
fetchPermissionTree()
})
</script>
<style scoped lang="scss">
.role-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
}
</style>

525
resources/admin/src/pages/auth/users/index.vue Normal file
View File

@@ -0,0 +1,525 @@
<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>
搜索
</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="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>
</a-avatar>
</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 === 'roles'">
<a-tag v-for="role in record.roles" :key="role.id" color="blue">{{ role.name }}</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
<a-button type="link" size="small" @click="handleResetPassword(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="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>
</div>
</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 scTable from '@/components/scTable/index.vue'
import scUpload from '@/components/scUpload/index.vue'
defineOptions({
name: 'UserManagement',
})
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
},
}))
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: '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: 'last_login_at', key: 'last_login_at', width: 180 },
{ title: '操作', key: 'action', width: 200, 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 () => {
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('创建成功')
}
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.users.delete.delete(id)
message.success('删除成功')
fetchData()
} catch (error) {
message.error('删除失败')
}
}
const handleBatchDelete = async () => {
try {
await authApi.users.batchDelete.post({ ids: selectedRowKeys.value })
message.success('批量删除成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('批量删除失败')
}
}
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('操作失败')
}
}
const handleResetPassword = (record) => {
const input = h('input', {
type: 'password',
placeholder: '请输入新密码',
onInput: (e) => {
record.newPassword = e.target.value
},
})
modal.confirm({
title: '重置密码',
content: h('div', { style: { marginTop: '16px' } }, [input]),
onOk: async () => {
if (!record.newPassword) {
message.error('请输入新密码')
return Promise.reject()
}
try {
await authApi.users.edit.put(record.id, { password: record.newPassword })
message.success('重置密码成功')
} catch (error) {
message.error('重置密码失败')
return Promise.reject()
}
},
})
}
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('导出成功')
} 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.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)
} catch (error) {
message.error('下载模板失败')
}
}
const handleImportSubmit = async () => {
if (!uploadFile.value) {
message.error('请选择文件')
return
}
const formData = new FormData()
formData.append('file', uploadFile.value)
try {
const res = await authApi.users.import.post(formData)
message.success(res.message || '导入成功')
importVisible.value = false
fetchData()
} catch (error) {
message.error('导入失败')
}
}
onMounted(() => {
fetchData()
fetchDepartments()
fetchRoles()
})
</script>
<style scoped lang="scss">
.user-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
}
</style>

489
resources/admin/src/pages/system/config/index.vue Normal file
View File

@@ -0,0 +1,489 @@
<template>
<div class="config-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.group" allow-clear placeholder="请选择分组" style="width: 150px">
<a-select-option v-for="group in groups" :key="group" :value="group">
{{ group }}
</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>
<a-space>
<a-button type="primary" @click="handleAdd">
<template #icon><PlusOutlined /></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 === 'type'">
<a-tag :color="getTypeColor(record.type)">
{{ getTypeLabel(record.type) }}
</a-tag>
</template>
<template v-if="column.key === 'value'">
<span v-if="record.type === 'image' || record.type === 'file'" class="value-preview">
<a-image
v-if="record.type === 'image'"
:src="record.value"
:width="40"
:height="40"
style="object-fit: cover"
/>
<a-tag v-else color="blue">文件</a-tag>
</span>
<span v-else class="value-text">{{ formatValue(record.value, record.type) }}</span>
</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="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="group">
<a-select v-model:value="formData.group" placeholder="请选择配置分组">
<a-select-option v-for="group in groups" :key="group" :value="group">
{{ group }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="配置键" name="key">
<a-input v-model:value="formData.key" placeholder="请输入配置键，如：site_name" :disabled="!!formData.id" />
</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="description">
<a-textarea v-model:value="formData.description" placeholder="请输入配置描述" :rows="2" />
</a-form-item>
<a-form-item label="数据类型" name="type">
<a-select v-model:value="formData.type" placeholder="请选择数据类型">
<a-select-option value="string">字符串</a-select-option>
<a-select-option value="number">数字</a-select-option>
<a-select-option value="boolean">布尔值</a-select-option>
<a-select-option value="array">数组</a-select-option>
<a-select-option value="image">图片</a-select-option>
<a-select-option value="file">文件</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="配置值" name="value">
<template v-if="formData.type === 'boolean'">
<a-radio-group v-model:value="formData.value">
<a-radio :value="true">是</a-radio>
<a-radio :value="false">否</a-radio>
</a-radio-group>
</template>
<template v-else-if="formData.type === 'number'">
<a-input-number v-model:value="formData.value" style="width: 100%" />
</template>
<template v-else-if="formData.type === 'array'">
<a-textarea
v-model:value="arrayValue"
placeholder="JSON数组格式，如：[1,2,3]"
:rows="3"
@blur="handleArrayBlur"
/>
</template>
<template v-else-if="formData.type === 'image'">
<sc-upload v-model="formData.value" :limit="1" accept="image/*" list-type="picture-card" />
</template>
<template v-else-if="formData.type === 'file'">
<sc-upload v-model="formData.value" :limit="1" list-type="text" />
</template>
<template v-else>
<a-textarea v-model:value="formData.value" placeholder="请输入配置值" :rows="3" />
</template>
</a-form-item>
<a-form-item v-if="formData.type === 'string'" label="可选值" name="options">
<a-textarea
v-model:value="optionsValue"
placeholder="每行一个选项，如：option1&#10;option2&#10;option3"
:rows="3"
@blur="handleOptionsBlur"
/>
</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>
</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 systemApi from '@/api/system'
import scTable from '@/components/scTable/index.vue'
import scUpload from '@/components/scUpload/index.vue'
defineOptions({
name: 'ConfigManagement',
})
const searchParams = ref({
keyword: '',
group: 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
},
}))
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: '配置分组', dataIndex: 'group', key: 'group', width: 120 },
{ title: '配置键', dataIndex: 'key', key: 'key', width: 200 },
{ title: '配置名称', dataIndex: 'name', key: 'name', width: 150 },
{ title: '数据类型', key: 'type', width: 100, align: 'center' },
{ title: '配置值', key: 'value', 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: 150, fixed: 'right' },
]
const groups = ref([])
const modalVisible = ref(false)
const modalTitle = ref('新增配置')
const formData = ref({})
const formRef = ref(null)
const formRules = {
group: [{ required: true, message: '请选择配置分组', trigger: 'change' }],
key: [{ required: true, message: '请输入配置键', trigger: 'blur' }],
name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
}
const arrayValue = ref('')
const optionsValue = ref('')
const fetchData = async () => {
loading.value = true
try {
const res = await systemApi.configs.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 fetchGroups = async () => {
try {
const res = await systemApi.configs.groups.get()
groups.value = res.data
} catch (error) {
message.error('获取配置分组失败')
}
}
const handleSearch = () => {
pagination.value.current = 1
fetchData()
}
const handleReset = () => {
searchParams.value = {
keyword: '',
group: undefined,
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,
type: 'string',
}
arrayValue.value = ''
optionsValue.value = ''
modalVisible.value = true
}
const handleEdit = (record) => {
modalTitle.value = '编辑配置'
formData.value = { ...record }
if (record.type === 'array') {
arrayValue.value = typeof record.value === 'string' ? record.value : JSON.stringify(record.value)
}
if (record.options) {
optionsValue.value = Array.isArray(record.options) ? record.options.join('\n') : record.options
}
modalVisible.value = true
}
const handleArrayBlur = () => {
try {
if (arrayValue.value) {
formData.value.value = JSON.parse(arrayValue.value)
}
} catch (error) {
message.error('数组格式错误，请输入正确的JSON格式')
}
}
const handleOptionsBlur = () => {
if (optionsValue.value) {
formData.value.options = optionsValue.value.split('\n').filter((item) => item.trim())
}
}
const handleSubmit = async () => {
try {
await formRef.value.validate()
const submitData = { ...formData.value }
if (submitData.type === 'array' && arrayValue.value) {
submitData.value = JSON.parse(arrayValue.value)
}
if (submitData.type === 'boolean') {
submitData.value = submitData.value === 'true' || submitData.value === true
}
if (optionsValue.value) {
submitData.options = optionsValue.value.split('\n').filter((item) => item.trim())
}
if (submitData.id) {
await systemApi.configs.edit.put(submitData.id, submitData)
message.success('更新成功')
} else {
await systemApi.configs.add.post(submitData)
message.success('创建成功')
}
modalVisible.value = false
fetchData()
} catch (error) {
if (error.errorFields) {
return
}
message.error(error.message || '操作失败')
}
}
const handleCancel = () => {
modalVisible.value = false
formData.value = {}
arrayValue.value = ''
optionsValue.value = ''
formRef.value?.resetFields()
}
const handleDelete = async (id) => {
try {
await systemApi.configs.delete.delete(id)
message.success('删除成功')
fetchData()
} catch (error) {
message.error('删除失败')
}
}
const handleBatchDelete = async () => {
try {
await systemApi.configs.batchDelete.post({ ids: selectedRowKeys.value })
message.success('批量删除成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('批量删除失败')
}
}
const handleBatchStatus = async (status = 1) => {
try {
await systemApi.configs.batchStatus.post({ ids: selectedRowKeys.value, status })
message.success(status ? '批量启用成功' : '批量禁用成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('操作失败')
}
}
const getTypeColor = (type) => {
const colors = {
string: 'blue',
number: 'green',
boolean: 'orange',
array: 'purple',
image: 'cyan',
file: 'geekblue',
}
return colors[type] || 'default'
}
const getTypeLabel = (type) => {
const labels = {
string: '字符串',
number: '数字',
boolean: '布尔值',
array: '数组',
image: '图片',
file: '文件',
}
return labels[type] || type
}
const formatValue = (value, type) => {
if (type === 'array') {
try {
const arr = typeof value === 'string' ? JSON.parse(value) : value
return Array.isArray(arr) ? arr.join(', ') : value
} catch {
return value
}
}
if (type === 'boolean') {
return value === 'true' || value === true ? '是' : '否'
}
if (typeof value === 'string' && value.length > 50) {
return value.substring(0, 50) + '...'
}
return value
}
onMounted(() => {
fetchData()
fetchGroups()
})
</script>
<style scoped lang="scss">
.config-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
.value-preview {
display: flex;
align-items: center;
gap: 8px;
}
.value-text {
color: #666;
font-size: 13px;
}
}
</style>

463
resources/admin/src/pages/system/dictionary/index.vue Normal file
View File

@@ -0,0 +1,463 @@
<template>
<div class="dictionary-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="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 === 'item_count'">
<a-tag color="blue">{{ record.item_count || 0 }} 项</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="handleItems(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="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="请输入字典编码，如：user_status" :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="itemModalVisible"
:title="`字典项 - ${currentDictionary?.name}`"
:width="900"
:footer="null"
>
<div class="dictionary-items">
<a-space style="margin-bottom: 16px">
<a-button type="primary" @click="handleAddItem">
<template #icon><PlusOutlined /></template>
新增字典项
</a-button>
</a-space>
<a-table
:columns="itemColumns"
:data-source="itemDataSource"
:loading="itemLoading"
:pagination="false"
row-key="id"
>
<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="handleEditItem(record)">编辑</a-button>
<a-popconfirm title="确定要删除该字典项吗？" @confirm="handleDeleteItem(record.id)">
<a-button type="link" size="small" danger>删除</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
</a-table>
</div>
</a-modal>
<!-- 字典项编辑弹窗 -->
<a-modal
v-model:open="itemEditVisible"
:title="itemEditTitle"
:width="500"
@ok="handleItemSubmit"
@cancel="itemEditVisible = false"
>
<a-form ref="itemFormRef" :model="itemFormData" :rules="itemFormRules" :label-col="{ span: 6 }">
<a-form-item label="显示标签" name="label">
<a-input v-model:value="itemFormData.label" placeholder="请输入显示标签" />
</a-form-item>
<a-form-item label="实际值" name="value">
<a-input v-model:value="itemFormData.value" placeholder="请输入实际值" />
</a-form-item>
<a-form-item label="排序" name="sort">
<a-input-number v-model:value="itemFormData.sort" :min="0" :max="9999" style="width: 100%" />
</a-form-item>
<a-form-item label="状态" name="status">
<a-radio-group v-model:value="itemFormData.status">
<a-radio :value="1">启用</a-radio>
<a-radio :value="0">禁用</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-modal>
</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 systemApi from '@/api/system'
import scTable from '@/components/scTable/index.vue'
defineOptions({
name: 'DictionaryManagement',
})
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
},
}))
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: '字典名称', dataIndex: 'name', key: 'name', width: 200 },
{ title: '字典编码', dataIndex: 'code', key: 'code', width: 200 },
{ title: '描述', dataIndex: 'description', key: 'description', width: 250 },
{ title: '字典项', key: 'item_count', width: 100, align: 'center' },
{ 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: 200, 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 itemModalVisible = ref(false)
const itemLoading = ref(false)
const itemDataSource = ref([])
const currentDictionary = ref(null)
const itemColumns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: '显示标签', dataIndex: 'label', key: 'label', width: 200 },
{ title: '实际值', dataIndex: 'value', key: 'value', 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: 150, fixed: 'right' },
]
const itemEditVisible = ref(false)
const itemEditTitle = ref('新增字典项')
const itemFormData = ref({})
const itemFormRef = ref(null)
const itemFormRules = {
label: [{ required: true, message: '请输入显示标签', trigger: 'blur' }],
value: [{ required: true, message: '请输入实际值', trigger: 'blur' }],
}
const fetchData = async () => {
loading.value = true
try {
const res = await systemApi.dictionaries.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 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
}
const handleEdit = (record) => {
modalTitle.value = '编辑字典'
formData.value = { ...record }
modalVisible.value = true
}
const handleSubmit = async () => {
try {
await formRef.value.validate()
if (formData.value.id) {
await systemApi.dictionaries.edit.put(formData.value.id, formData.value)
message.success('更新成功')
} else {
await systemApi.dictionaries.add.post(formData.value)
message.success('创建成功')
}
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 systemApi.dictionaries.delete.delete(id)
message.success('删除成功')
fetchData()
} catch (error) {
message.error('删除失败')
}
}
const handleBatchDelete = async () => {
try {
await systemApi.dictionaries.batchDelete.post({ ids: selectedRowKeys.value })
message.success('批量删除成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('批量删除失败')
}
}
const handleBatchStatus = async (status = 1) => {
try {
await systemApi.dictionaries.batchStatus.post({ ids: selectedRowKeys.value, status })
message.success(status ? '批量启用成功' : '批量禁用成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('操作失败')
}
}
const handleItems = async (record) => {
currentDictionary.value = record
itemModalVisible.value = true
await fetchDictionaryItems(record.id)
}
const fetchDictionaryItems = async (dictionaryId) => {
itemLoading.value = true
try {
const res = await systemApi.dictionaryItems.list.get({ dictionary_id: dictionaryId })
itemDataSource.value = res.data.list || res.data
} catch (error) {
message.error('获取字典项失败')
} finally {
itemLoading.value = false
}
}
const handleAddItem = () => {
itemEditTitle.value = '新增字典项'
itemFormData.value = {
dictionary_id: currentDictionary.value.id,
status: 1,
sort: 0,
}
itemEditVisible.value = true
}
const handleEditItem = (record) => {
itemEditTitle.value = '编辑字典项'
itemFormData.value = { ...record }
itemEditVisible.value = true
}
const handleItemSubmit = async () => {
try {
await itemFormRef.value.validate()
if (itemFormData.value.id) {
await systemApi.dictionaryItems.edit.put(itemFormData.value.id, itemFormData.value)
message.success('更新成功')
} else {
await systemApi.dictionaryItems.add.post(itemFormData.value)
message.success('创建成功')
}
itemEditVisible.value = false
fetchDictionaryItems(currentDictionary.value.id)
} catch (error) {
if (error.errorFields) {
return
}
message.error(error.message || '操作失败')
}
}
const handleDeleteItem = async (id) => {
try {
await systemApi.dictionaryItems.delete.delete(id)
message.success('删除成功')
fetchDictionaryItems(currentDictionary.value.id)
} catch (error) {
message.error('删除失败')
}
}
onMounted(() => {
fetchData()
})
</script>
<style scoped lang="scss">
.dictionary-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
.dictionary-items {
padding: 0;
}
}
</style>

368
resources/admin/src/pages/system/log/index.vue Normal file
View File

@@ -0,0 +1,368 @@
<template>
<div class="log-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: 120px">
<a-select-option value="info">信息</a-select-option>
<a-select-option value="warning">警告</a-select-option>
<a-select-option value="error">错误</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="时间范围">
<a-range-picker
v-model:value="searchParams.date_range"
show-time
format="YYYY-MM-DD HH:mm:ss"
placeholder="['开始时间', '结束时间']"
style="width: 350px"
/>
</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-button @click="handleExport">
<template #icon><ExportOutlined /></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 v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
<template #icon><DeleteOutlined /></template>
批量删除
</a-button>
<a-popconfirm title="确定要清空所有日志吗？" @confirm="handleClearAll">
<a-button danger>
<template #icon><ClearOutlined /></template>
清空日志
</a-button>
</a-popconfirm>
</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 === 'type'">
<a-tag :color="getTypeColor(record.type)">
<template #icon>
<InfoCircleOutlined v-if="record.type === 'info'" />
<WarningOutlined v-else-if="record.type === 'warning'" />
<CloseCircleOutlined v-else-if="record.type === 'error'" />
</template>
{{ getTypeLabel(record.type) }}
</a-tag>
</template>
<template v-if="column.key === 'message'">
<a-tooltip :title="record.message">
<span class="log-message">{{ record.message }}</span>
</a-tooltip>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a-button type="link" size="small" @click="handleDetail(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="detailVisible"
title="日志详情"
:width="800"
:footer="null"
>
<div class="log-detail" v-if="currentLog">
<a-descriptions :column="1" bordered>
<a-descriptions-item label="ID">{{ currentLog.id }}</a-descriptions-item>
<a-descriptions-item label="日志类型">
<a-tag :color="getTypeColor(currentLog.type)">
{{ getTypeLabel(currentLog.type) }}
</a-tag>
</a-descriptions-item>
<a-descriptions-item label="用户">{{ currentLog.username || '-' }}</a-descriptions-item>
<a-descriptions-item label="IP地址">{{ currentLog.ip || '-' }}</a-descriptions-item>
<a-descriptions-item label="请求方法">{{ currentLog.method || '-' }}</a-descriptions-item>
<a-descriptions-item label="请求路径">{{ currentLog.url || '-' }}</a-descriptions-item>
<a-descriptions-item label="User Agent">
<span class="user-agent">{{ currentLog.user_agent || '-' }}</span>
</a-descriptions-item>
<a-descriptions-item label="日志内容">
<pre class="log-content">{{ currentLog.message }}</pre>
</a-descriptions-item>
<a-descriptions-item v-if="currentLog.context" label="上下文">
<pre class="log-context">{{ formatJson(currentLog.context) }}</pre>
</a-descriptions-item>
<a-descriptions-item label="创建时间">{{ currentLog.created_at }}</a-descriptions-item>
</a-descriptions>
</div>
</a-modal>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
SearchOutlined,
RedoOutlined,
DeleteOutlined,
ExportOutlined,
ClearOutlined,
InfoCircleOutlined,
WarningOutlined,
CloseCircleOutlined,
} from '@ant-design/icons-vue'
import systemApi from '@/api/system'
import scTable from '@/components/scTable/index.vue'
import dayjs from 'dayjs'
defineOptions({
name: 'LogManagement',
})
const searchParams = ref({
keyword: '',
type: undefined,
date_range: 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
},
}))
const columns = [
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
{ title: '日志类型', key: 'type', width: 100, align: 'center' },
{ title: '日志内容', key: 'message', width: 400 },
{ title: '用户', dataIndex: 'username', key: 'username', width: 120 },
{ title: 'IP地址', dataIndex: 'ip', key: 'ip', width: 130 },
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
{ title: '操作', key: 'action', width: 150, fixed: 'right' },
]
const detailVisible = ref(false)
const currentLog = ref(null)
const fetchData = async () => {
loading.value = true
try {
const params = {
page: pagination.value.current,
page_size: pagination.value.pageSize,
...searchParams.value,
}
if (params.date_range && params.date_range.length === 2) {
params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
}
delete params.date_range
const res = await systemApi.logs.list.get(params)
dataSource.value = res.data.list
pagination.value.total = res.data.total
} catch (error) {
message.error('获取日志列表失败')
} finally {
loading.value = false
}
}
const handleSearch = () => {
pagination.value.current = 1
fetchData()
}
const handleReset = () => {
searchParams.value = {
keyword: '',
type: undefined,
date_range: undefined,
}
pagination.value.current = 1
fetchData()
}
const handlePageChange = (page) => {
pagination.value.current = page
fetchData()
}
const handleDetail = (record) => {
currentLog.value = record
detailVisible.value = true
}
const handleDelete = async (id) => {
try {
await systemApi.logs.delete.delete(id)
message.success('删除成功')
fetchData()
} catch (error) {
message.error('删除失败')
}
}
const handleBatchDelete = async () => {
try {
await systemApi.logs.batchDelete.post({ ids: selectedRowKeys.value })
message.success('批量删除成功')
selectedRowKeys.value = []
fetchData()
} catch (error) {
message.error('批量删除失败')
}
}
const handleClearAll = async () => {
try {
await systemApi.logs.clear.post()
message.success('清空日志成功')
fetchData()
} catch (error) {
message.error('清空日志失败')
}
}
const handleExport = async () => {
try {
const params = { ...searchParams.value }
if (params.date_range && params.date_range.length === 2) {
params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
}
delete params.date_range
const res = await systemApi.logs.export.get(params)
const url = window.URL.createObjectURL(new Blob([res]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', `logs_${Date.now()}.xlsx`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
message.success('导出成功')
} catch (error) {
message.error('导出失败')
}
}
const getTypeColor = (type) => {
const colors = {
info: 'blue',
warning: 'orange',
error: 'red',
}
return colors[type] || 'default'
}
const getTypeLabel = (type) => {
const labels = {
info: '信息',
warning: '警告',
error: '错误',
}
return labels[type] || type
}
const formatJson = (data) => {
try {
return typeof data === 'string' ? data : JSON.stringify(data, null, 2)
} catch {
return String(data)
}
}
onMounted(() => {
fetchData()
})
</script>
<style scoped lang="scss">
.log-management {
padding: 16px;
.search-card {
margin-bottom: 16px;
}
.table-card {
:deep(.ant-card-body) {
padding: 16px;
}
}
.log-message {
display: inline-block;
max-width: 380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
.log-detail {
.user-agent {
word-break: break-all;
color: #666;
font-size: 13px;
}
.log-content,
.log-context {
margin: 0;
max-height: 300px;
overflow: auto;
background: #f5f5f5;
padding: 12px;
border-radius: 4px;
font-size: 13px;
line-height: 1.6;
}
}
}
</style>

6
resources/admin/src/router/index.js
View File

@@ -49,7 +49,11 @@ function loadComponent(componentPath) {
}
// 如果是简单的组件名称，从 pages 目录加载
return modules[`../pages/${componentPath}/index.vue`]
if (componentPath.endsWith('index')){
return modules[`../pages/${componentPath}.vue`]
} else {
return modules[`../pages/${componentPath}/index.vue`]
}
}
/**