zhengbingbing
/
XinXiangXLX_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
							<!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 class="gray-bg">
		<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 class="dhRight">
				<a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
			</div>
		</div>
		<div class="wrapper wrapper-content animated fadeInRight">
			<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>名 称：</th>
								<td>
									<input class="inps inps3" type="text" />
								</td>
							</tr>
							<tr>
								<th>代 码：</th>
								<td>
									<input class="inps inps4" type="text" style="border: 1px solid #aaa;"/>
								</td>
							</tr>
							<tr>
								<th>菜单链接：</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>
									名 称：
								</th>
								<td>
									<input class="inps inps3_chg" type="text" />
								</td>
							</tr>
							<tr>
								<th>
									代 码：
								</th>
								<td>
									<input class="inps inps4_chg" type="text" />
								</td>
							</tr>
							<tr>
								<th>
									菜单链接：
								</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();
							id='';
						}
					}
				});
				$('.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');
			})
			//添加内容下拉
			$('.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 ($('.inps2').val() == "" || $('.inps3').val() == "") {
				//    if (did.length <= 0) {
				//        layer.confirm('所添加内容不能为空！', {
				//            btn: ['确定']
				//        });
				//        return;
				//    }
				//} else {

				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();

						}
					}

				});

				//}
			})

			//修改按钮
			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();
							id='';
						}
					}
				});
			}

			$('.changeCun').click(function() {
				//if ($('.inps4').val() == "" || $('.inps5').val() == "" || $('.inps6').val() == "") {
				//    layer.confirm('所修改内容不允许为空！', {
				//        btn: ['确定']
				//    });
				//    return;
				//} else {
				$('.changeModel').css('display', 'none');
				console.log('部门id' + id + '所属部门id' + chbcPid + '部门名称' + chbcName + '排序' + chbcSort);
				chbcPid;
				//          chbcName = $('.inps5').val();
				//          chbcSort = $('.inps6').val();
				changeBaoCunAjax(chbcPid);
				//}

			})
		</script>
	</body>

</html>