微人事 部门管理 模块 （十五）

部门管理的树展示和搜索

数据展示页是个树，我们一次性把数据加载出来也可以通过点一次id加载查询出来出来子部门，我们用一次拿到说有json数据加载出来
数据不多可以用递归，数据很多就用懒加载的方式

由于子部门比较深就不适合，权限组角色之间下展示菜单那样

编写后端接口

DepartmentController

@RestController
@RequestMapping("/system/basic/department")
public class DepartmentController {
   

    @Autowired
    DepartmentService departmentService;

    @GetMapping("/")
    public List<Department>  getAllDepartments(){
   
        return departmentService.getAllDepartments();
    }
}

DepartmentService

@Service
public class DepartmentService {
   


    @Autowired
    DepartmentMapper departmentMapper;

    public List<Department> getAllDepartments() {
   
        //传递-1直接查询最顶级的股东会然后根据mybatis语句进行递归
        return departmentMapper.getAllDepartmentsByParentId(-1);
    }
}

DepartmentMapper

  <resultMap id="DepartmentWithChildren" type="com.xyg.pojo.Department" extends="BaseResultMap"> <!--当查询的时候会以children属性会调用select把当前id传进去，然后新查询的同会继续调用，形成一个递归-->
    <collection property="children" ofType="com.xyg.pojo.Department" select="com.xyg.mapper.DepartmentMapper.getAllDepartmentsByParentId" column="id" ></collection>
  </resultMap>


  <select id="getAllDepartmentsByParentId" resultMap="DepartmentWithChildren">
     select * from  department where parentid = #{pid}
  </select>

实体类添加一个children字段一对多

测试

前端编写

添加elementui 组件
DemMarna.vue

<div  style="width: 500px">
    <el-input
            prefix-icon="el-icon-search"

            placeholder="输入部门名称进行搜索"
            v-model="filterText">         
    </el-input>

    <el-tree
            :data="deps"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"     //过滤的方法
            ref="tree">
    </el-tree>
</div>

 data(){
   
            return{
   
                filterText:"",
                deps:[],
                defaultProps: {
   
                    children: 'children',
                    label: 'name'
                }
            }
        },