vue实现部门管理功能

Vue 部门管理功能实现

功能模块设计

部门管理通常包含以下核心功能：

1. 部门树形结构展示
2. 部门增删改查操作
3. 部门成员管理
4. 数据权限控制

技术选型建议

• UI框架：Element UI/Tree组件
• 状态管理：Vuex/Pinia
• HTTP库：Axios
• 路由管理：Vue Router

部门树实现

<template>
  <el-tree
    :data="deptTree"
    node-key="id"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      deptTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    async fetchDeptTree() {
      const res = await axios.get('/api/departments/tree')
      this.deptTree = res.data
    }
  },
  created() {
    this.fetchDeptTree()
  }
}
</script>

表单处理

<el-form :model="deptForm" :rules="rules" ref="formRef">
  <el-form-item label="部门名称" prop="name">
    <el-input v-model="deptForm.name" />
  </el-form-item>
  <el-form-item label="上级部门">
    <el-cascader
      v-model="deptForm.parentId"
      :options="deptTree"
      :props="cascaderProps"
    />
  </el-form-item>
</el-form>

API封装示例

// api/department.js
import request from '@/utils/request'

export function getDeptTree() {
  return request({
    url: '/department/tree',
    method: 'get'
  })
}

export function addDept(data) {
  return request({
    url: '/department',
    method: 'post',
    data
  })
}

完整功能实现建议

1. 使用Vuex/Pinia管理部门状态
2. 实现部门树懒加载功能
3. 添加表单验证逻辑
4. 处理删除前的确认提示
5. 实现部门排序功能

注意事项

• 树形数据需要处理循环引用问题
• 删除部门时需要处理子部门转移
• 表单需要重置功能
• 接口需要错误处理机制

扩展功能

1. 部门导出Excel
2. 部门导入功能
3. 部门权限配置
4. 部门日志审计