class_index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502
  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. min-width: 1100px;
  7. }
  8. .layui-table thead tr,
  9. .layui-table-header {
  10. background-color: #D8E6F1 !important;
  11. }
  12. .layui-fluid {
  13. display: block;
  14. box-shadow: 0 0 4px 0 #B6CADE;
  15. border-radius: 5px;
  16. margin: 15px;
  17. background-color: #ffffff;
  18. }
  19. .layui-form-item .layui-inline {
  20. margin-right: 0px;
  21. }
  22. .layui-form-label {
  23. width: auto;
  24. }
  25. .layui-btn-primary {
  26. color: #249EFB;
  27. border: 1px solid #249EFB;
  28. }
  29. .layui-btn-primary:hover {
  30. background-color: #E3F7FF;
  31. color: #249EFB;
  32. }
  33. /*.layui-table-cell {
  34. padding: 0px 20px;
  35. }*/
  36. .plr10 {
  37. padding: 0px 10px;
  38. }
  39. .border249EFB,
  40. .border249EFB:hover {
  41. border: 1px solid #249EFB;
  42. background-color: #fff;
  43. color: #249EFB;
  44. padding: 0px 10px;
  45. }
  46. .borderFF5722,
  47. .borderFF5722:hover {
  48. border: 1px solid #FF5722;
  49. background-color: #fff;
  50. color: #FF5722;
  51. padding: 0px 10px;
  52. }
  53. .layui-table td,
  54. .layui-table th {
  55. box-sizing: border-box;
  56. }
  57. .layui-table-view .layui-table {
  58. width: 100%;
  59. }
  60. </style>
  61. <div class="layui-fluid">
  62. <div class="layui-card">
  63. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  64. <div class="layui-form-item">
  65. <div style="float:right;">
  66. <div class="layui-inline">
  67. <label class="layui-form-label">关键字查询:</label>
  68. <div class="layui-input-inline" style="width: auto;">
  69. <input type="text" name="keyword" placeholder="请输入关键字搜索" autocomplete="off"
  70. class="layui-input keyword">
  71. </div>
  72. </div>
  73. <div class="layui-inline">
  74. <button class="layui-btn layuiadmin-btn" lay-submit lay-filter="LAY-app-contlist-search">
  75. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  76. </button>
  77. </div>
  78. </div>
  79. <div class="layui-inline" style="float: left;">
  80. <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassAdd">添加课程</button>
  81. </div>
  82. <div class="layui-inline" style="float: left;margin-left:10px;">
  83. <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassCate">分类管理</button>
  84. </div>
  85. <!-- <div class="layui-inline" style="float: left;margin-left:10px;">
  86. <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassLabel">二级分类</button>
  87. </div> -->
  88. </div>
  89. </div>
  90. <div class="layui-card-body">
  91. <table lay-filter="datalist" id="datalist"></table>
  92. </div>
  93. </div>
  94. </div>
  95. {/block} {block name="js"}
  96. <script type="text/html" id="op">
  97. <a class="layui-btn layui-btn-xs layui-btn-success plr10 border249EFB" lay-event="edit">编辑</a>
  98. <a class="layui-btn layui-btn-xs plr10 border249EFB" lay-event="comment">感悟</a>
  99. <a class="layui-btn layui-btn-danger layui-btn-xs plr10 borderFF5722" lay-event="del">删除</a>
  100. </script>
  101. <script type="text/html" id="show">
  102. <input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }} id="clickshow">
  103. </script>
  104. <script type="text/html" id="kh">
  105. <a href="javascript:void(0)" lay-event="showOrgData" style="color:blue;">查看</a>
  106. </script>
  107. <script type="text/html" id="completeCount">
  108. <a href="javascript:void(0)" lay-event="completeList" style="color:blue;">{{d.completeCount}}</a>
  109. </script>
  110. <script type="text/html" id="noFinishCount">
  111. <a href="javascript:void(0)" lay-event="noFinishList" style="color:blue;">{{d.noFinishCount}}</a>
  112. </script>
  113. <script type="text/html" id="qrcode">
  114. <a href="javascript:void(0)" lay-event="download" style="color:blue;">查看</a>
  115. </script>
  116. <script type="text/html" id="title">
  117. {{# if(d.from_type == 2){ }}
  118. <i class="layui-icon">&#xe609;</i>&nbsp;&nbsp;{{d.title}}
  119. {{# }else{ }}
  120. {{d.title}}
  121. {{# } }}
  122. </script>
  123. <script type="text/html" id="cate">
  124. {{# if(d.cate){ }}
  125. <span>{{d.cate}}</span>
  126. {{# }else{ }}
  127. <span style="color: #cccccc;">无</span>
  128. {{# } }}
  129. </script>
  130. <script type="text/html" id="label">
  131. {{# if(d.label){ }}
  132. <span>{{d.label}}</span>
  133. {{# }else{ }}
  134. <span style="color: #cccccc;">无</span>
  135. {{# } }}
  136. </script>
  137. <script type="text/html" id="category">
  138. {{# if(d.category=='elective'){ }}
  139. <span>选修</span>
  140. {{# }else{ }}
  141. <span>必修</span>
  142. {{# } }}
  143. </script>
  144. <script type="text/html" id="view">
  145. <a href="javascript:void(0)" lay-event="view_log" style="color:blue;">{{d.view}}</a>
  146. </script>
  147. <script>
  148. layui.use(['form', 'table'], function () {
  149. var form = layui.form,
  150. table = layui.table,
  151. $ = layui.$;
  152. var field = {};
  153. form.on('submit(LAY-app-contlist-search)', function (data) {
  154. var keyword = $('.keyword').val();
  155. field['keyword'] = keyword;
  156. //执行重载
  157. table.reload('datalist', {
  158. where: field,
  159. page: {
  160. curr: 1
  161. }
  162. });
  163. });
  164. var active = {
  165. trainClassAdd: function () {
  166. layer.open({
  167. type: 2,
  168. title: ['添加课程', 'color:#333333;background-color:#D8E6F1;'],
  169. content: '{:url("train/class_add")}',
  170. resize: false,
  171. area: ['80%', '80%'],
  172. });
  173. },
  174. trainClassCate: function () {
  175. layer.open({
  176. type: 2,
  177. title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
  178. content: '{:url("train/class_cate")}',
  179. resize: false,
  180. area: ['80%', '80%'],
  181. });
  182. },
  183. trainClassLabel: function () {
  184. layer.open({
  185. type: 2,
  186. title: ['二级分类管理', 'color:#333333;background-color:#D8E6F1;'],
  187. content: '{:url("train/class_label")}',
  188. resize: false,
  189. area: ['80%', '80%'],
  190. });
  191. }
  192. };
  193. table.render({
  194. elem: '#datalist',
  195. url: "{:url('train/class_index')}",
  196. page: true,
  197. height: 'full-160',
  198. cols: [
  199. [{
  200. type: 'numbers',
  201. field: 'id',
  202. title: '序号',
  203. width: '50',
  204. },
  205. {
  206. title: '课程名称',
  207. field: 'title',
  208. width: '200',
  209. templet: '#title',
  210. align: 'center'
  211. },
  212. {
  213. title: '分类',
  214. field: 'cate',
  215. width: '100',
  216. templet: '#cate',
  217. align: 'center'
  218. },
  219. {
  220. title: '添加时间',
  221. field: 'addtime',
  222. width: '160',
  223. align: 'center'
  224. },
  225. {
  226. title: '课件数',
  227. field: 'courseCount',
  228. width: '80',
  229. align: 'center'
  230. },
  231. {
  232. title: '上下架',
  233. templet: '#show',
  234. width: '10%',
  235. align: 'center'
  236. },
  237. {
  238. field: 'view',
  239. width: '90',
  240. title: '浏览次数',
  241. align: 'center',
  242. templet: '#view',
  243. },
  244. {
  245. title: '操作',
  246. templet: '#op',
  247. minWidth: '266',
  248. fixed: 'right'
  249. },
  250. ]
  251. ],
  252. done: function (res, curr, count) {
  253. fixedLayuiTable(this, count);
  254. }
  255. });
  256. table.on('tool(datalist)', function (obj) {
  257. switch (obj.event) {
  258. case 'del':
  259. layer.confirm('确定要删除该内容么', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function () {
  260. $.ajax({
  261. url: '{:url("train/classDel")}',
  262. data: {
  263. id: obj.data.id
  264. },
  265. type: 'get',
  266. success: function (res) {
  267. if (res.code == 0) {
  268. layer.msg(res.msg, {
  269. icon: 1,
  270. time: 1000
  271. }, function () {
  272. layui.table.reload('datalist');
  273. });
  274. } else {
  275. layer.msg(res.msg);
  276. }
  277. }
  278. });
  279. });
  280. break;
  281. case 'publish':
  282. $.ajax({
  283. url: '{:url("train/classPublish")}',
  284. data: {
  285. id: obj.data.id
  286. },
  287. type: 'get',
  288. success: function (res) {
  289. if (res.code == 0) {
  290. layer.msg(res.msg, {
  291. icon: 1,
  292. time: 1000
  293. }, function () {
  294. layui.table.reload('datalist');
  295. });
  296. } else {
  297. layer.msg(res.msg);
  298. }
  299. }
  300. });
  301. break;
  302. case 'assign':
  303. layer.open({
  304. type: 2,
  305. title: ['指派', 'color:#333333;background-color:#D8E6F1;'],
  306. content: '{:url("train/class_assigns")}?id=' + obj.data.id,
  307. area: ['80%', '80%'],
  308. btn: ['确定', '取消'],
  309. yes: function (index, layero) {
  310. layui.table.reload('datalist');
  311. layer.close(index);
  312. //点击确认触发 iframe 内容中的按钮提交
  313. // var val = layero.find('iframe').contents().find("#departinput").val();
  314. // var arr = val?JSON.parse(val):"";
  315. // var org_arr = [];
  316. // for(var i in arr){
  317. // org_arr.push(i);
  318. // }
  319. // if(org_arr.length == 0)
  320. // {
  321. // layer.msg('请选择考核组织');
  322. // return false;
  323. // }
  324. // $.ajax({
  325. // url: '{:url("train/class_assign_edit")}',
  326. // data: {
  327. // id: obj.data.id,
  328. // org: org_arr.join(',')
  329. // },
  330. // type: 'get',
  331. // success: function(res) {
  332. // if(res.code == 0){
  333. // layer.msg(res.msg, {
  334. // icon: 1,
  335. // time: 1000
  336. // },function(){
  337. // layui.table.reload('datalist');
  338. // layer.close(index);
  339. // });
  340. // }else{
  341. // layer.msg(res.msg);
  342. // }
  343. // }
  344. // });
  345. }
  346. });
  347. break;
  348. case 'showOrgData':
  349. layer.open({
  350. type: 2,
  351. title: ['量化考核', 'color:#333333;background-color:#D8E6F1;'],
  352. content: '{:url("train/class_org_data")}?class_id=' + obj.data.id + '&trainNumber=' + obj.data.trainNumber + '&completeCount=' + obj.data.completeCount + '&summaryCount=' + obj.data.summaryCount,
  353. resize: false,
  354. area: ['80%', '80%'],
  355. });
  356. break;
  357. case 'comment':
  358. layer.open({
  359. type: 2,
  360. title: ['感悟', 'color:#333333;background-color:#D8E6F1;'],
  361. content: '{:url("train/class_comment")}?class_id=' + obj.data.id,
  362. resize: false,
  363. area: ['80%', '80%'],
  364. });
  365. break;
  366. case 'edit':
  367. layer.open({
  368. type: 2,
  369. title: ['修改课程', 'color:#333333;background-color:#D8E6F1;'],
  370. content: '{:url("train/class_edit")}?class_id=' + obj.data.id,
  371. resize: false,
  372. area: ['80%', '80%'],
  373. });
  374. break;
  375. case 'completeList':
  376. layer.open({
  377. type: 2,
  378. title: ['已完成人数', 'color:#333333;background-color:#D8E6F1;'],
  379. content: '{:url("train/doneLog")}?type=complete&class_id=' + obj.data.id,
  380. resize: false,
  381. area: ['80%', '80%'],
  382. });
  383. break;
  384. case 'noFinishList':
  385. layer.open({
  386. type: 2,
  387. title: ['未完成人数', 'color:#333333;background-color:#D8E6F1;'],
  388. content: '{:url("train/doneLog")}?type=noFinish&class_id=' + obj.data.id,
  389. resize: false,
  390. area: ['80%', '80%'],
  391. });
  392. break;
  393. case 'download':
  394. $.ajax({
  395. url: '{:url("train/qrcode")}',
  396. data: {
  397. id: obj.data.id
  398. },
  399. type: 'get',
  400. success: function (res) {
  401. if (res.code == 0) {
  402. layer.open({
  403. type: 1,
  404. title: ['学习码', 'color:#333333;background-color:#D8E6F1;'],
  405. content: '<img border="0" src="' + res.qrcode + '" alt="点击下载">',
  406. btn: ['下载', '关闭'],
  407. yes: function (index, layero) {
  408. window.open(obj.data.qrcode);
  409. //按钮【按钮一】的回调
  410. },
  411. btn2: function (index, layero) {
  412. //按钮【按钮二】的回调
  413. }
  414. })
  415. } else {
  416. layer.msg(res.msg);
  417. }
  418. }
  419. });
  420. break;
  421. case 'view_log':
  422. layer.open({
  423. type: 2,
  424. title:['浏览记录','color:#333333;background-color:#D8E6F1;'],
  425. content: '{:url("train/class_view")}?class_id=' + obj.data.id,
  426. resize: false,
  427. area: ['80%', '80%']
  428. });
  429. break;
  430. }
  431. });
  432. form.on('switch(show)', function (obj) {
  433. var id = obj.value;
  434. $.ajax({
  435. type: "post",
  436. url: '{:url("train/classPublish")}',
  437. data: {
  438. id: id
  439. },
  440. success: function (res) {
  441. layer.msg(res.msg);
  442. }
  443. });
  444. });
  445. //发布
  446. form.on('switch(show)', function (obj) {
  447. // console.log(obj)
  448. // return false;
  449. var id = obj.value;
  450. $.ajax({
  451. type: "post",
  452. url: '{:url("train/classPublish")}',
  453. data: {
  454. id: id,
  455. },
  456. success: function (res) {
  457. layer.msg(res.msg, { time: 2000 });
  458. }
  459. });
  460. });
  461. $('.layui-btn.layuiadmin-btn').on('click', function () {
  462. var type = $(this).data('type');
  463. active[type] ? active[type].call(this) : '';
  464. });
  465. });
  466. function fixedLayuiTable(tableobj, count, ifpage) {
  467. if (count == 0) {
  468. tableobj.elem.next('.layui-table-view').find('.layui-table-header').css('display', 'inline-block');
  469. var tableBox = tableobj.elem.next('.layui-table-view').find('.layui-table-box');
  470. tableBox.css('overflow-x', 'auto');
  471. //改变高度:table没有分页高度减15,否则增加25
  472. if (!ifpage) {
  473. tableBox.height(tableBox.height() - 15);
  474. } else {
  475. tableBox.height(tableBox.height() + 25);
  476. }
  477. }
  478. }
  479. </script>
  480. {/block}