From 7672f008ef0fc28cf129e8cda561509203515df5 Mon Sep 17 00:00:00 2001
From: zhangjf <zhangjf@example.com>
Date: Sun, 15 Feb 2026 16:33:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20-=20=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E3=80=81=E8=81=94?=
 =?UTF-8?q?=E7=B3=BB=E4=BA=BA=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增功能：
1. 角色管理
   - 分页列表查询，支持按角色名称和状态筛选
   - 新增/编辑角色，包含角色编码、名称、类型、数据范围等字段
   - 删除角色
   - 分配菜单权限（树形选择）

2. 菜单管理
   - 树形表格展示菜单层级结构
   - 新增/编辑菜单，支持目录、菜单、按钮三种类型
   - 添加子菜单
   - 删除菜单（检查子菜单）

3. 联系人管理
   - 按客户查询联系人列表
   - 新增/编辑联系人，包含姓名、职位、部门、电话、邮箱等
   - 设置主联系人
   - 删除联系人

技术优化：
- 创建 role.js 和 menu.js API 接口文件
- 修复 RoleController 分配菜单接口（POST + @RequestBody）
- 统一表单验证和错误提示
- 优化树形组件数据处理
---
 fund-admin/src/api/menu.js                |  47 +++
 fund-admin/src/api/role.js                |  54 ++++
 fund-admin/src/views/customer/contact.vue | 317 ++++++++++++++++++++-
 fund-admin/src/views/system/menu.vue      | 260 ++++++++++++++++-
 fund-admin/src/views/system/role.vue      | 332 +++++++++++++++++++++-
 5 files changed, 1004 insertions(+), 6 deletions(-)
 create mode 100644 fund-admin/src/api/menu.js
 create mode 100644 fund-admin/src/api/role.js

diff --git a/fund-admin/src/api/menu.js b/fund-admin/src/api/menu.js
new file mode 100644
index 0000000..f9cfcfa
--- /dev/null
+++ b/fund-admin/src/api/menu.js
@@ -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'
+  })
+}
diff --git a/fund-admin/src/api/role.js b/fund-admin/src/api/role.js
new file mode 100644
index 0000000..3bb9b25
--- /dev/null
+++ b/fund-admin/src/api/role.js
@@ -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 }
+  })
+}
diff --git a/fund-admin/src/views/customer/contact.vue b/fund-admin/src/views/customer/contact.vue
index af3361f..d6f06ae 100644
--- a/fund-admin/src/views/customer/contact.vue
+++ b/fund-admin/src/views/customer/contact.vue
@@ -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>
diff --git a/fund-admin/src/views/system/menu.vue b/fund-admin/src/views/system/menu.vue
index 8bf4296..2abef5c 100644
--- a/fund-admin/src/views/system/menu.vue
+++ b/fund-admin/src/views/system/menu.vue
@@ -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;
diff --git a/fund-admin/src/views/system/role.vue b/fund-admin/src/views/system/role.vue
index 944c69a..0c8ef47 100644
--- a/fund-admin/src/views/system/role.vue
+++ b/fund-admin/src/views/system/role.vue
@@ -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>