ssm框架中员工角色多对多关系的实现

1.在mapper模块的mapper.xml中配置sql

需要获取员工的主键
useGeneratedKeys="true" keyProperty="id" keyColumn="id"

<!--通过员工id,获取角色-->
    <select id="getEmployeeOfRole" parameterType="long" resultType="role">
        select r.* from t_employee e
        join employee_role er on e.id =er.employee_id
        join t_role r on  r.id =er.role_id
        where e.id=#{id}
    </select>
    <!--设置中间表-->
    <insert id="saveRoles" parameterType="hashmap" >
        insert into employee_role(employee_id,role_id) values
        <foreach collection="roles" item="item" separator=",">
            (#{id},#{item.id})
        </foreach>
    </insert>
    <delete id="deleteRoles" parameterType="long">
        delete from employee_role where employee_id = #{id}
    </delete>

2.mapper模块中写对应的方法

//员工角色关系中，通过员工id，查询角色
    List<Role> getEmployeeOfRole(Long id);
    //将角色保存到map中，进行新增
    void saveRoles(Map<String,Object> map);
    //删除角色，删除员工得同时删除角色
    void deleteRoles(Serializable id);

3.service中实现相应的方法

//通过员工id,查询员工角色
 List<Role> getEmployeeOfRole(Long id);
 impl中实现接口
 @Autowired
    private EmployeeMapper employeeMapper;
    //根据id,获取角色
    @Override
    public List<Role> getEmployeeOfRole(Long id) {
        //通过员工id,获取到所有得角色
        return employeeMapper.getEmployeeOfRole(id);
    }

    //创建map,将角色的数据放到map中
    @Override
    public void save(Employee employee) {
        super.save(employee);
        //得到所有得角色
        List<Role> roles = employee.getRoles();
        //创建map,将角色保存到map中
        Map<String, Object> map = new HashMap();
        map.put("id", employee.getId());
        map.put("roles", roles);
        //调用mapper中得方法
        employeeMapper.saveRoles(map);
    }

    /**
     * 修改角色，先删除相对于员工得角色，在新增
     * @param employee
     */
    @Override
    public void update(Employee employee) {
        //删除相对于得员工角色
        employeeMapper.deleteRoles(employee.getId());
        super.update(employee);
        //新增员工角色
        List<Role> roles = employee.getRoles();
        //创建map,将角色保存到map中
        Map<String, Object> map = new HashMap();
        map.put("id", employee.getId());
        map.put("roles", roles);
        //调用mapper中得方法
        employeeMapper.saveRoles(map);
    }

    /**
     * 删除员工并删掉角色
     * @param id
     */
    @Override
    public void remove(Serializable id) {
        employeeMapper.deleteRoles(id);
        super.remove(id);
    }

4.web模块中实现

@RequestMapping(value = "/role/{id}",method = RequestMethod.GET)
    @ResponseBody
    public List<Role> getEmployeeOfRole(@PathVariable Long id){
        System.out.println(id);
        return employeeService.getEmployeeOfRole(id);
    }

4.前端具体实现（添加了穿梭框）

列表展示

<el-table-column prop="role" label="相关角色" sortable>
                <template scope="scope">
                    <el-button  type="text" @click="getRoles(scope.row);openRolesDialog()"  >查看已有角色</el-button>
                </template>
            </el-table-column>
            

:visible.sync="editFormVisible" 必须添加此属性
<el-form-item label="角色" prop="roles">
                    <!--穿梭框-->
                    <el-transfer
                            v-model="value"
                            :props="{
                            key: 'id',
                            label: 'name'
                            }"
                            :data="data"
                            :titles="titles"
                    >
                    </el-transfer>
                </el-form-item>

                   <el-dialog
                title="已有角色"
                :visible.sync="ownRolesVisible"
                width="30%"
                :before-close="handleClose">
            <el-table
                    :data="ownRoles"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="角色名称"
                        width="180">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
         </span>
        </el-dialog>

在这里插入代码片

script中数据具体方法

ownRolesVisible:false,
                ownRoles:[],
                //data时已有角色
                data: [],
                //value是已有的角色
                value: [],
                //穿梭框的标题
                titles:["未拥有角色","已有角色"],

method方法中

 getRoles(row){
                let id = row.id;
                this.$http.get("/employee/role"+"/"+id).then((res) => {
                    this.ownRoles = res.data;
                });
            },
            //打开弹出框界面
            openRolesDialog(){
                this.ownRolesVisible=true;
            },

编辑界面的回显

//显示编辑界面,回显
            handleEdit: function (index, row) {
                this.value=[];
                this.editFormVisible = true;
                let para =row;
                if(para.dept!=null){
                    row.deptId=row.dept.id
                }
                this.editForm = Object.assign({}, para);
                **//向后台发送请求,拿到所有的权限
                this.$http.patch("/role/list").then((res) => {
                    this.data = res.data;
                });
                //    向后台发送请求拿到已有权限
                this.$http.get("/employee/role"+"/"+row.id).then((res) => {
                    for (let i in res.data){
                        this.value.push(res.data[i].id)
                    }
                });**
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            para.dept={
                                id:para.deptId
                            }
                    
                            **//需要把角色封装到para中
                            //遍历value
                          	para.roles = [];
                            for (let i in this.value){
                                para.roles.push({id:this.value[i]})
                            }**
                            console.log(para);
                            this.$http.post("/employee", para).then(res => {
                                this.editLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //验证重置
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getEmployees();
                            });
                        });
                    }
                });
            },