admin.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  1. layui.define(['jquery', 'form', 'layer', 'element'], function(exports) {
  2. var $ = layui.jquery,
  3. form = layui.form,
  4. layer = layui.layer,
  5. element = layui.element;
  6. var menu = [];
  7. var curMenu;
  8. /*
  9. * @todo 初始化加载完成执行方法
  10. * 打开或刷新后执行
  11. */
  12. $(function() {
  13. /*
  14. * @todo 读取本地存储中记录的已打开的tab项
  15. * 刷新后,读取记录,打开原来已打开的tab项
  16. */
  17. /*
  18. * @todo table事件
  19. */
  20. tableCheck = {
  21. init: function() {
  22. $(".layui-form-checkbox").click(function(event) {
  23. if($(this).hasClass('layui-form-checked')) {
  24. $(this).removeClass('layui-form-checked');
  25. if($(this).hasClass('header')) {
  26. $(".layui-form-checkbox").removeClass('layui-form-checked');
  27. }
  28. } else {
  29. $(this).addClass('layui-form-checked');
  30. if($(this).hasClass('header')) {
  31. $(".layui-form-checkbox").addClass('layui-form-checked');
  32. }
  33. }
  34. });
  35. },
  36. getData: function() {
  37. var obj = $(".layui-form-checked").not('.header');
  38. var arr = [];
  39. obj.each(function(index, el) {
  40. arr.push(obj.eq(index).attr('data-id'));
  41. });
  42. return arr;
  43. }
  44. }
  45. //开启表格多选
  46. tableCheck.init();
  47. //延时加载
  48. setTimeout(function() {
  49. if(sessionStorage.getItem("menu")) {
  50. menu = JSON.parse(sessionStorage.getItem("menu"));
  51. for(var i = 0; i < menu.length; i++) {
  52. tab.tabAdd(menu[i].title, menu[i].url, menu[i].id);
  53. }
  54. } else {
  55. return false;
  56. }
  57. if(sessionStorage.getItem("curMenu")) {
  58. $('.layui-tab-title').find('layui-this').removeClass('layui-class');
  59. curMenu = JSON.parse(sessionStorage.getItem("curMenu"));
  60. id = curMenu.id;
  61. if(id) { //因为默认桌面首页不存在lay-id,所以要对此判断
  62. $('.layui-tab-title li[lay-id="' + id + '"]').addClass('layui-this');
  63. tab.tabChange(id);
  64. } else {
  65. $(".layui-tab-title li").eq(0).addClass('layui-this'); //未生效
  66. $('.layui-tab-content iframe').eq(0).parent().addClass('layui-show');
  67. }
  68. } else {
  69. $(".layui-tab-title li").eq(0).addClass('layui-this'); //未生效
  70. $('.layui-tab-content iframe').eq(0).parent().addClass('layui-show');
  71. }
  72. }, 100);
  73. //点击tab标题时,触发reloadTab函数
  74. $('#tabName').on('click','li',function(){
  75. reloadTab(this);
  76. });
  77. //初始化加载结束
  78. });
  79. /*
  80. * @todo 左侧导航菜单的显示和隐藏
  81. */
  82. $('.container .left_open i').click(function(event) {
  83. if($('.left-nav').css('left') == '0px') {
  84. //此处左侧菜单是显示状态,点击隐藏
  85. $('.left-nav').animate({
  86. left: '-221px'
  87. }, 100);
  88. $('.page-content').animate({
  89. left: '0px'
  90. }, 100);
  91. $('.page-content-bg').hide();
  92. } else {
  93. //此处左侧菜单是隐藏状态,点击显示
  94. $('.left-nav').animate({
  95. left: '0px'
  96. }, 100);
  97. $('.page-content').animate({
  98. left: '221px'
  99. }, 100);
  100. //点击显示后,判断屏幕宽度较小时显示遮罩背景
  101. if($(window).width() < 768) {
  102. $('.page-content-bg').show();
  103. }
  104. }
  105. });
  106. //点击遮罩背景,左侧菜单隐藏
  107. $('.page-content-bg').click(function(event) {
  108. $('.left-nav').animate({
  109. left: '-221px'
  110. }, 100);
  111. $('.page-content').animate({
  112. left: '0px'
  113. }, 100);
  114. $(this).hide();
  115. });
  116. /*
  117. * @todo 左侧菜单事件
  118. * 如果有子级就展开,没有就打开frame
  119. */
  120. $('.left-nav #nav li').click(function(event) {
  121. if($(this).children('.sub-menu').length) {
  122. if($(this).hasClass('open')) {
  123. $(this).removeClass('open');
  124. $(this).find('.nav_right').html('&#xe6a7;');
  125. $(this).children('.sub-menu').stop().slideUp();
  126. $(this).siblings().children('.sub-menu').slideUp();
  127. } else {
  128. $(this).addClass('open');
  129. $(this).children('a').find('.nav_right').html('&#xe6a6;');
  130. $(this).children('.sub-menu').stop().slideDown();
  131. $(this).siblings().children('.sub-menu').stop().slideUp();
  132. $(this).siblings().find('.nav_right').html('&#xe6a7;');
  133. $(this).siblings().removeClass('open');
  134. }
  135. } else {
  136. var url = $(this).children('a').attr('_href');
  137. var title = $(this).find('cite').html();
  138. var index = $('.left-nav #nav li').index($(this));
  139. for(var i = 0; i < $('.weIframe').length; i++) {
  140. if($('.weIframe').eq(i).attr('tab-id') == index + 1) {
  141. tab.tabChange(index + 1);
  142. event.stopPropagation();
  143. return;
  144. }
  145. };
  146. tab.tabAdd(title, url, index + 1);
  147. tab.tabChange(index + 1);
  148. }
  149. event.stopPropagation(); //不触发任何前辈元素上的事件处理函数
  150. });
  151. // 组织导航
  152. $('.left-nav1 #nav li').click(function(event) {
  153. if($(this).children('.sub-menu').length) {
  154. if($(this).hasClass('open')) {
  155. $(this).removeClass('open');
  156. $(this).find('.nav_right').html('&#xe6a7;');
  157. $(this).children('.sub-menu').stop().slideUp();
  158. $(this).siblings().children('.sub-menu').slideUp();
  159. } else {
  160. $(this).addClass('open');
  161. $(this).children('a').find('.nav_right').html('&#xe6a6;');
  162. $(this).children('.sub-menu').stop().slideDown();
  163. $(this).siblings().children('.sub-menu').stop().slideUp();
  164. $(this).siblings().find('.nav_right').html('&#xe6a7;');
  165. $(this).siblings().removeClass('open');
  166. }
  167. }
  168. event.stopPropagation(); //不触发任何前辈元素上的事件处理函数
  169. });
  170. /*
  171. * @todo tab触发事件:增加、删除、切换
  172. */
  173. var tab = {
  174. tabAdd: function(title, url, id) {
  175. //判断当前id的元素是否存在于tab中
  176. var li = $("#WeTabTip li[lay-id=" + id + "]").length;
  177. //console.log(li);
  178. if(li > 0) {
  179. //tab已经存在,直接切换到指定Tab项
  180. //console.log(">0");
  181. element.tabChange('wenav_tab', id); //切换到:用户管理
  182. } else {
  183. //该id不存在,新增一个Tab项
  184. //console.log("<0");
  185. element.tabAdd('wenav_tab', {
  186. title: title,
  187. content: '<iframe tab-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="weIframe"></iframe>',
  188. id: id
  189. });
  190. //当前窗口内容
  191. setStorageMenu(title, url, id);
  192. }
  193. CustomRightClick(id); //绑定右键菜单
  194. FrameWH(); //计算框架高度
  195. },
  196. tabDelete: function(id) {
  197. element.tabDelete("wenav_tab", id); //删除
  198. removeStorageMenu(id);
  199. },
  200. tabChange: function(id) {
  201. //切换到指定Tab项
  202. element.tabChange('wenav_tab', id);
  203. },
  204. tabDeleteAll: function(ids) { //删除所有
  205. $.each(ids, function(i, item) {
  206. element.tabDelete("wenav_tab", item);
  207. })
  208. sessionStorage.removeItem('menu');
  209. }
  210. };
  211. /*
  212. * @todo 监听右键事件,绑定右键菜单
  213. * 先取消默认的右键事件,再绑定菜单,触发不同的点击事件
  214. */
  215. function CustomRightClick(id) {
  216. //取消右键
  217. $('.layui-tab-title li').on('contextmenu', function() {
  218. return false;
  219. })
  220. $('.layui-tab-title,.layui-tab-title li').on('click', function() {
  221. $('.rightMenu').hide();
  222. });
  223. //桌面点击右击
  224. $('.layui-tab-title li').on('contextmenu', function(e) {
  225. var aid = $(this).attr("lay-id"); //获取右键时li的lay-id属性
  226. var popupmenu = $(".rightMenu");
  227. popupmenu.find("li").attr("data-id", aid);
  228. //console.log("popopmenuId:" + popupmenu.find("li").attr("data-id"));
  229. l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
  230. t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
  231. popupmenu.css({
  232. left: l,
  233. top: t
  234. }).show();
  235. //alert("右键菜单")
  236. return false;
  237. });
  238. }
  239. $("#rightMenu li").click(function() {
  240. var type = $(this).attr("data-type");
  241. var layId = $(this).attr("data-id")
  242. if(type == "current") {
  243. //console.log("close this:" + layId);
  244. tab.tabDelete(layId);
  245. } else if(type == "all") {
  246. //console.log("closeAll");
  247. var tabtitle = $(".layui-tab-title li");
  248. var ids = new Array();
  249. $.each(tabtitle, function(i) {
  250. ids[i] = $(this).attr("lay-id");
  251. })
  252. tab.tabDeleteAll(ids);
  253. } else if(type == "fresh") {
  254. //console.log("fresh:" + layId);
  255. tab.tabChange($(this).attr("data-id"));
  256. var othis = $('.layui-tab-title').find('>li[lay-id="' + layId + '"]'),
  257. index = othis.parent().children('li').index(othis),
  258. parents = othis.parents('.layui-tab').eq(0),
  259. item = parents.children('.layui-tab-content').children('.layui-tab-item'),
  260. src = item.eq(index).find('iframe').attr("src");
  261. item.eq(index).find('iframe').attr("src", src);
  262. } else if(type == "other") {
  263. var thisId = layId;
  264. $('.layui-tab-title').find('li').each(function(i, o) {
  265. var layId = $(o).attr('lay-id');
  266. if(layId != thisId && layId != 0) {
  267. tab.tabDelete(layId);
  268. }
  269. });
  270. }
  271. $('.rightMenu').hide();
  272. });
  273. /*
  274. * @todo 重新计算iframe高度
  275. */
  276. function FrameWH() {
  277. var h = $(window).height()-36-46-40;
  278. var h1 = $(window).height()-36-25;
  279. $(".weIframe").css("height", h + "px");
  280. $(".left").css("height",h1 +"px");
  281. $(".right_main").css("height",h1 -20+ "px");
  282. }
  283. $(window).resize(function() {
  284. FrameWH();
  285. });
  286. /*
  287. 参数解释:
  288. title 标题
  289. url 请求的url
  290. id 需要操作的数据id
  291. w 弹出层宽度(缺省调默认值)
  292. h 弹出层高度(缺省调默认值)
  293. */
  294. window.WeAdminShow = function(title, url, w, h,ids) {
  295. if(title == null || title == '') {
  296. title = false;
  297. };
  298. if(url == null || url == '') {
  299. url = "404.html";
  300. };
  301. if(w == null || w == '') {
  302. w = ($(window).width() * 0.9);
  303. };
  304. if(h == null || h == '') {
  305. h = ($(window).height() - 50);
  306. };
  307. layer.open({
  308. type: 2,
  309. area: [w + 'px', h + 'px'],
  310. fix: false, //不固定
  311. maxmin: true,
  312. shadeClose: true,
  313. shade: 0.4,
  314. title: title,
  315. content: url,
  316. success: function (layero, index) {
  317. var body = layer.getChildFrame('body', index);
  318. console.log()
  319. },
  320. yes: function (index, layero) {
  321. var body = layer.getChildFrame('body', index);
  322. layer.close(index)
  323. }
  324. });
  325. };
  326. /*弹出层+传递ID参数*/
  327. window.WeAdminEdit = function(title, url, id, w, h) {
  328. if(title == null || title == '') {
  329. title = false;
  330. };
  331. if(url == null || url == '') {
  332. url = "404.html";
  333. };
  334. if(w == null || w == '') {
  335. w = ($(window).width() * 0.9);
  336. };
  337. if(h == null || h == '') {
  338. h = ($(window).height() - 50);
  339. };
  340. layer.open({
  341. type: 2,
  342. area: [w + 'px', h + 'px'],
  343. fix: false, //不固定
  344. maxmin: true,
  345. shadeClose: true,
  346. shade: 0.4,
  347. title: title,
  348. content: url,
  349. success: function(layero, index) {
  350. //向iframe页的id=house的元素传值 // 参考 https://yq.aliyun.com/ziliao/133150
  351. var body = layer.getChildFrame('body', index);
  352. body.contents().find("#dataId").val(id);
  353. console.log(id);
  354. },
  355. error: function(layero, index) {
  356. alert("aaa");
  357. }
  358. });
  359. };
  360. /**
  361. *@todo tab监听:点击tab项对应的关闭按钮事件
  362. */
  363. $('.layui-tab-close').click(function(event) {
  364. $('.layui-tab-title li').eq(0).find('i').remove();
  365. });
  366. /**
  367. *@todo tab切换监听
  368. * tab切换监听不能写字初始化加载$(function())方法内,否则不执行
  369. */
  370. element.on('tab(wenav_tab)', function(data) {
  371. //console.log(this); //当前Tab标题所在的原始DOM元素
  372. setStorageCurMenu();
  373. });
  374. /*
  375. * @todo 监听layui Tab项的关闭按钮,改变本地存储
  376. */
  377. element.on('tabDelete(wenav_tab)', function(data) {
  378. var layId = $(this).parent('li').attr('lay-id');
  379. //console.log(layId);
  380. removeStorageMenu(layId);
  381. });
  382. /**
  383. *@todo 本地存储 localStorage
  384. * 为了保持统一,将sessionStorage更换为存储周期更长的localStorage
  385. */
  386. //本地存储记录所有打开的窗口
  387. function setStorageMenu(title, url, id) {
  388. var menu = JSON.parse(sessionStorage.getItem('menu'));
  389. if(menu) {
  390. var deep = false;
  391. for(var i = 0; i < menu.length; i++) {
  392. if(menu[i].id == id) {
  393. deep = true;
  394. menu[i].title = title;
  395. menu[i].url = url;
  396. menu[i].id = id;
  397. }
  398. }
  399. if(!deep) {
  400. menu.push({
  401. title: title,
  402. url: url,
  403. id: id
  404. })
  405. }
  406. } else {
  407. var menu = [{
  408. title: title,
  409. url: url,
  410. id: id
  411. }]
  412. }
  413. sessionStorage.setItem('menu', JSON.stringify(menu));
  414. }
  415. //本地存储记录当前打开窗口
  416. function setStorageCurMenu() {
  417. var curMenu = sessionStorage.getItem('curMenu');
  418. var text = $('.layui-tab-title').find('.layui-this').text();
  419. text = text.split('ဆ')[0];
  420. var url = $('.layui-tab-content').find('.layui-show').find('.weIframe').attr('src');
  421. var id = $('.layui-tab-title').find('.layui-this').attr('lay-id');
  422. //console.log(text);
  423. curMenu = {
  424. title: text,
  425. url: url,
  426. id: id
  427. }
  428. sessionStorage.setItem('curMenu', JSON.stringify(curMenu));
  429. }
  430. //本地存储中移除删除的元素
  431. function removeStorageMenu(id) {
  432. var menu = JSON.parse(sessionStorage.getItem('menu'));
  433. //var curMenu = JSON.parse(localStorage.getItem('curMenu'));
  434. if(menu) {
  435. var deep = false;
  436. for(var i = 0; i < menu.length; i++) {
  437. if(menu[i].id == id) {
  438. deep = true;
  439. menu.splice(i, 1);
  440. }
  441. }
  442. } else {
  443. return false;
  444. }
  445. sessionStorage.setItem('menu', JSON.stringify(menu));
  446. }
  447. /**
  448. * 判断初次登录时,跳转到登录页
  449. */
  450. var login = sessionStorage.getItem('login');
  451. $('.loginout').click(function() {
  452. login = 0;
  453. var data={
  454. login:1
  455. };
  456. sessionStorage.setItem('data',JSON.stringify(data));
  457. });
  458. $('.loginin').click(function() {
  459. login = 1;
  460. var data={
  461. login:1
  462. };
  463. sessionStorage.setItem('data', JSON.stringify(data));
  464. });
  465. /*
  466. *Tab加载后刷新
  467. * 判断是刷新后第一次点击时,刷新frame子页面
  468. * */
  469. window.reloadTab = function(which){
  470. var len = $('.layui-tab-title').children('li').length;
  471. var layId = $(which).attr('lay-id');
  472. var i=1;
  473. if($(which).attr('data-bit')){
  474. return false; //判断页面打开后第一次点击,执行刷新
  475. }else{
  476. $(which).attr('data-bit',i);
  477. var frame = $('.weIframe[tab-id='+layId+']');
  478. frame.attr('src', frame.attr('src'));
  479. console.log("reload:"+$(which).attr('data-bit'));
  480. }
  481. }
  482. /**
  483. *@todo Frame内部的按钮点击打开其他frame的tab
  484. */
  485. exports('admin', {});
  486. window.moveDep = function (title, url, w, h,table,Tableid) {
  487. layer.open({
  488. type: 2,
  489. area: [w + 'px', h + 'px'],
  490. fix: false, //不固定
  491. maxmin: true,
  492. shadeClose: true,
  493. shade: 0.4,
  494. btn: ['确认', '取消'],
  495. title: title,
  496. content: '../../pages/ztree/ztree.html',
  497. success: function(layero, index) {
  498. },
  499. yes:function(index,layero){
  500. var body = layer.getChildFrame('body', index);
  501. var obj = {
  502. _method:'put',
  503. };
  504. $.ajax({
  505. method:'post',
  506. url:url +sessionStorage.getItem("statusId")+"/"+body.find('.departmentId').val(),
  507. data:obj,
  508. dataType:'json',
  509. success:function (res) {
  510. if (res.code === '200') {
  511. layer.msg('移动成功', {icon: 1});
  512. table.reload(Tableid);
  513. layer.close(index);
  514. }else {
  515. layer.msg('移动失败,请检查网络', {icon: 2});
  516. }
  517. },
  518. error:function (err) {
  519. }
  520. })
  521. }
  522. });
  523. }
  524. });