navigation.php 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. {extend name="public/container"}
  2. {block name="head"}
  3. <style>
  4. .layui-nav {
  5. padding: 0 10px;
  6. }
  7. .layui-bg-blue {
  8. background-color: #0092DC !important;
  9. }
  10. .layui-nav-bar::after {
  11. background-color: #5FB878;
  12. }
  13. .layui-nav .layui-nav-item {
  14. line-height: 30px;
  15. }
  16. .layui-nav .layui-nav-item a {
  17. color: #fff;
  18. }
  19. .layui-nav-child {
  20. top: 35px;
  21. }
  22. .layui-nav .layui-nav-child a {
  23. line-height: 36px;
  24. color: #333;
  25. }
  26. .layui-nav .layui-nav-child dd.layui-this a {
  27. background-color: #0092DC;
  28. }
  29. </style>
  30. {/block}
  31. {block name="content"}
  32. <div class="layui-fluid">
  33. <div class="layui-card">
  34. <div class="layui-card-header">导航配置</div>
  35. <div class="layui-card-body">
  36. <ul class="layui-nav layui-inline layui-bg-blue" lay-filter="nav">
  37. <li class="layui-nav-item">
  38. <a href="javascript:;">添加导航</a>
  39. <dl class="layui-nav-child">
  40. <dd><a href="javascript:;" data-type="1">固定跳转</a></dd>
  41. <dd><a href="javascript:;" data-type="2">自定义跳转</a></dd>
  42. </dl>
  43. </li>
  44. </ul>
  45. <table id="List" lay-filter="List"></table>
  46. <script type="text/html" id="icon">
  47. {{# if(d.icon) { }}
  48. <img lay-event='open_image' src="{{d.icon}}" width="50" height="50">
  49. {{# } }}
  50. </script>
  51. <script type="text/html" id="is_show">
  52. <input type='checkbox' name='id' lay-skin='switch' value="{{d.id}}" lay-filter='is_show' lay-text='显示|隐藏' {{ d.is_show == 1 ? 'checked' : '' }}>
  53. </script>
  54. <script type="text/html" id="act">
  55. <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="dropdown(this)"><i class="layui-icon">&#xe625;</i>操作</button>
  56. <ul class="layui-nav-child layui-anim layui-anim-upbit">
  57. {{# if(d.type == 3) { }}
  58. <li>
  59. <div onclick="$eb.createModalFrame('{{d.title}}-'+this.innerText,'{:Url('create_recemmend_custom')}?id={{d.id}}&is_fixed=1')">
  60. <i class="fa fa-paste"></i> 编辑
  61. </div>
  62. </li>
  63. {{# }else{ }}
  64. <li>
  65. <div onclick="$eb.createModalFrame('{{d.title}}-'+this.innerText,'{:Url('create_recemmend')}?id={{d.id}}',{h:480})">
  66. <i class="fa fa-paste"></i> 编辑
  67. </div>
  68. </li>
  69. {{# } }}
  70. <li>
  71. <div lay-event='delete'>
  72. <i class="fa fa-trash"></i> 删除
  73. </div>
  74. </li>
  75. </ul>
  76. </script>
  77. </div>
  78. </div>
  79. </div>
  80. {/block}
  81. {block name="script"}
  82. <script src="{__ADMIN_PATH}js/layuiList.js"></script>
  83. <script>
  84. var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块
  85. element.render();
  86. //监听导航点击
  87. element.on('nav(nav)', function(elem){
  88. var type = elem.data('type');
  89. if (type == 1) {
  90. $eb.createModalFrame('添加固定跳转导航','{:Url('create_recemmend')}',{w:800,h:500});
  91. } else if (type == 2) {
  92. $eb.createModalFrame('添加自定义跳转导航','{:Url('create_recemmend_custom')}?is_fixed=1');
  93. }
  94. });
  95. //实例化form
  96. layList.form.render();
  97. //加载列表
  98. layList.tableList('List',"{:Url('recommend_list',['is_fixed' => 1])}",function (){
  99. return [
  100. {field: 'title', title: '导航名称',edit:'title',align:'center'},
  101. {field: 'type_name', title: '导航类型',align:'center'},
  102. {field: 'icon', title: '图标',templet:'#icon',align:'center'},
  103. {field: 'sort', title: '排序',sort: true,event:'sort',edit:'sort',align:'center'},
  104. {field: 'grade_title', title: '一级分类',align:'center'},
  105. {field: 'is_show', title: '状态',templet:'#is_show',align:'center'},
  106. {field: 'right', title: '操作',align:'center',toolbar:'#act'},
  107. ];
  108. });
  109. //自定义方法
  110. var action= {
  111. set_value: function (field, id, value) {
  112. layList.baseGet(layList.Url({
  113. a: 'set_value',
  114. q: {field: field, id: id, value: value,recommend:''}
  115. }), function (res) {
  116. layList.msg(res.msg);
  117. });
  118. },
  119. }
  120. layList.switch('is_show',function (odj,value) {
  121. if(odj.elem.checked==true){
  122. layList.baseGet(layList.Url({a:'set_show',p:{is_show:1,id:value,recommend:''}}),function (res) {
  123. layList.msg(res.msg);
  124. });
  125. }else{
  126. layList.baseGet(layList.Url({a:'set_show',p:{is_show:0,id:value,recommend:''}}),function (res) {
  127. layList.msg(res.msg);
  128. });
  129. }
  130. });
  131. //快速编辑
  132. layList.edit(function (obj) {
  133. var id=obj.data.id,value=obj.value;
  134. switch (obj.field) {
  135. case 'title':
  136. action.set_value('title',id,value);
  137. break;
  138. case 'sort':
  139. if (value.trim()) {
  140. if (isNaN(value.trim())) {
  141. layList.msg('请输入正确的数字');
  142. } else {
  143. if (value.trim() < 0) {
  144. layList.msg('排序不能小于0');
  145. } else if (value.trim() > 9999) {
  146. layList.msg('排序不能大于9999');
  147. } else if (parseInt(value.trim()) != value.trim()) {
  148. layList.msg('排序不能为小数');
  149. } else {
  150. action.set_value('sort', id, value.trim());
  151. }
  152. }
  153. } else {
  154. layList.msg('排序不能为空');
  155. }
  156. break;
  157. }
  158. });
  159. //下拉框
  160. $(document).click(function (e) {
  161. $('.layui-nav-child').hide();
  162. })
  163. function dropdown(that){
  164. var oEvent = arguments.callee.caller.arguments[0] || event;
  165. oEvent.stopPropagation();
  166. var offset = $(that).offset();
  167. var top=offset.top-$(window).scrollTop();
  168. var index = $(that).parents('tr').data('index');
  169. $('.layui-nav-child').each(function (key) {
  170. if (key != index) {
  171. $(this).hide();
  172. }
  173. })
  174. if($(document).height() < top+$(that).next('ul').height()){
  175. $(that).next('ul').css({
  176. 'padding': 10,
  177. 'top': - ($(that).parent('td').height() / 2 + $(that).height() + $(that).next('ul').height()/2),
  178. 'min-width': 'inherit',
  179. 'position': 'absolute'
  180. }).toggle();
  181. }else{
  182. $(that).next('ul').css({
  183. 'padding': 10,
  184. 'top':$(that).parent('td').height() / 2 + $(that).height(),
  185. 'min-width': 'inherit',
  186. 'position': 'absolute'
  187. }).toggle();
  188. }
  189. }
  190. //监听并执行排序
  191. layList.sort(['sort'],true);
  192. //点击事件绑定
  193. layList.tool(function (event,data,obj) {
  194. switch (event) {
  195. case 'delete':
  196. var url=layList.U({a:'delete_recomm',q:{id:data.id}});
  197. $eb.$swal('delete',function(){
  198. $eb.axios.get(url).then(function(res){
  199. if(res.status == 200 && res.data.code == 200) {
  200. $eb.$swal('success',res.data.msg);
  201. obj.del();
  202. }else
  203. return Promise.reject(res.data.msg || '删除失败')
  204. }).catch(function(err){
  205. $eb.$swal('error',err);
  206. });
  207. })
  208. break;
  209. case 'open_image':
  210. $eb.openImage(data.icon);
  211. break;
  212. }
  213. })
  214. </script>
  215. {/block}