Yezb
/
ss_new_ui_skin_and_page


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
							<!DOCTYPE html>
<html>
<head>
<style>
	#savemb{
		display: none;
	}
	#delmb{
		display: none;
	}
</style>
</head>
<body>
<form name="ddpOptionForm" action="<serv.ss dest='menuDefOptList'/>" method="post"> <!-- "cdOptionForm"。Lin -->
	<input type="hidden" name="cdOptionHtml" value="" id="cdOptionHtml" />
<!-- <@input type='submit' id="cx" value="查询" class="content-invertButton" /> -->
</form>
<form name="shortcutForm" action='' method="post">
	<input name="bjid" type="hidden" value="${bjid}" />
	<div class="search-div">
		<div style="padding: 15px 25px 12px 25px;">
			<input type='button' value="增加菜单组" onclick="addGroup();" class="content-button" />
			<!-- 业务分类 <select id="yy" name="yy" onchange="">
				<option value="-1">请选择</option>
			</select> -->
			&nbsp;
		 <%--<select id="cdmbselected" class="sel"  onchange="selectMB(this.options[this.options.selectedIndex].value);"  style="float: right;">
				<option value="0">空白模板</option>
				<wd:option name="$@{sessionScope['XMMC']}.grcdmb"  />
			</select>--%>
			<input type='button' id="savemb" value="保存当前模板" class="content-button" />
			<input type='button' id="delmb" value="删除该模板" class="content-button" />
			<input type='button' id="addmb" value="另存为新模板" class="content-button" />
			<input name="grcdmbid" id="grcdmbid" type="hidden" class="sel" onchange="selectMB(this.value)"/>
			<input name="grcdmbName" placeholder="模板" type="text" style="width: 130px;" />
			<objp.ss name="grcdmb" cb="grcdmb" inp="true"/> <%-- 原 codebook="grcdmb_all"，去掉 根模板 了。Lin --%>
		</div>
	</div>
	<div id="container" class="dragList-div">
		<div class="box">
			<p class="label">已选<span id="ddpDropAll" class="icon-allRight"></span></p> <!-- "cdDropAll"。Lin -->
			<div class="list-body" style="position: relative;overflow-x: hidden;width: 100%;height: 380px;">
				<div id="ddpSelected" class="scrollbar" ssSelClazz="list-checkedIcon" style="height:100%"> <!-- "cdSelected"。Lin -->
				</div>
			</div>
		</div>
		<div class="box">
			<p class="label">备选<span id="ddpPickAll" class="icon-allLeft"></span></p> <!-- "cdPickAll"。Lin -->
			<div class="list-body" style="position: relative;overflow-x: hidden;width: 100%;height: 380px;">
				<div id="ddpOption" class="scrollbar" ssSelClazz="list-checkedIcon" style="height:100%"> <!-- "cdOption"。Lin -->
				</div>
			</div>
		</div>
		<input type="hidden" value="" name="ddpSelectedId" /> <%-- name="cdSelectedId"。再改为统一的名字 -- 同一页面，不会有多个拖放选择。Lin --%>
	</div>
</form>
<!-- <div class='bottom-div'>
<@input type="button" name="button" onclick="wd.display.closeDialog();" value="取消" class="bottom-button" />
</div> -->
</body>

<%-- 去掉，母体也没找到。Lin
<script type="text/javascript" src="ajaxFunc.js"></script>
--%>
<script type="text/javascript">
	wd.edit.objectPicker.getInstance("grcdmb").onchange=function(){
		selectMB($("#grcdmbid").val());
	}

	//从请求中获得
	var oridata = '${mbdata}';
	var mbdata = (oridata == '' ? '' : JSON.parse(oridata));
	var bjid = "${bjid}";
	var menuRootGroupId = "${menuRootGroupId}";
	var parent1 = window.parent;
	//从上个页面（菜单页面），获取到需要的数据
	/**
	 * menuTree节点内数据的含义
	 * [0]--lmid（两种情况，1.数字，2.英文缩写）
	 * [1]--name，名字代号
	 * [2]--上级id
	 * [3]--跳转页
	 */
	var menudata = "${menuTree}";
	var menuTree = (menudata == '' ? '' : eval(menudata));
	//这是所有的菜单选项（人员、校务那些），是个二维数组
	// for(var i = 0; i < 10 && parent.menuTree == undefined; i++)
	//     parent = parent.parent
	// if(parent.menuTree != undefined)
	//     menuTree = parent.menuTree;

	/**
	 * 自定义菜单
	 * 1--shortcutMenuInfo(各个自定义id(不清楚来源)，menuRoot)
	 * 2--groupId(上级id)；member（子栏目成员）;name（名字代号）
	 * 3，member--groupId（上级id）;memberId（自身id为#序号#lmid）;name（名字代号）;url（跳转页）
	 *
	 * example:shortcutMenuInfo[440112878].members["#0#44014346"].name
	 */
	var shortcutMenuInfo;//这是快捷组的数据，也就是最顶上那一排，这是个三层键值对？
	for(var i = 0; i < 10 && parent1.shortcutMenuInfo == undefined; i++)
		parent1 = parent1.parent
	if(parent1.shortcutMenuInfo != undefined)
		shortcutMenuInfo = parent1.shortcutMenuInfo;

	//自定义栏目的子栏目的根id
	var shortcutGroup=[];
	var  menuRootSize = 0;//见名知意
	var selectedMenuMenber = [];

	function isNumber(o) {
		var reg = /^[0-9]*$/;
		if (!reg.test(o)) {
				return false;
		}
		return true;
	}

	function isLeft(shortcutMenuInfo){
		for(var item in shortcutMenuInfo){
			if(isNumber(item)){
				for(var item2 in shortcutMenuInfo[item].members){
					if(shortcutMenuInfo[item].members[item2].memberId){
						var arr = shortcutMenuInfo[item].members[item2].memberId.split('#');
						selectedMenuMenber.push(arr[arr.length-1]);
					}
				}
			}else{
				for(var item2 in shortcutMenuInfo[item].members){
					if(!isNumber(shortcutMenuInfo[item].members[item2].memberId)){
						selectedMenuMenber.push(shortcutMenuInfo[item].members[item2].memberId);
					}
				}
			}
		}
	}

	function load() {
		//初始化右边应用的下拉框select
		// $.each(menuTree,function(i){//遍历整个菜单二维数组，拿出里面的每个数组
		//     var menu1 = menuTree[i];
		//     //每个一维数组的四个数据依次是：id，名字，上级菜单id，url
		//     if (menu1[2] == "env" && menu1[3] == "null") {//当上级id为env时，那么这就是个根菜单（人员、校务这些），把它放到下拉框中
		//         $('#yy').append("<option value='" + menu1[0]+"'>"+menu1[1]+"</option>");
		//     }
		// });
		//初始化左边的选项和下拉框
		//初始化要将子栏目下的栏目页放进去
		var menuRoot;
		//给右边下拉框绑定事件，用来在右边显示选中的子项
		// $('#yy').change(function(){
		//     console.log(menuTree);
		//     //alert($(this).val());
		//     selectByParentId($(this).val());
		// });
		for (var groupId in shortcutMenuInfo) {     //在addOption前先得出组菜单id数组，做样式区分时用到
			if ("menuRoot" != groupId) {
				shortcutGroup.push(groupId);    //纪录快捷组id,在后台使用
			}
		}
	}

	load();

	$(function () { selectByParentId(); })

	/**
	* 根据父id查询出对应的子对象
	* @param  {[type]} id [description]
	* @return {[type]}    [description]
	*/
	function selectByParentId() {
		//用来加载出右边拖拽框的所有选项
		var cdOptionHtml = "";
		$.each(menuTree, function (i) { //遍历整个菜单二维数组，拿出里面的每个数组
			var menu = menuTree[i];
			if (selectedMenuMenber.indexOf(menu[0]) == -1) {
				if (menu[2] == "search") {
					var parentDiv = "<div class='list-background list' style='min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' ssObjId='" + menu[0] + "' memberid='" + menu[0] + "' name='" + menu[1] + "' groupId='" + menu[2] + "' url='" + menu[3] + "'><span>" + menu[1] + "[搜索]" + "</ span ></div>";
					var parentId = menu[0];
					$.each(menuTree, function (j) {//由于存在两级，所以再次遍历，把第二级放进自己的父级中
						var menu2 = menuTree[j];
						if (menu2[2] == menu[0]) { //上级id等于第一级的id时
							parentDiv += '<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + menu2[0] + '" ssPobjId="' + parentId + '" memberid="' + menu2[0] + '"name="' + menu2[1] + '" groupId="' + menu2[2] + '" url="' + menu[3] + '" ><span>' + menu2[1] + "[搜索]" + '</ span ></div>';
						}
					});
					cdOptionHtml += parentDiv;
				} else if (menu[2] != "" && menu[2] != window.top.menuRootName) {//当上级id 等于传进来的id（也就是右边下拉框此时选中的值）时，那么加把此项放到右边的拖拽框
					var parentDiv = "<div class='list-background list' style='min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' ssObjId='" + menu[0] + "' memberid='" + menu[0] + "' name='" + menu[1] + "' groupId='" + menu[2] + "' url='" + menu[3] + "'><span>" + menu[1] + "</ span ></div>";
					var parentId = menu[0];
					$.each(menuTree, function (j) {//由于存在两级，所以再次遍历，把第二级放进自己的父级中
						var menu2 = menuTree[j];
						if (menu2[2] == menu[0]) { //上级id等于第一级的id时
							parentDiv += '<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + menu2[0] + '" ssPobjId="' + parentId + '" memberid="' + menu2[0] + '"name="' + menu2[1] + '" groupId="' + menu2[2] + '" url="' + menu[3] + '" ><span>' + menu2[1] + '</ span ></div>';
						}
					});
					cdOptionHtml += parentDiv;
				}
			}
		});
		cdOptionHtml = cdOptionHtml.replace(/&/g, '%26');
		// $("#cdOption").html(cdOptionHtml);//把整个div放进拖拽框
		$("#cdOptionHtml").val(cdOptionHtml);//把整个div放进拖拽框
		$('form[name="ddpOptionForm"]')[0].submit();	// "cdOptionForm"。Lin
	}

	/**
	 * 创建一个新的快捷组，也就是顶上一排那种有第二层的东西
	 */
	function addGroup(){
		//全都是快捷组这东西惹的祸   因为它既是shortcutMenuInfo中menuRoot的成员，也是shortcutMenuInfo的成员
		//var groupSel = document.getElementById('cdwz');
		var groupDivs = $('#ddpSelected').children();	// '#cdSelected'。Lin
		//下面这段都是用来判断为空或者重复
		var newname=prompt("新菜单名称","未定义");
		if(''==newname||null==newname){
			alert('名称不能为空!!\n');
			return false;
		}
		var hasGroupName = false;
		/*for(var i=0;i<groupSel.options.length;i++){
		 if(newname==groupSel.options[i].text){
		 hasGroupName = true;
		 break;
		 }
		 }*/
		$.each(groupDivs, function(i){
			var name = $(groupDivs[i]).attr('name');
			if(newname == name){
				hasGroupName = true;
				return true;
			}
		});
		if(hasGroupName){
			alert('菜单名称'+newname+'已存在');
			return false;
		}
		//用当前系统的毫秒值作为groupId
		var groupId = new Date().getTime()+'';
		//console.info("测试组id: "+groupId);
		//shortcutMenuInfo中新建一个键值对，键为groupId
		shortcutMenuInfo[groupId] = {
			'groupId':groupId,
			'name':newname,//输入的名字
			'members':{} //成员为空
		}

		shortcutGroup.push(groupId);
		DM.addItem(groupId,'<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + groupId + '" memberid="' + groupId + '" name="'+ newname +'" groupId="menuRoot" url="null" ><span >'+ newname +'</span></div>',null,true);
	}

	/**
	 * 保存准备方法，将新增的数据封装好
	 * @return {[type]} [description]
	 */
	function beforeSubmit() {
		//有shortcutGroup就行了
		//直接用左div的元素来做个shortcutmenuinfo！！！
		var dragList = $('#ddpSelected');	// '#cdSelected'。Lin
		//下级div
		var groupDivs = dragList.children();
		console.log(groupDivs.size());
		var menuRootMembers = {};
		/**
		 * 初始化菜单根部menuRoot
		 */
		var menuRoot = {};
		//copy
		$.extend(menuRoot,shortcutMenuInfo['menuRoot']);
		menuRootMembers['menuRoot'] = menuRoot;
		menuRoot['members'] = {};
		$.each(groupDivs, function(i){
			//或条件
			//改为li
			if(shortcutGroup.indexOf($(groupDivs[i]).attr('memberid')) != -1 || $(groupDivs[i]).find('div div[ssObjId]').size() != 0){
				var menuRootMember = {};
				var members = {};
				menuRootMember['groupId'] = $(groupDivs[i]).attr('memberid');
				menuRootMember['name'] = $(groupDivs[i]).attr('name');
				if($(groupDivs[i]).find('div div[ssObjId]').size() != 0){
					//下级div的再下级
					var childDivs = $(groupDivs[i]).find('div div[ssObjId]');
					$.each(childDivs, function(j){
						var member = {};
						member['groupId'] = $(childDivs[j]).attr('groupid');
						member['memberId'] = $(childDivs[j]).attr('memberid');
						member['name'] = $(childDivs[j]).attr('name');
						member['url'] = $(childDivs[j]).attr('url');
						members['#'+ j + '#' + $(childDivs[j]).attr('memberid')] = member;
					});
				}
				menuRootMember['members'] = members;
				menuRootMembers[$(groupDivs[i]).attr('memberid')] = menuRootMember;
			}
			/**
			 * menuRoot 添加member
			 * 如果$(groupDivs[i])有子节点，默认groupId 为 menuRoot url为null 且插入 shortcutGroup 的一条id
			 */
			var member = {};
			member['memberId'] = $(groupDivs[i]).attr('memberId');
			member['name'] = $(groupDivs[i]).attr('name');
			if($(groupDivs[i]).find('div div[ssObjId]').size() != 0){
				member['groupId'] = "menuRoot";
				member['url'] = "null";
				shortcutGroup.push($(groupDivs[i]).attr('memberId'));
			}else{
				member['groupId'] = $(groupDivs[i]).attr('groupId');
				member['url'] = $(groupDivs[i]).attr('url');
			}
			menuRoot['members']['#'+ i + '#' + $(groupDivs[i]).attr('memberId')] = member;
		});
		shortcutMenuInfo = {};
		shortcutMenuInfo = menuRootMembers;
	}

	/**
	 * 选择模板触发方法
	 * @param  {[type]} value [description]
	 * @return {[type]}       [description]
	 */
	function selectMB(value){
		//拿到 mbdata
		if(value=="0"){
			value="null";
		}
		shortcutMenuInfo=(mbdata[value]==undefined)?{}:mbdata[value];
		//清空左边菜单组元素
		$("#ddpSelected").empty();	// "#cdSelected"。Lin
		if(value!='0'){
			//生成左边菜单组
			selectedMenuMenber.splice(0,selectedMenuMenber.length);
			isLeft(shortcutMenuInfo);
			initShortCutMenu(shortcutMenuInfo);
			$('#delmb').css('display', 'inline');
			$('#savemb').css('display', 'inline');
		}else{
			$('#delmb').css('display', 'none');
			$('#savemb').css('display', 'none');
		}
	}

/**
 * 设值到表单中
 * @param  {[type]} _form [description]
 * @param  {[type]} name  [description]
 * @param  {[type]} value [description]
 * @return {[type]}       [description]
 */
function generateHiddenForm(_form,name,value){
		var hiddenInput = document.createElement('input');
		hiddenInput.type='hidden';
		hiddenInput.name = name;
		hiddenInput.value = value;
		_form.appendChild(hiddenInput);
}

/**
 * 生成菜单显示数据
 * @param  {[type]} shortcutMenuInfo [description]
 * @return {[type]}                  [description]
 */
function initShortCutMenu(shortcutMenuInfo){

		var menuRoot;
		if(typeof(shortcutMenuInfo.menuRoot) == 'undefined')
				menuRoot = [];
		else
				menuRoot = shortcutMenuInfo.menuRoot.members;
		DM.getDrager().selectedList.empty();
		$.each(menuRoot, function(i){
				//menuRootSize++；
				var menuRootMember = menuRoot[i];

				//
				var isItem = false;
				if(menuRootMember.url != "null"){
						isItem = true;
				}else{
						if(shortcutMenuInfo[menuRootMember.memberId] != undefined){
								var j = 0;
								$.each(shortcutMenuInfo[menuRootMember.memberId].members, function(i){
										j++;
								});
								if(j > 0){
										isItem = true;
								}
						}
				}

				if(isItem){

						if(menuRootMember.memberId.indexOf("_search")>0){
								var ele = $('<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + menuRootMember.memberId + '" memberid="' + menuRootMember.memberId
										+ '"  name="'+ menuRootMember.name +'" groupId="'+ "search"
										+'" url="'+ menuRootMember.url +'" class="item dragList"><span>'+ menuRootMember.name+"[搜索]" +'</ span ></div>');
						}else{
								var ele = $('<div class="list-background list" style="min-height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + menuRootMember.memberId + '" memberid="' + menuRootMember.memberId
										+ '"  name="'+ menuRootMember.name +'" groupId="'+ menuRootMember.groupId
										+'" url="'+ menuRootMember.url +'" class="item dragList"><span>'+ menuRootMember.name +'</ span ></div>');
						}
						DM.getDrager().selectedList.append(ele[0]);
						var parentId = menuRootMember.memberId;
						//放入子栏目,子栏目不为dragList
						if(shortcutMenuInfo[menuRootMember.memberId] != null){
								$.each(shortcutMenuInfo[menuRootMember.memberId].members, function(j){
										var member = shortcutMenuInfo[menuRootMember.memberId].members[j];
										if(member.memberId.indexOf("_search")>0){
												var cele = $('<div class="list-background list" style="height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + j.split("#")[2] + '" ssPobjId="'+parentId
												+'" memberid="' + j.split("#")[2]  + '" name="' + member.name+ '" groupId="' + member.groupId
												+ '" url="'+ member.url +'" ><span>' + member.name +"[搜索]" +'</ span ></div>');
										}else{
												var cele = $('<div class="list-background list" style="height: 41px;line-height: 41px;width: calc(100% - 4px);box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" ssObjId="' + j.split("#")[2] + '" ssPobjId="'+parentId
												+'" memberid="' + j.split("#")[2]  + '" name="' + member.name + '" groupId="' + member.groupId
												+ '" url="'+ member.url +'" ><span>' + member.name +'</ span ></div>');
										}
										DM.getDrager().selectedList.append(cele[0]);
								});
						}
				}
		});
		DM.getDrager().selectedList.reload();
		selectByParentId();
}

/**
 * 删除菜单组模板
 * @param  {[type]} ){  } [description]
 * @return {[type]}        [description]
 */
$('#delmb').click(function(){
//	var mbid = $('#cdmbselected').val();
		var mbid = $('#grcdmbid').val();
		var json = JSON.parse('{"mbid":"' + mbid + '"}');
		var url = "<serv.ss name='initMenuDef' dest='menuDefSaveOk' parm='{del:"ssVal{mbid}",mblx:1}'/>"
		url = wd.display.replaceDynamicParam(url, json);

		$('form[name="shortcutForm"]').attr('action', url);
		$('form[name="shortcutForm"]').submit();
});

/**
 * 保存菜单组模板
 * @param  {[type]} ){  } [description]
 * @return {[type]}        [description]
 */
$('#savemb').click(function(){
		//封装
		beforeSubmit();

		var _form = document.forms['shortcutForm'];
		var cdmbid = $('#cdmbselected').val();
		var shortcutInfoStr = JSON.stringify(shortcutMenuInfo);
		var shortcutGroupStr = JSON.stringify(shortcutGroup);

		generateHiddenForm(_form,'grcdmbid',cdmbid);
		generateHiddenForm(_form,'shortcutGroup',shortcutGroupStr);
		generateHiddenForm(_form,'shortcutMenuInfo',shortcutInfoStr);
		generateHiddenForm(_form,'cdz','1');

		$('form[name="shortcutForm"]').attr('action', "<serv.ss name='saveMenuDef' dest='menuDefSaveOk' parm='{mblx:1}'/>");
		$('form[name="shortcutForm"]').submit();
});

/**
 * 新增菜单组模板
 * @param  {[type]} ){  } [description]
 * @return {[type]}        [description]
 */
 var addcallback = (function (t) {
		var THIS = t;
		return function (data) {
				if (data.newMc != null && data.newMc != "") {
						//封装
						beforeSubmit();

						var _form = document.forms['shortcutForm'];
						//添加newMc 表单元素
						generateHiddenForm(_form, "newMc", data.newMc);
						generateHiddenForm(_form, "ms", data.ms);
						generateHiddenForm(_form, "grcdmbh", data.grcdmbh);

						var cdmbid = $('#cdmbselected').val();
						var shortcutInfoStr = JSON.stringify(shortcutMenuInfo);
						var shortcutGroupStr = JSON.stringify(shortcutGroup);

						generateHiddenForm(_form, 'grcdmbid', cdmbid);
						generateHiddenForm(_form, 'shortcutGroup', shortcutGroupStr);
						generateHiddenForm(_form, 'shortcutMenuInfo', shortcutInfoStr);
						generateHiddenForm(_form, 'cdz', '1');

						$('form[name="shortcutForm"]').attr('action', "<serv.ss name='saveMenuDef' dest='menuDefSaveOk' parm='{mblx:1}'/>");
						$('form[name="shortcutForm"]').submit();
				}
		}
})(this);

	$('#addmb').click(function () {
		wd.display.confirm({ title: "另存为新模板", url: "<serv.ss dest='menuDefAdd'/>", width: 300, height: 240, callback: addcallback });
	});

</script>
<drag.ss name="ddp" grp="true" func="editGroup,editOrder"/> <%-- name="cd"。再改为统一的名字 -- 同一页面，不会有多个拖放选择。Lin --%>
</html>