crm/app/sys/view/train/class_index.html

{extend name="public/layout"/} {block name="title"}课程培训{/block} {block name="body"}
<style type="text/css">
	html,
	body {
		display: block;
		min-width: 1100px;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}

	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}

	.layui-form-item .layui-inline {
		margin-right: 0px;
	}

	.layui-form-label {
		width: auto;
	}

	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}

	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}

	/*.layui-table-cell {
		padding: 0px 20px;
	}*/
	.plr10 {
		padding: 0px 10px;
	}

	.border249EFB,
	.border249EFB:hover {
		border: 1px solid #249EFB;
		background-color: #fff;
		color: #249EFB;
		padding: 0px 10px;
	}

	.borderFF5722,
	.borderFF5722:hover {
		border: 1px solid #FF5722;
		background-color: #fff;
		color: #FF5722;
		padding: 0px 10px;
	}

	.layui-table td,
	.layui-table th {
		box-sizing: border-box;
	}

	.layui-table-view .layui-table {
		width: 100%;
	}
</style>
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-form layui-card-header layuiadmin-card-header-auto">
			<div class="layui-form-item">
				<div style="float:right;">
					<div class="layui-inline">
						<label class="layui-form-label">关键字查询：</label>
						<div class="layui-input-inline" style="width: auto;">
							<input type="text" name="keyword" placeholder="请输入关键字搜索" autocomplete="off"
								class="layui-input keyword">
						</div>
					</div>
					<div class="layui-inline">
						<button class="layui-btn layuiadmin-btn" lay-submit lay-filter="LAY-app-contlist-search">
							<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
						</button>
					</div>
				</div>
				{auth:check name="train/class_add"}
				<div class="layui-inline" style="float: left;">
					<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassAdd">添加课程</button>
				</div>
				{/auth:check}
				<div class="layui-inline" style="float: left;margin-left:10px;">
					<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassCate">分类管理</button>
				</div>
				<div class="layui-inline" style="float: left;margin-left:10px;">
					<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainClassLabel">二级分类</button>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<table lay-filter="datalist" id="datalist"></table>
		</div>
	</div>
</div>
{/block} {block name="js"}
<script type="text/html" id="op">
	{auth:check name="train/class_add"}
		<a class="layui-btn layui-btn-xs layui-btn-success plr10 border249EFB" lay-event="assign">指派</a>
		{{# if(d.from_type == 0){ }}
		<a class="layui-btn layui-btn-xs layui-btn-success plr10 border249EFB" lay-event="edit">编辑</a>
		{{# } }}
	{/auth:check}
	<a class="layui-btn layui-btn-xs plr10 border249EFB" lay-event="comment">感悟</a>
	{auth:check name="train/classDel"}
		{{# if(d.from_type == 0){ }}
		<a class="layui-btn layui-btn-danger layui-btn-xs plr10 borderFF5722" lay-event="del">删除</a>
		{{# } }}
	{/auth:check}
</script>
<script type="text/html" id="show">
	<input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="上架|下架" lay-filter="show" {{ d.publish == 1 ? 'checked' : '' }} id="clickshow">
</script>
<script type="text/html" id="kh">
	<a href="javascript:void(0)" lay-event="showOrgData" style="color:blue;">查看</a>
</script>
<script type="text/html" id="completeCount">
	<a href="javascript:void(0)" lay-event="completeList" style="color:blue;">{{d.completeCount}}</a>
</script>
<script type="text/html" id="noFinishCount">
	<a href="javascript:void(0)" lay-event="noFinishList" style="color:blue;">{{d.noFinishCount}}</a>
</script>
<script type="text/html" id="qrcode">
	<a href="javascript:void(0)" lay-event="download" style="color:blue;">查看</a>
</script>
<script type="text/html" id="title">
	{{# if(d.from_type == 2){ }}
		<i class="layui-icon">&#xe609;</i>&nbsp;&nbsp;{{d.title}}
	{{# }else{ }}
		{{d.title}}
	{{# } }}
</script>
<script type="text/html" id="cate">
	{{# if(d.cate){ }}
	<span>{{d.cate}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="label">
	{{# if(d.label){ }}
	<span>{{d.label}}</span>
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="category">
	{{# if(d.category=='elective'){ }}
		<span>选修</span>
	{{# }else{ }}
		<span>必修</span>
	{{# } }}
</script>
<script type="text/html" id="view">
	<a href="javascript:void(0)" lay-event="view_log" style="color:blue;">{{d.view}}</a>
</script>
<script>
	layui.use(['form', 'table'], function () {
		var form = layui.form,
			table = layui.table,
			$ = layui.$;

		var field = {};
		form.on('submit(LAY-app-contlist-search)', function (data) {
			var keyword = $('.keyword').val();
			field['keyword'] = keyword;
			//执行重载
			table.reload('datalist', {
				where: field,
				page: {
					curr: 1
				}
			});
		});

		var active = {
			trainClassAdd: function () {
				layer.open({
					type: 2,
					title: ['添加课程', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/class_add")}',
					resize: false,
					area: ['80%', '80%'],
				});
			},
			trainClassCate: function () {
				layer.open({
					type: 2,
					title: ['分类管理', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/class_cate")}',
					resize: false,
					area: ['80%', '80%'],
				});
			},
			trainClassLabel: function () {
				layer.open({
					type: 2,
					title: ['二级分类管理', 'color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/class_label")}',
					resize: false,
					area: ['80%', '80%'],
				});
			}
		};
		table.render({
			elem: '#datalist',
			url: "{:url('train/class_index')}",
			page: true,
			height: 'full-160',
			cols: [
				[{
					type: 'numbers',
					field: 'id',
					title: '序号',
					width: '50',
					fixed: 'left'
				},
				{
					title: '课程名称',
					field: 'title',
					width: '200',
					fixed: 'left',
					templet: '#title',
					align: 'center'
				},
				{
					title: '分类',
					field: 'cate',
					width: '100',
					fixed: 'left',
					templet: '#cate',
					align: 'center'
				},
				{
					title: '二级分类',
					field: 'label',
					width: '100',
					fixed: 'left',
					templet: '#label',
					align: 'center'
				},
				{
					title: '添加时间',
					field: 'addtime',
					width: '160',
					align: 'center'
				},
				{
					title: '课件数',
					field: 'courseCount',
					width: '80',
					align: 'center'
				},
				// {
				// 	title: '培训人数',
				// 	field: 'train_employee',
				// 	width: '90',
				// 	align: 'center'
				// },
				{
					title: '类别',
					field: 'category',
					width: '90',
					align: 'center',
					templet: '#category',
				},
				{
					title: '已完成人数',
					templet: '#completeCount',
					width: '100',
					align: 'center'
				},
				{
					title: '未完成人数',
					templet: '#noFinishCount',
					width: '100',
					align: 'center'
				},
				{
					title: '未开始人数',
					field: 'noStartCount',
					width: '100',
					align: 'center'
				},
				{
					title: '完成观看感',
					field: 'summaryCount',
					width: '100',
					align: 'center'
				},
				{
					title: '量化考核',
					templet: '#kh',
					width: '90',
					align: 'center'
				},
				{
					title: '学习码',
					templet: '#qrcode',
					width: '6.2%',
					align: 'center'
				},
				{
					title: '上下架',
					templet: '#show',
					width: '10%',
					align: 'center'
				},
				{
					field: 'view',
					width: '90',
					title: '浏览次数',
					align: 'center',
					templet: '#view',
				},
				{
					title: '操作',
					templet: '#op',
					minWidth: '266',
					fixed: 'right'
				},
				]
			],
			done: function (res, curr, count) {
				fixedLayuiTable(this, count);
			}
		});

		table.on('tool(datalist)', function (obj) {
			switch (obj.event) {
				case 'del':
					layer.confirm('确定要删除该内容么', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function () {
						$.ajax({
							url: '{:url("train/classDel")}',
							data: {
								id: obj.data.id
							},
							type: 'get',
							success: function (res) {

								if (res.code == 0) {
									layer.msg(res.msg, {
										icon: 1,
										time: 1000
									}, function () {
										layui.table.reload('datalist');
									});
								} else {
									layer.msg(res.msg);
								}
							}
						});
					});
					break;
				case 'publish':
					$.ajax({
						url: '{:url("train/classPublish")}',
						data: {
							id: obj.data.id
						},
						type: 'get',
						success: function (res) {
							if (res.code == 0) {
								layer.msg(res.msg, {
									icon: 1,
									time: 1000
								}, function () {
									layui.table.reload('datalist');
								});
							} else {
								layer.msg(res.msg);
							}
						}
					});
					break;
				case 'assign':
					layer.open({
						type: 2,
						title: ['指派', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/class_assigns")}?id=' + obj.data.id,
						area: ['80%', '80%'],
						btn: ['确定', '取消'],
						yes: function (index, layero) {
							layui.table.reload('datalist');
							layer.close(index);
							//点击确认触发 iframe 内容中的按钮提交
							// var val = layero.find('iframe').contents().find("#departinput").val();
							// var arr = val?JSON.parse(val):"";
							// var org_arr = [];	
							// for(var i in arr){
							// 	org_arr.push(i);
							// }
							// if(org_arr.length == 0)
							// {
							// 	layer.msg('请选择考核组织');
							// 	return false;
							// }
							// $.ajax({
							// 	url: '{:url("train/class_assign_edit")}',
							// 	data: {
							// 		id: obj.data.id,
							// 		org: org_arr.join(',')
							// 	},
							// 	type: 'get',
							// 	success: function(res) {
							// 		if(res.code == 0){
							// 			layer.msg(res.msg, {
							//                       icon: 1,
							//                       time: 1000
							//                   },function(){
							//                       layui.table.reload('datalist');
							//                       layer.close(index);
							//                   });
							// 		}else{
							// 			layer.msg(res.msg);
							// 		}
							// 	}
							// });
						}
					});
					break;
				case 'showOrgData':
					layer.open({
						type: 2,
						title: ['量化考核', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/class_org_data")}?class_id=' + obj.data.id + '&trainNumber=' + obj.data.trainNumber + '&completeCount=' + obj.data.completeCount + '&summaryCount=' + obj.data.summaryCount,
						resize: false,
						area: ['80%', '80%'],

					});
					break;
				case 'comment':
					layer.open({
						type: 2,
						title: ['感悟', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/class_comment")}?class_id=' + obj.data.id,
						resize: false,
						area: ['80%', '80%'],
					});
					break;
				case 'edit':
					layer.open({
						type: 2,
						title: ['修改课程', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/class_edit")}?class_id=' + obj.data.id,
						resize: false,
						area: ['80%', '80%'],
					});
					break;
				case 'completeList':
					layer.open({
						type: 2,
						title: ['已完成人数', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/doneLog")}?type=complete&class_id=' + obj.data.id,
						resize: false,
						area: ['80%', '80%'],
					});
					break;
				case 'noFinishList':
					layer.open({
						type: 2,
						title: ['未完成人数', 'color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/doneLog")}?type=noFinish&class_id=' + obj.data.id,
						resize: false,
						area: ['80%', '80%'],
					});
					break;
				case 'download':
					$.ajax({
						url: '{:url("train/qrcode")}',
						data: {
							id: obj.data.id
						},
						type: 'get',
						success: function (res) {
							if (res.code == 0) {
								layer.open({
									type: 1,
									title: ['学习码', 'color:#333333;background-color:#D8E6F1;'],
									content: '<img border="0" src="' + res.qrcode + '" alt="点击下载">',
									btn: ['下载', '关闭'],
									yes: function (index, layero) {
										window.open(obj.data.qrcode);
										//按钮【按钮一】的回调
									},
									btn2: function (index, layero) {
										//按钮【按钮二】的回调
									}
								})
							} else {
								layer.msg(res.msg);
							}
						}
					});
					break;
				case 'view_log':
					layer.open({
						type: 2,
						title:['浏览记录','color:#333333;background-color:#D8E6F1;'],
						content: '{:url("train/class_view")}?class_id=' + obj.data.id,
						resize: false,
						area: ['80%', '80%']
					});
					break;
			}

		});

		form.on('switch(show)', function (obj) {
			var id = obj.value;
			$.ajax({
				type: "post",
				url: '{:url("train/classPublish")}',
				data: {
					id: id
				},
				success: function (res) {
					layer.msg(res.msg);
				}
			});
		});

		//发布
		form.on('switch(show)', function (obj) {
			// console.log(obj)
			// return false;
			var id = obj.value;
			$.ajax({
				type: "post",
				url: '{:url("train/classPublish")}',
				data: {
					id: id,
				},
				success: function (res) {
					layer.msg(res.msg, { time: 2000 });
				}
			});
		});

		$('.layui-btn.layuiadmin-btn').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
	function fixedLayuiTable(tableobj, count, ifpage) {
			if (count == 0) {
				tableobj.elem.next('.layui-table-view').find('.layui-table-header').css('display', 'inline-block');
				var tableBox = tableobj.elem.next('.layui-table-view').find('.layui-table-box');
				tableBox.css('overflow-x', 'auto');
				//改变高度：table没有分页高度减15，否则增加25
				if (!ifpage) {
					tableBox.height(tableBox.height() - 15);
				} else {
					tableBox.height(tableBox.height() + 25);
				}
			}
		}
</script>

{/block}