diff --git a/src/main/resources/static/js/evaluate/teamGroup/registerForm.js b/src/main/resources/static/js/evaluate/teamGroup/registerForm.js index 3216931..e69cc17 100644 --- a/src/main/resources/static/js/evaluate/teamGroup/registerForm.js +++ b/src/main/resources/static/js/evaluate/teamGroup/registerForm.js @@ -1,14 +1,36 @@ let form, table, tree; let alreadyChooseTrees = []; let selectData = []; +let workTypeList = []; +const sexList = [ + { + id: 1, + name: "男", + }, + { + id: 2, + name: "女", + }, +]; +let memberInfoList = [ + { + name: "", // 姓名 + phone: "", // 联系方式 + idCard: "", // 身份证号码 + workType: "", // 工种 + sex: "", // 性别 + faceUrl: "", // 人脸照片 + isTeamLeader: 1, // 是否是班长 + }, +]; -layui.use(['table', 'form', 'upload', 'tree'], function () { +layui.use(["table", "form", "upload", "tree"], function () { const $ = layui.$; form = layui.form; upload = layui.upload; table = layui.table; // 使用 layui 的 form.on 监听下拉框变化 - form.on('select(subContractor)', function (obj) { + form.on("select(subContractor)", function (obj) { const subContractorId = obj.value; // 获取选中的值 console.log("subContractorId:", subContractorId); @@ -18,42 +40,52 @@ layui.use(['table', 'form', 'upload', 'tree'], function () { }); // 让点击上传按钮触发文件输入框的点击事件 - $('#uploadBtn').on('click', function () { - $('#fileInput').click(); + $("#uploadBtn").on("click", function () { + $("#fileInput").click(); }); // 让点击上传按钮触发文件输入框的点击事件 - $('#uploadBtn1').on('click', function () { - $('#fileInput1').click(); + $("#uploadBtn1").on("click", function () { + $("#fileInput1").click(); }); // 文件选择后的回调处理 - $('#fileInput').on('change', function () { - const file = $('#fileInput')[0].files[0]; + $("#fileInput").on("change", function () { + const file = $("#fileInput")[0].files[0]; const fileName = file.name; - const fileExtension = fileName.split('.').pop().toLowerCase(); + const fileExtension = fileName.split(".").pop().toLowerCase(); // 校验文件类型，确保是 .jpg 或 .png 文件 - if (fileExtension !== 'jpg' && fileExtension !== 'png') { - layer.msg('请选择 图片 文件（.jpg 或 .png）', {icon: 2, time: 2000}); - $('#fileInput').val(''); - $('#fileInfo').html(''); + if (fileExtension !== "jpg" && fileExtension !== "png") { + layer.msg("请选择 图片 文件（.jpg 或 .png）", { + icon: 2, + time: 2000, + }); + $("#fileInput").val(""); + $("#fileInfo").html(""); } else { - $('#fileInfo').html('选中的文件：' + fileName); + $("#fileInfo").html("选中的文件：" + fileName); } }); // 文件选择后的回调处理 - $('#fileInput1').on('change', function () { - const file = $('#fileInput1')[0].files[0]; + $("#fileInput1").on("change", function () { + const file = $("#fileInput1")[0].files[0]; const fileName = file.name; - const fileExtension = fileName.split('.').pop().toLowerCase(); + const fileExtension = fileName.split(".").pop().toLowerCase(); // 校验文件类型，确保是 .xls 或 .xlsx 文件 - if (fileExtension !== 'doc' && fileExtension !== 'docx' && fileExtension !== 'png' && fileExtension !== 'jpg' && fileExtension !== 'png' && fileExtension !== 'pdf') { - layer.msg('请选择word、pdf或图片文件', {icon: 2, time: 2000}); - $('#fileInput1').val(''); - $('#fileInfo1').html(''); + if ( + fileExtension !== "doc" && + fileExtension !== "docx" && + fileExtension !== "png" && + fileExtension !== "jpg" && + fileExtension !== "png" && + fileExtension !== "pdf" + ) { + layer.msg("请选择word、pdf或图片文件", { icon: 2, time: 2000 }); + $("#fileInput1").val(""); + $("#fileInfo1").html(""); } else { - $('#fileInfo1').html('选中的文件：' + fileName); + $("#fileInfo1").html("选中的文件：" + fileName); } }); // 初始化下拉框 @@ -70,67 +102,84 @@ layui.use(['table', 'form', 'upload', 'tree'], function () { }); } - $('#' + selectName).empty().append(html); - form.render('select'); + $("#" + selectName) + .empty() + .append(html); + form.render("select"); } // 获取外包商下拉数据 function getOutSourceSelected() { $.ajax({ - type: 'POST', - url: ctxPath + '/organizational/getSubContractorSelected', + type: "POST", + url: ctxPath + "/organizational/getSubContractorSelected", success: function (data) { - setSelectValue(data.obj, 'subContractor'); - } + setSelectValue(data.obj, "subContractor"); + }, }); } -// 根据外包商获取项目下拉数据（支持传参） + // 根据外包商获取项目下拉数据（支持传参） function getPromanagerSelect(subContractorId) { $.ajax({ - type: 'POST', - url: ctxPath + '/organizational/getProjectBySubContractor', + type: "POST", + url: ctxPath + "/organizational/getProjectBySubContractor", data: { - id: subContractorId + id: subContractorId, }, success: function (data) { - setSelectValue(data.obj, 'project'); - } + setSelectValue(data.obj, "project"); + }, }); } -// 获取班组类型下拉框 + // 获取班组类型下拉框 function getTeamGroupType() { $.ajax({ - type: 'POST', - url: ctxPath + '/organizational/getTeamGroupType', + type: "POST", + url: ctxPath + "/organizational/getTeamGroupType", success: function (data) { - setSelectValue(data.obj, 'teamType'); - } + setSelectValue(data.obj, "teamType"); + }, }); } -// 获取工种类型下拉框 + // 获取工种类型下拉框 function getWorkType() { $.ajax({ - type: 'POST', - url: ctxPath + '/organizational/getWorkType', + type: "POST", + url: ctxPath + "/organizational/getWorkType", success: function (data) { - setSelectValue(data.obj, 'workType'); - } + setSelectValue(data.obj, "workType"); + }, }); } - form.on('submit(formSubmit)', function (data) { + form.on("submit(formSubmit)", function (data) { // 表单提交事件监听 const field = data.field; // 校验文件是否选择 - const file = $('#fileInput1')[0].files[0]; + const file = $("#fileInput1")[0].files[0]; if (!file) { - layer.msg("请上传文件", {icon: 2, time: 2000}); + layer.msg("请上传文件", { icon: 2, time: 2000 }); return false; } console.log("表单数据：", JSON.stringify(field)); + + // 班组成员信息数据 + + const groupMemberList = memberInfoList.map((e, index) => { + return { + name: $(`#name-${index}`).val(), + phone: $(`#phone-${index}`).val(), + idCard: $(`#idCard-${index}`).val(), + workType: $(`#workType-${index}`).val(), + sex: $(`#sex-${index}`).val(), + isTeamLeader: 1, + }; + }); + + console.log("班组成员信息数据：", groupMemberList); const formDataWithFile = new FormData(); formDataWithFile.append("teamGroupName", field.teamGroupName); @@ -148,27 +197,168 @@ layui.use(['table', 'form', 'upload', 'tree'], function () { formDataWithFile.append("isTeamLeader", 0); // 固定值 $.ajax({ - url: ctxPath + '/organizational/registerTeamGroup', - type: 'POST', + url: ctxPath + "/organizational/registerTeamGroup", + type: "POST", dataType: "json", processData: false, contentType: false, data: formDataWithFile, success: function (res) { if (res.res === 1) { - layer.msg('新增成功', {icon: 6, time: 1500}, function () { + layer.msg("新增成功", { icon: 6, time: 1500 }, function () { var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引 window.parent.location.reload(); parent.layer.close(index); // 关闭弹窗 }); } else if (res.res === 0) { - layer.msg(res.resMsg, {icon: 5}); + layer.msg(res.resMsg, { icon: 5 }); } }, error: function () { - layer.msg("网络异常，请重试", {icon: 5}); - } + layer.msg("网络异常，请重试", { icon: 5 }); + }, }); return false; // 阻止默认提交行为 }); -}); \ No newline at end of file + + // 获取工种类型下拉框 + async function getWorkTypeNew() { + await new Promise((resolve) => { + $.ajax({ + type: "POST", + url: ctxPath + "/organizational/getWorkType", + success: function (data) { + // setSelectValue(data.obj, element); + workTypeList = data.obj; + resolve(); + }, + }); + }); + } + + // 初始化班组成员信息 + function initMemberInfo() { + memberInfoList.forEach((item, index) => { + constructMemberInfo(index); + }); + } + + // 添加班组成员 + $("#addMemberBtn").on("click", function (e) { + e.preventDefault(); + const index = memberInfoList.length; + memberInfoList.push({ + name: "", + phone: "", + idCard: "", + workType: "", + sex: "", + faceUrl: "", + isTeamLeader: 1, + }); + constructMemberInfo(index); + }); + + // 构造成员信息 + async function constructMemberInfo(index) { + $("#memberInfo").append(` +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+ +
+ +
+
+ `); + + if (workTypeList.length < 1) { + await getWorkTypeNew(); + } + + setSelectValue(workTypeList, `workType-${index}`); + + setSelectValue(sexList, `sex-${index}`); + } + + initMemberInfo(); + + // 删除操作 + $("#memberInfo").on("click", ".deleteBtn", function (e) { + e.preventDefault(); + const index = $(this).attr("id").split("-")[1]; + console.log("删除", index); + memberInfoList.splice(index, 1); + console.log("删除", memberInfoList); + $(`#memberInfo-${index}`).remove(); + }); +}); diff --git a/src/main/resources/static/pages/evaluate/teamGroup/registerForm.html b/src/main/resources/static/pages/evaluate/teamGroup/registerForm.html index dcca5c0..795f129 100644 --- a/src/main/resources/static/pages/evaluate/teamGroup/registerForm.html +++ b/src/main/resources/static/pages/evaluate/teamGroup/registerForm.html @@ -2,7 +2,7 @@ - + 新增班组 @@ -15,15 +15,18 @@ flex-direction: column; justify-content: space-between; } + div p { font-weight: bold; } + .layui-form-label { width: 120px; } .layui-form-item .layui-input-inline { - width: 256px; /* 统一宽度 */ + width: 256px; + /* 统一宽度 */ } .required_icon, @@ -48,11 +51,15 @@ align-items: center; padding-right: 4%; } + .submit { display: flex; - justify-content: flex-end; /* 水平向右对齐 */ - align-items: center; /* 垂直居中 */ + justify-content: flex-end; + /* 水平向右对齐 */ + align-items: center; + /* 垂直居中 */ } + ::-webkit-scrollbar { width: 10px; } @@ -76,149 +83,174 @@ background: rgb(68, 68, 68); border-radius: 10px; } + .layui-input-block { margin-left: 150px !important; min-height: 36px; } + + .memberInfoItem { + padding: 10px 0; + margin-bottom: 10px; + border-bottom: 1px solid #e6e6e6; + } -
-
-
-
-

班组信息

- -
-
-
- -
- +
+
+ +
+
+

班组信息

+
+ +
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
- -
-
- -
- +
+
+
+
+ +
+
+ +
+ -
-
-
-
- -
-
-
- -
- - -
+
-
-
- -
- -
-
+
+

班长信息

-
-

班长信息

+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
-
-
-
- -
- +
+
+
+ +
+ +
-
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
-
-
- -
- - + +
-
-
-
-
- -
- +
+
+
+ +
+ +
+
+
+
+
+ +
+ + +
+
-
-
- -
- - -
-
+ +
+

+ 班组成员信息 +

+ +
+ + +
+ +
+ + +
+
+
-
- -
-
- -
- -
- + +
-
@@ -228,4 +260,4 @@ - + \ No newline at end of file