selectSubject.html 4.77 KB
<style type="text/css">
	.table-bordered {
		border: 1px solid; }
	.table-bordered > thead > tr > th,
	.table-bordered > thead > tr > td,
	.table-bordered > tbody > tr > th,
	.table-bordered > tbody > tr > td,
	.table-bordered > tfoot > tr > th,
	.table-bordered > tfoot > tr > td {
		border: 1px solid; }
	.table-bordered > thead > tr > th,
	.table-bordered > thead > tr > td {
		border-bottom-width: 2px; }

	.table > tbody + tbody {
		border-top: 1px solid; }
</style>
<div class="page-head">
	<div class="page-title">
		<h1>考题选择</h1>
	</div>
</div>
<body>

</body>
<div class="row">
	<div class="col-md-12">
		<div class="portlet light porttlet-fit bordered">
			<div class="portlet-title">
				<form class="form-inline" action="">
					<div class="form-group">
						<span class="item-label">班级: </span>
						<select class="form-control" name="className" id="className" style="width: 180px;">
							<li class="select2-results__option" role="treeitem" >请选择</li>
						</select>
					</div>
					<div class="form-group">
						<span class="item-label" >场景: </span>
						<div id="myselect" class="form-group" style="margin-bottom: -5px;" >
							<select id="multiselect"  class="form-control"  name="countries[]" multiple="multiple" >
							</select>
						</div>
					</div>
					<div class="form-group" >
						<input type="radio" name="isOperate" value="1"   checked="checked"/><label >隐藏操作</label>
						<input type="radio" name="isOperate" value="0" /><label >显示操作</label>
					</div>
					<div class="form-group">
						<input class="btn btn-default"  type="button" onclick="selectSubject()" value="提交" />
					</div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px">
					<form role="form">
						<div class="form-group">
							<span class="item-label" style="width: 80px;margin-left: 6px;">场景: </span>
							<textarea class="form-control" rows="10" id="subjectText"></textarea>
						</div>
					</form>
					<form role="form">
						<div class="form-group">
							<span class="item-label" style="width: 80px;margin-left: 6px;">操作: </span>
							<textarea class="form-control" rows="10" id="operateTest"></textarea>
						</div>
					</form>

					<form  id="fractions">
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var select=new MSFmultiSelect(
			document.querySelector('#multiselect'),
			{
				onChange:function(checked,value,instance){
					var subjectTextStr='';
					var operateTestStr='';
					var htmlSrt='';
					var arr=select.getData();
					for (let i of arr) {
						let index=1;
						for (let s of subjectList) {
							if(s.id==i){
								subjectTextStr+='题'+index+':'+s.subjectText+'\n';
								operateTestStr+='题'+index+':'+s.operateTest+'\n';
								htmlSrt+='<row style="display: inline-block"><span class="col-md-1" className="item-label" style="width: 80px">题'+index+': </span><input class="col-md-1" class="" type="text" oninput="value=value.replace(/[^\\d]/g,\'\')" name="fraction" style="border: 1px solid #c2cad8;width: 50px;"/></row>'
							}
							index++;
						}
					}
					$("#subjectText").val(subjectTextStr);
					$("#operateTest").val(operateTestStr);
					$("#fractions").html(htmlSrt);


				},
				appendTo:'#myselect',
			}
	);
	var subjectList;
	$(function(){
		$get('/subject/subjectList',{type:'query'},function(result){
			subjectList=result;
			var datas=[];
			let i=1;
			for (let r of result) {
				var d=new Object();
				d.value=r.id;
				d.caption="题"+i;
				datas[i-1]=d;
				i++;
			}
			select.loadSource(datas);
		});
		getClass();
	});
	function selectSubject(){
		let fractionStr = '';
		const inputs = $("input[name='fraction']");
		let sum=0;
		for (let i=0; i<inputs.length;i++) {
			fractionStr+=inputs[i].value+","
			sum+=Number(inputs[i].value);
		}
		let isOperate=$('input[name="isOperate"]:checked').val();
		let className=$("#className").val();
		if(sum != 100){
			layer.alert("总分必须为100");
			return;
		}
		var arr=select.getData();
		if(arr.length == 0){
			layer.alert("请选择场景");
			return;
		}
		layer.confirm('提交后会覆盖当天场景是否确认', {
			btn: ['确认', '取消'],isOutAnim: false,//可以无限个按钮
		}, function(index, layero){
			layer.close(index)
			var ids='';
			for (let id of arr) {
				ids+=id+',';
			}
			$get('/subject/selectSubject',{ids:ids,fractionStr:fractionStr,isOperate:isOperate,className:className},function(result){
				layer.alert(result.result);
			});
		});
	}
	var firstLoad=true;
	function getClass(){
		$.get('/user/classList',function(result){
			var data=[];
			for(var code in result){
				data.push({id: result[code], text: result[code]});
			}
			initPinYinSelect2('#className',data,'');
			firstLoad=false;
		})
	}
</script>