menu.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'sortable'], function ($, undefined, Backend, Table, Form, Sortable) {
  2. var Controller = {
  3. index: function () {
  4. String.prototype.subByte = function (start, bytes) {
  5. for (var i = start; bytes > 0; i++) {
  6. var code = this.charCodeAt(i);
  7. bytes -= code < 256 ? 1 : 2;
  8. }
  9. return this.slice(start, i + bytes)
  10. };
  11. /**
  12. * 初始化菜单
  13. * @param menu 菜单json数据
  14. */
  15. var init_menu = function (menu) {
  16. var str = "";
  17. var items = menu;
  18. var type = action = "";
  19. for (i in items) {
  20. if (items[i]['sub_button'] != undefined) {
  21. type = action = "";
  22. } else {
  23. type = items[i]['type'];
  24. if (items[i]['url'] != undefined)
  25. action = "url|" + items[i]['url'];
  26. if (items[i]['key'] != undefined)
  27. action = "key|" + items[i]['key'];
  28. }
  29. str += '<li id="menu-' + i + '" class="menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + items[i]['name'] + '"> <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">' + items[i]['name'] + '</span> </a>';
  30. var tem = '';
  31. if (items[i]['sub_button'] != undefined) {
  32. var sub_menu = items[i]['sub_button'];
  33. for (j in sub_menu) {
  34. type = sub_menu[j]['type'];
  35. if (sub_menu[j]['url'] != undefined)
  36. action = "url|" + sub_menu[j]['url'];
  37. if (sub_menu[j]['key'] != undefined)
  38. action = "key|" + sub_menu[j]['key'];
  39. tem += '<li id="sub-menu-' + j + '" class="sub-menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + sub_menu[j]['name'] + '"> <a href="javascript:;"> <i class="weixin-icon sort-gray"></i><span class="sub-title">' + sub_menu[j]['name'] + '</span></a> </li>';
  40. }
  41. }
  42. str += '<div class="sub-menu-box" style="' + (i != 0 ? 'display:none;' : '') + '"> <ul class="sub-menu-list">' + tem + '<li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i></div>';
  43. str += '</li>';
  44. }
  45. $("#add-item").before(str);
  46. };
  47. /**
  48. * 切换资源选择类型
  49. */
  50. var refresh_type = function () {
  51. if ($('input[name=type]:checked').val() == 'view') {
  52. $(".is-view").show();
  53. $(".is-click").hide();
  54. } else {
  55. $(".is-view").hide();
  56. $(".is-click").show();
  57. }
  58. };
  59. //初始化菜单
  60. init_menu(menu);
  61. //拖动排序
  62. new Sortable($("#menu-list")[0], {draggable: 'li.menu-item'});
  63. $(".sub-menu-list").each(function () {
  64. new Sortable(this, {draggable: 'li.sub-menu-item'});
  65. });
  66. $(".sub-menu-item a").height($(".add-sub-item").eq(0).height());
  67. //添加主菜单
  68. $(document).on('click', '#add-item', function () {
  69. var menu_item_total = $(".menu-item").size();
  70. if (menu_item_total < 3) {
  71. var item = '<li class="menu-item" data-type="click" data-action="key|" data-name="添加菜单" > <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">添加菜单</span> </a> <div class="sub-menu-box" style=""> <ul class="sub-menu-list"><li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i> </div></li>';
  72. var itemDom = $(item);
  73. itemDom.insertBefore(this);
  74. itemDom.trigger("click");
  75. $(".sub-menu-box", itemDom).show();
  76. new Sortable($(".sub-menu-list", itemDom)[0], {draggable: 'li.sub-menu-item'});
  77. }
  78. });
  79. /**
  80. * 切换子菜单类型
  81. */
  82. $(document).on('change', 'input[name=type]', function () {
  83. refresh_type();
  84. });
  85. /**
  86. * 删除菜单
  87. */
  88. $(document).on('click', '#item_delete', function () {
  89. var current = $("#menu-list li.current");
  90. var prev = current.prev("li[data-type]");
  91. var next = current.next("li[data-type]");
  92. if (prev.size() == 0 && next.size() == 0 && $(".sub-menu-box", current).size() == 0) {
  93. last = current.closest(".menu-item");
  94. } else if (prev.size() > 0 || next.size() > 0) {
  95. last = prev.size() > 0 ? prev : next;
  96. } else {
  97. last = null;
  98. $(".weixin-content").hide();
  99. $(".no-weixin-content").show();
  100. }
  101. $("#menu-list li.current").remove();
  102. if (last) {
  103. last.trigger('click');
  104. } else {
  105. $("input[name='item-title']").val('');
  106. }
  107. updateChangeMenu();
  108. });
  109. //更新修改与变动 //本地修改
  110. var updateChangeMenu = function () {
  111. var title = $("input[name='item-title']").val();
  112. var type = $("input[name='type']:checked").val();
  113. var key = value = '';
  114. if (type == 'view') {
  115. key = 'url';
  116. } else {
  117. key = 'key';
  118. }
  119. value = $("input[name='" + key + "']").val();
  120. if (key == 'key') {
  121. var keytitle = typeof responselist[value] != 'undefined' ? responselist[value] : '';
  122. var cont = $(".is-click .create-click:first");
  123. $(".keytitle", cont).remove();
  124. cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
  125. }
  126. var currentItem = $("#menu-list li.current");
  127. if (currentItem.size() > 0) {
  128. currentItem.attr('data-type', type);
  129. currentItem.attr('data-action', key + "|" + value);
  130. if (currentItem.siblings().size() == 4) {
  131. $(".add-sub-item").show();
  132. } else if (false) {
  133. }
  134. currentItem.children("a").find("span").text(title.subByte(0, 16));
  135. $("input[name='item-title']").val(title);
  136. currentItem.attr('data-name', title);
  137. $('#current-item-name').text(title);
  138. }
  139. // menuUpdate();
  140. };
  141. //更新菜单数据 //保存到平台服务器
  142. var menuUpdate = function () {
  143. $.post("wechat/menu/edit", {menu: JSON.stringify(getMenuList())}, function (data) {
  144. if (data['code'] == 1) {
  145. Backend.api.toastr.success('操作成功!');
  146. } else {
  147. var msg = data['msg']=="菜单名称不能为空"?data['msg']:"Operation failed";
  148. Toastr.error(__(msg));
  149. }
  150. }, 'json');
  151. };
  152. //获取菜单数据 //从菜单li列表获取menu json
  153. var getMenuList = function () {
  154. var menus = new Array();
  155. var sub_button = new Array();
  156. var menu_i = 0;
  157. var sub_menu_i = 0;
  158. var item;
  159. $("#menu-list li").each(function (i) {
  160. item = $(this);
  161. var name = item.attr('data-name');
  162. var type = item.attr('data-type');
  163. var action = item.attr('data-action');
  164. if (name != null) {
  165. actions = action.split('|');
  166. if (item.hasClass('menu-item')) {
  167. sub_menu_i = 0;
  168. if (item.find('.sub-menu-item').size() > 0) {
  169. menus[menu_i] = {"name": name, "sub_button": "sub_button"}
  170. } else {
  171. if (actions[0] == 'url')
  172. menus[menu_i] = {"name": name, "type": type, "url": actions[1]};
  173. else
  174. menus[menu_i] = {"name": name, "type": type, "key": actions[1]};
  175. }
  176. if (menu_i > 0) {
  177. if (menus[menu_i - 1]['sub_button'] == "sub_button")
  178. menus[menu_i - 1]['sub_button'] = sub_button;
  179. else
  180. menus[menu_i - 1]['sub_button'];
  181. }
  182. sub_button = new Array();
  183. menu_i++;
  184. } else {
  185. if (actions[0] == 'url')
  186. sub_button[sub_menu_i++] = {"name": name, "type": type, "url": actions[1]};
  187. else
  188. sub_button[sub_menu_i++] = {"name": name, "type": type, "key": actions[1]};
  189. }
  190. }
  191. });
  192. if (sub_button.length > 0) {
  193. var len = menus.length;
  194. menus[len - 1]['sub_button'] = sub_button;
  195. }
  196. return menus;
  197. };
  198. //添加子菜单
  199. $(document).on('click', ".add-sub-item", function () {
  200. var sub_menu_item_total = $(this).parent().find(".sub-menu-item").size();
  201. var height = $(this).height();
  202. if (sub_menu_item_total < 5) {
  203. var item = '<li class="sub-menu-item" data-type="click" data-action="key|" data-name="添加子菜单"><a href="javascript:;"><span class=" "><i class="weixin-icon sort-gray"></i><span class="sub-title">添加子菜单</span></span></a></li>';
  204. var itemDom = $(item);
  205. itemDom.children("a").height(height);
  206. itemDom.insertBefore(this);
  207. itemDom.trigger("click");
  208. if (sub_menu_item_total == 4) {
  209. $(this).hide();
  210. }
  211. }
  212. return false;
  213. });
  214. //主菜单子菜单点击事件
  215. $(document).on('click', ".menu-item, .sub-menu-item", function () {
  216. if ($(this).hasClass("sub-menu-item")) {
  217. $("#menu-list li").removeClass('current');
  218. $(".is-item").show();
  219. $(".is-sub-item").show();
  220. } else {
  221. $("#menu-list li").removeClass('current');
  222. $("#menu-list > li").not(this).find(".sub-menu-box").hide();
  223. $(".sub-menu-box", this).toggle();
  224. //如果当前还没有子菜单
  225. if ($(".sub-menu-item", this).size() == 0) {
  226. $(".is-item").show();
  227. $(".is-sub-item").show();
  228. } else {
  229. $(".is-item").hide();
  230. $(".is-sub-item").hide();
  231. }
  232. }
  233. $(this).addClass('current');
  234. var type = $(this).attr('data-type');
  235. var action = $(this).attr('data-action');
  236. var title = $(this).attr('data-name');
  237. actions = action.split('|');
  238. $("input[name=type][value='" + type + "']").prop("checked", true);
  239. $("input[name='item-title']").val(title);
  240. $('#current-item-name').text(title);
  241. if (actions[0] == 'url') {
  242. $('input[name=key]').val('');
  243. } else {
  244. $('input[name=url]').val('');
  245. }
  246. $("input[name='" + actions[0] + "']").val(actions[1]);
  247. if (actions[0] == 'key') {
  248. var cont = $(".is-click .create-click:first");
  249. if(actions[1] == 'manager_contact'){
  250. cont.append('<div class="keytitle">资源名:自动读取客服内容</div>');
  251. }else {
  252. var keytitle = typeof responselist[actions[1]] != 'undefined' ? responselist[actions[1]] : '';
  253. $(".keytitle", cont).remove();
  254. if (keytitle) {
  255. cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
  256. }
  257. }
  258. } else {
  259. }
  260. $(".weixin-content").show();
  261. $(".no-weixin-content").hide();
  262. refresh_type();
  263. return false;
  264. });
  265. /**
  266. * 本地保存
  267. */
  268. $("form").on('change', "input,textarea", function () {
  269. updateChangeMenu();
  270. });
  271. /**
  272. * 保存按钮
  273. */
  274. $(document).on('click', "#menuSave", function () {
  275. updateChangeMenu();
  276. menuUpdate();
  277. });
  278. /**
  279. * 发布按钮
  280. */
  281. $(document).on('click', "#menuSyn", function () {
  282. updateChangeMenu();
  283. $.post("wechat/menu/edit", {menu: JSON.stringify(getMenuList())}, function (data) {
  284. if (data['code'] == 1) {
  285. $.post("wechat/menu/sync", {}, function (ret) {
  286. var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
  287. if (ret.code == 1) {
  288. Backend.api.toastr.success('菜单同步更新成功,生效时间看微信官网说明,或者你重新关注微信号!');
  289. } else {
  290. Backend.api.toastr.error(msg ? msg : __('Operation failed'));
  291. }
  292. }, 'json');
  293. } else {
  294. Toastr.error(__('Operation failed'));
  295. }
  296. }, 'json');
  297. });
  298. /**
  299. * 刷新资源标题
  300. * @param data
  301. */
  302. var refreshkey = function (data) {
  303. responselist[data.eventkey] = data.title;
  304. $("input[name=key]").val(data.eventkey).trigger("change");
  305. Layer.closeAll();
  306. };
  307. /**
  308. * 选择现有资源
  309. */
  310. $(document).on('click', "#select-resources", function () {
  311. var key = $("#key").val();
  312. Backend.api.open($(this).attr("href") + "?key=" + key, __('Select'), {
  313. callback: refreshkey
  314. });
  315. return false;
  316. });
  317. /**
  318. * 添加新资源
  319. */
  320. $(document).on('click', "#add-resources", function () {
  321. Backend.api.open($(this).attr("href") + "?key=" + key, __('Add'), {
  322. callback: refreshkey
  323. });
  324. return false;
  325. });
  326. },
  327. add: function () {
  328. Form.api.bindevent($("form[role=form]"));
  329. },
  330. edit: function () {
  331. Form.api.bindevent($("form[role=form]"));
  332. }
  333. };
  334. return Controller;
  335. });