RuoYi-Vue部门管理：树形结构设计与实现-优快云博客

RuoYi-Vue部门管理：树形结构设计与实现

【免费下载链接】RuoYi-Vue :tada: (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本项目地址: https://gitcode.com/GitHub_Trending/ru/RuoYi-Vue

在企业级应用中，部门管理系统是构建组织架构的核心模块。RuoYi-Vue作为一款成熟的前后端分离权限管理系统，其部门管理功能采用树形结构设计，完美适配了企业中常见的层级化组织架构需求。本文将深入剖析RuoYi-Vue部门管理模块的实现原理，从前端界面到后端接口，全面展示树形结构在实际项目中的应用。

部门管理模块概述

RuoYi-Vue的部门管理模块位于系统管理菜单下，提供了部门的增删改查、树形展示、排序调整等功能。该模块的核心特点是采用树形结构展示部门层级关系，支持无限层级嵌套，满足复杂组织架构的管理需求。

模块位置与文件结构

部门管理模块的前端实现主要集中在以下文件：

部门管理页面：ruoyi-ui/src/views/system/dept/index.vue
部门API接口：ruoyi-ui/src/api/system/dept.js

前端树形结构实现

树形表格展示

RuoYi-Vue部门管理页面使用Element UI的el-table组件结合tree-props属性实现树形表格展示。关键代码如下：

<el-table
  v-if="refreshTable"
  v-loading="loading"
  :data="deptList"
  row-key="deptId"
  :default-expand-all="isExpandAll"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
  <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
  <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
  <!-- 其他列定义 -->
</el-table>

上述代码中，tree-props属性指定了树形结构的配置：

children: 'children'：指定子节点数据的属性名为children
hasChildren: 'hasChildren'：指定判断节点是否有子节点的属性名为hasChildren

树形数据处理

部门数据从后端接口获取后，需要转换为树形结构。在ruoyi-ui/src/views/system/dept/index.vue中，通过handleTree方法处理：

getList() {
  this.loading = true
  listDept(this.queryParams).then(response => {
    this.deptList = this.handleTree(response.data, "deptId")
    this.loading = false
  })
}

handleTree方法是RuoYi-Vue框架提供的工具函数，用于将扁平结构的数组转换为树形结构。

部门选择器组件

在新增和编辑部门时，需要选择上级部门，这里使用了vue-treeselect组件实现树形选择器。代码如下：

<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />

对应的JavaScript代码：

import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"

export default {
  components: { Treeselect },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      }
    }
  }
}

normalizer方法用于将部门数据转换为vue-treeselect组件需要的格式。

后端接口设计

部门API接口

部门管理模块的后端API接口定义在ruoyi-ui/src/api/system/dept.js中，主要包括：

// 查询部门列表
export function listDept(query) {
  return request({
    url: '/system/dept/list',
    method: 'get',
    params: query
  })
}

// 查询部门列表（排除节点）
export function listDeptExcludeChild(deptId) {
  return request({
    url: '/system/dept/list/exclude/' + deptId,
    method: 'get'
  })
}

// 查询部门详细
export function getDept(deptId) {
  return request({
    url: '/system/dept/' + deptId,
    method: 'get'
  })
}

// 新增部门
export function addDept(data) {
  return request({
    url: '/system/dept',
    method: 'post',
    data: data
  })
}

// 修改部门
export function updateDept(data) {
  return request({
    url: '/system/dept',
    method: 'put',
    data: data
  })
}

// 删除部门
export function delDept(deptId) {
  return request({
    url: '/system/dept/' + deptId,
    method: 'delete'
  })
}

树形数据接口设计

后端接口返回的数据结构为扁平数组，前端通过handleTree方法将其转换为树形结构。后端返回的部门数据格式示例：

[
  {
    "deptId": 1,
    "deptName": "研发部",
    "parentId": 0,
    "orderNum": 1,
    "children": [
      {
        "deptId": 2,
        "deptName": "前端组",
        "parentId": 1,
        "orderNum": 1,
        "children": []
      },
      {
        "deptId": 3,
        "deptName": "后端组",
        "parentId": 1,
        "orderNum": 2,
        "children": []
      }
    ]
  }
]

功能实现详解

部门新增功能

部门新增功能支持选择上级部门，实现部门层级嵌套。关键代码如下：

handleAdd(row) {
  this.reset()
  if (row != undefined) {
    this.form.parentId = row.deptId
  }
  this.open = true
  this.title = "添加部门"
  listDept().then(response => {
    this.deptOptions = this.handleTree(response.data, "deptId")
  })
}

当点击某个部门的"新增"按钮时，会自动将该部门设为新部门的上级部门。

部门修改功能

部门修改功能支持调整部门的上级部门，但不允许选择自身或子部门作为上级部门。关键代码如下：

handleUpdate(row) {
  this.reset()
  getDept(row.deptId).then(response => {
    this.form = response.data
    this.open = true
    this.title = "修改部门"
    listDeptExcludeChild(row.deptId).then(response => {
      this.deptOptions = this.handleTree(response.data, "deptId")
      if (this.deptOptions.length == 0) {
        const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] }
        this.deptOptions.push(noResultsOptions)
      }
    })
  })
}

listDeptExcludeChild方法用于获取排除当前部门及其子部门的部门列表，避免出现循环引用。

部门删除功能

部门删除功能支持删除单个部门，但不允许删除包含子部门的部门。关键代码如下：

handleDelete(row) {
  this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
    return delDept(row.deptId)
  }).then(() => {
    this.getList()
    this.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

展开/折叠功能

部门列表支持全部展开/折叠功能，实现代码如下：

toggleExpandAll() {
  this.refreshTable = false
  this.isExpandAll = !this.isExpandAll
  this.$nextTick(() => {
    this.refreshTable = true
  })
}

总结与扩展

实现要点总结

使用Element UI的el-table组件结合tree-props实现树形表格展示
使用vue-treeselect组件实现树形部门选择器
通过handleTree方法将扁平数据转换为树形结构
后端接口设计支持树形数据查询和层级关系维护
实现部门新增、修改、删除时的层级关系校验

功能扩展建议

部门拖拽排序：可使用SortableJS实现部门拖拽调整顺序和层级
部门批量操作：支持批量删除、批量移动部门
部门数据导出：支持导出部门树形结构为Excel或组织架构图
部门人员统计：在树形表格中显示各部门人员数量

参考资料

官方文档：doc/若依环境使用手册.docx
RuoYi-Vue项目地址：GitHub_Trending/ru/RuoYi-Vue
Element UI树形表格文档：https://element.eleme.cn/#/zh-CN/component/table
vue-treeselect文档：https://vue-treeselect.js.org/

通过本文的介绍，相信您已经对RuoYi-Vue部门管理模块的树形结构设计与实现有了深入的了解。该模块充分利用了前端框架的特性，结合后端接口设计，实现了高效、灵活的部门管理功能，为企业级应用提供了坚实的组织架构管理基础。

如果您对RuoYi-Vue部门管理模块有任何疑问或建议，欢迎在项目仓库中提交issue或参与讨论。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考