sunwei
/
jianDemo_edu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>调查问卷管理</title>
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<%@include file="eduQuestionnaireQuestionList.js" %>
	<script src="${ctxStatic}/plugin/echarts3/echarts.min.js"></script>
	<script type="text/javascript">
		var questionnaireId = '';
		$(document).ready(function(){
            <c:if test="${mode == 'view'}">
            	$(".table.table-bordered").find("input,textarea,select").attr("disabled", "disabled");
            </c:if>

			questionnaireId = $('#id').val();
			$('#startTime').datetimepicker({
				format: "YYYY-MM-DD"
			});
			$('#endTime').datetimepicker({
				format: "YYYY-MM-DD"
			});
			jp.ajaxForm("#inputForm",function(data){
				if(data.success){
				    jp.success(data.msg);
					jp.go("${ctx}/questionnaire/eduQuestionnaire");
				}else{
				    jp.error(data.msg);
				    $("#inputForm").find("button:submit").button("reset");
				}
			});

		});
		layui.use('element', function(){
			var element = layui.element;
		});
	</script>
</head>
<body>
<div class="wrapper wrapper-content">				
<div class="row">
	<div class="col-md-12">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title"> 
				<a class="panelButton" href="${ctx}/questionnaire/eduQuestionnaire"><i class="ti-angle-left"></i> 返回</a>
			</h3>
		</div>
		<div class="panel-body">
			<div class="layui-tab layui-tab-card">
				<ul class="layui-tab-title">
					<li class="layui-this">问卷信息</li>
					<c:if test="${mode != 'add'}">
						<li>问卷内容</li>
					</c:if>
					<c:if test="${mode == 'view'}">
						<li>调查问卷结果统计</li>
					</c:if>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
				<form:form id="inputForm" modelAttribute="eduQuestionnaire" action="${ctx}/questionnaire/eduQuestionnaire/save" method="post" class="form-horizontal">
					<form:hidden path="id"/>
					<form:hidden path="sort"/>
					<table class="table table-bordered">
						<tbody>
						<tr>
							<td class="width-15 active"><label class="pull-right"><font color="red">*</font>问卷标题：</label></td>
							<td class="width-35" colspan="3">
								<form:input path="title" htmlEscape="false" maxlength="200"    class="form-control required"/>
							</td>
						</tr>
						<tr>
							<td class="width-15 active"><label class="pull-right" ><font color="red">*</font>开始时间：</label></td>
							<td class="width-35">
								<div class='input-group form_datetime' id='startTime'>
									<input type='text'  name="startTime" class="form-control "  value="<fmt:formatDate value="${eduQuestionnaire.startTime}" pattern="yyyy-MM-dd"/>"/>
									<span class="input-group-addon">
								            	<span class="glyphicon glyphicon-calendar"></span>
                                       		 </span>
								</div>
							</td>
							<td class="width-15 active"><label class="pull-right"><font color="red">*</font>结束时间：</label></td>
							<td class="width-35">
								<div class='input-group form_datetime' id='endTime'>
									<input type='text'  name="endTime" class="form-control "  value="<fmt:formatDate value="${eduQuestionnaire.endTime}" pattern="yyyy-MM-dd"/>"/>
									<span class="input-group-addon">
								            	<span class="glyphicon glyphicon-calendar"></span>
                                        	</span>
								</div>
							</td>
						</tr>
						</tbody>
					</table>
				<c:if test="${mode == 'add' || mode=='edit'}">
						<div class="col-lg-3"></div>
						<div class="col-lg-6">
							 <div class="form-group text-center">
								 <div>
									 <button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交...">提 交</button>
								 </div>
							 </div>
						</div>
				</c:if>
				</form:form>
					</div>
					<c:if test="${mode != 'add'}">
					<div class="layui-tab-item">
						<div id="toolbar">
							<shiro:hasPermission name="questionnaire:eduQuestionnaire:add">
								<button id="add" class="btn btn-primary" onclick="add(questionnaireId)">
									<i class="glyphicon glyphicon-plus"></i> 新建
								</button>
							</shiro:hasPermission>
							<shiro:hasPermission name="questionnaire:eduQuestionnaire:edit">
								<button id="edit" class="btn btn-success" disabled onclick="edit()">
									<i class="glyphicon glyphicon-edit"></i> 修改
								</button>
							</shiro:hasPermission>
							<shiro:hasPermission name="questionnaire:eduQuestionnaire:del">
								<button id="remove" class="btn btn-danger" disabled onclick="deleteAll()">
									<i class="glyphicon glyphicon-remove"></i> 删除
								</button>
							</shiro:hasPermission>
							<shiro:hasPermission name="questionnaire:eduQuestionnaire:view">
								<button id="view" class="btn btn-default" disabled onclick="view()">
									<i class="fa fa-search-plus"></i> 查看
								</button>
							</shiro:hasPermission>
						</div>
						<table id="eduQuestionnaireQuestionTable"   data-toolbar="#toolbar"></table>
					</div>
					</c:if>
					<c:if test="${mode == 'view'}">
						<div class="layui-tab-item" style="width: 100%;">
							<c:forEach var="question" items="${eduQuestionnaire.questionIdsList}" varStatus="status">
								<c:if test="${question.types== '1' || question.types == '2'}">
									<div id="main${status.index}"  style="width: 800px;height: 345px"></div>
									<script type="text/javascript">
										var myChart${status.index} = echarts.init(document.getElementById('main${status.index}'));
										jp.get("${ctx}/questionnaire/eduQuestionnaire/countQuestionnaire?id=${question.id}", function (option) {
											myChart${status.index}.setOption(option);
										})
									</script>
									<hr />
								</c:if>
								<c:if test="${question.types ==3}">
									<h4>${question.title}</h4>
									<form:form id="searchForm" >
										<input type="hidden" name="question.id"  value="${question.id}">
									</form:form>
									<table id="resultTable" ></table>
									<script type="text/javascript">
                                        $(document).ready(function() {
                                        	$('#resultTable').bootstrapTable({
                                            //请求方法
                                            method: 'post',
                                            //类型json
                                            dataType: "json",
                                            contentType: "application/x-www-form-urlencoded",
                                            //显示检索按钮
                                            showSearch: false,
                                            //显示刷新按钮
                                            showRefresh: false,
                                            //显示切换手机试图按钮
                                            showToggle: false,
                                            //显示 内容列下拉框
                                            showColumns: false,
                                            //显示到处按钮
                                            showExport: false,
                                            //显示切换分页按钮
                                            showPaginationSwitch: false,
                                            //最低显示2行
                                            minimumCountColumns: 2,
                                            //是否显示行间隔色
                                            striped: true,
                                            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                                            cache: false,
                                            //是否显示分页（*）
                                            pagination: true,
                                            //排序方式
                                            sortOrder: "asc",
                                            //初始化加载第一页，默认第一页
                                            pageNumber:1,
                                            //每页的记录行数（*）
                                            pageSize: 20,
                                            //可供选择的每页的行数（*）
                                            pageList: [20, 50, 100],
                                            //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                                            url: "${ctx}/questionnaire/eduUserQuestionnaire/dataResult",
                                            //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                                            //queryParamsType:'',
                                            ////查询参数,每次调用是会带上这个参数，可自定义
                                            queryParams : function(params) {
                                                var searchParam = $("#searchForm").serializeJSON();
                                                searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
                                                searchParam.pageSize = params.limit === undefined? -1 : params.limit;
                                                searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
                                                return searchParam;
                                            },
                                            //分页方式：client客户端分页，server服务端分页（*）
                                            sidePagination: "server",
                                            columns: [
                                                {
                                                    field: 'no',
                                                    title: '序号',
                                                    sortable: false,
                                                    align: "center",
                                                    width: 40,
                                                    formatter: function (value, row, index) {
                                                        //获取每页显示的数量
                                                        var pageSize=$('#resultTable').bootstrapTable('getOptions').pageSize;
                                                        //获取当前是第几页
                                                        var pageNumber=$('#resultTable').bootstrapTable('getOptions').pageNumber;
                                                        //返回序号，注意index是从0开始的，所以要加上1
                                                        return pageSize * (pageNumber - 1) + index + 1;
                                                    }
                                                },
                                                {
                                                    field: 'content',
                                                    title: '内容',
                                                    sortable: false,
                                                    sortName: 'content'

                                                }
                                            ]

                                        });
                                        });
									</script>
								</c:if>
							</c:forEach>
						</div>
					</c:if>
				</div>
			</div>
		</div>				
	</div>
	</div>
</div>
</div>
</body>
</html>