cate_article.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. {extend name="public/layout" /} {block name="title"}文章分类管理{/block} {block name="body"}
  2. <style type="text/css">
  3. html,
  4. body {
  5. display: block;
  6. background-color: #fff;
  7. }
  8. .layui-table thead tr,
  9. .layui-table-header {
  10. background-color: #D8E6F1 !important;
  11. }
  12. .layui-fluid {
  13. display: block;
  14. border-radius: 5px;
  15. background-color: #ffffff;
  16. padding: 15px 30px;
  17. }
  18. .layui-tab {
  19. padding: 15px;
  20. height: 100%;
  21. }
  22. .layui-form-item {
  23. width: 100%;
  24. }
  25. .layui-form-item .layui-inline {
  26. display: block;
  27. float: left;
  28. width: 145px;
  29. height: 38px;
  30. line-height: 38px;
  31. background: #FFFFFF;
  32. margin-right: 16px;
  33. }
  34. .layui-form-item .layui-input-inline {
  35. width: 145px;
  36. height: 38px;
  37. line-height: 38px;
  38. margin-bottom: 0;
  39. }
  40. .layui-icon {
  41. font-size: 20px !important;
  42. }
  43. .layui-form-item .layui-input-inline .layui-input {
  44. border: 1px solid #9DB6CF;
  45. border-radius: 5px;
  46. }
  47. .layui-form-select dl dd.layui-this {
  48. background-color: #249EFB;
  49. }
  50. .layui-form-item div.searchBox {
  51. width: 320px;
  52. background: #FFFFFF;
  53. border: 1px solid #B6CADE;
  54. border-radius: 24px;
  55. height: 38px;
  56. overflow: hidden;
  57. padding-left: 18px;
  58. position: relative;
  59. margin-bottom: 0px;
  60. float: right;
  61. }
  62. .searchBox .inputBox {
  63. width: 240px;
  64. float: left;
  65. height: 36px;
  66. line-height: 36px;
  67. border-width: 0;
  68. }
  69. .searchBtn {
  70. position: absolute;
  71. top: 0;
  72. right: 0;
  73. width: 51px;
  74. height: 38px;
  75. background-color: #fff;
  76. }
  77. .searchBtn img {
  78. position: absolute;
  79. width: 26px;
  80. top: 6px;
  81. left: 0;
  82. }
  83. .layui-card .layui-tab {
  84. margin: 0;
  85. height: 31%;
  86. width: 80%;
  87. float: right;
  88. padding: 1px;
  89. }
  90. .layui-btn-primary {
  91. color: #249EFB;
  92. border: 1px solid #249EFB;
  93. }
  94. .layui-btn-primary:hover {
  95. background-color: #E3F7FF;
  96. color: #249EFB;
  97. }
  98. .layui-btn-xs,.layui-btn-xs:hover {
  99. border: 1px solid #249EFB;
  100. background-color: #fff;
  101. color: #249EFB;
  102. padding: 0px 10px;
  103. }
  104. .layui-btn-danger,.layui-btn-danger:hover{
  105. color: #FF5722;
  106. background-color: #fff;
  107. border: 1px solid #FF5722;
  108. padding: 0px 10px;
  109. }
  110. .layui-card-header {
  111. background-color: #F6FAFD;
  112. }
  113. .layui-card-body {
  114. padding: 10px 0px 0px;
  115. }
  116. </style>
  117. <body>
  118. <div class="layui-fluid">
  119. <div class="layui-card">
  120. <div class="layui-card-header layuiadmin-card-header-auto">
  121. <a href="#" type="button" class="layui-btn layui-btn-primary" id="cate_add">添加分类</a>
  122. </div>
  123. <div class="layui-card-body">
  124. <table id="evidence-table" lay-filter="evidence-table"></table>
  125. </div>
  126. </div>
  127. </div>
  128. </body>
  129. {/block} {block name="js"}
  130. <script type="text/html" id="show">
  131. <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }}>
  132. </script>
  133. <script type="text/html" id="table-evidence-action">
  134. {{# if(d.show == 0){ }}
  135. <a class="layui-btn layui-btn-xs" lay-event="evi-details">编辑</a>
  136. <!-- <a class="layui-btn layui-btn-xs" lay-event="evi-label">标签管理</a> -->
  137. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="evidence-delete">删除</a>
  138. {{# }else{ }}
  139. <a class="layui-btn layui-btn-xs layui-btn-disabled" style="border: 1px solid #ccc;color: #ccc;">编辑</a>
  140. <a class="layui-btn layui-btn-xs layui-btn-disabled" style="border: 1px solid #ccc;color: #ccc;">删除</a>
  141. {{# } }}
  142. </script>
  143. <script type="text/html" id="evidence_num">
  144. <span>{{d.picnum}}</span>
  145. </script>
  146. <script>
  147. layui.config({
  148. base: '__LAYUI__/',
  149. urlbase: '/sys'
  150. }).extend({
  151. index: 'lib/index' //主入口模块
  152. }).use(['index', 'table', 'element'], function () {
  153. var $ = layui.$,
  154. form = layui.form,
  155. element = layui.element,
  156. table = layui.table;
  157. //添加分类
  158. $('#cate_add').click(function(){
  159. layer.prompt({title:['添加', 'color:#333333;background-color:#D8E6F1;'],value:''},function(value,index){
  160. if (value=='') {
  161. layer.msg('请填写名称', {
  162. anim: 6
  163. ,time: 400
  164. });
  165. return false;
  166. }
  167. if(value.length > 6) {
  168. layer.msg('分类名称超长', {
  169. anim: 6
  170. ,time: 400
  171. });
  172. return false;
  173. }
  174. $.ajax({
  175. url: '{:url("article/cate_article_add")}',
  176. type: 'post',
  177. data: {name:value},
  178. dataType: 'json',
  179. success: function(res) {
  180. console.log(res)
  181. if(res.code === 0) {
  182. layer.msg(res.msg, {
  183. anim: 0
  184. ,time: 400
  185. });
  186. //执行重载
  187. table.reload('evidence-table', {
  188. });
  189. } else {
  190. layer.msg(res.msg, {
  191. anim: 6
  192. ,time: 400
  193. });
  194. }
  195. }
  196. });
  197. layer.close(index);
  198. });
  199. });
  200. //客户见证列表
  201. table.render({
  202. elem: '#evidence-table',
  203. autoSort: false,
  204. url:'{:url("article/cate_article_list")}',
  205. cols: [
  206. [{
  207. type: 'numbers',
  208. field: 'id',
  209. width: 80,
  210. title: '序号',
  211. sort: true
  212. }, {
  213. field: 'name',
  214. title: '名称'
  215. },{
  216. title: '操作',
  217. width: 240,
  218. align: 'center',
  219. fixed: 'right',
  220. toolbar: '#table-evidence-action'
  221. }]
  222. ],
  223. page: true,
  224. limit: 30,
  225. height: 'full-120',
  226. text: '对不起,加载出现异常!'
  227. });
  228. //监听列表
  229. table.on('tool(evidence-table)', function (obj) {
  230. var data = obj.data;
  231. if (obj.event === 'evidence-delete') {
  232. //监听关联的数量
  233. $.ajax({
  234. url: '{:url("article/with_type_count")}',
  235. type: 'post',
  236. data: { id: data.id, type: 'type' },
  237. dataType: 'json',
  238. success: function (msg) {
  239. layer.confirm(msg, { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function () {
  240. $.get("{:url('article/delete_type_or_label')}?type=type&id=" + data.id, function (res) {
  241. if (res.code === 0) {
  242. layer.msg(res.msg, { anim: 0 }, function () {
  243. table.reload('evidence-table');
  244. });
  245. } else {
  246. layer.msg(res.msg, { anim: 6 });
  247. }
  248. });
  249. });
  250. }
  251. });
  252. } else if (obj.event === 'evi-label') {
  253. layer.open({
  254. type: 2,
  255. title: ['标签管理', 'color:#333333;background-color:#D8E6F1;'],
  256. content:'{:url("article/cate_article_label")}?id='+data.id,
  257. resize: false,
  258. area: ['80%', '80%']
  259. });
  260. }else if (obj.event === 'evi-details') {
  261. layer.prompt({title:['编辑', 'color:#333333;background-color:#D8E6F1;'],value:data.name},function(value,index){
  262. if (value==data.name || value=='') {
  263. layer.msg('请修改名称', {
  264. anim: 6
  265. ,time: 400
  266. });
  267. return false;
  268. }
  269. if(value.length > 6) {
  270. layer.msg('分类名称超长', {
  271. anim: 6
  272. ,time: 400
  273. });
  274. return false;
  275. }
  276. $.ajax({
  277. url: '{:url("article/cate_article_edit")}',
  278. type: 'post',
  279. data: {id:data.id,name:value},
  280. dataType: 'json',
  281. success: function(res) {
  282. // console.log(res)
  283. if(res.code === 0) {
  284. layer.msg(res.msg, {
  285. anim: 0
  286. ,time: 400
  287. });
  288. //执行重载
  289. table.reload('evidence-table', {
  290. });
  291. } else {
  292. layer.msg(res.msg, {
  293. anim: 6
  294. ,time: 400
  295. });
  296. }
  297. }
  298. });
  299. layer.close(index);
  300. //执行重载
  301. // var w = [];
  302. // w.type = types;
  303. // table.reload('evidence-table', {
  304. // // where: w
  305. // });
  306. });
  307. // layer.open({
  308. // type: 2,
  309. // title: '编辑',
  310. // content: "{:url('material/evidencedetail')}?id=" + data.id,
  311. // content:'{:url("material/cate_administration_edit_view")}?id='+data.id+'&type='+types,
  312. // maxmin: true,
  313. // area: ['400px', '200px'],
  314. // });
  315. }
  316. });
  317. //备注
  318. $('body').on('mouseover', '.remarksInfo', function () {
  319. var type = $(this).data('type');
  320. layer.tips(type, this, {
  321. tips: [1, '#3595CC'],
  322. time: 400
  323. });
  324. });
  325. form.on('switch(show)', function (obj) {
  326. var id = obj.value;
  327. $.ajax({
  328. type: "post",
  329. url: '{:url("article/apipublish")}',
  330. data: {
  331. id: id,
  332. cate: 'evidence'
  333. },
  334. success: function (res) {
  335. layer.msg(res.msg);
  336. }
  337. });
  338. });
  339. });
  340. </script>
  341. {/block}