Vue 权限配置 - 基于后端 API 的角色权限管理系统

<div id="app">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">角色名称</th>
            <th scope="col">权限名称</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item,i in list">
            <th scope="row">{{item.rname}}</th>
            <td>
                <span v-for="p in item.permissionList">
                    {{'【'+p.pname+'】'}}
                </span>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-secondary" data-toggle="modal"
                            data-target="#exampleModal" data-whatever="@mdo">配置权限
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">配置权限</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">角色名称:</label>
                            <input v-model="formData.ename" class="form-control form-control-lg" type="text">
                            <label for="recipient-name" class="col-form-label">权限名称:</label>
                            <select v-model="formData.rid" class="custom-select custom-select-lg mb-3">
                                <option :value="items.rid" v-for="items in roleList">{{items.rname}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="modifyRoleByEid">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--    <div style="float: right">-->
    <!--       @click="modifyRoleByEid(item.eid)"   <ul class="pagination">-->
    <!--            <li class="page-item"><a class="page-link" href="#" @click="pre()">上页</a></li>-->
    <!--            <li class="page-item" v-for="i in pi.pages">-->
    <!--                <a class="page-link" href="#" @click="findProductsByPage(i)">{{i}}</a>-->
    <!--            </li>-->
    <!--            <li class="page-item"><a class="page-link" href="#" @click="next()">下页</a></li>-->
    <!--        </ul>-->
    <!--    </div>-->
    <!--    ###########################################################-->
</div>
<script src="/js/my/vue.min.js"></script>
<script src="/js/my/axios.min.js"></script>
<script src="/js/my/jquery-3.3.1.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            roleList: [],
            formData:{}
        },
        mounted() {
            this.findAllRole();
        },
        methods: {
            modifyRoleByEid(){
                axios.post("/role/saveRoleAndPermission",this.formData).then(resp=>{
                    $("#cancel").click();
                    this.findAllRole();
                })
            },
            findAllRole(item) {
                this.formData = item;
                axios.get("/role/findAllRole").then(resp => {
                    this.perList=resp.data;
                })
            },
            findAllRole() {
                axios.get("/role/findAllRole").then(resp => {
                    this.list=resp.data;
                })
            }
        }
    })
</script>