关于权限设置或者类似的框架搭建以及基本功能实现

1.html

<div class="row pop_xiugai">
                <div class="position-relative">
                    <img src="../../static/images/pop_xiugai.png" width="800px" height="500px"/>
                    <button class="close pop_close" data-dismiss="modal" aria-label="Close">
                        <img src="../../static/images/pop_close.png" width="37px" height="37px"/>
                    </button>
                    <div id="user_id">
                        <div class="detail">
                            <div class="form-group row">
                                <label for="example-text-input" class="col-2 col-form-label font_form text-right">角色名称：</label>
                                <div class="col-10">
                                    <input class="form-control" type="text" v-model="role_name" placeholder="请输入角色名称">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="example-text-input" class="col-2 col-form-label font_form text-right">角色功能：</label>
                                <div class="col-10">
                                    <div class="row">
                                        <div class="col-5">
                                            <div class="no_choose">
                                                <div class="choose_title">
                                                    <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen can_father">
                                                        <input type="checkbox" id="can_choose"> 可选
                                                        <span></span>
                                                    </label>
                                                    <div class="num float-right mt-2 mr-3">
                                                        <span id="no_choose_selected">0</span>/<span id="no_choose_all"></span>
                                                    </div>
                                                </div>
                                                <div class="kt-input-icon">
                                                    <input class="search_search form-control" type="text" placeholder="请输入搜索内容"/>
                                                    <span class="kt-input-icon__icon kt-input-icon__icon--right mr-3">
                                                        <span><i class="flaticon-search"  style="color: #00c7ff;"></i></span>
                                                    </span>
                                                </div>
                                                
                                                <div id="choose_content_no">
                                                    <div class="choose_content kt-checkbox-list" id="no_content">
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="1角色一"> 1角色一
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="2这是啥"> 2这是啥
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="3什么角色"> 3什么角色
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="4角色一"> 4角色一
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="5这是啥"> 5这是啥
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="6什么角色"> 6什么角色
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="7角色一"> 7角色一
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="8这是啥"> 8这是啥
                                                            <span></span>
                                                        </label>
                                                        <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                            <input type="checkbox" class="choose_no" value="9 什么角色">9 什么角色
                                                            <span></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="row">
                                                <i class="fa fa-chevron-circle-right add_two"></i>
                                            </div>
                                            <div class="row">
                                                <i class="fa fa-chevron-circle-left add_one"></i>
                                            </div>
                                        </div>
                                        <div class="col-5">
                                            <div class="no_choose">
                                                <div class="choose_title">
                                                    <label class="kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen">
                                                        <input type="checkbox" id="yes_choose"> 已选
                                                        <span></span>
                                                    </label>
                                                    <div class="num float-right mt-2 mr-3">
                                                        <span id="yes_choose_selected">0</span>/<span id="yes_choose_all">5</span>
                                                    </div>
                                                </div>
                                                <div class="kt-input-icon">
                                                    <input class="search_search form-control" type="text" placeholder="请输入搜索内容"/>
                                                    <span class="kt-input-icon__icon kt-input-icon__icon--right mr-3">
                                                        <span><i class="flaticon-search"  style="color: #00c7ff;"></i></span>
                                                    </span>
                                                </div>
                                                <div id="choose_content_yes">
                                                    <div class="choose_content kt-checkbox-list" id="yes_content">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

2.代码实现（本地未连接后台）

    //未选到已选的全选、全不选
    var choose_no = document.getElementsByClassName('choose_no');
    //全部值
    $('#no_choose_all').text(choose_no.length)
    $("#can_choose").click(function(){   
        if($('#can_choose').is(":checked")){
            for (var i = 0; i < choose_no.length; i++) {
                choose_no[i].checked = true;
            }
            //选中的个数
            var checked_counts = 0;
            for (var i = 0; i < choose_no.length; i++) {
                if(choose_no[i].checked){
                    checked_counts++;
                }
            }
            //判断
            if(checked_counts > 0){
                $('.add_two').addClass('user_icon_active')
            }else{
                $('.add_two').removeClass('user_icon_active')
            }
        }else{
            for (var i = 0; i < choose_no.length; i++) {
                choose_no[i].checked = false;
            }
            //选中的个数
            var checked_counts = 0;
            for (var i = 0; i < choose_no.length; i++) {
                if(choose_no[i].checked){
                    checked_counts++;
                }
            }
            //判断
            if(checked_counts > 0){
                $('.add_two').addClass('user_icon_active')
            }else{
                $('.add_two').removeClass('user_icon_active')
            }
        }
    });
    //选中中间按钮颜色的变化
    $('body').on('click' , '.choose_no' , function() {
        //选中的个数
        var checked_counts = 0;
        for (var i = 0; i < choose_no.length; i++) {
            if(choose_no[i].checked){
                checked_counts++;
            }
        }
        //已选中的值
        $('#no_choose_selected').text(checked_counts);
        //判断
        if(checked_counts > 0){
            $('.add_two').addClass('user_icon_active')
        }else{
            $('.add_two').removeClass('user_icon_active')
        }
    })
    //点击按钮未选传送到已选
    $('.add_two').click(function(){
        var yes_content_html = '';
        var num_ = [];
        for(var i = 0; i<choose_no.length; i++){
            if(choose_no[i].checked){
                num_.push(choose_no[i])
                $("#yes_content").append("<label class='kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen'><input type='checkbox' class='choose_yes' value="+choose_no[i].value+">"+choose_no[i].value+"<span></span></label>")
            }
            //span个数的更改
            $('#no_choose_selected').text(0);
            $('#no_choose_all').text(choose_no.length - num_.length)
        }
        for(var j = 0; j<num_.length;j++){
            num_[j].parentNode.remove();
        }
        $(this).removeClass('user_icon_active');
        
        
    })

    //已选到未选的全选、全不选
    var choose_yes = document.getElementsByClassName('choose_yes');
    //全部值
    // $('#no_choose_all').text(choose_no.length)
    $("#yes_choose").click(function(){   
        if($('#yes_choose').is(":checked")){
            for (var i = 0; i < choose_yes.length; i++) {
                choose_yes[i].checked = true;
            }
            //选中的个数
            var checked_counts = 0;
            for (var i = 0; i < choose_yes.length; i++) {
                if(choose_yes[i].checked){
                    checked_counts++;
                }
            }
            //判断
            if(checked_counts > 0){
                $('.add_one').addClass('user_icon_active')
            }else{
                $('.add_one').removeClass('user_icon_active')
            }
        }else{
            for (var i = 0; i < choose_yes.length; i++) {
                choose_yes[i].checked = false;
            }
            //选中的个数
            var checked_counts = 0;
            for (var i = 0; i < choose_yes.length; i++) {
                if(choose_yes[i].checked){
                    checked_counts++;
                }
            }
            //判断
            if(checked_counts > 0){
                $('.add_one').addClass('user_icon_active')
            }else{
                $('.add_one').removeClass('user_icon_active')
            }
        }
    });
    //选中中间按钮颜色的变化
    $('body').on('click' , '.choose_yes' , function() {
        //选中的个数
        var checked_counts = 0;
        for (var i = 0; i < choose_yes.length; i++) {
            if(choose_yes[i].checked){
                checked_counts++;
            }
        }
        //已选中的值
        // $('#no_choose_selected').text(checked_counts);
        //判断
        if(checked_counts > 0){
            $('.add_one').addClass('user_icon_active')
        }else{
            $('.add_one').removeClass('user_icon_active')
        }
    })


    //点击按钮未选传送到已选
    $('.add_one').click(function(){
        var yes_content_html = '';
        var num_ = [];
        for(var i = 0; i<choose_yes.length; i++){
            if(choose_yes[i].checked){
                num_.push(choose_yes[i])
                $("#no_content").append("<label class='kt-checkbox kt-checkbox--success mt-2 ml-3 colorgreen'><input type='checkbox' class='choose_no' value="+choose_yes[i].value+">"+choose_yes[i].value+"<span></span></label>")
            }
            //span个数的更改
            // $('#no_choose_selected').text(0);
            // $('#no_choose_all').text(choose_no.length - num_.length)
        }
        for(var j = 0; j<num_.length;j++){
            num_[j].parentNode.remove();
        }
        $(this).removeClass('user_icon_active');
        
        
    })

3.界面展示