course_index.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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-layer .layui-layer-iframe .layui-layer-title{
  9. background-color: #D8E6F1;
  10. }
  11. .layui-fluid {
  12. display: block;
  13. box-shadow: 0 0 4px 0 #B6CADE;
  14. border-radius: 5px;
  15. margin: 15px;
  16. background-color: #ffffff;
  17. }
  18. .layui-table thead tr,
  19. .layui-table-header {
  20. background-color: #D8E6F1 !important;
  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-form-item .layui-input-inline {
  34. width: auto;
  35. margin-right: 0px;
  36. }
  37. .layui-table-cell {
  38. padding: 0px 20px;
  39. }
  40. .plr10 {
  41. padding: 0px 10px;
  42. }
  43. .border249EFB,.border249EFB:hover {
  44. border: 1px solid #249EFB;
  45. background-color: #fff;
  46. color: #249EFB;
  47. padding: 0px 10px;
  48. }
  49. .borderFF5722,.borderFF5722:hover {
  50. border: 1px solid #FF5722;
  51. background-color: #fff;
  52. color: #FF5722;
  53. padding: 0px 10px ;
  54. }
  55. .goback {
  56. float: left;
  57. margin-right: 20px;
  58. }
  59. .goback a {
  60. color: #269efb;
  61. }
  62. .goback i {
  63. position: relative !important;
  64. left: 0px;
  65. }
  66. </style>
  67. <div class="layui-fluid">
  68. <div class="layui-card">
  69. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  70. <div class="layui-form-item">
  71. <div style="float:right;width:auto;">
  72. <div class="layui-inline" style="margin-right: 0px;">
  73. <label class="layui-form-label">场景</label>
  74. <div class="layui-input-inline">
  75. <select name="type_id" lay-filter="type" id="type_id">
  76. <option value="">请选择类型</option>
  77. {volist name="type" id="i"}
  78. <option value="{$i.id}">{$i.type}</option>
  79. {/volist}
  80. </select>
  81. </div>
  82. </div>
  83. <div class="layui-inline" style="margin-right: 0px;">
  84. <label class="layui-form-label">课件类型</label>
  85. <div class="layui-input-inline">
  86. <select name="decostyle" lay-filter="type" id="type">
  87. <option value="">请选择分类</option>
  88. <option value="video">视频课程</option>
  89. <option value="image">图文课程</option>
  90. <option value="audio">音频课程</option>
  91. <option value="pdf">pdf课程</option>
  92. </select>
  93. </div>
  94. </div>
  95. <div class="layui-inline">
  96. <label class="layui-form-label">关键字搜索</label>
  97. <div class="layui-input-inline">
  98. <input type="text" name="keyword" placeholder="请输入关键字搜索" autocomplete="off" class="layui-input keyword">
  99. </div>
  100. </div>
  101. <div class="layui-inline">
  102. <button class="layui-btn layuiadmin-btn" lay-submit lay-filter="LAY-app-contlist-search">
  103. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  104. </button>
  105. </div>
  106. </div>
  107. <div class="layui-inline" style="float: left;">
  108. <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainType">场景管理</button>
  109. <button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainAdd">添加课件</button>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="layui-card-body">
  114. <table lay-filter="datalist" id="datalist"></table>
  115. </div>
  116. </div>
  117. </div>
  118. {/block} {block name="js"}
  119. <script type="text/html" id="op">
  120. <a class="layui-btn layui-btn-xs plr10 border249EFB" lay-event="edit">编辑</a>
  121. <a class="layui-btn layui-btn-danger layui-btn-xs borderFF5722 plr10" lay-event="del">删除</a>
  122. </script>
  123. <script type="text/html" id="typetpl">
  124. {{# if(d.type){ }}
  125. {{# if(d.type=='image'){ }}
  126. 图文课程
  127. {{# }else if(d.type=='video'){ }}
  128. 视频课程
  129. {{# }else if(d.type=='audio'){ }}
  130. 音频课程
  131. {{# }else if(d.type=='pdf'){ }}
  132. pdf课程
  133. {{# } }}
  134. {{# }else{ }}
  135. <span style="color: #cccccc;">无</span>
  136. {{# } }}
  137. </script>
  138. <script type="text/html" id="view">
  139. <a href="javascript:void(0)" lay-event="showOrgData" style="color:blue;">{{d.view}}</a>
  140. </script>
  141. <script>
  142. layui.config({
  143. base: '__LAYUI__/',
  144. urlbase: '/sys'
  145. }).extend({
  146. index: 'lib/index'
  147. }).use(['index', 'table', 'layedit', 'element'], function() {
  148. var $ = layui.$,
  149. table = layui.table,
  150. element = layui.element,
  151. form = layui.form;
  152. var active = {
  153. trainAdd: function() {
  154. layer.open({
  155. type: 2,
  156. title:['添加课件','color:#333333;background-color:#D8E6F1;'],
  157. content: '{:url("train/course_add")}',
  158. resize: false,
  159. area: ['80%', '80%'],
  160. });
  161. },
  162. trainType: function() {
  163. layer.open({
  164. type: 2,
  165. title:['场景管理','color:#333333;background-color:#D8E6F1;'],
  166. content: '{:url("train/type_index")}',
  167. resize: false,
  168. area: ['80%', '80%'],
  169. });
  170. }
  171. };
  172. var field = {};
  173. form.on('submit(LAY-app-contlist-search)', function(data) {
  174. var type_id = $('#type_id').val();
  175. var keyword = $('.keyword').val();
  176. var type = $('#type').val();
  177. field['type_id'] = type_id;
  178. field['keyword'] = keyword;
  179. field['type'] = type;
  180. //执行重载
  181. table.reload('datalist', {
  182. where: field,
  183. page: {
  184. curr: 1
  185. }
  186. });
  187. });
  188. table.render({
  189. elem: '#datalist',
  190. url: "{:url('train/trainCourseList')}",
  191. page: true,
  192. height: 'full-160',
  193. cols: [
  194. [{
  195. type: 'numbers',
  196. field: 'id',
  197. title: '序号',
  198. width: 100
  199. },
  200. {
  201. field: 'title',
  202. title: '课件标题'
  203. },
  204. {
  205. field: 'type',
  206. title: '类型',
  207. templet:'#typetpl'
  208. },
  209. {
  210. field: 'type_id',
  211. title: '场景'
  212. },
  213. {
  214. field: 'view',
  215. title: '浏览次数',
  216. templet: '#view',
  217. },
  218. {
  219. fixed: 'right',
  220. title: '操作',
  221. templet: '#op',
  222. },
  223. ]
  224. ]
  225. });
  226. table.on('tool(datalist)', function(obj) {
  227. if(obj.event === 'del') {
  228. layer.confirm('提示:如有课程使用该课件,删除后,课程的统计数据会从新计算, 确定要删除?',{title: ['信息','color:#333333;background-color:#D8E6F1;']}, function() {
  229. var load = layer.load(1, {shade: [0.5, '#fff']});
  230. $.ajax({
  231. url: '{:url("train/del_course_train")}',
  232. data: {
  233. id: obj.data.id
  234. },
  235. type: 'get',
  236. success: function(res) {
  237. if(res.code == 0){
  238. layer.msg(res.msg, {
  239. icon: 1,
  240. time: 1000
  241. },function(){
  242. location.reload();
  243. });
  244. }else{
  245. layer.close(load);
  246. layer.msg(res.msg);
  247. }
  248. }
  249. });
  250. });
  251. }
  252. if(obj.event === 'edit') {
  253. layer.open({
  254. type: 2,
  255. title:['编辑课件','color:#333333;background-color:#D8E6F1;'],
  256. content: '{:url("train/course_edit")}?id=' + obj.data.id,
  257. resize: false,
  258. area: ['80%', '80%'],
  259. });
  260. }
  261. if (obj.event == 'showOrgData') {
  262. layer.open({
  263. type: 2,
  264. title:['浏览记录','color:#333333;background-color:#D8E6F1;'],
  265. content: '{:url("train/courese_view")}?course_id=' + obj.data.id,
  266. resize: false,
  267. area: ['80%', '80%']
  268. });
  269. }
  270. });
  271. $('.layui-btn.layuiadmin-btn').on('click', function() {
  272. var type = $(this).data('type');
  273. active[type] ? active[type].call(this) : '';
  274. });
  275. });
  276. </script>
  277. {/block}