feat: 完善前端页面 - 角色管理、菜单管理、联系人管理功能
新增功能： 1. 角色管理 - 分页列表查询，支持按角色名称和状态筛选 - 新增/编辑角色，包含角色编码、名称、类型、数据范围等字段 - 删除角色 - 分配菜单权限（树形选择） 2. 菜单管理 - 树形表格展示菜单层级结构 - 新增/编辑菜单，支持目录、菜单、按钮三种类型 - 添加子菜单 - 删除菜单（检查子菜单） 3. 联系人管理 - 按客户查询联系人列表 - 新增/编辑联系人，包含姓名、职位、部门、电话、邮箱等 - 设置主联系人 - 删除联系人 技术优化： - 创建 role.js 和 menu.js API 接口文件 - 修复 RoleController 分配菜单接口（POST + @RequestBody） - 统一表单验证和错误提示 - 优化树形组件数据处理
This commit is contained in:
zhangjf
parent
ed19ab4739
commit
7672f008ef
47
fund-admin/src/api/menu.js
Normal file
47
fund-admin/src/api/menu.js
Normal file
@ -0,0 +1,47 @@
|
||||
import request from './request'
|
||||
|
||||
export const getMenuTree = (params) => {
|
||||
return request({
|
||||
url: '/sys/api/v1/menu/tree',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const getMenuList = (params) => {
|
||||
return request({
|
||||
url: '/sys/api/v1/menu/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const getMenuDetail = (menuId) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/menu/${menuId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const createMenu = (data) => {
|
||||
return request({
|
||||
url: '/sys/api/v1/menu',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const updateMenu = (menuId, data) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/menu/${menuId}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const deleteMenu = (menuId) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/menu/${menuId}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
54
fund-admin/src/api/role.js
Normal file
54
fund-admin/src/api/role.js
Normal file
@ -0,0 +1,54 @@
|
||||
import request from './request'
|
||||
|
||||
export const getRoleList = (params) => {
|
||||
return request({
|
||||
url: '/sys/api/v1/role/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const getRoleDetail = (roleId) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/role/${roleId}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const createRole = (data) => {
|
||||
return request({
|
||||
url: '/sys/api/v1/role',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const updateRole = (roleId, data) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/role/${roleId}`,
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const deleteRole = (roleId) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/role/${roleId}`,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export const getRoleMenuIds = (roleId) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/role/${roleId}/menus`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const assignRoleMenus = (roleId, menuIds) => {
|
||||
return request({
|
||||
url: `/sys/api/v1/role/${roleId}/menus`,
|
||||
method: 'post',
|
||||
data: { menuIds }
|
||||
})
|
||||
}
|
||||
@ -4,14 +4,323 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>联系人管理</span>
|
||||
<el-button type="primary">新增联系人</el-button>
|
||||
<el-button type="primary" @click="handleAdd">新增联系人</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<p>联系人管理页面 - 开发中</p>
|
||||
|
||||
<!-- 搜索表单 -->
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="客户">
|
||||
<el-select v-model="searchForm.customerId" placeholder="请选择客户" clearable style="width: 200px" @change="handleSearch">
|
||||
<el-option
|
||||
v-for="customer in customerList"
|
||||
:key="customer.customerId"
|
||||
:label="customer.customerName"
|
||||
:value="customer.customerId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人">
|
||||
<el-input v-model="searchForm.contactName" placeholder="请输入联系人姓名" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column prop="contactId" label="联系人 ID" width="100" />
|
||||
<el-table-column prop="contactName" label="姓名" width="120" />
|
||||
<el-table-column prop="position" label="职位" width="120" />
|
||||
<el-table-column prop="department" label="部门" width="150" />
|
||||
<el-table-column prop="phone" label="联系电话" width="130" />
|
||||
<el-table-column prop="mobile" label="手机号码" width="130" />
|
||||
<el-table-column prop="email" label="邮箱" width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="wechat" label="微信" width="120" />
|
||||
<el-table-column prop="isPrimary" label="主联系人" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.isPrimary === '1' ? 'success' : 'info'">
|
||||
{{ scope.row.isPrimary === '1' ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
|
||||
{{ scope.row.status === '1' ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.isPrimary !== '1'"
|
||||
type="warning"
|
||||
link
|
||||
@click="handleSetPrimary(scope.row)"
|
||||
>
|
||||
设为主联系人
|
||||
</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属客户" prop="customerId">
|
||||
<el-select v-model="form.customerId" placeholder="请选择客户" style="width: 100%">
|
||||
<el-option
|
||||
v-for="customer in customerList"
|
||||
:key="customer.customerId"
|
||||
:label="customer.customerName"
|
||||
:value="customer.customerId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系人姓名" prop="contactName">
|
||||
<el-input v-model="form.contactName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="职位" prop="position">
|
||||
<el-input v-model="form.position" placeholder="请输入职位" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门" prop="department">
|
||||
<el-input v-model="form.department" placeholder="请输入部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="微信" prop="wechat">
|
||||
<el-input v-model="form.wechat" placeholder="请输入微信号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="QQ" prop="qq">
|
||||
<el-input v-model="form.qq" placeholder="请输入QQ号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="主联系人" prop="isPrimary">
|
||||
<el-switch v-model="form.isPrimary" active-value="1" inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getContactList, createContact, updateContact, deleteContact } from '../../api/customer'
|
||||
import { getCustomerList } from '../../api/customer'
|
||||
|
||||
const searchForm = reactive({
|
||||
customerId: null,
|
||||
contactName: ''
|
||||
})
|
||||
|
||||
const customerList = ref([])
|
||||
const tableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增联系人')
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
contactId: null,
|
||||
customerId: null,
|
||||
contactName: '',
|
||||
position: '',
|
||||
department: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
qq: '',
|
||||
isPrimary: '0',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
|
||||
contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const loadCustomerList = async () => {
|
||||
try {
|
||||
const res = await getCustomerList({ current: 1, size: 1000 })
|
||||
customerList.value = res.data.records
|
||||
} catch (error) {
|
||||
ElMessage.error('加载客户列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const loadTableData = async () => {
|
||||
if (!searchForm.customerId) {
|
||||
tableData.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getContactList(searchForm.customerId)
|
||||
let contacts = res.data || []
|
||||
|
||||
// 根据姓名过滤
|
||||
if (searchForm.contactName) {
|
||||
contacts = contacts.filter(c => c.contactName.includes(searchForm.contactName))
|
||||
}
|
||||
|
||||
tableData.value = contacts
|
||||
} catch (error) {
|
||||
ElMessage.error('加载数据失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
loadTableData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.customerId = null
|
||||
searchForm.contactName = ''
|
||||
tableData.value = []
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增联系人'
|
||||
Object.assign(form, {
|
||||
contactId: null,
|
||||
customerId: searchForm.customerId || null,
|
||||
contactName: '',
|
||||
position: '',
|
||||
department: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
qq: '',
|
||||
isPrimary: '0',
|
||||
remark: ''
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑联系人'
|
||||
Object.assign(form, {
|
||||
contactId: row.contactId,
|
||||
customerId: row.customerId,
|
||||
contactName: row.contactName,
|
||||
position: row.position,
|
||||
department: row.department,
|
||||
phone: row.phone,
|
||||
mobile: row.mobile,
|
||||
email: row.email,
|
||||
wechat: row.wechat,
|
||||
qq: row.qq,
|
||||
isPrimary: row.isPrimary,
|
||||
remark: row.remark
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value.validate()
|
||||
try {
|
||||
if (form.contactId) {
|
||||
await updateContact(form.contactId, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createContact(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm('确定要删除该联系人吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await deleteContact(row.contactId)
|
||||
ElMessage.success('删除成功')
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSetPrimary = (row) => {
|
||||
ElMessageBox.confirm('确定要将此联系人设置为主联系人吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const updatedContact = { ...row, isPrimary: '1' }
|
||||
await updateContact(row.contactId, updatedContact)
|
||||
ElMessage.success('设置成功')
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error('设置失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadCustomerList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
@ -22,4 +331,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,14 +4,270 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>菜单管理</span>
|
||||
<el-button type="primary">新增菜单</el-button>
|
||||
<el-button type="primary" @click="handleAdd">新增菜单</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<p>菜单管理页面 - 开发中</p>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" stripe border row-key="menuId" default-expand-all>
|
||||
<el-table-column prop="menuId" label="菜单ID" width="80" />
|
||||
<el-table-column prop="menuName" label="菜单名称" width="200" />
|
||||
<el-table-column prop="menuType" label="类型" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getMenuTypeColor(scope.row.menuType)">
|
||||
{{ getMenuTypeLabel(scope.row.menuType) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="icon" label="图标" width="100" />
|
||||
<el-table-column prop="path" label="路由路径" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="component" label="组件路径" width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="permission" label="权限标识" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="sortOrder" label="排序" width="80" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="success" link @click="handleAdd(scope.row)">添加子菜单</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-select v-model="form.menuType" placeholder="请选择菜单类型" style="width: 100%">
|
||||
<el-option label="目录" value="dir" />
|
||||
<el-option label="菜单" value="menu" />
|
||||
<el-option label="按钮" value="button" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="图标" prop="icon">
|
||||
<el-input v-model="form.icon" placeholder="请输入图标" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="sortOrder">
|
||||
<el-input-number v-model="form.sortOrder" :min="0" :max="999" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由路径" prop="path">
|
||||
<el-input v-model="form.path" placeholder="请输入路由路径" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="组件路径" prop="component">
|
||||
<el-input v-model="form.component" placeholder="请输入组件路径" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限标识" prop="permission">
|
||||
<el-input v-model="form.permission" placeholder="如: user:add" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单层级" prop="menuLevel">
|
||||
<el-input-number v-model="form.menuLevel" :min="1" :max="3" style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getMenuList, createMenu, updateMenu, deleteMenu } from '../../api/menu'
|
||||
|
||||
const tableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增菜单')
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
menuId: null,
|
||||
parentId: 0,
|
||||
menuName: '',
|
||||
menuType: 'menu',
|
||||
icon: '',
|
||||
path: '',
|
||||
component: '',
|
||||
permission: '',
|
||||
sortOrder: 0,
|
||||
menuLevel: 1,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
|
||||
menuType: [{ required: true, message: '请选择菜单类型', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const getMenuTypeLabel = (type) => {
|
||||
const map = {
|
||||
'dir': '目录',
|
||||
'menu': '菜单',
|
||||
'button': '按钮'
|
||||
}
|
||||
return map[type] || type
|
||||
}
|
||||
|
||||
const getMenuTypeColor = (type) => {
|
||||
const map = {
|
||||
'dir': 'warning',
|
||||
'menu': 'primary',
|
||||
'button': 'success'
|
||||
}
|
||||
return map[type] || 'info'
|
||||
}
|
||||
|
||||
const buildMenuTree = (menus) => {
|
||||
const tree = []
|
||||
const map = {}
|
||||
|
||||
menus.forEach(menu => {
|
||||
map[menu.menuId] = { ...menu, children: [] }
|
||||
})
|
||||
|
||||
menus.forEach(menu => {
|
||||
if (menu.parentId === 0) {
|
||||
tree.push(map[menu.menuId])
|
||||
} else if (map[menu.parentId]) {
|
||||
map[menu.parentId].children.push(map[menu.menuId])
|
||||
}
|
||||
})
|
||||
|
||||
// 清理空 children
|
||||
const clearEmptyChildren = (nodes) => {
|
||||
nodes.forEach(node => {
|
||||
if (node.children.length === 0) {
|
||||
delete node.children
|
||||
} else {
|
||||
clearEmptyChildren(node.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
clearEmptyChildren(tree)
|
||||
|
||||
return tree
|
||||
}
|
||||
|
||||
const loadTableData = async () => {
|
||||
try {
|
||||
const res = await getMenuList()
|
||||
tableData.value = buildMenuTree(res.data)
|
||||
} catch (error) {
|
||||
ElMessage.error('加载数据失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = (row) => {
|
||||
dialogTitle.value = row ? '添加子菜单' : '新增菜单'
|
||||
Object.assign(form, {
|
||||
menuId: null,
|
||||
parentId: row ? row.menuId : 0,
|
||||
menuName: '',
|
||||
menuType: 'menu',
|
||||
icon: '',
|
||||
path: '',
|
||||
component: '',
|
||||
permission: '',
|
||||
sortOrder: 0,
|
||||
menuLevel: row ? row.menuLevel + 1 : 1,
|
||||
remark: ''
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑菜单'
|
||||
Object.assign(form, {
|
||||
menuId: row.menuId,
|
||||
parentId: row.parentId,
|
||||
menuName: row.menuName,
|
||||
menuType: row.menuType,
|
||||
icon: row.icon,
|
||||
path: row.path,
|
||||
component: row.component,
|
||||
permission: row.permission,
|
||||
sortOrder: row.sortOrder,
|
||||
menuLevel: row.menuLevel,
|
||||
remark: row.remark
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value.validate()
|
||||
try {
|
||||
if (form.menuId) {
|
||||
await updateMenu(form.menuId, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createMenu(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm('确定要删除该菜单吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await deleteMenu(row.menuId)
|
||||
ElMessage.success('删除成功')
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTableData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
|
||||
@ -4,14 +4,332 @@
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>角色管理</span>
|
||||
<el-button type="primary">新增角色</el-button>
|
||||
<el-button type="primary" @click="handleAdd">新增角色</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<p>角色管理页面 - 开发中</p>
|
||||
|
||||
<!-- 搜索表单 -->
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input v-model="searchForm.roleName" placeholder="请输入角色名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="禁用" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" stripe border>
|
||||
<el-table-column prop="roleId" label="角色ID" width="80" />
|
||||
<el-table-column prop="roleCode" label="角色编码" width="150" />
|
||||
<el-table-column prop="roleName" label="角色名称" width="150" />
|
||||
<el-table-column prop="roleType" label="角色类型" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.roleType === 'system' ? 'danger' : 'success'">
|
||||
{{ scope.row.roleType === 'system' ? '系统角色' : '自定义角色' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dataScope" label="数据范围" width="120">
|
||||
<template #default="scope">
|
||||
{{ getDataScopeLabel(scope.row.dataScope) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sortOrder" label="排序" width="80" />
|
||||
<el-table-column prop="status" label="状态" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
|
||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="warning" link @click="handleAssignMenu(scope.row)">分配菜单</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
v-model:current-page="page.current"
|
||||
v-model:page-size="page.size"
|
||||
:total="page.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="角色编码" prop="roleCode">
|
||||
<el-input v-model="form.roleCode" placeholder="请输入角色编码" :disabled="!!form.roleId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色类型" prop="roleType">
|
||||
<el-select v-model="form.roleType" placeholder="请选择角色类型" style="width: 100%">
|
||||
<el-option label="系统角色" value="system" />
|
||||
<el-option label="自定义角色" value="custom" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据范围" prop="dataScope">
|
||||
<el-select v-model="form.dataScope" placeholder="请选择数据范围" style="width: 100%">
|
||||
<el-option label="全部数据" value="all" />
|
||||
<el-option label="本部门" value="dept" />
|
||||
<el-option label="仅本人" value="self" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortOrder">
|
||||
<el-input-number v-model="form.sortOrder" :min="0" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 分配菜单对话框 -->
|
||||
<el-dialog v-model="menuDialogVisible" title="分配菜单" width="600px">
|
||||
<el-tree
|
||||
ref="menuTreeRef"
|
||||
:data="menuTreeData"
|
||||
:props="{ label: 'menuName', children: 'children' }"
|
||||
node-key="menuId"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button @click="menuDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmitMenus">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getRoleList, createRole, updateRole, deleteRole, getRoleMenuIds, assignRoleMenus } from '../../api/role'
|
||||
import { getMenuTree } from '../../api/menu'
|
||||
|
||||
const searchForm = reactive({
|
||||
roleName: '',
|
||||
status: null
|
||||
})
|
||||
|
||||
const page = reactive({
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增角色')
|
||||
const formRef = ref(null)
|
||||
const form = reactive({
|
||||
roleId: null,
|
||||
roleCode: '',
|
||||
roleName: '',
|
||||
roleType: 'custom',
|
||||
dataScope: 'self',
|
||||
sortOrder: 0,
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
roleType: [{ required: true, message: '请选择角色类型', trigger: 'change' }],
|
||||
dataScope: [{ required: true, message: '请选择数据范围', trigger: 'change' }]
|
||||
}
|
||||
|
||||
const menuDialogVisible = ref(false)
|
||||
const menuTreeRef = ref(null)
|
||||
const menuTreeData = ref([])
|
||||
const currentRoleId = ref(null)
|
||||
|
||||
const getDataScopeLabel = (dataScope) => {
|
||||
const map = {
|
||||
'all': '全部数据',
|
||||
'dept': '本部门',
|
||||
'self': '仅本人'
|
||||
}
|
||||
return map[dataScope] || dataScope
|
||||
}
|
||||
|
||||
const loadTableData = async () => {
|
||||
try {
|
||||
const params = {
|
||||
current: page.current,
|
||||
size: page.size,
|
||||
roleName: searchForm.roleName || undefined,
|
||||
status: searchForm.status
|
||||
}
|
||||
const res = await getRoleList(params)
|
||||
tableData.value = res.data.records
|
||||
page.total = res.data.total
|
||||
} catch (error) {
|
||||
ElMessage.error('加载数据失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
page.current = 1
|
||||
loadTableData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchForm.roleName = ''
|
||||
searchForm.status = null
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增角色'
|
||||
Object.assign(form, {
|
||||
roleId: null,
|
||||
roleCode: '',
|
||||
roleName: '',
|
||||
roleType: 'custom',
|
||||
dataScope: 'self',
|
||||
sortOrder: 0,
|
||||
remark: ''
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑角色'
|
||||
Object.assign(form, {
|
||||
roleId: row.roleId,
|
||||
roleCode: row.roleCode,
|
||||
roleName: row.roleName,
|
||||
roleType: row.roleType,
|
||||
dataScope: row.dataScope,
|
||||
sortOrder: row.sortOrder,
|
||||
remark: row.remark
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value.validate()
|
||||
try {
|
||||
if (form.roleId) {
|
||||
await updateRole(form.roleId, form)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createRole(form)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm('确定要删除该角色吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await deleteRole(row.roleId)
|
||||
ElMessage.success('删除成功')
|
||||
loadTableData()
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAssignMenu = async (row) => {
|
||||
currentRoleId.value = row.roleId
|
||||
try {
|
||||
// 加载菜单树
|
||||
const menuRes = await getMenuTree()
|
||||
menuTreeData.value = buildMenuTree(menuRes.data)
|
||||
|
||||
// 加载角色已有菜单
|
||||
const menuIdsRes = await getRoleMenuIds(row.roleId)
|
||||
menuDialogVisible.value = true
|
||||
|
||||
// 等待对话框渲染完成后设置选中
|
||||
setTimeout(() => {
|
||||
menuTreeRef.value.setCheckedKeys(menuIdsRes.data || [])
|
||||
}, 100)
|
||||
} catch (error) {
|
||||
ElMessage.error('加载菜单失败')
|
||||
}
|
||||
}
|
||||
|
||||
const buildMenuTree = (menus) => {
|
||||
const tree = []
|
||||
const map = {}
|
||||
|
||||
menus.forEach(menu => {
|
||||
map[menu.menuId] = { ...menu, children: [] }
|
||||
})
|
||||
|
||||
menus.forEach(menu => {
|
||||
if (menu.parentId === 0) {
|
||||
tree.push(map[menu.menuId])
|
||||
} else if (map[menu.parentId]) {
|
||||
map[menu.parentId].children.push(map[menu.menuId])
|
||||
}
|
||||
})
|
||||
|
||||
return tree
|
||||
}
|
||||
|
||||
const handleSubmitMenus = async () => {
|
||||
try {
|
||||
const checkedKeys = menuTreeRef.value.getCheckedKeys()
|
||||
const halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys()
|
||||
const menuIds = [...checkedKeys, ...halfCheckedKeys]
|
||||
|
||||
await assignRoleMenus(currentRoleId.value, menuIds)
|
||||
ElMessage.success('分配成功')
|
||||
menuDialogVisible.value = false
|
||||
} catch (error) {
|
||||
ElMessage.error('分配失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSizeChange = () => {
|
||||
loadTableData()
|
||||
}
|
||||
|
||||
const handleCurrentChange = () => {
|
||||
loadTableData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTableData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
@ -22,4 +340,14 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user