ssm+elementui+vue

前言:

本系统包括:汽车维修工单管理、结算工单管理、还车管理、基础数据、权限管理 和 统计报表 六个功能模块。另包括权限管理模块用于系统的用户、角色和相关权限。系统功能。

项目结构(后端)

在这里插入图片描述

前端

在这里插入图片描述

角色管理

PermissionMapper.xml

中间表配置

<select id="selectAll" resultType="Permission">
        SELECT * FROM t_permission
    </select>

       <select id="selectByRoleId" resultType="Permission">
        SELECT p.* FROM t_permission p
        JOIN t_role_permission rp ON p.id =rp.permissionId
        WHERE rp.roleId=#{roleId}
    </select>

RoleMapper.xml

<resultMap id="roleResultMap" type="Role">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="sn" property="sn"/>
        <collection property="permissions" ofType="Permission" column="id" select="cn.itsource.crm.mapper.PermissionMapper.selectByRoleId"/>
    </resultMap>
     <!--根据查询条件查询-->
    <select id="selectAllByQuery" resultMap="roleResultMap">
        SELECT * FROM t_role
        <include refid="whereSql"/>
        LIMIT #{begin},#{pageSize}
    </select>
    <!--维护角色和权限的中间表-->
    <insert id="saveRoleAndPermission">
        INSERT INTO t_role_permission(roleId, permissionId)
        VALUES
        <foreach collection="permissions" separator="," item="p">
            (#{roleId},#{p.id})
        </foreach>
    </insert>
    <!--删除角色和权限中间表-->
    <delete id="deleteRoleAndPermission" parameterType="long">
        DELETE  FROM t_role_permission WHERE roleId=#{roleId}
    </delete>

Role.vue

<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-button type="primary" v-on:click="roleList">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table :data="roles" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="编号" width="90">
            </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="permissions" :formatter="formatterPermission" label="权限">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <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>


        <!--新增界面-->
        <el-dialog :title="title" :visible.sync="formVisible" >
            <!--
            :rules:主要用来做校验的(定义校验规则的)
            ref="addForm": 简单理解就是id=addForm
            -->
            <el-form :model="form" label-width="40px" :rules="addFormRules" ref="addForm">
                <el-form-item label="角色" prop="name">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="编号" prop="sn">
                    <el-input v-model="form.sn" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item  prop="permissions">
                    <el-transfer  @change="handleChange"  :props="{key: 'id',label: 'name'}" v-model="form.permissions" :data="data"  :titles="titles"></el-transfer>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submit"   :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

    export default {
        data() {
            return {
                //权限列表准备的数据
                data:[],
                titles:["权限","已有权限"],
                //查询form
                searchForm:{
                    name:""
                },
                //数据列表
                roles: [],
                //默认为true,展示加载框
                listLoading: false,
                sels: [],//列表选中行
                currentPage:1,
                //默认10条
                pageSize:10,
                //总条数
                total:0,
                //弹出框对应的标题
                title:"",
                //弹出框form表单中对应的数据
                form:{
                    id:"",
                    name:"",
                    permissions:[]
                },
                //弹出框是否显示  false代表不显示
                formVisible:false,
                //添加是否显示加载框
                addLoading: false,
                //校验规则
                addFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            //格式化权限
            formatterPermission(row, column) {
                //获取角色拥有的权限
                var permissions = row.permissions;

                //创建一个数组,表示拥有的权限
                let myPermissions = [];
                for(let i=0;i<permissions.length;i++){
                    //循环迭代每个权限
                    let p = permissions[i];
                    //添加
                    myPermissions.push(p.name);
                }
                return myPermissions.join(",");
                console.debug(permissions)
            },
            handleChange(value, direction, movedKeys){
                this.form.permissions = value;
            },
            //删除按钮对应的事件
            handleDel(i,r){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/role/delete/"+r.id).then(res=>{
                        if(res.data.success){
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.roleList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }).catch(() => {
                });
            },
            //添加对应的事件
            handleAdd(){
                this.formVisible = true;
                this.title="新增部门";
            },
            //修改对应的事件
            handleEdit(i,r){
                this.title = "修改部门";
                this.formVisible = true;
                //回显数据
                this.form = Object.assign({}, r);

                let permissions = this.form.permissions;
                //定义一个数组,来装回显的id
                let permissionsArray = [];
                //循环迭代所有的权限
                for(let i=0;i<permissions.length;i++){
                    //拿到权限具体的对象
                    var p =permissions[i];
                    permissionsArray.push(p.id);
                }
                //给权限重新赋值
                this.form.permissions = permissionsArray;
            },
            //提交数据
            submit(){
                //验证form表单
                this.$refs.addForm.validate((valid) => {
                    if (valid) {//校验通过之后就进入该代码块
                        //加载框
                        this.addLoading = true;
                        //获取form表单中的数据
                        let param = Object.assign({}, this.form);
                        //新增一个数组,来装权限对应的对象最终格式应该为permissions:[{id:1},{id:2}]
                        let mypermissions = [];
                        //拿到已有权限的id  格式[1,2]  我要把这种格式转为上面的格式
                        let permissions = param.permissions;
                        for(var i=0;i<permissions.length;i++){
                            let p = permissions[i];
                            //创建一个对象
                            let obj = {
                                id:p
                            }
                            mypermissions.push(obj);
                        }
                        param.permissions = mypermissions;
                        if(param.id){
                            //修改数据
                            this.$http.post("/role/update", param).then(res => {
                                //提交成功
                                if(res.data.success){
                                    //停止添加按钮的加载框
                                    this.addLoading = false;
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    //弹出框关闭
                                    this.formVisible = false;
                                    //重置form表单
                                    this.$refs['addForm'].resetFields();
                                    //加载列表
                                    this.roleList();
                                }else{
                                    this.$notify.error({
                                        title: '错误',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }else{
                            //	{name:测试,sn:ceshi,permissions:[{id:1},{id:2}]}
                            //保存数据
                            this.$http.put("/role/save", param).then(res => {
                                //提交成功
                                if(res.data.success){
                                    //停止添加按钮的加载框
                                    this.addLoading = false;
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    //弹出框关闭
                                    this.formVisible = false;
                                    //重置form表单
                                    this.$refs['addForm'].resetFields();
                                    //加载列表
                                    this.roleList();
                                }else{
                                    this.$notify.error({
                                        title: '错误',
                                        message: res.data.msg
                                    });
                                }
                            });
                        }

                    }
                });
            },
            //复选框选中的行
            selsChange(v){
                this.sels = v;
            },
            //加载部门列表
            roleList(){
                let param = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    name:this.searchForm.name
                };
                //开启加载
                this.listLoading = true;
                this.$http.patch("/role/listByPage",param).then(res=>{
                    this.total = res.data.total;
                    this.roles = res.data.result;
                    this.listLoading = false;
                });

            },
            //权限列表
            permissionList(){
                this.$http.patch("/permission/list").then(res=>{
                    // this.roles = res.data.result;
                    this.data = res.data;
                });
            },
            //当前页改变的时候触发
            handleCurrentChange(v){
                //修改当前页
                this.currentPage = v;
                //加载列表
                this.roleList();
            },
            //批量删除
            batchRemove(){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("/department/batchDelete",this.sels).then(res=>{
                        if(res.data.success){
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.roleList();
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }).catch(() => {
                });
            }

        },
        mounted() {
            //加载角色列表
            this.roleList();
            //加载权限
            this.permissionList();
        }
    }

</script>

<style scoped>


</style>

效果:

在这里插入图片描述在这里插入图片描述

发布了4 篇原创文章 · 获赞 0 · 访问量 33
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览