crm/app/sys/view/train/course_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-layer .layui-layer-iframe .layui-layer-title{
		background-color: #D8E6F1;
	}
	
	.layui-fluid {
		display: block;
		box-shadow: 0 0 4px 0 #B6CADE;
		border-radius: 5px;
		margin: 15px;
		background-color: #ffffff;
	}

	.layui-table thead tr,
	.layui-table-header {
		background-color: #D8E6F1 !important;
	}
	
	.layui-form-label {
		width: auto;
	}
	.layui-btn-primary {
		color: #249EFB;
		border: 1px solid #249EFB;
	}
	.layui-btn-primary:hover {
		background-color: #E3F7FF;
		color: #249EFB;
	}
	.layui-form-item .layui-input-inline {
		width: auto;
		margin-right: 0px;
	}
	.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 ;
	}
	.goback {
		float: left;
		margin-right: 20px;
	}
	.goback a {
		color: #269efb;
	}
	.goback i {
		position: relative !important;
		left: 0px;
	}
</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;width:auto;">
					<div class="layui-inline" style="margin-right: 0px;">
						<label class="layui-form-label">场景</label>
						<div class="layui-input-inline">
							<select name="type_id" lay-filter="type" id="type_id">
								<option value="">请选择类型</option>
								{volist name="type" id="i"}
								<option value="{$i.id}">{$i.type}</option>
								{/volist}
							</select>
						</div>
					</div>
					<div class="layui-inline" style="margin-right: 0px;">
						<label class="layui-form-label">课件类型</label>
						<div class="layui-input-inline">
							<select name="decostyle" lay-filter="type" id="type">
								<option value="">请选择分类</option>
								<option value="video">视频课程</option>
								<option value="image">图文课程</option>
								<option value="audio">音频课程</option>
                                <option value="pdf">pdf课程</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">关键字搜索</label>
						<div class="layui-input-inline">
							<input type="text" name="keyword" placeholder="请输入关键字搜索" autocomplete="off" class="layui-input keyword">
						</div>
					</div>
					<div class="layui-inline" style="margin-right: 0;">
						<button class="layui-btn layuiadmin-btn submitbtn" lay-submit lay-filter="LAY-app-contlist-search">
	                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
	                </button>
					</div>
				</div>
				
				<div class="layui-inline" style="float: left;">
					<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainType">场景管理</button>
					{auth:check name="train/course_add"}
						<button class="layui-btn layuiadmin-btn layui-btn-primary" data-type="trainAdd">添加课件</button>
					{/auth:check}
				</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/course_add"}
		<a class="layui-btn layui-btn-xs plr10 border249EFB" lay-event="edit">编辑</a>
	{/auth:check}
	{auth:check name="train/del_course_train"}
		<a class="layui-btn layui-btn-danger layui-btn-xs borderFF5722 plr10" lay-event="del">删除</a>
	{/auth:check}
</script>
<script type="text/html" id="typetpl">
	{{# if(d.type){ }}
        {{# if(d.type=='image'){ }}
            图文课程
        {{# }else if(d.type=='video'){ }}
            视频课程
        {{# }else if(d.type=='audio'){ }}
            音频课程
        {{# }else if(d.type=='pdf'){ }}
            pdf课程
        {{# } }}
	{{# }else{ }}
		<span style="color: #cccccc;">无</span>
	{{# } }}
</script>
<script type="text/html" id="view">
	<a href="javascript:void(0)" lay-event="showOrgData" style="color:blue;">{{d.train_course_view_count}}</a>
</script>
<script>
	layui.config({
		base: '__LAYUI__/',
		urlbase: '/sys'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table', 'layedit', 'element'], function() {
		var $ = layui.$,
			table = layui.table,
			element = layui.element,
			form = layui.form;
		
		document.onkeydown=function(event){
			var e = event || window.event || arguments.callee.caller.arguments[0];
			if(e && e.keyCode==13){ 
				$(".submitbtn").trigger("click");
			}
		};
		
		var active = {
			trainAdd: function() {
				layer.open({
					type: 2,
					title:['添加课件','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/course_add")}',
					resize: false,
					area: ['80%', '80%'],
				});
			},
			trainType: function() {
				layer.open({
					type: 2,
					title:['场景管理','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/type_index")}',
					resize: false,
					area: ['80%', '80%'],
				});
			}
		};

		var field = {};
		form.on('submit(LAY-app-contlist-search)', function(data) {
			var type_id = $('#type_id').val();
			var keyword = $('.keyword').val();
			var type = $('#type').val();
			field['type_id'] = type_id;
			field['keyword'] = keyword;
			field['type'] = type;
			//执行重载
			table.reload('datalist', {
				where: field,
				page: {
					curr: 1
				}
			});
		});
		
		table.render({
			elem: '#datalist',
			url: "{:url('train/trainCourseList')}",
			page: true,
			height: 'full-160',
			cols: [
				[{
						type: 'numbers',
						field: 'id',
						title: '序号',
						width: 100
					},
					{
						field: 'title',
						title: '课件标题'
					},
					{
						field: 'type',
						title: '类型',
						templet:'#typetpl'
					},
					{
						field: 'type_id',
						title: '场景'
					},
					{
						field: 'view',
						title: '浏览次数',
						templet: '#view',
					},
					{
						fixed: 'right',
						title: '操作',
						templet: '#op',
					},
				]
			]
		});
		table.on('tool(datalist)', function(obj) {
			if(obj.event === 'del') {
				layer.confirm('提示：如有课程使用该课件，删除后，课程的统计数据会从新计算， 确定要删除？',{title: ['信息','color:#333333;background-color:#D8E6F1;']}, function() {
					var load = layer.load(1, {shade: [0.5, '#fff']});
					$.ajax({
						url: '{:url("train/del_course_train")}',
						data: {
							id: obj.data.id
						},
						type: 'get',
						success: function(res) {
							if(res.code == 0){
								layer.msg(res.msg, {
			                        icon: 1,
			                        time: 1000
			                    },function(){
			                        location.reload();
			                    });
							}else{
								layer.close(load);
								layer.msg(res.msg);
							}
						}
					});
				});
			}
			if(obj.event === 'edit') {
				layer.open({
					type: 2,
					title:['编辑课件','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/course_edit")}?id=' + obj.data.id,
					resize: false,
					area: ['80%', '80%'],
				});
			}
			if (obj.event == 'showOrgData') {
				layer.open({
					type: 2,
					title:['浏览记录','color:#333333;background-color:#D8E6F1;'],
					content: '{:url("train/courese_view")}?course_id=' + obj.data.id,
					resize: false,
					area: ['80%', '80%']
				});
			}
		});

		$('.layui-btn.layuiadmin-btn').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	});
</script>

{/block}