selectSubject.html 3.26 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 style="display: inline-block;">
						<span class="item-label" style="width: 80px;margin-left: 6px;">场景: </span>
						<div id="myselect">
							<select id="multiselect" style="width: 350px;" class="form-control"  name="countries[]" multiple="multiple">
							</select>
						</div>
					</div>
					<div class="form-group">
						<input class="btn btn-default"  type="button" onclick="selectSubject()" value="提交" style="margin-left: 2px;margin-top: -24px;"/>
					</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="12" 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="12" id="operateTest"></textarea>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var select=new MSFmultiSelect(
			document.querySelector('#multiselect'),
			{
				onChange:function(checked,value,instance){
					var subjectTextStr='';
					var operateTestStr='';
					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';
							}
							index++;
						}
					}
					$("#subjectText").val(subjectTextStr);
					$("#operateTest").val(operateTestStr);
				},
				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);
		});
	});
	function selectSubject(){
		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},function(result){
				layer.alert(result.result);
			});
		});
	}
</script>