Files
dsProject/dsBase/WebRoot/view/hk/step.html
2025-08-14 15:45:08 +08:00

505 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="./component/pear/css/pear.css" rel="stylesheet" />
<style>
.lay-step {
font-size: 0;
margin: 0 auto;
max-width: 100%;
width: 60%;
padding-left: 13%;
}
td {
text-align: center;
height: 35px;
}
.td_title {
font-size: 16px !important;
font-weight: bolder;
}
.td_content {
text-align: left;
font-size: 16px !important;
}
th {
text-align: center;
}
.layui-elem-field legend {
margin-left: 20px;
padding: 0 10px;
font-size: 12px;
color: #05B5F8;
}
.layui-carousel {
position: relative;
left: 0;
top: 0;
background-color: #f8f8f8;
height: 600px !important;
}
</style>
</head>
<body>
<body>
<div style="margin: 0 auto;">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm"
style="height: 600px !important; margin: 40px auto;">
<div carousel-item>
<!-- 确认考生信息 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>确认考生信息</legend>
</fieldset>
<table class="layui-table">
<colgroup>
<col width="1300">
<col width="1300">
<col width="1300">
<col width="1300">
</colgroup>
<thead>
<tr>
<th colspan="4" style="text-align: center;font-size: 18px;height: 35px;">考生信息
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td_title">姓名</td>
<td class="td_content" id="xm"></td>
<td class="td_title">性别</td>
<td class="td_content" id="xb"></td>
</tr>
<tr>
<td class="td_title">所属学校</td>
<td class="td_content" colspan="3" id="ssxx"></td>
</tr>
<tr>
<td class="td_title">身份证号</td>
<td class="td_content" colspan="3" id="sfzh"></td>
</tr>
<tr>
<td class="td_title">考籍号</td>
<td class="td_content" colspan="3" id="kjh"></td>
</tr>
<tr>
<td class="td_title">国家学籍号</td>
<td class="td_content" colspan="3" id="gjxjh"></td>
</tr>
</tbody>
</table>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 选择科目卷面文字 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>选择科目卷面文字</legend>
</fieldset>
<div class="layui-form-item" style="margin: 30px 0;">
<label class="layui-form-label" style="width: 100px;">科目卷面文字:</label>
<div class="layui-input-block" id="jmwzView">
<script id="jmwzScript" type="text/html">
{{# layui.each(d, function(index, item){ }}
<input type="radio" name="jmwz" value="{{item.wz_id}}" title="{{item.wz_name}}">
{{# }); }}
</script>
</div>
</div>
<div class="layui-form-item">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep2">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 选择考试科目 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>选择考试科目</legend>
</fieldset>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="margin-left: 10px;" id="subjectView">
<script id="subjectScript" type="text/html">
{{# layui.each(d.subject, function(index1, item){ }}
{{# if(item.children.length==0){ }}
{{# if(d.ywj_id==1){ }}
<input type="checkbox" id="chk_{{item.group_name}}" value="{{item.id}}" name="{{item.subject_code}}" title="{{item.name}}" checked disabled><br>
{{# } else { }}
<input type="checkbox" id="chk_{{item.group_name}}" value="{{item.id}}" name="{{item.subject_code}}" title="{{item.name}}"><br>
{{# } }}
{{# } else { }}
{{# if(d.ywj_id==1){ }}
<input type="checkbox" id="chk_{{item.subject_code}}" title="{{item.name}}" lay-filter="childChk" checked disabled><br>
{{# } else { }}
<input type="checkbox" id="chk_{{item.subject_code}}" title="{{item.name}}" lay-filter="childChk"><br>
{{# } }}
{{# layui.each(item.children, function(index2, clildItem){ }}
{{# if(d.ywj_id==1){ }}
{{# if(index2==0){ }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo" checked>
{{# } else { }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo">
{{# } }}
{{# } else { }}
&emsp;&emsp;<input type="radio" id="rdo_{{item.subject_code}}" name="{{item.subject_code}}" value="{{clildItem.id}}" title="{{clildItem.name}}" lay-filter="childRdo">
{{# } }}
{{# }); }}
<br>
{{# } }}
{{# }); }}
</script>
</div>
</div>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep3">
下一步
</button>
</div>
</div>
</form>
</div>
<!-- 确认报名信息 -->
<div>
<form class="layui-form" action="javascript:void(0);"
style="margin: 0 auto;max-width: 600px;padding-top: 10px;">
<fieldset class="layui-elem-field layui-field-title">
<legend>确认报名信息</legend>
</fieldset>
<table class="layui-table">
<colgroup>
<col width="1300">
<col width="1300">
<col width="1300">
<col width="1300">
</colgroup>
<thead>
<tr>
<th colspan="4" style="text-align: center;font-size: 18px;height: 35px;">报名信息
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td_title">姓名</td>
<td class="td_content" id="xmV"></td>
<td class="td_title">性别</td>
<td class="td_content" id="xbV"></td>
</tr>
<tr>
<td class="td_title">所属学校</td>
<td class="td_content" colspan="3" id="ssxxV"></td>
</tr>
<tr>
<td class="td_title">身份证号</td>
<td class="td_content" colspan="3" id="sfzhV"></td>
</tr>
<tr>
<td class="td_title">考籍号</td>
<td class="td_content" colspan="3" id="kjhV"></td>
</tr>
<tr>
<td class="td_title">国家学籍号</td>
<td class="td_content" colspan="3" id="gjxjhV"></td>
</tr>
<tr>
<td class="td_title">科目卷面文字</td>
<td class="td_content" colspan="3" id="kmjmwzV"></td>
</tr>
<tr>
<td class="td_title">考试科目</td>
<td class="td_content" colspan="3" id="kskmV"></td>
</tr>
</tbody>
</table>
<div class="layui-form-item" style="margin-top: 20px;">
<div style="text-align: center;">
<button type="button" class="pear-btn pear-btn-primary pre">上一步</button>
<button class="pear-btn pear-btn-primary" lay-submit lay-filter="formStep4">
确认报名
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="./component/layui/layui.js"></script>
<script src="./component/pear/pear.js"></script>
<script>
layui.use(['form', 'step', 'laytpl', 'jquery'], function () {
let form = layui.form;
let $ = layui.jquery;
let step = layui.step;
let laytpl = layui.laytpl
var lsData = localStorage.getItem('studentInfo');
if (lsData == null) {
window.parent.location.href = "./login.html";
}
var studentInfo = JSON.parse(lsData);
var jmwz;
var jmwzid;
var jmwzObj = {};
var selectSubjectTxt = [];
var selectSubjectObj = [];
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '600px',
height: '500px',
stepItems: [{
title: '确认考生信息'
}, {
title: '选择科目卷面文字'
}, {
title: '选择考试科目'
}, {
title: '确认报名信息'
}]
});
// 渲染学生信息
$("#xm").html(studentInfo.student_name);
$("#xb").html(studentInfo.xb);
$("#ssxx").html(studentInfo.school_name);
$("#sfzh").html(studentInfo.sfzh);
$("#kjh").html(studentInfo.kjh);
$("#gjxjh").html(studentInfo.xjh);
// 渲染卷面文字
var jmwzArr = JSON.parse(studentInfo.jmwz_id);
var jmwzTpl = jmwzScript.innerHTML;
var jmwzView = document.getElementById('jmwzView');
laytpl(jmwzTpl).render(jmwzArr, function (html) {
jmwzView.innerHTML = html;
});
// 渲染选择考试科目
var subjectObj = {};
var _obj = JSON.parse(studentInfo.km_json);
subjectObj["subject"] = _obj;
//ywj_id 1应届 2往届
subjectObj["ywj_id"] = studentInfo.ywj_id;
var subjectTpl = subjectScript.innerHTML;
var subjectView = document.getElementById('subjectView');
laytpl(subjectTpl).render(subjectObj, function (html) {
subjectView.innerHTML = html;
});
form.render();
form.on('submit(formStep)', function (data) {
layer.confirm('是否确认考生信息正确?', {
shade: 0.1,
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
step.next('#stepForm');
return false;
});
});
form.on('submit(formStep2)', function (data) {
if ($('input[name="jmwz"]:checked').length > 0) {
var selectedTitle = $('input[name="jmwz"]:checked').attr('title');
var selectedValue = $('input[name="jmwz"]:checked').val();
jmwz = selectedTitle;
jmwzid = selectedValue;
jmwzObj["id"] = jmwzid;
jmwzObj["name"] = jmwz;
step.next('#stepForm');
return false;
} else {
layer.msg("请选择科目卷面文字 ", {
icon: 2,
time: 1500
});
}
});
form.on('submit(formStep3)', function (data) {
var checkedInputs = $('#subjectView input[type="checkbox"]:checked, #subjectView input[type="radio"]:checked');
if (checkedInputs.length > 0) {
for (var key in data.field) {
var ssObj = {};
var name = findName(JSON.parse(studentInfo.km_json), data.field[key]);
ssObj["id"] = data.field[key];
ssObj["name"] = name;
selectSubjectObj.push(ssObj);
selectSubjectTxt.push(name);
}
// 渲染报名信息
$("#xmV").html(studentInfo.student_name);
$("#xbV").html(studentInfo.xb);
$("#ssxxV").html(studentInfo.school_name);
$("#sfzhV").html(studentInfo.sfzh);
$("#kjhV").html(studentInfo.kjh);
$("#gjxjhV").html(studentInfo.xjh);
$("#kmjmwzV").html(jmwz);
$("#kskmV").html(selectSubjectTxt.join("、"));
step.next('#stepForm');
return false;
} else {
layer.msg("必须要选择一个科目 ", {
icon: 2,
time: 1500
});
}
});
form.on('submit(formStep4)', function (data) {
layer.confirm('是否确认报名信息正确?', {
shade: 0.1,
icon: 3,
title: '提示'
}, function (index) {
layer.close(index);
let loading = layer.load();
var postData = {};
postData["jmwz"] = jmwzObj;
postData["km"] = selectSubjectObj;
$.ajax({
url: '/dsBase/hk/setStudentInfo',
async: false,
data: { res_json: JSON.stringify(postData) },
type: 'post',
success: function (result) {
if (result.success) {
$.ajax({
url: "/dsBase/hk/getStudentInfo",
async: false,
type: 'GET',
success: function (res) {
localStorage.setItem('studentInfo', JSON.stringify(res));
layer.close(loading);
layer.msg("报名成功!", {
icon: 1,
time: 1300
}, function () {
window.location.href = "./info.html";
});
}, error: function (xhr, status, error) {
layer.msg("获取学生信息异常!", {
icon: 2,
time: 1000
});
}
});
} else {
layer.msg(result.message, {
icon: 2,
time: 2000
});
}
}
});
return false;
});
});
$('.pre').click(function () {
step.pre('#stepForm');
return false;
});
$('.next').click(function () {
step.next('#stepForm');
return false;
});
form.on('checkbox(childChk)', function (data) {
var elemId = data.elem.id.replace("chk_", "");
if (data.elem.checked) {
$("input[name='" + elemId + "']:first").prop("checked", "checked");
} else {
$("input[name='" + elemId + "']:checked").prop("checked", false);
}
form.render();
});
form.on('radio(childRdo)', function (data) {
var elemId = data.elem.id.replace("rdo_", "");
$("#chk_" + elemId).prop('checked', true)
form.render();
});
function findName(arr, code) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].id == code) {
return arr[i].name;
}
else if (arr[i].children) {
let found = findName(arr[i].children, code);
if (found) return found;
}
}
}
});
</script>
<script>
</script>
</body>
</html>