实战7 部门查询和新增
目录
1、部门管理后端
1.1 Department
1.2.DepartmentQueryVo
1.3.DepartmentTree
1.4 DepartmentService
1.5 DepartmentServiceImp
1.6 DepartmentController
2、前端查询部门
2.1 效果图
2.2页面原型代码
2.3编写前端api脚本
2.4编写页面组件
3、前端新增部门
3.1页面效果
3.2 封装通用窗口组件
3.3编写新增部门弹窗代码
3.4 选择所属部门
3.5表单数据快速清空
3.6新增部门
1、部门管理后端
1.1 Department
1.2.DepartmentQueryVo
public class DepartmentQueryVo extends Department {
}
1.3.DepartmentTree
package com.cizhu.utils;
import com.cizhu.entity.Department;
import org.springframework.beans.BeanUtils;
import java.nio.file.OpenOption;
import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
/** * 生成部门树 */
public class DepartmentTree {
public static List makeDepartmentTree(List departmentList,Long pid){
List list = new ArrayList<>();
Optional.ofNullable(departmentList).orElse(new ArrayList())
.stream().filter(item->item!=null && item.getPid() == pid)
.forEach(item->{
Department department = new Department();
BeanUtils.copyProperties(item,department);
List children = makeDepartmentTree(departmentList,item.getPid());
department.setChildren(children);
list.add(department);
});
return list;
}
}
1.4 DepartmentService
public interface IDepartmentService extends IService {
/**
* 查询部门列表
* @param departmentQueryVo
* @return
*/
List findDepartmentList(DepartmentQueryVo departmentQueryVo);
/**
* 查询上级部门列表
*
* * @return
*
*/
List findParentDepartment();
/**
* * 判断部门下是否有子部门
* * @param id
* * @return
* */
boolean hasChildrenOfDepartment(Long id);
/**
* * 判断部门下是否存在用户
* * @param id
* * @return
* */
boolean hasUserOfDepartment(Long id);
} 1.5 DepartmentServiceImp
@Override
public boolean hasChildrenOfDepartment(Long id) {
//创建条件构造器对象
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("pid",id);
//如果数量大于0，表示存在
if(baseMapper.selectCount(queryWrapper)>0){
return true;
}
return false;
}
/**
* 判断部门下是否存在用户
*
* @param id
* @return
*/
@Override
public boolean hasUserOfDepartment(Long id) {
//创建条件构造器对象
QueryWrapper queryWrapper = new QueryWrapper();
queryWrapper.eq("department_id", id);
//如果数量大于0，表示存在
if (userMapper.selectCount(queryWrapper) > 0) {
return true;
}
return false;
} 1.6 DepartmentController
@RestController
@RequestMapping("/api/department")
public class DepartmentController {
@Resource
private IDepartmentService departmentService;
/**
* 查询部门列表
* @param departmentQueryVo
* @return
*/
@GetMapping("/list")
public Result list(DepartmentQueryVo departmentQueryVo){
//调用查询部门列表方法
List departmentList =
departmentService.findDepartmentList(departmentQueryVo);
//返回数据
return Result.ok(departmentList);
}
/**
* 查询上级部门列表
* @return
*/
@GetMapping("/parent/list")
public Result getParentDepartment(){
//调用查询上级部门列表方法
List departmentList =
departmentService.findParentDepartment();
//返回数据
return Result.ok(departmentList);
}
/**
* 添加部门
* @param department
* @return
*/
@PostMapping("/add")
public Result add(@RequestBody Department department){
if(departmentService.save(department)){
return Result.ok().message("部门添加成功");
}
return Result.error().message("部门添加失败");
}
/**
* 修改部门
* @param department
* @return
*/
@PutMapping("/update")
public Result update(@RequestBody Department department){
if(departmentService.updateById(department)){
return Result.ok().message("部门修改成功");
}
return Result.error().message("部门修改失败");
}
/**
* 查询某个部门下是否存在子部门
* @param id
* @return
*/
@GetMapping("/check/{id}")
public Result check(@PathVariable Long id){
//调用查询部门下是否存在子部门的方法
if(departmentService.hasChildrenOfDepartment(id)){
return Result.exist().message("该部门下存在子部门，无法删除");
}
//调用查询部门下是否存在用户的方法
if(departmentService.hasUserOfDepartment(id)){
return Result.exist().message("该部门下存在用户，无法删除");
}
return Result.ok();
}
/**
* 删除部门
* @param id
* @return
*/
@DeleteMapping("/delete/{id}")
public Result delete(@PathVariable Long id){
if(departmentService.removeById(id)){
return Result.ok().message("部门删除成功");
}
return Result.error().message("部门删除失败");
}
} 2、前端查询部门
2.1 效果图
2.2页面原型代码
使用中文语言包注释下面两行代码
// import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // set element-ui default size
// locale: enLang // 如果使用中文，无需设置，请删除
})
dashboard显示为首页
2.3编写前端api脚本
import http from '@/utils/request'
export default{
/**
* 查询部门列表
* @param {*} params
* @returns
*/
async getDepartmentList(params){
return await http.get("/api/department/list",params)
}
}2.4编写页面组件
查询
重置
新增
编辑
删除
3、前端新增部门
3.1页面效果
3.2 封装通用窗口组件
3.3编写新增部门弹窗代码
methods: {
/**
* 选择所属部门取消事件
*/
parentOnClose() {
this.parentDialog.visible = false;
},
/**
* 选择所属部门确认事件
*/
parentOnConfirm() {
this.parentDialog.visible = false;
},
/**
* 弹窗取消事件
*/
onClose() {
//关闭窗口
this.deptDialog.visible = false;
},
/**
* 弹窗确认事件
*/
onConfirm() {
//表单验证
this.$refs.deptForm.validate(async (valid) => {
//如果验证通过
if (valid) {
let res = null
// 判断是新增还是修改操作(dept.id是否为空)
if (this.dept.id === "") {
// 发送新增部门请求
res = await departmentApi.addDept(this.dept)
} else {
// 发送修改部门请求
res = await departmentApi.updateDept(this.dept)
}
if (res.success) {
// 提示成功
this.$message.success(res.message)
// 刷新数据
this.search()
//关闭窗口
this.deptDialog.visible = false;
} else {
this.$message.error(res.message)
}
}
});
},
/**
* 打开添加部门窗口
*/
openAddWindow() {
// 清空表单数据
this.$resetForm("deptForm", this.dept);
//设置窗口标题
this.deptDialog.title = "新增部门";
//显示添加部门窗口
this.deptDialog.visible = true;
},
3.4 选择所属部门
// 获取所属部门列表
async getParentTreeList(){
return await http.get("/api/department/parent/list")
},3.5表单数据快速清空
3.6新增部门
（1）前端新增部门API
// 新增部门
async addDept(params){
return await http.post("/api/department/add",params)
},（2）新增部门表单验证
/**
* 弹窗确认事件
*/
onConfirm() {
//表单验证
this.$refs.deptForm.validate(async (valid) => {
//如果验证通过
if (valid) {
let res = null
// 判断是新增还是修改操作(dept.id是否为空)
if (this.dept.id === "") {
// 发送新增部门请求
res = await departmentApi.addDept(this.dept)
} else {
// 发送修改部门请求
res = await departmentApi.updateDept(this.dept)
}
if (res.success) {
// 提示成功
this.$message.success(res.message)
// 刷新数据
this.search()
//关闭窗口
this.deptDialog.visible = false;
} else {
this.$message.error(res.message)
}
}
});
},