zhengbingbing
/
GXQGWH_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="../Script/Common/huayi.load.js"></script>
    <script src="../Script/Common/huayi.config.js"></script>
    <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
    <link rel="stylesheet" href="../css/init.css" />
    <link href="./css/buMenManger.css" rel="stylesheet" />
    <title>菜单权限</title>
    <style>
    	.boxCon table th {
            width: 42%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="daoHang clearfix">
            <div class="dhLeft">
                <sapn><i class="syIcon"></i>位置：<a id="ReIndex" href="javaScript:;">首页</a>&gt;<a href="javaScript:;">系统管理</a>&gt;<a href="javaScript:;">权限管理</a>&gt;<a href="" style="color: #000;">菜单权限</a></sapn>
            </div>
        </div>
        <div class="toolBar">
            <button class="btns add">添加</button>
            <button class="btns change">修改</button>
            <button class="btns del">删除</button>
        </div>
        <div class="tree">
            <ul id="treeDemo" class="ztree">
                <!--类名为ztree是必须的-->
            </ul>
        </div>

    </div>
    <!--添加弹出内容-->
    <div class="model addModel">
        <div class="box">
            <div class="btop clearfix">
                <p class="btl"><span>添加</span>&nbsp;&lfloor;&nbsp;&nbsp;<span class="tps" style="color: red;"></span>&nbsp;&nbsp;&rceil;&nbsp;菜单</p>
                <p class="btr addBtr" title="关闭">X</p>
            </div>
            <div class="boxCon">
            	<table>
            		<tbody>
            			<tr>
            				<th>父级分类：</th>
            				<td>
            					<div class="inpBox">
			                        <input type="text" class="inps inps1" />
			                        <i class="xl xl_one"></i>
			                        <div class="addTree xlAdd">
			                            <ul id="addTreeDemo" class="ztree"></ul>
	                       		 </div>
                   				</div>
            				</td>
            			</tr>
            			<!--<tr>
            				<th>添加类型：</th>
            				<td>
            					<select class="inpBox inps2" id="selecttype">
			                        <option value="0">菜单</option>
			                        <option value="1">页面</option>
			                        <option value="2">权限</option>
			                    </select>
            				</td>
            			</tr>-->
            			<tr>
            				<th><i style="color: #FF0000">*&nbsp;</i>名    称：</th>
            				<td>
            					<input class="inps inps3" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th><i style="color: #FF0000">*&nbsp;</i>代    码：</th>
            				<td>
            					<input class="inps inps4" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th><i style="color: #FF0000">*&nbsp;</i>菜单链接：</th>
            				<td>
            					<input class="inps inps5" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>是否启用：</th>
            				<td>
            					<input class="inps7" type="checkbox" />
            				</td>
            			</tr>
            			<tr>
            				<th>备    注：</th>
            				<td>
            					<input class="inps inps8" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>排序编码：</th>
            				<td>
            					<input class="inps inps9" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<!--<th>排序编码：</th>-->
            				<td colspan="2" style="text-align: center;">
            					<button class="btns addCun">保存</button>
            				</td>
            			</tr>
            		</tbody>
            	</table>
            </div>
        </div>

    </div>
    <!--删除弹出内容-->
    <div class="model delModel">
        <div class="box">
            <div class="btop clearfix">
                <p class="btl"><span>删除提示</span></p>
                <p class="btr delBtr" title="关闭">X</p>
            </div>
            <div class="boxCon" style="height: 150px;">
                您确定删除&nbsp;&lfloor;&nbsp;&nbsp;<span class="delName" style="color: red;"></span>&nbsp;&nbsp;&rceil;&nbsp;?

                <p style="margin-top: 30px;">
                    <button class="btns sure">确定</button>
                    <button class="btns return">取消</button>
                </p>
                <!--<p style="color: red;">注：若该分类下包含知识库内容会一并删除</p>-->
            </div>

        </div>

    </div>
    <!--修改弹出内容-->
    <div class="model changeModel">
        <div class="box">
            <div class="btop clearfix">
                <p class="btl"><span>修改</span>&nbsp;&lfloor;&nbsp;&nbsp;<span class="tps chtps" style="color: red;"></span>&nbsp;&nbsp;&rceil;&nbsp;菜单</p>
                <p class="btr changeBtr" title="关闭">X</p>
            </div>
            <div class="boxCon">
            	<table>
            		<tbody>
            			<tr>
            				<th> 父级分类：</th>
            				<td> 
            					<div class="inpBox">
                        <input type="text" class="inps inps1_chg" />
                        <i class="xl xl_one"></i>
                        <div class="addTree xlAdd">
                            <ul id="changeTreeDemo" class="ztree"></ul>
                        </div>
                    </div></td>
            			</tr>
            			<!--<tr>
            				<th>
            					修改类型：
            				</th>
            				<td>
            					    <select class="inpBox inps2_chg" id="selecttype">
                        <option value="0">菜单</option>
                        <option value="1">页面</option>
                        <option value="2">权限</option>
                    </select>
            				</td>
            			</tr>-->
            			<tr>
            				<th>
                                <i style="color: #FF0000">*&nbsp;</i>
                                名    称：
            				</th>
            				<td>
            					<input class="inps inps3_chg" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>
                                <i style="color: #FF0000">*&nbsp;</i>
                                代    码：
            				</th>
            				<td>
            					<input class="inps inps4_chg" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>
                                <i style="color: #FF0000">*&nbsp;</i>
                                菜单链接：
            				</th>
            				<td>
            					<input class="inps inps5_chg" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>
            					是否启用：
            				</th>
            				<td>
            					<input class="inps7_chg" type="checkbox" />
            				</td>
            			</tr>
            			<tr>
            				<th>
            					备    注：
            				</th>
            				<td>
            					<input class="inps inps8_chg" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<th>
            					排序编码：
            				</th>
            				<td>
            					<input class="inps inps9_chg" type="text" />
            				</td>
            			</tr>
            			<tr>
            				<td colspan="2" style="text-align: center;">
            					<button class="btns changeCun">保存</button>
            				</td>
            			</tr>
            		</tbody>
            	</table>
            	
            </div>
        </div>

    </div>

    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/zTree/jquery.ztree.core.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script>
        var tps = $('.tps');
        var id = ''; //当前节点id
        var name; //当前节点name
        var pid; //当前节点父ID
        var pidName;//
        var xlName; //添加弹出框内下拉框内节点name
        var token = $.cookie("token");
        tree();

        function tree() {
            $.get(huayi.config.callcenter_url + 'ModuleInfo/GetTreeList', {
                "token": $.cookie("token")
            }, function (result) {
                result = $.parseJSON(result);
                $.fn.zTree.init($("#treeDemo"), setting1, result.data); //实例化树形图
            });
        }

        var setting1 = {
            data: {
                key: {
                    name: "text"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    rootPId: 0
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        function zTreeOnClick(event, treeId, treeNode) {
            id = treeNode.id;
            name = treeNode.text;
            var parent = treeNode.getParentNode();
            if (parent) {
                pidName = parent.text;
                pid = parent.id;
            } else {
                pidName = "顶级分类";
                pid = 0;
            }
        };
        var setting2 = {
            data: {
                key: {
                    name: "text"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    rootPId: 0
                }
            },
            callback: {
                onClick: addTreeClick
            }
        }

        function addTreeClick(event, treeId, treeNode) {
            addPid = treeNode.id;
            console.log(addPid);
            xlName = treeNode.text;
            $('.inps1').val(xlName);

        };
        //删除按钮
        $('.del').click(function () {
            if (id == 'null' || id == '') {
                layer.confirm('没有要删除的菜单！', {
                    btn: ['确定']
                });
                return
            } else {
                $('.delModel').css('display', 'block');
                $('.delName').html(name);
            }
        })
        //关闭按钮
        $('.delBtr').click(function () {
            $('.delModel').css('display', 'none');
        })
        //确定删除按钮
        $('.sure').click(function () {
            $.ajax({
                type: "post",
                url: huayi.config.callcenter_url + "ModuleInfo/DelModule",
                async: true,
                dataType: 'json',
                data: {
                    ids: id,
                    token: token
                },
                success: function (data) {
                    if (data.state == "success") {
                        layer.msg("删除成功！");
                        tree();
                        clear();
                    }
                }
            });
            $('.delModel').css('display', 'none');

        })
        //取消删除按钮
        $('.return').click(function () {
            $('.delModel').css('display', 'none');
        })

        //添加按钮
        $('.add').click(function () {
            $('.addModel').css('display', 'block');
            if (pidName) {
                tps.html(name);
                $('.inps1').val(name);
                addPid = id;
            } else {
                tps.html('顶级分类');
                $('.inps1').val('顶级分类');
                addPid = 0;
            }
            treeCont();

        })
        //添加关闭按钮
        $('.addBtr').click(function () {
            $('.addModel').css('display', 'none');
            clear();
        })
        //添加内容下拉
        $('.inps1').focus(function () {
            $('.xlAdd').css('display', 'block')
        })
        $('.xl_one').click(function () {
            if ($('.xlAdd').css('display') == 'block') {
                $('.xlAdd').css('display', 'none')
            } else {
                $('.xlAdd').css('display', 'block')
            }
        })
        $('.addTree').mouseleave(function () {
            $(this).css('display', 'none')
        })
        //保存添加按钮
        var addPid, addDeptname, addSort;
        //添加弹出框内 所属部门下拉框内数据
        function treeCont() {
            $.get(huayi.config.callcenter_url + 'ModuleInfo/GetTreeList', {
                "token": $.cookie("token")
            }, function (result) {
                result = $.parseJSON(result);
                $.fn.zTree.init($("#addTreeDemo"), setting2, result.data); //实例化树形图
            });

        }
        $('.addCun').click(function () {
            //				console.log(addPid);
            if ($(".inps3").val() == '') {
                layer.confirm('请输入名称！', {
                    btn: ['确定']
                });
                return;
            }
            if ($(".inps4").val() == '') {
                layer.confirm('请输入代码！', {
                    btn: ['确定']
                });
                return;
            }
            if ($(".inps5").val() == '') {
                layer.confirm('请输入菜单链接！', {
                    btn: ['确定']
                });
                return;
            }
            addName = $('.inps3').val();
            addCode = $('.inps4').val();
            addUrl = $(".inps5").val();
            addState = $('.inps7').prop('checked');
            addRemark = $('.inps8').val();
            addSort = $('.inps9').val();
            $('.addModel').css('display', 'none');
            $.ajax({
                type: "post",
                url: huayi.config.callcenter_url + "ModuleInfo/AddModule",
                dataType: 'json',
                async: true,
                data: {
                    parentid: id,//当前选择节点ID
                    code: addCode,
                    name: addName,//部门名称
                    url: addUrl,
                    flag: addState,
                    remark: addRemark,
                    sort: addSort,//排列序号
                    token: token
                },
                success: function (data) {
                    //					console.log(data)
                    //					console.log(data.state);
                    if (data.state == "success") {
                        layer.msg("添加成功！");
                        tree();
                        clear();
                    }
                }

            });

        })

        //修改按钮
        var chanPid, //修改弹出框内 下拉框父节点ID
            chanId, //修改弹出框内 下拉框当前节点ID
            changeName, //修改弹出框内 下拉框当前节点name
            chbcName, //保存的部门名称
            chbcSort, //保存的排序号
            chbcPid; //保存的所属部门ID
        $('.change').click(function () {
            if (id == 'null' || id == '') {
                layer.confirm('没有选择要修改的菜单！', {
                    btn: ['确定']
                })
                return
            } else {
                changeAjax(id);
                $('.changeModel').css('display', 'block');
                $('.chtps').html(name);
                changeTreeCont();
            }

        });
        //关闭按钮
        $('.changeBtr').click(function () {
            $('.changeModel').css('display', 'none');
        });
        $('.inps4').focus(function () {
            $('.xlChange').css('display', 'block')
        })
        //下拉按钮功能
        $('.xl_two').click(function () {
            if ($('.xlChange').css('display') == 'block') {
                $('.xlChange').css('display', 'none')
            } else {
                $('.xlChange').css('display', 'block')
            }
        })
        //修改弹出框内 下拉树形图参数配置项
        var setting3 = {
            data: {
                key: {
                    name: "text"
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    rootPId: 0
                }
            },
            callback: {
                onClick: changeTreeClick
            }
        }

        function changeTreeClick(event, treeId, treeNode) {
            //		chanPid = treeNode.pId;
            chanId = treeNode.id;
            changeName = treeNode.text;
            $('.inps1_chg').val(changeName);
            var pidnode = treeNode.getParentNode();
            if (pidnode) {
                chanPid = pidnode.id;
                $('.inps1_chg').val(changeName);
            } else {
                chanPid = 0;
            }
        };

        //修改弹出框内 所属部门下拉框内数据
        function changeTreeCont() {
            $.get(huayi.config.callcenter_url + 'ModuleInfo/GetTreeList', {
                token: token
            }, function (result) {
                result = $.parseJSON(result);
                $.fn.zTree.init($("#changeTreeDemo"), setting3, result.data); //实例化树形图
            });
        }

        function changeAjax(id) {
            $.ajax({
                type: "get",
                url: huayi.config.callcenter_url + "ModuleInfo/GetModule",
                dataType: 'json',
                async: true,
                data: {
                    mId: id,
                    token: token
                },
                success: function (res) {
                    var data = res.data;
                    if (pid == null) {
                        pid == 0;
                        $('.inps1_chg').val('顶级分类');
                        chbcPid == 0;
                    } else {
                        $('.inps1_chg').val(pidName);
                        chbcPid = pid;
                    }
                    $('.inps3_chg').val(data.name);
                    $('.inps4_chg').val(data.code);
                    $('.inps5_chg').val(data.url);
                    if (data.enable == 1) { $('.inps7_chg').prop("checked", "checked"); }
                    $('.inps8_chg').val(data.remark);
                    $('.inps9_chg').val(data.sort);
                }
            });
        }
        //修改的保存按钮功能
        function changeBaoCunAjax(chbcPid) {
            var chgName = $('.inps3_chg').val();
            var chgCode = $('.inps4_chg').val();
            var chgUrl = $(".inps5_chg").val();
            var chgState = $('.inps7_chg').prop('checked');
            var chgRemark = $('.inps8_chg').val();
            var chgSort = $('.inps9_chg').val();
            $.ajax({
                type: "post",
                url: huayi.config.callcenter_url + "ModuleInfo/EditModule",
                async: true,
                dataType: 'json',
                data: {
                    id: id,
                    parentid: chbcPid,//当前选择节点ID
                    code: chgCode,
                    name: chgName,//部门名称
                    url: chgUrl,
                    flag: chgState,
                    remark: chgRemark,
                    sort: chgSort,//排列序号
                    token: token
                },
                success: function (data) {
                    if (data.state == "success") {
                        layer.msg("修改成功！");
                        tree();
                        clear();
                    } else {
                    }
                }
            });
        }

        $('.changeCun').click(function () {
            if ($(".inps3_chg").val() == '') {
                layer.confirm('请输入名称！', {
                    btn: ['确定']
                });
                return;
            }
            if ($(".inps4_chg").val() == '') {
                layer.confirm('请输入代码！', {
                    btn: ['确定']
                });
                return;
            }
            if ($(".inps5_chg").val() == '') {
                layer.confirm('请输入菜单链接！', {
                    btn: ['确定']
                });
                return;
            }
            $('.changeModel').css('display', 'none');
            console.log('部门id' + id + '所属部门id' + chbcPid + '部门名称' + chbcName + '排序' + chbcSort);
            chbcPid;
//          chbcName = $('.inps5').val();
//          chbcSort = $('.inps6').val();
            changeBaoCunAjax(chbcPid);
            //}

        })
        
        function clear(){
        	$('.inps1').val('');
        	$('.inps3').val('');
            $('.inps4').val('');
            $('.inps5').val('');
            $('.inps8').val('');
            $('.inps9').val('');
            id = 0;
            chbcPid = 0;
            xlName = '';
            name = '顶级分类';
        }

    </script>
</body>

</html>