实战7 部门查询和新增

最新推荐文章于 2024-04-29 10:21:22 发布

努力赚钱的阳仔

最新推荐文章于 2024-04-29 10:21:22 发布

阅读量1.1k

点赞数 33

分类专栏：权限后台系统II 文章标签： spring boot 前端 vue.js java

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/shieryue_2016/article/details/135123819

版权

权限后台系统II 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

目录

1、部门管理后端

1.2.DepartmentQueryVo

1.3.DepartmentTree

1.4 DepartmentService

1.5 DepartmentServiceImp

1.6 DepartmentController

2、前端查询部门

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<Department> makeDepartmentTree(List<Department> departmentList,Long pid){
        List<Department> list = new ArrayList<>();
        Optional.ofNullable(departmentList).orElse(new ArrayList<Department>())
                .stream().filter(item->item!=null && item.getPid() == pid)
                .forEach(item->{
                    Department department = new Department();
                    BeanUtils.copyProperties(item,department);
                    List<Department> children = makeDepartmentTree(departmentList,item.getPid());
                    department.setChildren(children);
                    list.add(department);
                });
        return list;
    }
}

1.4 DepartmentService

public interface IDepartmentService extends IService<Department> {
    /**
     * 查询部门列表
     * @param departmentQueryVo
     * @return
     */
    List<Department> findDepartmentList(DepartmentQueryVo departmentQueryVo);
    /**
     * 查询上级部门列表
     *
     * * @return
     *
     */
    List<Department> 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<Department> queryWrapper = new QueryWrapper<Department>();
        queryWrapper.eq("pid",id);
//如果数量大于0，表示存在
        if(baseMapper.selectCount(queryWrapper)>0){
            return true;
        }
        return false;
    }
    /**
     * 判断部门下是否存在用户
     *
     * @param id
     * @return
     */
    @Override
    public boolean hasUserOfDepartment(Long id) {
//创建条件构造器对象
        QueryWrapper<User> queryWrapper = new QueryWrapper<User>();
        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<Department> departmentList =
                departmentService.findDepartmentList(departmentQueryVo);
//返回数据
        return Result.ok(departmentList);
    }
    /**
     * 查询上级部门列表
     * @return
     */
    @GetMapping("/parent/list")
    public Result getParentDepartment(){
//调用查询上级部门列表方法
        List<Department> 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编写页面组件

<template>
  <el-main>
    <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
      <el-form-item>
        <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click=search>查询</el-button>
        <el-button @click="reset" icon="el-icon-refresh-right">重置</el-button>
        <el-button type="success" @click="add" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="departmentName" label="部门名称">
      </el-table-column>
      <el-table-column prop="parentName" label="所属部门">
      </el-table-column>
      <el-table-column prop="phone" label="部门电话">
      </el-table-column>
      <el-table-column prop="address" label="部门地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit-outline" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" icon="el-icon-delete-solid" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>
<script>

import departmentApi from '@/api/department'
export default {
  name: "department",
  data() {
    return {
      searchModel: {
        departmentName: "",
      },
      tableData: []
    }
  },
  //初始化时调用
  created() {
    //调用查询部门列表
    this.search()
  },
  methods: {
    /**
     * 查询部门列表
     */
    async search() {
      let res = await departmentApi.getDepartmentList(this.searchModel)
      if (res.success) {
        this.tableData = res.data

      }
    }
  }
}
</script>
<style lang="scss" scoped></style>

3、前端新增部门

3.1页面效果

3.2 封装通用窗口组件

3.3编写新增部门弹窗代码

 <!-- 选择所属部门窗口 -->
    <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
      :height="parentDialog.height" @onClose="parentOnClose" @onConfirm="parentOnConfirm">
      <div slot="content">
        <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps" empty-text="暂无数据"
          :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"
          @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{node,data}">
            <!-- 判断当前节点是否有子节点 -->
            <span v-if="data.children.length === 0">
              <i class="el-icon-document"></i>
            </span>
            <span v-else @click="changeIcon(data)">
              <svg-icon v-if="data.open" icon-class="add-s"></svg-icon>
              <svg-icon v-else icon-class="sub-s"></svg-icon>
            </span>
            <span style="margin-left:3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>

 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 选择所属部门

 <!-- 添加和编辑部门窗口 -->
    <system-dialog :title="deptDialog.title" :visible="deptDialog.visible" :width="deptDialog.width"
      :height="deptDialog.height" @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="dept" ref="deptForm" :rules="rules" label-width="80px" :inline="true" size="small">
          <el-form-item label="所属部门" prop="parentName">
            <el-input v-model="dept.parentName" :readonly="true" @click.native="openSelectDeptWindow()"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="departmentName">
            <el-input v-model="dept.departmentName"></el-input>
          </el-form-item>
          <el-form-item label="部门电话">
            <el-input v-model="dept.phone"></el-input>
          </el-form-item>
          <el-form-item label="部门地址">
            <el-input v-model="dept.address"></el-input>
          </el-form-item>
          <el-form-item label="序号">
            <el-input v-model="dept.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!-- 选择所属部门窗口 -->
    <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
      :height="parentDialog.height" @onClose="parentOnClose" @onConfirm="parentOnConfirm">
      <div slot="content">
        <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps" empty-text="暂无数据"
          :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false"
          @node-click="handleNodeClick">
          <div class="customer-tree-node" slot-scope="{node,data}">
            <!-- 判断当前节点是否有子节点 -->
            <span v-if="data.children.length === 0">
              <i class="el-icon-document"></i>
            </span>
            <span v-else @click="changeIcon(data)">
              <svg-icon v-if="data.open" icon-class="add-s"></svg-icon>
              <svg-icon v-else icon-class="sub-s"></svg-icon>
            </span>
            <span style="margin-left:3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>

 // 获取所属部门列表
  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)
          }
        }
      });
    },

努力赚钱的阳仔

关注

33
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。