部门员工的CRUD

前端网页

<template>
    <section>

        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="部门"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.state" clearable  placeholder="请选择状态">
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="loadDepartments">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--
        :data:准备的列表数据
        v-loading:显示加载框
        @selection-change:选中复选框触发此函数
        -->
        <el-table :data="departments"  v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <!--显示复选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--显示序号-->
            <el-table-column type="index" width="100" label="序号">
            </el-table-column>
            <el-table-column prop="name" label="部门" >
            </el-table-column>
            <el-table-column prop="sn" label="编号" >
            </el-table-column>
            <el-table-column prop="state" label="状态" :formatter="formatState"  >
            </el-table-column>
            <el-table-column prop="manager.username" label="部门经理" >
            </el-table-column>
            <el-table-column prop="parent.name" label="上级部门" >
            </el-table-column>

            <el-table-column label="操作" >
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>


        <!--
            新增/编辑界面
            title：弹出框标题
            addFormVisible:是否显示弹出框
            :model="addForm":双向绑定的公共前缀
            :rules="addFormRules":申明校验规则
            ref="addForm":简单理解就是form申明唯一的id
        -->
        <el-dialog :title="title" v-model="addFormVisible" >
            <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                <el-form-item label="部门" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="编号" prop="sn">
                    <el-input v-model="addForm.sn"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="addForm.state">
                        <el-radio class="radio" :label="1">启用</el-radio>
                        <el-radio class="radio" :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="addForm.deptId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in depts"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门经理">
                    <el-select v-model="addForm.managerId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in managers"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    export default {
        data() {
            return {
                //弹出框标题
                title:"",
                //是否显示弹出框
                addFormVisible:false,
                //添加/修改弹出框中的form
                addForm:{
                    id:"",
                    name:"",
                    sn:"",
                    state:1,
                    deptId:"",
                    managerId:""
                },
                //高级查询的form表单
                searchForm:{
                    name:"",
                    state:""
                },
                //选中复选框对应的地址
                sels:[],
                //当前页
                currentPage:1,
                //每页条数
                pageSize:10,
                //总条数
                total:0,
                //部门列表数据(分页)
                departments:[],
                //部门列表
                depts:[],
                //部门经理
                managers:[],
                //是否显示加载框
                listLoading:false,
                addFormRules: {
                    name: [
                        {required: true, message: '部门必填！!', trigger: 'blur'}
                    ],
                    sn: [
                        {required: true, message: '编号必填！!', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            //选中复选框触发此函数， vals:选中的值(行)
            selsChange(vals){
                console.debug("选中的行",vals);
                this.sels = vals;
            },
            //加载部门列表
            loadDepartments(){
                //显示加载框
                this.listLoading = true;

                //传递分页参数
                let param = {
                    "currentPage": this.currentPage,
                    "pageSize": this.pageSize,
                    "name":this.searchForm.name,
                    "state":this.searchForm.state
                };

                this.$http.patch("/department",param).then((res => {
                    let {result, total} = res.data;
                    this.departments = result;
                    this.total = total;
                    //关闭加载框
                    this.listLoading = false;
                }));
            },
            //格式化指定列的值  row:当前行对应的值   column:列属性的介绍
            formatState(row, column){
                return row.state ? "启用" : "禁用";
            },
            //批量删除按钮
            batchRemove(){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/department/batchRemove",this.sels).then((res => {
                        let {success,msg} = res.data;
                        if(success){
                            this.loadDepartments();
                        }else{
                            this.$message.error(msg);
                        }
                    }));
                }).catch(() => {

                });
            },
            handleDel(index, row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/department/" + row.id).then((res => {
                        let {success,msg} = res.data;
                        if(success){
                            this.loadDepartments();
                        }else{
                            this.$message.error(msg);
                        }
                    }));
                }).catch(() => {

                });
            },
            //页码发生改变的时候触发此函数     @param  val:页码
            handleCurrentChange(val){
                //重新设置当前页
                this.currentPage = val;
                //刷新页面
                this.loadDepartments();
            },
            //新增弹出窗体
            handleAdd(){
                //设置标题
                this.title = "新增";
                if(this.$refs["addForm"]){
                    //重置
                    this.$refs["addForm"].resetFields();//this.$refs.addForm.resetFields()
                }
                //清空form表单
                for(var k in this.addForm){
                    this.addForm[k] = "";
                }
                //默认是启用状态
                this.addForm.state = 1;
                //显示弹出框
                this.addFormVisible = true;
            },
            //编辑弹出框
            handleEdit(index,row){
                //循环form表单（解决普通赋值）
                for(var k in this.addForm){
                    this.addForm[k] = row[k];
                }
                //给部门了经理赋值
                if(row.manager){
                    this.addForm.managerId = row.manager.id;
                }
                //给部门赋值
                if(row.parent){
                    this.addForm.deptId = row.parent.id;
                }
                //弹出窗体
                this.addFormVisible = true;
            },
            //加载所有的部门列表
            loadAllDepartments(){
                this.$http.patch("/department/loadAll").then((res => {
                    this.depts = res.data;
                }));
            },
            //加载所有的员工列表
            loadAllEmployees(){
                this.$http.patch("/employee/loadAll").then((res => {
                    this.managers = res.data;
                }));
            },
            //提交按钮注册事件
            addSubmit(){

                if(this.addForm.deptId){
                    //给addForm动态添加属性
                    this.addForm.parent = {"id":this.addForm.deptId}
                }else{
                    this.addForm.parent = {"id":""}
                }
                if(this.addForm.managerId){
                    //给addForm动态添加属性
                    this.addForm.manager = {"id": this.addForm.managerId};
                }else{
                    this.addForm.manager = {"id":""}
                }
                //必须验证通过之后，才执行if语句中的内容
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$http.put("/department", this.addForm).then((res => {
                            let {success, msg} = res.data;
                            if(success){
                                //刷新列表
                                this.loadDepartments();
                                //关闭弹出框
                                this.addFormVisible = false;
                            }else{
                                this.$message.error(msg);
                            }
                        }));
                    }
                });
            }
        },

        mounted(){
            //加载部门列表(分页)
            this.loadDepartments();
            //加载部门列表
            this.loadAllDepartments();
            //加载部门经理列表
            this.loadAllEmployees();
        }
    };
</script>

controller层：
部门：

package cn.itsource.pethome.org.controller;

import cn.itsource.pethome.org.domain.Department;
import cn.itsource.pethome.org.query.DepartmentQuery;
import cn.itsource.pethome.org.service.IDepartmentService;
import cn.itsource.pethome.basic.util.AjaxResult;
import cn.itsource.pethome.basic.util.PageList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequestMapping("/department")
@RestController//@RestController 它是一个组合注解        @RestController =@Controller+@ResponseBody
//@CrossOrigin   必须是Spring4.2.5以上的版本才能用
public class DepartmentController {

    @Autowired
    private IDepartmentService departmentService;


    /**
     * 保存/修改部门
     *
     * eclipse快速生成try catch   ctrl+alt+t
     * @param department
     * @return
     */
    @PutMapping// @PutMapping = @RequestMapping(method = RequestMethod.PUT)
    public AjaxResult addOrUpdate(@RequestBody Department department){  //前后端分离的项目，前端传递的数据都是json对象，所以后台想要接受对应的数据，必须要加@RequestBody注解，否则接收不了
        try {
            departmentService.addOrUpdate(department);
            return new AjaxResult();
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult(false, e.getMessage());
        }
    }




    /**
     * 根据id删除数据
     * @param id
     * @return
     */
    @DeleteMapping("{id}")
    public AjaxResult delete(@PathVariable("id") Long id){
        try {
            departmentService.delete(id);
            return new AjaxResult();
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult(false, e.getMessage());
        }
    }
    /**
     * 批量删除数据
     * @param departments 部门集合
     * @return
     */
    @PatchMapping("batchRemove")
    public AjaxResult batchRemove(@RequestBody List<Department> departments){
        try {
            departmentService.batchRemove(departments);
            return new AjaxResult();
        } catch (Exception e) {
            e.printStackTrace();
            return new AjaxResult(false, e.getMessage());
        }
    }


    /**
     * 根据id查询对象
     * @param id
     * @return
     */
    @GetMapping("{id}")
    public Department loadById(@PathVariable("id") Long id){
        return departmentService.loadById(id);
    }


    /**
     * 查询所有的部门对象
     * @return
     */
    @PatchMapping
    public PageList<Department> loadPageByQuery(@RequestBody DepartmentQuery query){
        return departmentService.loadPageByQuery(query);
    }


    /**
     * 查询所有的部门列表
     * @return
     */
    @PatchMapping("/loadAll")
    public List<Department> loadAll(){
        return departmentService.loadAll();
    }


}
	

分页工具：

package cn.itsource.pethome.org.query;

import cn.itsource.pethome.basic.query.BaseQuery;
import lombok.Data;

@Data
public class DepartmentQuery extends BaseQuery {
    //部门名
    private String name;
    //状态
    private Integer state;
}

package cn.itsource.pethome.basic.util;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PageList<T> {
    private Long total = 0L;
    private List<T> result = new ArrayList<T>();
}

员工：

package cn.itsource.pethome.org.controller;

import cn.itsource.pethome.org.domain.Employee;
import cn.itsource.pethome.org.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private IEmployeeService employeeService;


    /**
     * 查询所有的员工
     * @return
     */
    @PatchMapping("/loadAll")
    public List<Employee> loadAll(){
        return employeeService.loadAll();
    }
}

server层：
部门：

package cn.itsource.pethome.org.service;

import cn.itsource.pethome.basic.service.IBaseService;
import cn.itsource.pethome.org.domain.Department;

public interface IDepartmentService extends IBaseService<Department> {



    /**
     * 新增修改部门
     * @param department
     */
    void addOrUpdate(Department department);
}

员工：

package cn.itsource.pethome.org.service;

import cn.itsource.pethome.basic.service.IBaseService;
import cn.itsource.pethome.org.domain.Employee;

public interface IEmployeeService  extends IBaseService<Employee>{


    /**
     * 新增修改员工
     * @param employee
     */
    void addOrUpdate(Employee employee);

}

实现：
部门：

package cn.itsource.pethome.org.service.impl;

import cn.itsource.pethome.basic.service.impl.BaseServiceImpl;
import cn.itsource.pethome.org.domain.Department;
import cn.itsource.pethome.org.mapper.DepartmentMapper;
import cn.itsource.pethome.org.service.IDepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


@Service
public class DepartmentServiceImpl extends BaseServiceImpl<Department> implements IDepartmentService {

    @Autowired
    private DepartmentMapper departmentMapper;



    @Override
    @Transactional
    public void addOrUpdate(Department department) {
        if(department.getId() == null){
            this.add(department);
        }else{
            this.update(department);
        }
    }



}

员工：

package cn.itsource.pethome.org.service.impl;

import cn.itsource.pethome.basic.service.impl.BaseServiceImpl;
import cn.itsource.pethome.org.domain.Employee;
import cn.itsource.pethome.org.mapper.EmployeeMapper;
import cn.itsource.pethome.org.service.IEmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee> implements IEmployeeService {

    @Autowired
    private EmployeeMapper employeeMapper;

    @Override
    public List<Employee> loadAll() {

        return employeeMapper.loadAll();
    }

    @Override
    @Transactional
    public void addOrUpdate(Employee employee) {
        if(employee.getId() == null){
            super.add(employee);
        }else{
            super.update(employee);
        }
    }
}

mapper 层：
部门：

package cn.itsource.pethome.org.mapper;

import cn.itsource.pethome.basic.mapper.BaseMapper;
import cn.itsource.pethome.org.domain.Department;

/**
 * 部门mapper
 */
public interface DepartmentMapper extends BaseMapper<Department>{

}

员工：

package cn.itsource.pethome.org.mapper;

import cn.itsource.pethome.basic.mapper.BaseMapper;
import cn.itsource.pethome.org.domain.Employee;

/**
 * 员工mapper
 */
public interface EmployeeMapper extends BaseMapper<Employee> {


}

XML：
部门：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--部门mapper-->
<mapper namespace="cn.itsource.pethome.org.mapper.DepartmentMapper">
    <!--
        添加部门
        useGeneratedKeys="true":获取主键自增的值
        keyColumn="id"   把指定的列对应的值
        keyProperty="id"  赋值到domain中指定的属性中

    -->
    <insert id="add" useGeneratedKeys="true" keyColumn="id" keyProperty="id">
        INSERT INTO t_department(sn, name, state,manager_id,parent_id)
        VALUES (#{sn},#{name},#{state},#{manager.id},#{parent.id})
    </insert>

    <!--修改部门-->
    <update id="update">
        UPDATE t_department SET
        sn=#{sn},
        name=#{name},
        state=#{state},
        manager_id=#{manager.id},
        parent_id=#{parent.id}
        WHERE id=#{id}
    </update>

    <!--根据id删除数据-->
    <delete id="delete">
        DELETE FROM t_department WHERE id=#{id}
    </delete>


    <!--批量删除数据-->
    <delete id="batchRemove">
        DELETE FROM t_department WHERE id IN 
        <foreach collection="list" separator="," open="(" close=")" item="i">
            #{i.id}
        </foreach>
    </delete>
    <!--根据id查询单个对象-->
    <select id="loadById" resultType="Department">
        SELECT * FROM t_department WHERE id=#{id}
    </select>

    <!--自定义映射规则-->
    <resultMap id="departmentResultMap" type="Department">
        <id column="id" property="id"/>
        <result column="sn" property="sn"/>
        <result column="name" property="name"/>
        <result column="state" property="state"/>
        <association property="manager" javaType="Employee">
            <id column="eid" property="id"/>
            <result column="eusername" property="username"/>
        </association>
        <association property="parent" javaType="Department">
            <id column="pid" property="id"/>
            <result column="pname" property="name"/>
        </association>
    </resultMap>

    <!--
        查询所有的部门对象
        快速把英文字符变为大小写： ctrl+shift+x
    -->
    <select id="loadAll" resultMap="departmentResultMap">
        SELECT d.*,e.id eid,e.username eusername,p.id pid,p.name pname FROM t_department d
        LEFT JOIN t_employee e ON d.manager_id = e.id
        LEFT JOIN t_department p ON d.parent_id = p.id
    </select>

    <!--查询总条数，根据查询条件-->
    <select id="loadCountByQuery" resultType="long">
        SELECT COUNT(*) FROM t_department d
        <include refid="whereSql"/>
    </select>

    <!-- 查询分页列表 -->
    <select id="loadByQuery"  resultMap="departmentResultMap">
        SELECT d.*,e.id eid,e.username eusername,p.id pid,p.name pname FROM t_department d
        LEFT JOIN t_employee e ON d.manager_id = e.id
        LEFT JOIN t_department p ON d.parent_id = p.id
        <include refid="whereSql"/>
        LIMIT #{begin},#{pageSize}
    </select>

    <sql id="whereSql">
        <where>
            <if test="name!=null and name!=''">
                AND d.name LIKE CONCAT("%",#{name},"%")
            </if>
            <if test="state!=null">
                AND d.state=#{state}
            </if>
        </where>
    </sql>
</mapper>

员工：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--员工mapper-->
<mapper namespace="cn.itsource.pethome.org.mapper.EmployeeMapper">

    <insert id="add" useGeneratedKeys="true" keyProperty="id" keyColumn="id">
        INSERT INTO t_employee(username, email, phone, password, age, state)
        VALUES (#{username}, #{email}, #{phone},#{password},#{age},#{state})
    </insert>

    <!--查询所有的员工列表-->
    <select id="loadAll" resultType="Employee">
        SELECT * FROM t_employee
    </select>
</mapper>

工具类：

package cn.itsource.pethome.basic.service.impl;

import cn.itsource.pethome.basic.mapper.BaseMapper;
import cn.itsource.pethome.basic.query.BaseQuery;
import cn.itsource.pethome.basic.service.IBaseService;
import cn.itsource.pethome.basic.util.PageList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;


@Transactional(readOnly = true,propagation = Propagation.SUPPORTS)
public class BaseServiceImpl<T> implements IBaseService<T> {

    @Autowired
    private BaseMapper<T> baseMapper;
//                            |___EmployeeMapper
//                                    |___EmployeeProxyMapperImpl(Spring底层创建的)
//
//                            |___DepartmentMapper
//                                    |___DepartmentProxyMapperImpl(Spring底层创建的)
//                           由于Spring底层采用代理模式来实现接口的，如果不加泛型，它根本不确定应该是哪个实现类注入到BaseMapper接口中
    @Override
    @Transactional
    public void add(T t) {
        baseMapper.add(t);
    }



    @Override
    @Transactional
    public void update(T t) {
        baseMapper.update(t);
    }

    @Override
    @Transactional
    public void delete(Long id) {
        baseMapper.delete(id);
    }

    @Override
    @Transactional
    public void batchRemove(List<T> ts) {
        baseMapper.batchRemove(ts);
    }

    @Override
    public T loadById(Long id) {
        return baseMapper.loadById(id);
    }

    @Override
    public List<T> loadAll() {
        return baseMapper.loadAll();
    }

    @Override
    public PageList<T> loadPageByQuery(BaseQuery query) {
        Long count = baseMapper.loadCountByQuery(query);
        if(count.equals(0L)){
            return new PageList<T>();
        }
        List<T> result = baseMapper.loadByQuery(query);
        return new PageList<T>(count, result);
    }


}

接口：

package cn.itsource.pethome.basic.service;

import cn.itsource.pethome.basic.query.BaseQuery;
import cn.itsource.pethome.basic.util.PageList;

import java.util.List;

public interface IBaseService<T> {
    /**
     * 添加
     * @param t  实体
     */
    void add(T t);

    /**
     * 修改
     * @param t 实体
     */
    void update(T t);

    /**
     * 根据id删除数据
     * @param id  主键id
     */
    void delete(Long id);

    /**
     * 根据id查询单个对象
     * @param id   主键id
     * @return
     */
    T loadById(Long id);

    /**
     * 查询所有的列表
     * @return
     */
    List<T> loadAll();

    /**
     * 查询分页列表，根据查询条件
     * @param query  封装的查询条件（当前页，每页条数）
     * @return  PageList
     *              total:总条数
     *              result:分页列表
     */
    PageList<T> loadPageByQuery(BaseQuery query);

    /**
     * 批量删除数据
     * @param ts
     */
    void batchRemove(List<T> ts);
}

mapper:

package cn.itsource.pethome.basic.mapper;

import cn.itsource.pethome.basic.query.BaseQuery;

import java.util.List;

public interface BaseMapper<T> {
    /**
     * 添加
     * @param t  实体
     */
    void add(T t);

    /**
     * 修改
     * @param t 实体
     */
    void update(T t);

    /**
     * 根据id删除数据
     * @param id  主键id
     */
    void delete(Long id);


    /**
     * 批量删除数据
     * @param ts
     */
    void batchRemove(List<T> ts);

    /**
     * 根据id查询单个对象
     * @param id   主键id
     * @return
     */
    T loadById(Long id);

    /**
     * 查询所有的列表
     * @return
     */
    List<T> loadAll();


    /**
     * 查询总条数，根据查询条件
     * @param query  封装的查询条件（当前页，每页条数）
     * @return  PageList
     *              total:总条数
     *              result:分页列表
     */
    Long loadCountByQuery(BaseQuery query);

    /**
     * 查询分页列表，根据查询条件
     * @param query  封装的查询条件（当前页，每页条数）
     * @return  PageList
     *              total:总条数
     *              result:分页列表
     */
    List<T> loadByQuery(BaseQuery query);
}

分页工具：

package cn.itsource.pethome.basic.query;

import lombok.Data;

@Data
public class BaseQuery {
    //当前页
    private Integer currentPage;
    //每页条数
    private Integer pageSize;

    /**
     * 分页起始位置
     * @return
     */
    public Integer getBegin(){
        return (this.currentPage - 1) * this.pageSize;
    }
}