window.onload = function () {
btnReconfirm()
workExClick()
signatureBtnClick()
chooseSalary()
submitBtnClick()
}
function btnReconfirm() {
// 选择要监听的目标节点
const targetNodes = document.getElementsByClassName('btn-wait-5s');
let countdownInterval;
// 创建一个观察器实例
const observer = new MutationObserver((mutationsList, observer) => {
// 遍历每个发生变化的节点
for (const mutation of mutationsList) {
if (mutation.attributeName === 'style') {
const display = mutation.target.style.display;
if (display === 'block') {
const childNode = mutation.target.querySelector('.btn-wait-5s')
// 执行操作
let countDown = 5; // 倒计时时间，以秒为单位
childNode.classList.add("disabled");// 禁用按钮
childNode.innerHTML = "提交(" + countDown + ")"; // 显示倒计时
clearInterval(countdownInterval);
countdownInterval = setInterval(function () {
countDown--;
childNode.innerHTML = "提交(" + countDown + ")";
if (countDown <= 0) {
clearInterval(countdownInterval);
enableButton(childNode, "提交");
}
}, 1000); // 每秒更新倒计时显示
} else {
clearInterval(countdownInterval);
}
}
}
});
// 配置观察选项
const config = {attributes: true, subtree: true};
// 将 HTMLCollection 对象转换为数组，并使用 forEach() 方法开始观察
Array.from(targetNodes).forEach(node => {
observer.observe(node.closest(".modal"), config);
});
}
function enableButton(button, originalText) {
button.classList.remove("disabled")// 启用按钮
button.innerHTML = originalText; // 还原按钮文本
}
function removeParent(element, str) {
let parentDiv = element.closest(str);
parentDiv.remove();
}
function addWorkPanel() {
let parent = document.getElementById('panel-work-ex');
// 创建新的表格行
const divElement = document.createElement('div');
divElement.classList.add("card");
divElement.style.border = "none";
divElement.style.fontSize = "1rem";
// 定义新行的 HTML 内容
divElement.innerHTML = `
删除
`;
// 将新行添加到表格的 tbody 中
parent.appendChild(divElement);
}
function workExClick() {
let check = document.getElementById('checkbox-work-ex');
let panelContainer = document.getElementById('work-ex');
if (panelContainer !== null && check !== null) {
let inputs = panelContainer.getElementsByTagName('input');
check.onclick = function () {
if (this.checked) {
for (let i = 0; i < inputs.length; i++) {
inputs[i].required = false;
}
panelContainer.hidden = true;
} else {
for (let i = 0; i < inputs.length; i++) {
inputs[i].required = true;
}
panelContainer.hidden = false;
}
}
}
}
function addStudyPanel() {
let parent = document.getElementById('panel-study-ex');
// 创建新的表格行
const divElement = document.createElement('div');
divElement.classList.add("card");
divElement.style.border = "none";
divElement.style.fontSize = "1rem";
// 定义新行的 HTML 内容
divElement.innerHTML = `
请选择学历类型
删除
`;
// 将新行添加到表格的 tbody 中
parent.appendChild(divElement);
}
function addFamilyPanel() {
let parent = document.getElementById('panel-family-ex');
// 创建新的表格行
const divElement = document.createElement('div');
divElement.classList.add("card");
divElement.style.border = "none";
divElement.style.fontSize = "1rem";
// 定义新行的 HTML 内容
divElement.innerHTML = `
删除
`;
// 将新行添加到表格的 tbody 中
parent.appendChild(divElement);
}
const canvas = document.getElementById('signatureCanvas');
let ctx;
if (canvas !== null) {
ctx = canvas.getContext('2d');
}
let lastPoint = null;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let currentPoints = [];
function canvasResize() {
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = 300;
ctx.strokeStyle = '#000';
ctx.lineWidth = 1.5;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
}
function signature() {
canvasResize();
clearCanvas();
// 添加事件监听
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
// 触摸事件支持
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);
canvas.addEventListener('touchstart', e => e.preventDefault());
}
function startDrawing(e) {
isDrawing = true;
const coords = getCoordinates(e);
lastX = coords.x;
lastY = coords.y;
currentPoints = [];
lastPoint = null;
}
function stopDrawing() {
isDrawing = false;
currentPoints = [];
lastPoint = null;
}
function draw(e) {
if (!isDrawing) return;
e.preventDefault();
const pos = getCoordinates(e);
currentPoints.push(pos);
if (currentPoints.length > 2) {
const point1 = currentPoints[currentPoints.length - 2];
const point2 = currentPoints[currentPoints.length - 1];
drawCurve(point1, point2);
}
}
function getCoordinates(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
if (e.touches && e.touches[0]) {
return {
x: (e.touches[0].clientX - rect.left) * scaleX,
y: (e.touches[0].clientY - rect.top) * scaleY
};
}
return {
x: (e.clientX - rect.left) * scaleX,
y: (e.clientY - rect.top) * scaleY
};
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
currentPoints = [];
lastPoint = null;
let input = document.getElementsByName('Signature');
input[0].value = "";
}
function saveSignature() {
const dataURL = canvas.toDataURL();
let input = document.getElementsByName('Signature');
input[0].value = dataURL;
let btn = document.getElementById('signature-btn');
let signatureFiled = document.getElementById('signature-filed');
let show = document.getElementById('signature-show');
btn.hidden = false;
signatureFiled.hidden = true;
btn.innerText = "重签"
show.hidden = false;
show.src = dataURL;
}
function drawCurve(p1, p2) {
ctx.beginPath();
if (!lastPoint) {
ctx.moveTo(p1.x, p1.y);
} else {
ctx.moveTo(lastPoint.x, lastPoint.y);
}
// 计算控制点
let controlPoint = {
x: (p1.x + p2.x) / 2,
y: (p1.y + p2.y) / 2
};
ctx.quadraticCurveTo(p1.x, p1.y, controlPoint.x, controlPoint.y);
ctx.stroke();
lastPoint = controlPoint;
}
function signatureBtnClick() {
let btn = document.getElementById('signature-btn');
let signatureFiled = document.getElementById('signature-filed');
let show = document.getElementById('signature-show');
if (btn !== null) {
btn.addEventListener('click', function () {
signatureFiled.hidden = false;
signature();
btn.hidden = true;
show.hidden = true;
})
}
}
function chooseSalary() {
let salary0 = document.getElementById('fixed-salary');
let salary1 = document.getElementById('float-salary1');
let salary2 = document.getElementById('float-salary2');
if (salary0 !== null) {
salary0.onchange = function () {
if (this.value === "") {
salary1.required = true
salary2.required = true
} else {
salary1.required = false
salary2.required = false
}
}
}
if (salary1 !== null) {
salary1.onchange = function () {
if (this.value === "") {
salary0.required = true
} else {
salary0.required = false
salary1.required = true
}
}
}
if (salary2 !== null) {
salary2.onchange = function () {
if (this.value === "") {
salary0.required = true
} else {
salary0.required = false
salary1.required = true
}
}
}
}
function submitBtnClick() {
let btn = document.getElementById('check-btn');
if (btn !== null) {
let form = document.getElementById('submit-form');
btn.addEventListener('click', function () {
// 表单验证
if (!form.checkValidity()) {
form.classList.add('was-validated');
// 滚动到第一个无效字段的位置
let firstInvalidElement = form.querySelector(':invalid');
firstInvalidElement.scrollIntoView({behavior: 'smooth', block: 'center'});
firstInvalidElement.focus();
} else {
let sig = document.getElementsByName('Signature');
if (sig.length > 0 && sig[0].value === ""){
sig[0].scrollIntoView({behavior: 'smooth', block: 'center'});
sig[0].focus()
alert("请添加签名！！")
}else{
let modalBtn = document.getElementById('modal-btn');
modalBtn.click();
}
}
})
}
}