class_index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  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("lecturer/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("lecturer/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("lecturer/class_label")}',
  188. resize: false,
  189. area: ['80%', '80%'],
  190. });
  191. }
  192. };
  193. table.render({
  194. elem: '#datalist',
  195. url: "{:url('lecturer/class_index')}",
  196. page: true,
  197. height: 'full-160',
  198. cols: [
  199. [{
  200. type: 'numbers',
  201. field: 'id',
  202. title: '序号',
  203. width: '50',
  204. fixed: 'left'
  205. },
  206. {
  207. title: '课程名称',
  208. field: 'title',
  209. width: '200',
  210. fixed: 'left',
  211. templet: '#title',
  212. align: 'center'
  213. },
  214. {
  215. title: '分类',
  216. field: 'cate',
  217. width: '100',
  218. fixed: 'left',
  219. templet: '#cate',
  220. align: 'center'
  221. },
  222. {
  223. title: '添加时间',
  224. field: 'addtime',
  225. width: '160',
  226. align: 'center'
  227. },
  228. {
  229. title: '课件数',
  230. field: 'courseCount',
  231. width: '80',
  232. align: 'center'
  233. },
  234. {
  235. title: '上下架',
  236. templet: '#show',
  237. width: '10%',
  238. align: 'center'
  239. },
  240. {
  241. field: 'view',
  242. width: '90',
  243. title: '浏览次数',
  244. align: 'center',
  245. templet: '#view',
  246. },
  247. {
  248. title: '操作',
  249. templet: '#op',
  250. minWidth: '266',
  251. fixed: 'right'
  252. },
  253. ]
  254. ],
  255. done: function (res, curr, count) {
  256. fixedLayuiTable(this, count);
  257. }
  258. });
  259. table.on('tool(datalist)', function (obj) {
  260. switch (obj.event) {
  261. case 'del':
  262. layer.confirm('确定要删除该内容么', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function () {
  263. $.ajax({
  264. url: '{:url("lecturer/classDel")}',
  265. data: {
  266. id: obj.data.id
  267. },
  268. type: 'get',
  269. success: function (res) {
  270. if (res.code == 0) {
  271. layer.msg(res.msg, {
  272. icon: 1,
  273. time: 1000
  274. }, function () {
  275. layui.table.reload('datalist');
  276. });
  277. } else {
  278. layer.msg(res.msg);
  279. }
  280. }
  281. });
  282. });
  283. break;
  284. case 'publish':
  285. $.ajax({
  286. url: '{:url("lecturer/classPublish")}',
  287. data: {
  288. id: obj.data.id
  289. },
  290. type: 'get',
  291. success: function (res) {
  292. if (res.code == 0) {
  293. layer.msg(res.msg, {
  294. icon: 1,
  295. time: 1000
  296. }, function () {
  297. layui.table.reload('datalist');
  298. });
  299. } else {
  300. layer.msg(res.msg);
  301. }
  302. }
  303. });
  304. break;
  305. case 'assign':
  306. layer.open({
  307. type: 2,
  308. title: ['指派', 'color:#333333;background-color:#D8E6F1;'],
  309. content: '{:url("lecturer/class_assigns")}?id=' + obj.data.id,
  310. area: ['80%', '80%'],
  311. btn: ['确定', '取消'],
  312. yes: function (index, layero) {
  313. layui.table.reload('datalist');
  314. layer.close(index);
  315. //点击确认触发 iframe 内容中的按钮提交
  316. // var val = layero.find('iframe').contents().find("#departinput").val();
  317. // var arr = val?JSON.parse(val):"";
  318. // var org_arr = [];
  319. // for(var i in arr){
  320. // org_arr.push(i);
  321. // }
  322. // if(org_arr.length == 0)
  323. // {
  324. // layer.msg('请选择考核组织');
  325. // return false;
  326. // }
  327. // $.ajax({
  328. // url: '{:url("lecturer/class_assign_edit")}',
  329. // data: {
  330. // id: obj.data.id,
  331. // org: org_arr.join(',')
  332. // },
  333. // type: 'get',
  334. // success: function(res) {
  335. // if(res.code == 0){
  336. // layer.msg(res.msg, {
  337. // icon: 1,
  338. // time: 1000
  339. // },function(){
  340. // layui.table.reload('datalist');
  341. // layer.close(index);
  342. // });
  343. // }else{
  344. // layer.msg(res.msg);
  345. // }
  346. // }
  347. // });
  348. }
  349. });
  350. break;
  351. case 'showOrgData':
  352. layer.open({
  353. type: 2,
  354. title: ['量化考核', 'color:#333333;background-color:#D8E6F1;'],
  355. content: '{:url("lecturer/class_org_data")}?class_id=' + obj.data.id + '&trainNumber=' + obj.data.trainNumber + '&completeCount=' + obj.data.completeCount + '&summaryCount=' + obj.data.summaryCount,
  356. resize: false,
  357. area: ['80%', '80%'],
  358. });
  359. break;
  360. case 'comment':
  361. layer.open({
  362. type: 2,
  363. title: ['感悟', 'color:#333333;background-color:#D8E6F1;'],
  364. content: '{:url("lecturer/class_comment")}?class_id=' + obj.data.id,
  365. resize: false,
  366. area: ['80%', '80%'],
  367. });
  368. break;
  369. case 'edit':
  370. layer.open({
  371. type: 2,
  372. title: ['修改课程', 'color:#333333;background-color:#D8E6F1;'],
  373. content: '{:url("lecturer/class_edit")}?class_id=' + obj.data.id,
  374. resize: false,
  375. area: ['80%', '80%'],
  376. });
  377. break;
  378. case 'completeList':
  379. layer.open({
  380. type: 2,
  381. title: ['已完成人数', 'color:#333333;background-color:#D8E6F1;'],
  382. content: '{:url("lecturer/doneLog")}?type=complete&class_id=' + obj.data.id,
  383. resize: false,
  384. area: ['80%', '80%'],
  385. });
  386. break;
  387. case 'noFinishList':
  388. layer.open({
  389. type: 2,
  390. title: ['未完成人数', 'color:#333333;background-color:#D8E6F1;'],
  391. content: '{:url("lecturer/doneLog")}?type=noFinish&class_id=' + obj.data.id,
  392. resize: false,
  393. area: ['80%', '80%'],
  394. });
  395. break;
  396. case 'download':
  397. $.ajax({
  398. url: '{:url("lecturer/qrcode")}',
  399. data: {
  400. id: obj.data.id
  401. },
  402. type: 'get',
  403. success: function (res) {
  404. if (res.code == 0) {
  405. layer.open({
  406. type: 1,
  407. title: ['学习码', 'color:#333333;background-color:#D8E6F1;'],
  408. content: '<img border="0" src="' + res.qrcode + '" alt="点击下载">',
  409. btn: ['下载', '关闭'],
  410. yes: function (index, layero) {
  411. window.open(obj.data.qrcode);
  412. //按钮【按钮一】的回调
  413. },
  414. btn2: function (index, layero) {
  415. //按钮【按钮二】的回调
  416. }
  417. })
  418. } else {
  419. layer.msg(res.msg);
  420. }
  421. }
  422. });
  423. break;
  424. case 'view_log':
  425. layer.open({
  426. type: 2,
  427. title:['浏览记录','color:#333333;background-color:#D8E6F1;'],
  428. content: '{:url("lecturer/class_view")}?class_id=' + obj.data.id,
  429. resize: false,
  430. area: ['80%', '80%']
  431. });
  432. break;
  433. }
  434. });
  435. form.on('switch(show)', function (obj) {
  436. var id = obj.value;
  437. $.ajax({
  438. type: "post",
  439. url: '{:url("lecturer/classPublish")}',
  440. data: {
  441. id: id
  442. },
  443. success: function (res) {
  444. layer.msg(res.msg);
  445. }
  446. });
  447. });
  448. //发布
  449. form.on('switch(show)', function (obj) {
  450. // console.log(obj)
  451. // return false;
  452. var id = obj.value;
  453. $.ajax({
  454. type: "post",
  455. url: '{:url("lecturer/classPublish")}',
  456. data: {
  457. id: id,
  458. },
  459. success: function (res) {
  460. layer.msg(res.msg, { time: 2000 });
  461. }
  462. });
  463. });
  464. $('.layui-btn.layuiadmin-btn').on('click', function () {
  465. var type = $(this).data('type');
  466. active[type] ? active[type].call(this) : '';
  467. });
  468. });
  469. function fixedLayuiTable(tableobj, count, ifpage) {
  470. if (count == 0) {
  471. tableobj.elem.next('.layui-table-view').find('.layui-table-header').css('display', 'inline-block');
  472. var tableBox = tableobj.elem.next('.layui-table-view').find('.layui-table-box');
  473. tableBox.css('overflow-x', 'auto');
  474. //改变高度:table没有分页高度减15,否则增加25
  475. if (!ifpage) {
  476. tableBox.height(tableBox.height() - 15);
  477. } else {
  478. tableBox.height(tableBox.height() + 25);
  479. }
  480. }
  481. }
  482. </script>
  483. {/block}