lihai
/
XiXianDC_ZhuBiao_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!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><b class="text-red">*</b>名 称：</th>
								<td>
									<input class="inps inps3" type="text" />
								</td>
							</tr>
							<tr>
								<th>代 码：</th>
								<td>
									<input class="inps inps6" type="text" />
								</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>
									<b class="text-red">*</b>名 称：
								</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 = 0; //左侧菜单树 当前节点id
			var name; //左侧菜单树 当前节点name
			var pid; //左侧菜单树 当前节点父ID
			var pidName; //左侧菜单树  父节点名称

			var addPid, xlName; //添加弹出框内下拉框  菜单树 

			//修改按钮
			var chanPid, //修改弹出框内 下拉框 菜单树  父节点ID
				changeName; //修改弹出框内 下拉框当前节点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;
				}
			};
			/**
			 * 删除部分
			 * */
			//删除按钮
			$('.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();
						}
					}
				});
				$('.delModel').css('display', 'none');
				location=location;

			})
			//取消删除按钮
			$('.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')
			})

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

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

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

			$('.addCun').click(function() {
				if(!$('.inps3').val()){
					layer.msg('请输入名称！');
					return
				}
				var addName = $('.inps3').val();
				var addCode = $('.inps6').val();
				var addUrl = $(".inps5").val();
				var addState = $('.inps7').prop('checked');
				var addRemark = $('.inps8').val();
				var addSort = $('.inps9').val();
				$('.addModel').css('display', 'none');
				$.ajax({
					type: "post",
					url: huayi.config.callcenter_url + "ModuleInfo/AddModule",
					dataType: 'json',
					async: true,
					data: {
						parentid: addPid, //当前选择节点ID
						code: addCode,
						name: addName, //部门名称
						url: addUrl,
						flag: addState,
						remark: addRemark,
						sort: addSort, //排列序号
						token: token
					},
					success: function(data) {
						if(data.state == "success") {
							layer.msg("添加成功！");
							addPid = 0;
							$('.inps3').val('');
							$('.inps6').val('');
							$(".inps5").val('');
							$('.inps7').attr('checked', false);
							$('.inps8').val('');
							$('.inps9').val('');
							tree();
							window.location.reload();
						}
					}

				});
			})

			/**
			 * 修改部分
			 * */
			$('.change').click(function() {
				if(id == 'null' || id == 0) {
					layer.confirm('没有选择要修改的菜单！', {
						btn: ['确定']
					})
					return
				} else {
					$('.changeModel').css('display', 'block');
					$('.chtps').html(name);
					changeTreeCont();
					changeAjax();
				}

			});
			//关闭按钮
			$('.changeBtr').click(function() {
				$('.changeModel').css('display', 'none');
			});
			$('.inps6').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.id;
				changeName = treeNode.text;
				$('.inps1_chg').val(changeName);

			};

			//修改弹出框内 所属部门下拉框内数据
			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() {
				$.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('顶级分类');
							chanPid = 0;
						} else {
							$('.inps1_chg').val(pidName);
							chanPid = 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);
					}
				});
			}
			//修改的保存按钮功能
			$('.changeCun').click(function() {
				if(!$('.inps3_chg').val()){
					layer.msg('请输入名称！');
					return
				}
				$('.changeModel').css('display', 'none');
				//console.log('部门id' + id + '所属部门id' + chanPid);
				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: chanPid, //当前选择节点IDchanPid
						code: chgCode,
						name: chgName, //部门名称
						url: chgUrl,
						flag: chgState,
						remark: chgRemark,
						sort: chgSort, //排列序号
						token: token
					},
					success: function(data) {
						if(data.state == "success") {
							layer.msg("修改成功！");
							tree();
						}
					}
				});
				location=location;
			})
		</script>
	</body>

</html>