| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462 |
- <%@ page language="java" pageEncoding="UTF-8" %>
- <%@ taglib uri="/ssTag" prefix="ss" %>
- <!DOCTYPE html>
- <html lang="en" style="font-size: 16px;">
- <head>
- <title>录入来访信息</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <link rel="stylesheet" href="/skin/easy/Main.css">
- <link rel="stylesheet" href="/skin/easy/mobiscroll.custom.css">
- <script type="text/javascript" src="/ss/jquery/jquery-1.7.2.min.js"></script>
- <script type="text/javascript" src="/ss/js/base.js"></script>
- <script type="text/javascript" src="/ss/js/common.js"></script>
- <script type="text/javascript" src="/ss/js/display.js"></script>
- <script type="text/javascript" src="/ss/js/edit.js"></script>
- <script type="text/javascript" src="/ss/js/mobiscroll.custom.js"></script>
- <script type="text/javascript" src="/ss/js/file.js"></script>
- <!-- <script type="text/javascript" src="/ss/js/objectPicker.js"></script> -->
- <style>
- th,
- td {
- border: 1px solid black;
- border-collapse: collapse;
- }
- table {
- table-layout: fixed;
- width: 100%;
- /* 确保表格占满容器宽度 */
- }
- .mobileForm table th {
- width: 8rem;
- }
- .mobileForm table td {
- font-size: 1rem;
- }
- .mobileDelete-button,
- .mobileAdd-button {
- margin-right: 5px;
- }
- .carNumberAdd {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- }
- .carNumberTd {
- padding: 5px !important;
- }
- .carNumberTd>div {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .carNumberTd>div>div {
- flex: 1;
- }
- .carNumberTd .mobileDelete-button {
- margin: 0 0 0 5px !important;
- }
- input[type='text'] {
- width: 100%;
- }
- .hidden {
- display: none;
- }
- </style>
- </head>
- <body>
- <%--
- 来访对象:<%=request.getAttribute("lf") %>
- 姓名:<%=((base.po.LfPo)(request.getAttribute("lf"))).getXm() %>
- 姓别码:${lf.xbm}
- --%>
-
- <!-- lfid - ${lf.lfid}
- 1. lflbm - ${lf.lflbm} // 来访类别
- 2. jfrxm - ${lf.jfrxm} // 受访人姓名
- 3. jfrgrdh - ${lf.jfrgrdh} // 个人电话
- 4. jfxiaoqid - ${lf.jfxiaoqid} // 到访校区
- 5. dwmc - ${lf.dwmc} // 来访人单位
- 6. jfbmid - ${lf.jfbmid} // 酒店名
- 7. rs - ${lf.rs} // 来访人数
- 8. yykssj - ${lf.yykssj} // 预约开始时间
- 9. yyjssj - ${lf.yyjssj} // 预约结束时间
- 10. jfryid - ${lf.jfryid} // 受访人ID
- xm - ${lf.xm}
- xbm - ${lf.xbm}
- sfzjlbm - ${lf.sfzjlbm}
- sfzh - ${lf.sfzh}
- grdh - ${lf.grdh}
- clh - ${lf.clh} -->
-
-
- <div style="height: calc(100% - 3.5rem); overflow: auto" class="mobileForm">
-
- <form action="/extRoot?type=3&token=${token}" method="post" id="myForm">
- <table>
- <tr>
- <th>来访类别</th>
- <td>
- <div class="ss-select-container" id="lflbm" value="${lf.lflbm}">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- </div>
- <input type="hidden" name="lflbm">
- </div>
- </td>
- </tr>
- </table>
- <table id="formSection2" class="hidden">
- <tr id="tr-jfrxm" class="hidden">
- <th>接访人姓名</th>
- <td>
-
- <input name="jfrxm" type="text" value="${lf.jfrxm}" />
- </td>
- </tr>
-
- <tr id="tr-jfrgrdh" class="hidden">
- <th>个人电话</th>
- <td>
-
- <input name="jfrgrdh" type="text" value="${lf.jfrgrdh}"/>
- </td>
- </tr>
- </table>
- <div class="mobileForm-title hidden">来访信息</div>
- <table id="formSection3" class="hidden">
- <tr id="tr-jfxiaoqid" class="hidden">
- <th>到访校区</th>
- <td>
- <div class="ss-select-container" id="jfxiaoqid" value="${lf.jfxiaoqid}">
- <div class="ss-select">请选择校区</div>
- <div class="ss-options">
- </div>
- <input type="hidden" name="jfxiaoqid">
- </div>
- </td>
- </tr>
-
-
- <tr id="tr-jfbmid" class="hidden">
- <th>酒店名</th>
- <td>
- <div class="ss-select-container" id="jfbmid" value="${lf.jfbmid}">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- </div>
- <input type="hidden" name="jfbmid">
- </div>
- </td>
- </tr>
- <tr id="tr-dwmc" class="hidden">
- <th>来访人单位</th>
- <td>
-
- <input name="dwmc" type="text" value="${lf.dwmc}"/>
- </td>
- </tr>
- <tr id="tr-sy" class="hidden">
- <th>事由</th>
- <td>
-
- <input name="sy" type="text" value="${lf.sy}"/>
- </td>
- </tr>
- <tr id="tr-rs" class="hidden">
- <th>来访人数</th>
- <td>
- <input name="rs" type="text" value="${lf.rs}"/>
- </td>
- </tr>
- <tr id="tr-yykssj" class="hidden">
- <th>预约日期</th>
- <td>
- <input name="yykssj" type="text" id="yykssj" value="${lf.yykssj}"/>
- </td>
- </tr>
- <tr id="tr-yyjssj" class="hidden" style="display: none;">
- <th>预约结束时间</th>
- <td>
- <input name="yyjssj" type="text" id="yyjssj" value="${lf.yyjssj}"/>
- </td>
- </tr>
- </table>
- <div class="mobileForm-title hidden">
- <span></span> <span class="mobileAdd-button" id="visitorAdd"></span>
- </div>
- <p style="margin: 1rem 0.5rem 0;">
- <span>申请入校免责声明</span>
- <br />
- <span>来访人员进校需申请报备,不得携带管制刀具、危化品、毒品等违法危险品进校,并如实声明所携带物品清单及合法性,若未如实告知,来访者和受访者需承担相关法律责任。</span>
- </p>
- <input type="hidden" id="sxry_num" name="sxry_num" value="" />
- <input type="hidden" name="lfsxry">
- <input type="hidden" name="jfryid" value="${lf.jfryid}">
- </form>
- </div>
- <div class="mobileBottom-div hidden">
- <div class="mobileBottom-down-div">
- <button class="mobileBottom-button" onclick="closePage()">取消</button>
- <button class="mobileBottom-button" onclick="submitForm()">
- 保存并提交
- </button>
- </div>
- </div>
- </body>
- <script type="text/javascript" src="/ss/validation/validation.js"></script>
- <script type="text/javascript" src="/ss/js/licensePlateNumInp.js"></script>
- <script type="text/javascript" src="/ss/validator/commonValidator.js"></script>
- <script>
- let carNumberInstances = {}; // 以随行人员编号为键,存储每个随行人员的车牌号实例数组
- let uniqueVisitorIdCounter = 1; // 用于生成唯一的随行人员 ID
- let visitorCount = 0; // 当前有效随行人员计数
- let sxry_num = [];
- let initSelectData; // 用于存储初始的 select 数据
- // 校验器
- var wdVm = window.wdVm || new ValidationManager();
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
- // 通用的日期格式化函数
- function formatDateTime(date) {
- return (
- date.getFullYear() +
- "-" +
- ("0" + (date.getMonth() + 1)).slice(-2) +
- "-" +
- ("0" + date.getDate()).slice(-2)
- //" " +
- // ("0" + date.getHours()).slice(-2) +
- // ":" +
- // ("0" + date.getMinutes()).slice(-2) +
- // ":" +
- // ("0" + date.getSeconds()).slice(-2)
- );
- }
-
- // 带时间的日期格式化函数
- function formatDateTimeWithTime(date, withTime) {
- const datePart = date.getFullYear() +
- "-" +
- ("0" + (date.getMonth() + 1)).slice(-2) +
- "-" +
- ("0" + date.getDate()).slice(-2);
-
- if (withTime) {
- return datePart + " " +
- ("0" + date.getHours()).slice(-2) +
- ":" +
- ("0" + date.getMinutes()).slice(-2) +
- ":" +
- ("0" + date.getSeconds()).slice(-2);
- }
-
- return datePart;
- }
- // 创建分隔线和错误提示的函数
- function createValidation(container) {
- const parent = container.parentNode;
- // 生成分隔线
- let lineSpan = document.getElementById(container.id + 'Span');
- if (!lineSpan) {
- lineSpan = document.createElement('span'); // 创建线的 span
- lineSpan.id = container.id + 'Span'; // 使用指定格式的 id
- lineSpan.className = 'border-input-error vLine-leftWarning'; // 设置样式
- lineSpan.style.display = 'block'; // 初始状态隐藏分隔线
- parent.insertBefore(lineSpan, container.nextSibling); // 插入到 container 之后
- }
- // 生成错误提示
- let errorDiv = document.getElementById(container.id + 'ErrorDiv');
- if (!errorDiv) {
- errorDiv = document.createElement('div'); // 创建错误提示的 div
- errorDiv.id = container.id + 'ErrorDiv'; // 使用指定格式的 id
- errorDiv.className = 'error-message'; // 设置样式
- errorDiv.style.position = 'absolute';
- errorDiv.style.left = '0px';
- errorDiv.style.bottom = '0px';
- errorDiv.style.color = 'red';
- errorDiv.style.fontSize = '12px';
- errorDiv.style.width = '100%';
- errorDiv.style.textAlign = 'right';
- errorDiv.style.lineHeight = '18px';
- errorDiv.style.height = '18px';
- errorDiv.style.display = 'none'; // 初始状态隐藏
- parent.insertBefore(errorDiv, lineSpan ? lineSpan.nextSibling : container.nextSibling); // 插入到分隔线之后
- }
- }
- // 移除校验元素的函数
- function removeValidation(container) {
- const lineSpan = document.getElementById(container.id + 'Span');
- const errorDiv = document.getElementById(container.id + 'ErrorDiv');
- if (lineSpan) {
- lineSpan.remove(); // 删除分隔线
- }
- if (errorDiv) {
- errorDiv.remove(); // 删除错误提示
- }
- }
- // 更新错误提示信息的函数
- function updateMsg(container, msg) {
- let errorDiv = document.getElementById(container.id + 'ErrorDiv');
- // 如果未找到 errorDiv,先调用 createValidation 创建它
- if (!errorDiv) {
- createValidation(container);
- errorDiv = document.getElementById(container.id + 'ErrorDiv');
- }
- if (errorDiv) {
- errorDiv.textContent = msg; // 设置错误提示信息
- errorDiv.style.display = 'block'; // 显示错误提示
- }
- }
-
- let isValidStartTime = true;
- // let isValidEndTime = true;
- // 动态设置开始和结束时间
- function setInitialTime() {
- const yykssj = document.querySelector('#yykssj');
- const yyjssj = document.querySelector('#yyjssj');
- // 初始化开始时间
- var now = new Date();
- var oneHourLater = formatDateTime(new Date(now.getTime() + 3600 * 1000));
-
- // 设置结束时间为开始时间的 23:59:59
- var endDate = new Date(now.getTime() + 3600 * 1000);
- var endDateFormatted = endDate + ' 23:59:59';
- console.log('初始化的结束时间:',endDateFormatted)
- $("#yykssj")
- .mobiscroll()
- .datetime({
- display: "modal", // 弹出框显示
- dateFormat: "yy-mm-dd", // 日期格式:年-月-日
- dateOrder: "yyMMdd", // 设置为年-月-日顺序
- timeFormat: "", // 不显示时间选择器
- timeWheels: "", // 不显示时间滚轮
- lang: "zh", // 设置为中文
- onSelect:function(event,inst){
- console.log(event)
- // 解析 event 为 Date 对象
- // const selectedDate = new Date(event);
- // 设置时分秒为0:0:0
- // selectedDate.setHours(0, 0, 0, 0);
- removeValidation(yykssj);
- // isValidStartTime = true;
- yykssj.value = event;
- const endDate = event + ' 23:59:59';
- yyjssj.value = endDate;
- // 获取当前时间
- // const currentDate = new Date();
- // currentDate.setHours(0,0,0,0);
- // if (selectedDate.getTime() >= currentDate.getTime()) {
- // console.log('selectedDate:',selectedDate.getTime())
- // console.log('currentDate:',currentDate.getTime())
- // console.log('selectedDate.getTime() >= currentDate.getTime():',selectedDate.getTime() >= currentDate.getTime())
- // removeValidation(yykssj);
- // isValidStartTime = true;
- // // 获取结束时间
- // const endTime = new Date(yyjssj.value);
- // // 设置开始时间的值为不带时间的日期格式,用于显示
- // yykssj.value = formatDateTime(selectedDate);
-
- // // 设置结束时间为当天的 23:59:59
- // const endDate = selectedDate + ' 23:59:59';
- // yyjssj.value = endDate;
- // } else {
- // updateMsg(yykssj, "预约日期不能早于当前日期");
- // // yykssj.value = formatDateTime(new Date(now.getTime() + 3600 * 1000));
- // isValidStartTime = false;
- // }
- }
- }).val(oneHourLater);
- // 设置开始时间的显示格式(不带时间)
- yykssj.value = oneHourLater;
- // 设置结束时间的初始值为开始时间的 23:59:59
- yyjssj.value = endDateFormatted;
- }
- function closePage() {
- // 定义关闭页面的函数
- function closeWindow() {
- if (typeof WeixinJSBridge == "undefined") {
- // 监听WeixinJSBridgeReady事件
- document.addEventListener('WeixinJSBridgeReady', function () {
- WeixinJSBridge.call('closeWindow');
- }, false);
- } else {
- // 如果是微信浏览器,直接调用
- WeixinJSBridge.call('closeWindow');
- }
- }
- // 调用关闭页面函数
- closeWindow();
-
- // 如果不是微信浏览器,尝试使用window.close()关闭
- if (!/MicroMessenger/i.test(navigator.userAgent)) {
- window.close();
- window.history.back();
-
- }
- }
- var submitCount = 0;
- // 提交表单
- function submitForm() {
- // 处理开始时间,添加 00:00:00
- if(submitCount){
- alert('请勿重复提交')
- return false
- }
- const form = $("#myForm");
- const lflbm = $("input[name='lflbm']").val();
- let valid = false;
- const jfbmid = $("input[name='jfbmid']").val();
- const jfxiaoqid = $("input[name='jfxiaoqid']").val();
- const jfryid = $("input[name='jfryid']").val();
- const xbm = $("input[name='xbm']").val();
- const yykssj = document.querySelector('#yykssj');
- const yyjssj = document.querySelector('#yyjssj');
- if (!form[0].checkOnly(false)) { // 获取原生DOM元素并调用checkOnly
- // alert('原来的校验器,checkOnly不通过')
- valid = true;
- }
- // if (yykssj && yykssj.value) {
- // const newYykssj = yykssj.value + ' 00:00:00';
- // console.log('提交的时候一开始获取到的newYykssj:',newYykssj)
- // yykssj.value = newYykssj;
- // }
- //
-
- // 校验时间是否有效
- if (!isValidStartTime) {
- alert("预约日期不能早于当前日期")
- valid = true;
- }
- if (xbm === '') {
- valid = true;
- }
- if(((lflbm!='61')&&(lflbm!='161')&&(lflbm!='71'))&&jfryid === '' ) {
- valid = true;
- alert('未查询到该受访人信息,请重新输入!');
- }
- // 校验校区
- if (jfxiaoqid === '' ) {
- valid = true;
- }
-
- // 如果随行人员不为0
- if (sxry_num.length > 0) {
- $("input[name='sxry_num']").val(sxry_num.join(','));
- // 用来存储所有对象
- var dataArray = [];
- // 遍历数组
- sxry_num.forEach(function(num) {
- if($('input[name="xbm_' + num + '"]').val() === ''){
- valid = true;
- alert("请选择随行人员"+ num +"的性别")
- return false;
- }
- // 获取每个字段的值,如果为空则赋值为 ""
- var entry = {
- xbm: $('input[name="xbm_' + num + '"]').val() || "",
- sfzjlbm: $('input[name="sfzjlbm_' + num + '"]').val() || "",
- xm: $('input[name="xm_' + num + '"]').val() || "",
- sfzh: $('input[name="sfzh_' + num + '"]').val() || "",
- grdh: $('input[name="grdh_' + num + '"]').val() || "",
- clh: $('input[name="clh_' + num + '"]').val() || "", // 车辆号
- // syfjid: $('input[name="syfjid_' + num + '"]').val() || ""
- };
-
- // 将每个对象添加到数组中
- dataArray.push(entry);
- });
- $('input[name="lfsxry"]').val(JSON.stringify(dataArray));
- }
- if (valid){
- console.log('提交的校验不通过')
- return;
- }
- if (yykssj && yykssj.value) {
- const newYykssj = yykssj.value + ' 00:00:00';
- console.log('yykssj.value:',newYykssj)
- yykssj.value = newYykssj;
- }
- yyjssj.value = yykssj.value.replace(' 00:00:00', ' 23:59:59');
- console.log(yykssj.value,yyjssj.value)
- submitCount = 1;
- // alert('预约结束时间yyjssj:'+yyjssj.value);
- // return ;
- form.submit();
- }
- // 生成随行人员
- function addVisitor(visitorId, visitorNumber, title) {
- // console.log(`当前访客id是` + visitorId, `当前访客编号是` + visitorNumber);
- const inputNum = (visitorId === 1 ? '' : '_' + (visitorId - 1)) // 提交给后端的后缀,如果是第一个证明是访客 不用加后缀;第二个开始变随行人员,加后缀1开始
- // console.log(`当前随行人员编号是` + (!inputNum ? ':访客不需要编号' : '_' + (visitorId - 1)));
- carNumberInstances[visitorId] = []; // 初始化新随行人员的车牌号实例数组
- let newFormHtml = `
- <div class="mobileForm-container" data-visitor-id="` + visitorId + `">
- <div class="mobileForm-title">
- <span>` + (title ? title : '随行人员' + visitorNumber) + `</span>
- <span class="mobileDelete-button"></span>
- </div>
- <table>
-
- <tr>
- <th>姓名</th>
- <td><input name="xm`+ inputNum + `" value="" type="text"/></td>
- </tr>
- <tr>
- <th>性别</th>
- <td>
- <div class="ss-select-container" id="xbm`+ inputNum + `" value="">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- <div data-value="1">男</div>
- <div data-value="2">女</div>
- </div>
- <input type="hidden" name="xbm`+ inputNum + `" >
- </div>
- <%--
- <input name="xbmName" style="width:90px;" type="text" />
- <ss:objp name='xbm' inp='false' cb='xb'/>
- --%>
- </td>
- </tr>
-
- <tr>
- <th>证件类别</th>
- <td>
- <div class="ss-select-container" id="sfzjlbm`+ inputNum + `" value="1">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- <div data-value="1">身份证</div>
- </div>
- <input type="hidden" name="sfzjlbm`+ inputNum + `" >
- </div>
- </td>
- </tr>
- <tr>
- <th>证件号</th>
- <td><input name="sfzh`+ inputNum + `" value="" type="text"/></td>
- </tr>
- <tr>
- <th>个人电话</th>
- <td><input name="grdh`+ inputNum + `" type="text"/></td>
- </tr>`
- +
- (visitorNumber === 0 ? `<tr><th>附件</th><td><div id="sywjlp"></div></td></tr>`:``)
- +
- `
- <tr>
- <td colspan="2" style="text-align: center">
- 车辆号
- <!-- <span class="mobileAdd-button carNumberAdd"></span> -->
- </td>
- </tr>
- <tr>
- <td colspan="2" class="carNumberTd">
- <div>
- <div id="carNumberInput` + visitorId + `-1"></div>
- <span class="mobileDelete-button carNumberDelete" style="visibility: hidden"></span>
- </div>
- </td>
- </tr>
- </table>
- </div>
- `;
- // 如果是第一个随行人员,访客
- if (visitorNumber === 0) {
- newFormHtml = `
- <div class="mobileForm-container" data-visitor-id="` + visitorId + `">
- <div class="mobileForm-title">
- <span>` + (title ? title : '随行人员' + visitorNumber) + `</span>
- <span class="mobileDelete-button"></span>
- </div>
- <table>
-
- <tr>
- <th>姓名</th>
- <td><input name="xm" value="${lf.xm}" type="text"/></td>
- </tr>
- <tr>
- <th>性别</th>
- <td>
- <div class="ss-select-container" id="xbm" value="${lf.xbm}">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- <div data-value="1">男</div>
- <div data-value="2">女</div>
- </div>
- <input type="hidden" name="xbm" >
- </div>
- <%--
- <input name="xbmName" style="width:90px;" type="text" />
- <ss:objp name='xbm' inp='false' cb='xb'/>
- --%>
- </td>
- </tr>
-
- <tr>
- <th>证件类别</th>
- <td>
- <div class="ss-select-container" id="sfzjlbm" value="${lf.sfzjlbm}">
- <div class="ss-select">请选择</div>
- <div class="ss-options">
- <div data-value="1">身份证</div>
- </div>
- <input type="hidden" name="sfzjlbm" >
- </div>
- </td>
- </tr>
- <tr>
- <th>证件号</th>
- <td><input name="sfzh" value="${lf.sfzh}" type="text"/></td>
- </tr>
- <tr>
- <th>个人电话</th>
- <td><input name="grdh" value="${lf.grdh}" type="text"/></td>
- </tr>`
- +
- (visitorNumber === 0 ? `<tr><th>附件</th><td><div id="sywjlp"></div></td></tr>`:``)
- +
- `
- <tr>
- <td colspan="2" style="text-align: center">
- 车辆号
- <!-- <span class="mobileAdd-button carNumberAdd"></span> -->
- </td>
- </tr>
- <tr>
- <td colspan="2" class="carNumberTd">
- <div>
- <div id="carNumberInput1-1"></div>
- <span class="mobileDelete-button carNumberDelete" style="visibility: hidden"></span>
- </div>
- </td>
- </tr>
- </table>
- </div>
- `;
- newFormHtml = newFormHtml.replace(
- 'class="mobileDelete-button"',
- 'class="mobileDelete-button" style="visibility: hidden"'
- );
- $(".mobileForm .mobileForm-title").last().before(newFormHtml);
- const uploadUrl = '<ss:serv name="lf_uploadFile"/>';
- const loadUrl = "<ss:serv name='lf_loadFile'/>";
- // 选择并上传文件,并生成预览
- mobileFileUpload('sywjlp', {
- uploadUrl,
- loadUrl,
- maxSize: 1, //
- acceptedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'pdf','xlsx', 'docx', 'pptx', 'doc', 'ppt', 'xls','zip', 'rar', '7z'], // 限制文件类型
- maxFileSize: 20 * 1024 * 1024 // 单个文件最大为 5 MB
- });
- } else {
- // 新增随行人员时,追加到最后一个随行人员后面
- $(".mobileForm-container").last().after(newFormHtml);
- }
- // 初始化对应的随行人员的下拉信息
- const xbm = initSSSelect(`#xbm` + inputNum, initSelectData.XB, { text: 'mc', value: 'xbm' }, { enable: true });
- const sfzjlbm = initSSSelect('#sfzjlbm' + inputNum, initSelectData.SFZJLB, { text: 'mc', value: 'sfzjlbm' }, { enable: true });
- // 初始化对应的随行人员的校验
- wdVm.add("wd.commonValidator.notNull", [`xm` + inputNum], { msgPrfx: "姓名" }, 1);
- wdVm.add('wd.commonValidator.notNull', [`sfzjlbm` + inputNum], { 'msgPrfx': '身份证件类别' }, 1);
- // wdVm.add('wd.commonValidator.idCard',[`sfzh`+ inputNum],{'relField':`sfzh`+ inputNum+`,`+`sfzjlbm`+ inputNum,'msgPrfx':'身份证号'},1);
- wdVm.add("wd.commonValidator.idCard", ["sfzh" + inputNum], { msgPrfx: "证件号", notBlank: true, sfzjlbmName: `sfzjlbm` + inputNum }, 1);
- wdVm.add("wd.commonValidator.int", [`grdh` + inputNum], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- let carInput;
- // 处理第一个访客
- if (visitorId === 1) {
- carInput = new CarNumberInput('carNumberInput' + visitorId + '-1', 'clh', '粤')
- xbm.setValue('${lf.xbm}')
- sfzjlbm.setValue('${lf.sfzjlbm}')
- } else {
- carInput = new CarNumberInput('carNumberInput' + visitorId + '-1', 'clh' + inputNum, '粤')
- }
- carNumberInstances[visitorId].push(carInput);
-
- }
- /**
- * 初始化自定义下拉框,支持设置默认值、回调函数、自定义选项数组和校验功能
- * @param {string} containerSelector - 下拉框容器的CSS选择器
- * @param {Array} optionsArray - 包含选项的数组对象 [{...}](可选)
- * @param {object} mapping - 映射对象,定义选项中用于显示文本和作为值的字段名 {text: '字段名', value: '字段名'}(可选)
- * @param {object} validation - 校验对象,包含校验设置 {enable: true/false, message: '报错信息'}(可选)
- * @param {function|null} callback - 选中后的回调函数(可选)
- */
- function initSSSelect(containerSelector, optionsArray = [], mapping = { text: 'n', value: 'v' }, validation = { enable: false, message: '' }, callback = null) {
-
- const container = document.querySelector(containerSelector); // 获取容器
- if (!container) {
- console.error('容器未找到');
- return;
- }
- const ssSelect = container.querySelector('.ss-select'); // 获取显示区域
- const optionsContainer = container.querySelector('.ss-options'); // 获取选项容器
- const hiddenInput = container.querySelector('input[type="hidden"]'); // 隐藏的输入框
- // 获取容器的父级元素,以便插入错误提示
- const parent = container.parentNode;
- // 创建并插入分隔线 span
- let lineSpan = document.getElementById(containerSelector.replace(/[#.]/g, '') + 'Span');
- if (!lineSpan) {
- lineSpan = document.createElement('span'); // 创建线的 span
- lineSpan.id = containerSelector.replace(/[#.]/g, '') + 'Span'; // 使用指定格式的 id
- lineSpan.className = 'border-input-error vLine-leftWarning'; // 设置样式
- lineSpan.style.display = 'none'; // 显示分隔线
- parent.insertBefore(lineSpan, container.nextSibling); // 插入到 container 之后
- }
- if (validation.enable) {
- lineSpan.style.display = 'block'; // 显示分隔线
- }
- // 创建并插入错误提示的 div
- let errorDiv = document.getElementById(containerSelector.replace(/[#.]/g, '') + 'ErrorDiv');
- if (!errorDiv) {
- errorDiv = document.createElement('div'); // 创建错误提示的 div
- errorDiv.id = containerSelector.replace(/[#.]/g, '') + 'ErrorDiv'; // 使用指定格式的 id
- errorDiv.className = 'error-message'; // 设置样式
- errorDiv.style.position = 'absolute';
- errorDiv.style.left = '0px';
- errorDiv.style.bottom = '0px';
- errorDiv.style.color = 'red';
- errorDiv.style.fontSize = '12px';
- errorDiv.style.width = '100%';
- errorDiv.style.textAlign = 'right';
- errorDiv.style.lineHeight = '18px';
- errorDiv.style.height = '18px';
- errorDiv.style.display = 'none'; // 初始状态隐藏
- parent.insertBefore(errorDiv, lineSpan ? lineSpan.nextSibling : container.nextSibling); // 插入到分隔线之后
- }
-
-
- // 如果传入了选项数组,动态生成选项 DOM
- if (optionsArray.length > 0) {
- optionsContainer.innerHTML = ''; // 清空原有选项
- optionsArray.forEach(option => {
- const optionDiv = document.createElement('div');
- optionDiv.setAttribute('data-value', option[mapping.value]); // 使用映射的 value 作为选项值
- optionDiv.textContent = option[mapping.text]; // 使用映射的 text 作为显示文本
- optionsContainer.appendChild(optionDiv);
- });
- }else {
- optionsContainer.innerHTML = '<div class="padding">无选项</div>';
- }
- // 点击下拉框时,打开或关闭选项列表
- ssSelect.addEventListener('click', function (event) {
- // 关闭其他所有下拉框
- document.querySelectorAll('.ss-select-container').forEach(cont => {
- if (cont !== container) {
- cont.classList.remove('open');
- }
- });
- // 切换当前下拉框的状态
- container.classList.add('open');
- event.stopPropagation(); // 阻止事件冒泡,防止点击下拉框时触发 document 的点击事件
- // 如果启用了校验且没有选中内容,则显示错误提示
- if (validation.enable && (!hiddenInput.value || hiddenInput.value === "")) {
- errorDiv.textContent = validation.message || ''; // 设置错误提示文字
- errorDiv.style.display = 'block'; // 显示错误提示
- }
- });
- // 处理选项点击事件
- optionsContainer.querySelectorAll('div').forEach(option => {
- option.addEventListener('click', function () {
- const value = this.getAttribute('data-value'); // 获取选项的值
- const text = this.textContent; // 获取选项的文本
- // 设置下拉框显示文本和隐藏输入框的值
- ssSelect.textContent = text;
- hiddenInput.value = value;
- // 移除所有其他选项的选中状态
- optionsContainer.querySelectorAll('div').forEach(opt => opt.classList.remove('selected'));
- // 为当前选中的选项添加选中状态
- this.classList.add('selected');
- // 关闭下拉框
- container.classList.remove('open');
- // 隐藏错误提示
- errorDiv.style.display = 'none';
- // 隐藏分隔线
- lineSpan.style.display = 'none';
- // parent.style.borderBottom = 'none';
- // 如果有回调函数,调用并传递选中的值
- if (callback && typeof callback === 'function') {
- callback(value);
- }
- });
- });
- // 从容器的 value 属性获取默认值
- const defaultValue = container.getAttribute('value');
- // 设置默认选中值
- if (defaultValue !== null && defaultValue !== "") {
- const defaultOption = optionsContainer.querySelector(`div[data-value="`+defaultValue+`"]`);
- if (defaultOption) {
- console.log('defaultOption',defaultOption.textContent)
- ssSelect.textContent = defaultOption.textContent; // 设置下拉框的默认文本
- hiddenInput.value = defaultOption.getAttribute('data-value'); // 设置隐藏输入框的默认值
- defaultOption.classList.add('selected'); // 设置选中状态
- // 隐藏错误提示
- errorDiv.style.display = 'none';
- // 隐藏分隔线
- lineSpan.style.display = 'none';
-
- // 如果有回调函数,执行回调
- if (callback && typeof callback === 'function') {
- callback(defaultValue);
- }
- }
- }
- // 点击其他地方关闭所有下拉框
- document.addEventListener('click', function () {
- container.classList.remove('open');
- // 如果启用了校验功能且没有选中项,显示错误提示
- if (validation.enable && (!hiddenInput.value || hiddenInput.value === "")) {
- errorDiv.textContent = validation.message; // 设置错误提示文字
- errorDiv.style.display = 'block'; // 显示校验错误信息
- // parent.style.borderBottom = '1px solid red';
- }
- });
- // 防止点击容器内部时触发 document 的点击事件
- container.addEventListener('click', function (event) {
- event.stopPropagation();
- });
- // 如果启用了校验功能且没有默认选中项,显示错误提示
- // if (validation.enable && (!defaultValue || defaultValue === "")) {
- // errorDiv.textContent = validation.message; // 设置错误提示文字
- // errorDiv.style.display = 'block'; // 显示校验错误信息
- // }
- return {
- setValue: function(value) {
- if (!value) {
- // 恢复到初始状态
- ssSelect.textContent = '请选择';
- hiddenInput.value = '';
-
- // 移除所有选中状态
- optionsContainer.querySelectorAll('div').forEach(opt =>
- opt.classList.remove('selected')
- );
-
- // 如果启用了校验,显示错误提示和分隔线
- if (validation.enable) {
- errorDiv.textContent = validation.message || '';
- errorDiv.style.display = 'block';
- lineSpan.style.display = 'block';
- }
-
- return true;
- }
- const option = optionsContainer.querySelector(`div[data-value="${value}"]`);
- if (option) {
- // 更新显示文本和隐藏输入框的值
- ssSelect.textContent = option.textContent;
- hiddenInput.value = value;
-
- // 更新选中状态
- optionsContainer.querySelectorAll('div').forEach(opt => opt.classList.remove('selected'));
- option.classList.add('selected');
-
- // 隐藏错误提示和分隔线
- errorDiv.style.display = 'none';
- lineSpan.style.display = 'none';
-
- // 如果有回调函数,执行回调
- if (callback && typeof callback === 'function') {
- callback(value);
- }
-
- return true;
- }
- return false;
- }
- };
- }
- // 清除所有表单部分的显示
- function hideAllSections() {
- // 隐藏所有部分
- $('#formSection2, #formSection2 tr').addClass('hidden');
- $('#formSection3, #formSection3 tr').addClass('hidden');
-
- // 清第二部分校验
- wdVm.remove("wd.commonValidator.notNull", ["jfrxm"]);
- wdVm.remove("wd.commonValidator.int", ["jfrgrdh"]);
- wdVm.remove("wd.commonValidator.notNull", ["zy"]);
- wdVm.remove("wd.commonValidator.notNull", ["bj"]);
- wdVm.remove("wd.commonValidator.int", ["rs"]);
- wdVm.remove("wd.commonValidator.notNull", ["dwmc"]);
- wdVm.remove("wd.commonValidator.notNull", ["sy"]);
- }
- /**
- * 处理 "探访学生" 的表单显示
- * 受访人信息显示:姓名、专业、班级、个人电话
- * 来访信息显示:人数、预约开始时间、预约结束时间
- */
- function handleStudentVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-zy, #tr-bj, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- // 加第二部分校验
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.notNull", ["zy"], { msgPrfx: "专业" }, 1);
- wdVm.add("wd.commonValidator.notNull", ["bj"], { msgPrfx: "班级" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden');
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
- }
- /**
- * 处理 "探访教职工" 的表单显示
- * 受访人信息显示:姓名、个人电话
- * 来访信息显示:人数、预约开始时间、预约结束时间
- */
- function handleStaffVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden');
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
-
- }
- /**
- * 处理 "物流配送" 的表单显示
- * 受访人信息显示:姓名、个人电话
- * 来访信息显示:人数、预约开始时间、预约结束时间
- */
- function handleLogisticsVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden');
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
-
- }
- /**
- * 处理 "公务" 的表单显示
- * 受访人信息显示:姓名、个人电话
- * 来访信息显示:单位、人数、预约开始时间、预约结束时间
- */
- function handleOfficialVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden'); // 显示表单部分3
- $('#tr-dwmc, #tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示公务相关字段
- wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
-
- }
- /**
- * 处理 "工作学习" 的表单显示
- * 受访人信息显示:姓名、个人电话
- * 来访信息显示:人数、预约开始时间、预约结束时间
- */
- function handleWorkStudyVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-dwmc,#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden');
- wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
-
- }
- /**
- * 处理 "其他" 的表单显示
- * 受访人信息显示:姓名、个人电话
- * 来访信息显示:人数、预约开始时间、预约结束时间
- */
- function handleOtherVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-jfxiaoqid,#tr-rs, #tr-yykssj,#tr-sy, #tr-dwmc').removeClass('hidden');
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.notNull", ["sy"], { msgPrfx: "事由", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
-
- }
- /**
- * 处理 "酒店餐饮" 的表单显示
- * 受访人信息显示:无
- * 来访信息显示:酒店名【下拉】、人数、预约开始时间、预约结束时间
- */
- function handleHotelVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection3').removeClass('hidden');
- $('#tr-jfbmid, #tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示酒店相关字段
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
- }
-
- /**
- * 处理 "培训会议" 的表单显示
- * 受访人信息显示:无
- * 来访信息显示:名称【下拉】、人数、预约开始时间、预约结束时间
- */
- function handleTrainingVisit() {
- hideAllSections(); // 先隐藏所有部分
- $('#formSection2').removeClass('hidden'); // 显示表单部分2
- $('#tr-jfrxm, #tr-jfrgrdh').removeClass('hidden'); // 显示相关字段
- wdVm.add("wd.commonValidator.notNull", ["jfrxm"], { msgPrfx: "受访人姓名" }, 1);
- wdVm.add("wd.commonValidator.int", ["jfrgrdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- $('#formSection3').removeClass('hidden');
- $('#tr-dwmc,#tr-jfxiaoqid,#tr-rs, #tr-yykssj').removeClass('hidden'); // 显示会议相关字段
- wdVm.add("wd.commonValidator.notNull", ["dwmc"], { msgPrfx: "单位名称", notBlank: true }, 1);
- wdVm.add("wd.commonValidator.int", ["rs"], { minLen: 1, maxLen: 10000, msgPrfx: "人数", notBlank: true }, 1);
- }
- let firstVisitor = true;
- let xqInstance ;
- let jfbmInstance ;
- // 选择类别后
- function selectLflbm(value) {
- // 初始化开始事件结束时间
- setInitialTime()
- // 清空已输入的数据
- function clearInput() {
- console.log('清除已输入的数据')
- $('input[name="jfrxm"]').val('')
- $('input[name="jfrgrdh"]').val('')
- $('input[name="jfryid"]').val('')
- $('input[name="jfxiaoqid"]').val('')
- $('#jfxiaoqid .ss-select').text('请选择校区');
- $("input[name='jfbmid']").val('')
-
- $('#jfbmid .ss-options div').remove();
- $('input[name="dwmc"]').val('')
-
- }
- clearInput()
-
- if (firstVisitor) {
- xqInstance = initSSSelect('#jfxiaoqid', initSelectData.XIAOQ, { text: 'mc', value: 'xiaoqid' }, { enable: true }, selectXq);// 初始化校区下拉
- console.log(xqInstance)
-
- // 初始化第一个随行人员
- addVisitor(uniqueVisitorIdCounter, visitorCount, '访客');
-
- const jfrxm = $("input[name='jfrxm']").val('${lf.jfrxm}')
- const jfrgrdh = $("input[name='jfrgrdh']").val('${lf.jfrgrdh}')
- const jfryid = $("input[name='jfryid']").val('${lf.jfryid}')
- const dwmc = $("input[name='dwmc']").val('${lf.dwmc}')
-
- // const xbm = $("input[name='xbm']").val(${lf.xbm});
- // const sfzjlbm = $("input[name='sfzjlbm']").val(${lf.sfzjlbm});
- const xm = $("input[name='xm']").val('${lf.xm}');
- const sfzh = $("input[name='sfzh']").val('${lf.sfzh}');
- const grdh = $("input[name='grdh']").val('${lf.grdh}');
-
- carNumberInstances['1'][0].setCarNumber('${lf.clh}')
-
- // wdVm.add("wd.commonValidator.notNull", ["xm"], { msgPrfx: "姓名" }, 1);
- // wdVm.add("wd.commonValidator.idCard", ["sfzh"], { msgPrfx: "证件号", notBlank: true, chkCsrq: false, chkXb: false, chkCsdq: false }, 1);
- // wdVm.add("wd.commonValidator.int", ["grdh"], { minLen: 11, maxLen: 11, msgPrfx: "个人电话", notBlank: true }, 1);
- firstVisitor = false;
- }else{
- xqInstance.setValue()
- $('#jfbmid .ss-select').text('请选择酒店');
- }
- switch (value) {
- case '1': // 探访学生
- handleStudentVisit();
- break;
- case '5': // 探访教职工
- handleStaffVisit();
- break;
- case '11': // 公务
- handleOfficialVisit();
- break;
- case '21': // 培训会议
- handleTrainingVisit();
- break;
- case '31': // 工作学习
- handleWorkStudyVisit();
- break;
- case '51': // 物流配送
- handleLogisticsVisit();
- break;
- case '61': // 酒店餐饮
- handleHotelVisit();
- $('#tr-jfbmid th').text('酒店名');
- break;
- case '71': // 场地预约
- handleHotelVisit();
- $('#tr-jfbmid th').text('场地');
- break;
- case '91': // 其他
- handleOtherVisit();
- break;
- case '99': // 测试
- handleOfficialVisit();
- break;
- }
- // 选择后出现标题和底部按钮
- $('.mobileForm-title,.mobileBottom-div').removeClass('hidden');
- }
- function initBm(value){
- const lflbm = $("input[name='lflbm']").val();
- // 过滤得到 xiaoqid 等于传入值的酒店对象数组
- let filteredData ;
- if(lflbm==61){filteredData = initSelectData.JD.filter(hotel => hotel.xiaoqid == value);}
- if(lflbm==71){filteredData = initSelectData.CGHD.filter(hotel => hotel.xiaoqid == value);}
- // 打印过滤后的数据
- jfbmInstance = initSSSelect('#jfbmid', filteredData, { text: 'mc', value: 'bmid' }, { enable: true });// 初始化酒店下拉
- if('${lf.jfbmid}' == ''){
- $('#jfbmid .ss-select').text('请选择');
- console.log(jfbmInstance)
- jfbmInstance.setValue()
- }
- }
- // 选择了校区
- function selectXq(value) {
- const lflbm = $("input[name='lflbm']").val();
- //如果是酒店餐饮,则根据校区初始选择酒店
-
- initBm(value)
-
-
- }
- $(document).ready(function () {
- const warnMsg = '${warnMsg}';
- if (warnMsg) {
- alert(warnMsg);
- }
- $.ajax({
- type: 'post',
- async: false,
- url: "<ss:serv name='lf_initExtLfInp' parm='{"param1":"abc123"}'/>",
- data: { param2: 'def456' },
- success: function (result) {
- initSelectData = result;
- }
- });
- // 初始化自定义下拉框,传入回调函数
- initSSSelect('#lflbm', initSelectData.LFLB, { text: 'mc', value: 'lflbm' }, { enable: true, message: '请选择来访类别!' }, selectLflbm);
-
- // 绑定新增随行人员事件
- $("#visitorAdd").click(function () {
- visitorCount++; // 增加有效随行人员计数
- // 把新增的随行人员ID存入数组
- sxry_num.push(uniqueVisitorIdCounter);
- console.log(sxry_num)
- uniqueVisitorIdCounter++; // 增加唯一随行人员 ID
- // 新增随行人员
- addVisitor(uniqueVisitorIdCounter, visitorCount, '');
- });
- // 点击删除随行人员
- $(document).on("click", ".mobileDelete-button", function () {
- const currentVisitorId = $(this)
- .closest(".mobileForm-container")
- .data("visitor-id");
- delete carNumberInstances[currentVisitorId];
- // 从随行人员数组中删除对应ID
- sxry_num = sxry_num.filter(item => item !== (currentVisitorId - 1));
- console.log(sxry_num)
- // 删除对应校验
- wdVm.remove("wd.commonValidator.notNull", [`xm_` + (currentVisitorId - 1)]);
- wdVm.remove("wd.commonValidator.idCard", [`sfzh_` + (currentVisitorId - 1)]);
- wdVm.remove("wd.commonValidator.int", [`grdh_` + (currentVisitorId - 1)]);
- wdVm.remove('wd.commonValidator.notNull', [`sfzjlbm_` + (currentVisitorId - 1)]);
- // 删除元素
- $(this).closest(".mobileForm-container").remove();
- updateVisitorNumbers();
- });
- function updateVisitorNumbers() {
- $(".mobileForm-container").each(function (index) {
- const newVisitorNumber = index;
- if (!index) {
- $(this).find(".mobileForm-title span:first-child").text("访客");
- } else {
- $(this).find(".mobileForm-title span:first-child").text("随行人员" + newVisitorNumber);
- }
- });
- visitorCount = $(".mobileForm-container").length - 1;//减1是为了不把访客算进去
- console.log("删除后当前访客数量", visitorCount)
- }
- // 新增车牌号
- $(document).on("click", ".carNumberAdd", function () {
- const currentVisitorId = $(this)
- .closest(".mobileForm-container")
- .data("visitor-id");
- console.log("当前随行人员的ID", currentVisitorId);
- if (!carNumberInstances[currentVisitorId]) {
- carNumberInstances[currentVisitorId] = []; // 初始化当前随行人员的实例数组
- }
- const currentCarNumberCounter =
- carNumberInstances[currentVisitorId].length + 1;
- const newId = `carNumberInput` + currentVisitorId + `-` + currentCarNumberCounter;
- console.log("主动点击随行人员的车牌号", newId);
- const newRow = `
- <tr class="carNumberRow">
- <td colspan="2" class="carNumberTd">
- <div>
- <div id="`+ newId + `"></div>
- <span class="mobileDelete-button carNumberDelete"></span>
- </div>
- </td>
- </tr>`;
- $(this).closest("table").find("tr").last().after(newRow);
- const carInput = new CarNumberInput(newId, 'clh', '粤');
- carNumberInstances[currentVisitorId].push(carInput);
- });
- // 删除车牌号行
- $(document).on("click", ".carNumberDelete", function () {
- const currentVisitorId = $(this)
- .closest(".mobileForm-container")
- .data("visitor-id");
- // 找到当前随行人员下的所有车牌号行(根据容器和行数查找)
- const carNumberRows = $(this)
- .closest(".mobileForm-container")
- .find("tr.carNumberRow");
- // 找到当前点击的删除按钮所在的tr元素
- const currentRow = $(this).closest("tr.carNumberRow");
- // 获取当前删除按钮对应的车牌号索引
- const rowIndex = carNumberRows.index(currentRow) + 1;
- // 确保carNumberRows和carNumberInstances数组的一致性
- if (rowIndex !== -1 && carNumberInstances[currentVisitorId]) {
- // 删除对应的实例
- carNumberInstances[currentVisitorId].splice(rowIndex, 1);
- console.log(
- `删除随行人员${currentVisitorId}里面的第${rowIndex}个车牌号后,实例数组:`,
- carNumberInstances[currentVisitorId]
- );
- }
- // 删除DOM中的对应行
- currentRow.remove();
- });
- });
- </script>
- <script>
- // 定义监听的逻辑,添加防抖处理
- var debounceTimer; // 用于防抖的定时器
- function checkInputsAndSendRequest() {
- // 清除之前的定时器,防止过于频繁地发起请求
- clearTimeout(debounceTimer);
- // 设置一个新的定时器,延迟执行校验
- debounceTimer = setTimeout(function() {
- var jfrxmValue = $('input[name="jfrxm"]').val(); // 获取 jfrxm 的值
- var jfrgrdhValue = $('input[name="jfrgrdh"]').val(); // 获取 jfrgrdh 的值
- var lflbm = $('input[name="lflbm"]').val(); // 获取 lflbm 的值
- // 如果两个输入框都有值,再发起 AJAX 请求
- if (jfrxmValue && jfrgrdhValue) {
- // 发起 AJAX 请求
- $.ajax({
- type: 'post',
- async: false,
- url: "<ss:serv name='lf_loadRyidByXmGrdh'/>",
- data: {
- xm: jfrxmValue,
- grdh: jfrgrdhValue,
- lflbm: lflbm
- },
- success: function(result) {
- // 如果有错误消息
- if (result && result.msg) {
- $('input[name="jfryid"]').val('');
- showErrorMessages(result.msg); // 显示错误信息
- } else if (result && result.ryid){
- $('input[name="jfryid"]').val(result.ryid);
- removeErrorMessages(); // 清除错误信息
- }
- <%--
- // 如果有结果,赋值
- if (result && result.length > 0) {
- $('input[name="jfryid"]').val(result[0].ryid);
- removeErrorMessages(); // 清除错误信息
- } else {
- $('input[name="jfryid"]').val('');
- showErrorMessages(); // 显示错误信息
- }
- --%>
- }
- });
- } else {
- $('input[name="jfryid"]').val('');
- // 如果输入不全,清除错误信息
- removeErrorMessages();
- }
- }, 500); // 防抖延迟500ms
- }
- // 显示错误信息
- function showErrorMessages(msg) {
- var jfrxmTd = $('input[name="jfrxm"]').closest('td');
- var jfrgrdhTd = $('input[name="jfrgrdh"]').closest('td');
- // 检查是否已经存在错误提示
- if (!jfrxmTd.find('.error-message').length) {
- jfrxmTd.css("border-bottom", "1px solid red")
- .append('<span class="border-input-error vLine-leftWarning jfrxmSpan"></span>')
- .append('<div class="error-message" style="position: absolute; left: 0px; bottom: 0px; color: red; font-size: 12px; width: 100%; text-align: right; line-height: 18px; height: 18px;">'+msg+'</div>');
- }
- if (!jfrgrdhTd.find('.error-message').length) {
- jfrgrdhTd.css("border-bottom", "1px solid red")
- .append('<span class="border-input-error vLine-leftWarning jfrgrdhSpan"></span>')
- .append('<div class="error-message" style="position: absolute; left: 0px; bottom: 0px; color: red; font-size: 12px; width: 100%; text-align: right; line-height: 18px; height: 18px;">'+msg+'</div>');
- }
- }
- // 清除错误信息
- function removeErrorMessages() {
- var jfrxmTd = $('input[name="jfrxm"]').closest('td');
- var jfrgrdhTd = $('input[name="jfrgrdh"]').closest('td');
- jfrxmTd.css("border-bottom", ""); // 恢复边框样式
- jfrgrdhTd.css("border-bottom", ""); // 恢复边框样式
- jfrxmTd.find('.error-message').remove(); // 移除所有错误提示
- jfrgrdhTd.find('.error-message').remove(); // 移除所有错误提示
- jfrxmTd.find('.jfrxmSpan').remove(); // 移除所有错误提示
- jfrgrdhTd.find('.jfrgrdhSpan').remove(); // 移除所有错误提示
- }
- // 监听两个 input 的输入事件
- $('input[name="jfrxm"], input[name="jfrgrdh"]').on('input blur', function() {
- checkInputsAndSendRequest();
- });
-
- if('${lf.jfrxm}' && '${lf.jfrgrdh}'){
- checkInputsAndSendRequest();
- }
- </script>
- <script>
- // 使用事件委托绑定 td 的点击事件
- $('table').on('click', 'td', function() {
- console.log("td clicked");
- focusTextInput($(this));
- });
- // 使用事件委托绑定 .error-message 的点击事件
- $('body').on('click', '.error-message', function() {
- focusTextInput($(this));
- });
- // 公共方法,用于查找并聚焦 input[type="text"]
- function focusTextInput($element) {
- const $input = $element.find('input[type="text"]').length
- ? $element.find('input[type="text"]')
- : $element.siblings('input[type="text"]');
- if ($input.length) {
- $input.focus();
- }
- }
- </script>
- </html>
|