brume/src/main/resources/static/web/js/index.js

layui.config({
	base: '../js/module/'
}).extend({
	'constants': '{/}js/util/constants',
	'ajax': '{/}js/util/ajax',
	'customUtil': '{/}js/util/util',
	'api': '{/}js/api/index.api'
}).use(['jquery', 'element', 'laytpl', 'api', 'constants', 'customUtil'], () => {
	const $ = layui.jquery;
	const element = layui.element;
	const laytpl = layui.laytpl;
	const constants = layui.constants;
	const form = layui.form;
	const customUtil = layui.customUtil;
	const userId = sessionStorage.getItem('login-userId');
	const userName = sessionStorage.getItem('login-userName');
	const phone = sessionStorage.getItem('login-phone');
	$("#indexUserName").text(userName);

	$('#loginBack').on('click', () => {
		localStorage.clear();
		window.location = constants.LOGIN_PATH;
	})

	$('#updatePwd').on('click', () => {
		$("#updatePwdWin .layui-form")[0].reset();
		layui.form.render();
		layer.open({
			type:1,
			title: "修改密码",
			content:$("#updatePwdWin")
		})
	})


	$('#updateTel').on('click', () => {
		$("#updateTelWin .layui-form")[0].reset();
		layui.form.render();
		layer.open({
			type:1,
			title: "修改手机号",
			content:$("#updateTelWin")
		})
		$("#oldTel").val(phone);
	})


	// 校验规则
	form.verify({
		pwd: [
			/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
		],
		samePwd: function (value) {
			if (value === $('#oldPwd').val()) {
				return '新密码不能和旧密码相同！';
			}
		},
		rePwd: function (value) {
			if (value !== $('#newPwd').val()) {
				return '两次密码不一致！';
			}
		},
		phoneVal: function (value, item) {
			var  mobile = /^1[3|4|5|6|7|8|9]\d{9}$/;
			var flag = mobile.test(value);
			if(!flag){
				return '请输入正确手机号';
			}
		}
	})

	form.on('submit(updatePwd)', (data) => {
		layui.api.updatePwd({
				userId : userId,
				oldPass : btoa(data.field.oldPwd),
				password : btoa(data.field.newPwd),
				repeatPass : btoa(data.field.rePwd)
			},
			(json) => {
				if(json.code == constants.SUCCESS_CODE){
					setTimeout( () => {
						layer.closeAll();
					},1500)
				}
				customUtil.refush(json.code == constants.SUCCESS_CODE, '保存成功', json.msg)
			}
		)
		return false
	})


	form.on('submit(updateTel)', (data) => {
		layui.api.updateTel({
				userId : userId,
				phone : btoa(data.field.phone)
			},
			(json) => {
				if(json.code == constants.SUCCESS_CODE){
					setTimeout( () => {
						layer.closeAll();
					},1500)
					sessionStorage.setItem('login-phone',data.field.phone);
				}
				customUtil.refush(json.code == constants.SUCCESS_CODE, '保存成功', json.msg)
			}
		)
		return false
	})


	const template = `
		<ul class="layui-nav layui-nav-tree" lay-filter="menu">
			{{#  layui.each(d, function(index, item){ }}
				<li class="layui-nav-item layui-nav-itemed">
				  <a class="" href="javascript:;">
				  	{{# if(item.icon) { }}
						<i class="fa {{item.icon}}" style="padding-right: 5px;"></i>
					{{#  } }}
				  	{{item.name}}
				  </a>
				  <dl class="layui-nav-child">
					{{#  layui.each(item.children, function(j, children){ }}
						<dd><a href="javascript:;" data-menu="{{children.menu}}">
							{{# if(children.icon) { }}
								<i class="fa {{children.icon}}" style="padding-right: 10px;"></i>
							{{#  } }}
							{{children.name}}
						</a></dd>
					{{#  }); }}
				  </dl>
				</li>
			{{#  }); }}
		</ul>
	`;


	layui.api.userTree(userId,(json) => {
		//console.info("", json.result);


		laytpl(template).render(json.result, (html) => {
			$('#menu-list').html(html);
			element.render('nav');
		});
		setTimeout(() => {
			$("[data-menu=dealt]").click();
		}, 1000)
	})

	/*const data = [{
		'name': '系统管理',
		'children': [{
			'name': '菜单管理',
			'menu': 'menu',
			'icon': 'fa-user-o'
		}, {
			'name': '按钮管理',
			'menu': 'button',
		}, {
			'name': '角色管理',
			'menu': 'role',
		}, {
			'name': '用户管理',
			'menu': 'user',
		}, {
			'name': '单位管理',
			'menu': 'corp',
		}, {
			'name': '系统配置',
			'menu': 'config',
		},{
			'name': '短信用户管理',
			'menu': 'sms',
		}],
	}, {
		'name': '业务办理',
		'children': [{
			'name': '待办',
			'menu': 'dealt',
		}, {
			'name': '已办',
			'menu': 'done',
		}]
	}];*/

	/**
	 * 菜单收折
	 */
	$('#fast-shrink').on('click', (e) => {
		const icon = $(e.currentTarget).find('i');
		const status = icon.hasClass('layui-icon-shrink-right');
		$('.fast-menu-left').animate({left: status ? '-200px' : 0});
		//$('.fast-logo').animate({left: status ? '-200px' : 0});
		//$('.fast-header-left').animate({left: status ? 0 : '200px'});
		$('.fast-main').animate({left: status ? 0 : '200px'});
		$('.layui-footer').animate({left: status ? 0 : '200px'});
		icon.removeClass(status ? 'layui-icon-shrink-right' : 'layui-icon-spread-left');
		icon.addClass(status ? 'layui-icon-spread-left' : 'layui-icon-shrink-right');
	});

	/**
	 * 菜单点击
	 */
	//$(".layui-tab-title li:eq(0) i").remove();
	element.on('nav(menu)', (elem) => {
		/*if (elem.parent().find('.layui-nav-child').length > 0
			|| elem.data('menu') == $('.layui-tab-item').attr('menu')) {
			return;
		}*/


		/*$('.fast-header-left-nav').css({display: 'flex'});
		$('.fast-header-left-nav span').eq(0).text(elem.parent().parent().prev().text());
		$('.fast-header-left-nav span').eq(2).text(elem.text());*/
		//$('.fast-iframe').attr({src: 'view/' + elem.data('menu') + '.html', menu: elem.data('menu')});
		//$(".layui-tab-title li:eq(0)").remove();

		const menu = elem.data('menu');
		if(!menu) {
			return;
		}
		let isTabAdd = true;
		$(".layui-tab-title li").each((i,dom) => {
			const layid = $(dom).attr("lay-id");
			if(layid == menu){
				isTabAdd = false;
				return;
			}
		})

		if(isTabAdd == true){
			//新增一个Tab项
			active.tabAdd('view/' + menu + '.html', menu, elem.text())
		}


		active.tabChange(menu);
		// $(".layui-tab-title li:eq(0) i").remove();

	});

	//触发事件
	const active = {
		tabfilter : 'index-nev',
		//在这里给active绑定几项事件，后面可通过active调用这些事件
		tabAdd: function (url, id, name) {
			//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
			//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
			element.tabAdd(active.tabfilter, {
				title: name,
				content: '<iframe class="fast-iframe" data-frameid="' + id + '" src="' + url + '"></iframe>',
				id: id //规定好的id
			})
			CustomRightClick(id); //给tab绑定右击事件
		},
		tabChange: function (id) {
			//切换到指定Tab项
			element.tabChange(active.tabfilter, id); //根据传入的id传入到指定的tab项
		},
		tabDelete: function (id) {
			element.tabDelete(active.tabfilter, id);//删除
		},
		tabDeleteAll: function (ids) {//删除所有
			$.each(ids, function (i, item) {
				element.tabDelete(active.tabfilter, item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
			})
		},
		tabRefresh: function (id) { //刷新页面
			$("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //刷新框架
		}
	};

	let timeOutIndex = -1;
	function CustomRightClick(id) {
		//取消右键 rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
		$('.layui-tab-title').on('contextmenu', function () { return false; })
		$('body').click(function () {
			$('.rightmenu').hide();
		});
		//桌面点击右击
		$('.layui-tab-title').on('contextmenu', function (e) {
			var popupmenu = $(".rightmenu");
			popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性

			//判断右侧菜单的位置
			l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX - 200;
			t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY - 30;
			popupmenu.css({ left: l, top: t }).show(); //进行绝对定位

			if(timeOutIndex != -1){
				clearTimeout(timeOutIndex);
			}
			timeOutIndex = setTimeout(() => {
				$('.rightmenu').hide();
			}, 3000)

			//alert("右键菜单")
			return false;
		});
	}

	$(".rightmenu li").click(function () {

		//右键菜单中的选项被点击之后，判断type的类型，决定关闭所有还是关闭当前。
		if ($(this).attr("data-type") == "closethis") {
			//如果关闭当前，即根据显示右键菜单时所绑定的id，执行tabDelete
			active.tabDelete($(this).attr("data-id"))
		} else if ($(this).attr("data-type") == "closeall") {
			var tabtitle = $(".layui-tab-title li");
			var ids = new Array();
			$.each(tabtitle, function (i) {
				ids[i] = $(this).attr("lay-id");
			})
			//如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
			active.tabDeleteAll(ids);
		} else if ($(this).attr("data-type") == "closeothe") {
			var id = $(this).attr("data-id");
			var tabtitle = $(".layui-tab-title li");
			var ids = new Array();
			$.each(tabtitle, function (i) {
				if (id != $(this).attr("lay-id")) {
					ids[i] = $(this).attr("lay-id");
				}

			})
			active.tabDeleteAll(ids);
		} else if ($(this).attr("data-type") == "refreshsys") {
			location.reload();
		} else if ($(this).attr("data-type") == "refreshthis") {
			active.tabRefresh($(this).attr("data-id"))
		}
	})
});