liux
/
gs_sub_evaluate
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加班组注册页面功能

This commit is contained in:
BianLzhaoMin 2025-08-06 10:54:39 +08:00
parent 05369e9c26
commit 43a3f0bc82
2 changed files with 391 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
src/main/resources/static/js/evaluate/teamGroup/registerForm.js
View File

@ -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; // 阻止默认提交行为
});
});
// 获取工种类型下拉框
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(`
<div id="memberInfo-${index}" class="memberInfoItem">
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>姓名</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="name-${index}" name="name"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>联系方式</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="phone-${index}" name="phone"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span
class="required_icon">*</span>身份证号码</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="idCard-${index}" name="idCard"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>工种</label>
<div class="layui-input-block">
<select id="workType-${index}" name="workType" class="layui-select" lay-search
lay-verify="required" style="height: 36px;">
</select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>性别</label>
<div class="layui-input-block">
<select id="sex-${index}" name="sex" class="layui-select" lay-search
lay-verify="required" style="height: 36px;">
</select>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon"></span>人脸照片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn uploadBtn" id="uploadBtn-${index}">
<i class="layui-icon">&#xe67c;</i> 上传文件
</button>
<input type="file" id="fileInput-${index}" name="file" accept=".jpg,.png"
style="display: none;">
<div id="fileInfo-${index}"></div>
</div>
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: flex-end;">
<button type="button" class="layui-btn layui-btn-sm layui-bg-red deleteBtn" id="deleteMemberBtn-${index}">
<i class="layui-icon layui-icon-delete"></i>
</button>
</div>
</div>
`);
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();
});
});

262
src/main/resources/static/pages/evaluate/teamGroup/registerForm.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" href="../../../layui/css/layui.css"/>
<link rel="stylesheet" href="../../../layui/css/layui.css" />
<link rel="stylesheet" href="../../../layui/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../../../layui/layui_ext/dtree/font/dtreefont.css">
<title>新增班组</title>
@ -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;
}
</style>
<body>
<div id="main-box">
<div class="form">
<form class="layui-form" onsubmit="return false;" id="form" lay-filter="formFilter">
<div style="width: 100%;height: 100%">
<div><p>班组信息</p></div>
<!-- 班组名称 -->
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班组名称</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="teamGroupName"
name="teamGroupName" autocomplete="off" class="layui-input">
<div id="main-box">
<div class="form">
<form class="layui-form" onsubmit="return false;" id="form" lay-filter="formFilter">
<div style="width: 100%;height: 100%">
<div>
<p>班组信息</p>
</div>
<!-- 班组名称 -->
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班组名称</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="teamGroupName"
name="teamGroupName" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<!-- 所属分包商 -->
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>所属分包商</label>
<div class="layui-input-block">
<select id="subContractor" name="subContractor" class="layui-select" lay-search
lay-filter="subContractor" lay-verify="required" style="height: 36px;"></select>
</div>
</div>
</div>
</div>
<!-- 所属分包商 -->
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>所属分包商</label>
<div class="layui-input-block">
<select id="subContractor" name="subContractor" class="layui-select" lay-search lay-filter="subContractor"
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>信息评审表</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadBtn1">
<i class="layui-icon">&#xe67c;</i> 上传文件
</button>
<input type="file" id="fileInput1" name="file" accept=".jpg,.png"
style="display: none;">
<div id="fileInfo1"></div>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班组类型</label>
<div class="layui-input-block">
<select id="teamType" name="teamType" class="layui-select" lay-search
lay-verify="required" style="height: 36px;"></select>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>信息评审表</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadBtn1">
<i class="layui-icon">&#xe67c;</i> 上传文件
</button>
<input type="file" id="fileInput1" name="file" accept=".jpg,.png" style="display: none;">
<div id="fileInfo1"></div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班组类型</label>
<div class="layui-input-block">
<select id="teamType" name="teamType" class="layui-select" lay-search
lay-verify="required" style="height: 36px;"></select>
</div>
</div>
<div>
<p>班长信息</p>
</div>
</div>
<div><p>班长信息</p></div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班长姓名</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="name" name="name"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>联系方式</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="phone" name="phone"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>班长姓名</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="name"
name="name" autocomplete="off" class="layui-input">
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>身份证号</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="idCard" name="idCard"
autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>联系方式</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="phone"
name="phone" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>身份证号</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" id="idCard"
name="idCard" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>工种</label>
<div class="layui-input-block">
<select id="workType" name="workType" class="layui-select" lay-search
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>工种</label>
<div class="layui-input-block">
<select id="workType" name="workType" class="layui-select" lay-search
lay-verify="required" style="height: 36px;">
</select>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>性别</label>
<div class="layui-input-block">
<select id="sex" name="sex" class="layui-select" lay-search
lay-verify="required" style="height: 36px;">
<option value="1">男</option>
<option value="2">女</option>
</select>
<div class="layui-row">
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required_icon">*</span>性别</label>
<div class="layui-input-block">
<select id="sex" name="sex" class="layui-select" lay-search lay-verify="required"
style="height: 36px;">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red"></span>人脸照片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadBtn">
<i class="layui-icon">&#xe67c;</i> 上传文件
</button>
<input type="file" id="fileInput" name="file" accept=".jpg,.png"
style="display: none;">
<div id="fileInfo"></div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6" style="float: left;width: 50%;margin-top: 1%">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red"></span>人脸照片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="uploadBtn">
<i class="layui-icon">&#xe67c;</i> 上传文件
</button>
<input type="file" id="fileInput" name="file" accept=".jpg,.png" style="display: none;">
<div id="fileInfo"></div>
</div>
<div style="display: flex;align-items: center;justify-content: space-between;">
<p style="margin-right: 10px;">
班组成员信息
</p>
<button class="layui-btn layui-bg-blue" lay-filter="addMember" id="addMemberBtn">添加</button>
</div>
<!-- 动态添加的人员信息 -->
<div id="memberInfo">
</div>
<!-- 提交按钮 -->
<div class="layui-form-item">
<div class="layui-input-block submit">
<button class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
</div>
</div>
</div>
<!-- 提交按钮 -->
<div class="layui-form-item">
<div class="layui-input-block submit">
<button class="layui-btn" lay-submit lay-filter="formSubmit">保存</button>
</div>
</div>
</div>
</form>
</form>
</div>
</div>
</div>
</body>
<script src="../../../js/publicJs.js"></script>
<script type="text/javascript" src="../../../js/libs/jquery-2.1.1.min.js"></script>
@ -228,4 +260,4 @@
<script src="../../../layui/layui_ext/dtree/dtree.js"></script>
<script src="../../../js/evaluate/teamGroup/registerForm.js?v=1"></script>
</html>
</html>