hn_cloud_web/public/html/userForm.html

732 lines
27 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
2025-12-09 15:02:14 +08:00
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="../../smz-web/layui/css/layui.css">
<link rel="stylesheet" href="../../smz-web/css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
#orgContent {
z-index: 99;
background-color: #fff;
box-shadow: 1px 1px 5px #888888;
}
#orgName {
border: 0;
margin-top: 1%;
width: 100%;
}
.layui-form-label {
float: left;
display: block;
padding: 9px 15px;
width: 110px;
font-weight: 400;
line-height: 20px;
text-align: right;
}
.layui-form-checkbox i{
border-left: 1px solid #d2d2d2;
}
.layui-input-block {
margin-left: 140px;
min-height: 36px;
}
/* 错误提示框样式 */
.custom-error-tip {
position: absolute;
top: 50%;
right: -180px;
transform: translateY(-50%);
background: #fff;
border: 1px solid #e6e6e6;
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.1);
font-size: 12px;
color: #c00;
z-index: 999;
display: none;
}
.custom-error-tip i {
margin-right: 5px;
font-size: 14px;
}
/* 输入框错误状态 */
.layui-form-item.error {
position: relative;
}
.layui-form-item.error .layui-input,
.layui-form-item.error .layui-select {
border-color: #ff5722 !important;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<form class="layui-form form-horizontal" onsubmit="return false" id="form" style="padding:24px;">
<input type="hidden" id="id" name="id">
<div class="layui-form-item">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>用户名</label>
<div class="layui-input-block">
<input maxlength="30" minlength="2" type="text" id="userName" name="userName" required lay-verify="required" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>联系方式:</label>
<div class="layui-input-block">
<input maxlength="11" type="text" id="phone" name="phone" required lay-verify="required|phone" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">健康状况:</label>
<div class="layui-input-block">
<select name = "sex" id="sex" >
<option value="1"></option>
<option value="2"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>系统:</label>
<div class="layui-input-block" id="types">
<input type="checkbox" name="permissionType" value="1" title="实名制" id="smz">
<input type="checkbox" name="permissionType" value="2" title="领导履职" id="ldlz">
<input type="checkbox" name="permissionType" value="3" title="承载力" id="czl">
</div>
</div>
<div id="smzqx">
<div class="layui-form-item">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>公司名称/岗位</label>
<div class="layui-input-block">
<div class="layui-input-inline " style="width: 100%">
<div style="border: 0.5px solid #E6E6E6;height: 37px;text-indent: 10px;">
<input id="orgName" type="text" placeholder="请选择分公司" jyValidate="required"
readonly
value="" class="FormElement ui-widget-content ui-corner-all"
onclick="showRole(); return false;"/>
<input type="hidden" id="orgId" name="orgId" value="">
<input type="hidden" id="companyId" name="companyId" value="">
<a href="#" title="清空" onclick="emptyRole(); return false;" class="lrspace3 aBtnNoTD"
data-toggle="modal"><i class='icon-remove bigger-120 red'></i></a>
<div id='orgContent' class="menuContent ztreeMC"
style="display: none; position: absolute;width: 99%;">
<ul id="orgTree" class="ztree accountOrgTree"></ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>角色</label>
<div class="layui-input-block">
<select id="roles" name="roleId" lay-filter="roleId"></select>
<span id="qxSpan" style="color: red;display: none"></span>
</div>
</div>
<div class="layui-form-item" id="idCard" style="display: none">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>身份证</label>
<div class="layui-input-block">
<input maxlength="18" type="text" id="idNumber" name="idNumber" onchange="querys()" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="pro" style="display: none">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>工程名称</label>
<div class="layui-input-block">
<select id="proId" name="proId" lay-filter="proId" ></select>
</div>
</div>
<div class="layui-form-item" id="sub" style="display: none">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>分包商</label>
<div class="layui-input-block">
<select id="subId" name="subId" lay-filter="subId" ></select>
</div>
</div>
<div class="layui-form-item" id="team" style="display: none">
<label class="layui-form-label"><i class="tip-required" style="color: red; font-size: 20px">*</i>班组</label>
<div class="layui-input-block">
<select id="teamId" name="teamId" lay-filter="teamId"></select>
</div>
</div>
</div>
<div class="layui-form-item" id="ldlzqx">
<label class="layui-form-label">领导履职</label>
</div>
<div class="layui-form-item" id="czlqx">
<label class="layui-form-label">承载力</label>
</div>
<div class="layui-form-item" style="display: none">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="commit" lay-submit
lay-filter="formDemo">提交
</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="../../smz-web/js/libs/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="../../smz-web/css/ztree/3.5/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="../../smz-web/js/jq.js"></script>
<script type="text/javascript" src="../../smz-web/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../../smz-web/js/common.js"></script>
<script type="text/javascript" src="../../smz-web/layui/layui.js"></script>
<script type="text/javascript" src="../../smz-web/js/publicJs.js"></script>
<script type="text/javascript" src="../../smz-web/js/companyTree.js"></script>
<script type="text/javascript">
var form1;
var companyIds;
var ns;
var isRequired = false;
layui.use(['layer', 'laydate', 'form'], function () {
var form = layui.form;
var laydate = layui.laydate;
form1 = form;
laydate.render({
elem: '#birthday'
});
form.verify({
required: function(value, item){
if($(item).is(':visible') && !value){
return '该字段不能为空';
}
},
phone: [/^1\d{10}$/, '手机号格式不正确'],
foremanIdNumber: function(value, item){
// 只在显示且必填时校验身份证格式
if ($('#smz').is(':checked') && $(item).is(':visible') && !value) {
var reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if(!reg.test(value)){
return '请输入18位身份证';
}
}
},
});
initTree();
// 初始化:隐藏所有权限区域
$('#smzqx, #ldlzqx, #czlqx').hide();
// 监听 checkbox 变化Layui 方式)
// 系统checkbox变化
form.on('checkbox', function(data){
var value = data.value;
var checked = data.elem.checked;
var map = {'1':'smzqx','2':'ldlzqx','3':'czlqx'};
var targetId = map[value];
if(targetId){
$('#' + targetId).toggle(checked);
// 实名制动态必填
if(targetId==='smzqx'){
// 姓名/公司/角色/身份证
// $('#orgName').attr('lay-verify', checked ? 'required' : '');
$('#userName').attr('lay-verify', checked ? 'required' : '');
$('#phone').attr('lay-verify', checked ? 'required|phone' : '');
$('#orgName').attr('lay-verify', checked ? 'required' : '');
$('#roles').attr('lay-verify', checked ? 'required' : '');
$('#idNumber').attr('lay-verify', checked && $('#idCard').is(':visible') ? 'required|foremanIdNumber' : '');
$('#proId').attr('lay-verify', checked && $('#pro').is(':visible') ? 'required' : '');
$('#subId').attr('lay-verify', checked && $('#sub').is(':visible') ? 'required' : '');
$('#teamId').attr('lay-verify', checked && $('#team').is(':visible') ? 'required' : '');
}
}
form1.render();
});
// 角色下拉变化监听
form.on('select(roleId)', function(data){
findRoleType(data.value);
});
// 工程下拉变化监听 → 联动分包商
form.on('select(proId)', function(data){
getSubInfo(data.value);
});
// 分包商下拉变化监听 → 联动班组
form.on('select(subId)', function(data){
findSubType(data.value,'');
});
form.on('submit(formDemo)', function(data){
clearErrors(); // 先清除所有错误样式
if ($('#smz').is(':checked')) {
var hasError = false;
if (!$('#userName').val()) {
showError($('#userName'), '请输入用户名!');
hasError = true;
}
else if (!/^1\d{10}$/.test($('#phone').val())) {
showError($('#phone'), '手机号格式不正确!');
hasError = true;
}
else if (!$('#orgId').val()) {
showError($('#orgName'), '请选择分公司!');
hasError = true;
}
else if (!$('#roles').val()) {
showError($('#roles'), '请选择角色!');
hasError = true;
}
// ... 其他字段类似处理
if (hasError) {
return false; // 阻止提交
}
}
insertSubcontractor(); // 触发你的提交函数
return false; // 阻止默认跳转
});
// 如果是编辑页面,已有默认选中项,触发一次显示
setTimeout(function () {
form.render(); // 确保渲染完成
$('#types input[type="checkbox"]:checked').each(function () {
$(this).next('.layui-form-checkbox').trigger('click'); // 不推荐;更好的方式是手动调用逻辑
});
// 更安全的方式:直接根据初始状态显示
if ($('#smz').is(':checked')) $('#smzqx').show();
if ($('#ldlz').is(':checked')) $('#ldlzqx').show();
if ($('#czl').is(':checked')) $('#czlqx').show();
}, 100);
});
function add() {
var bootstrapValidator = $("#form").data('bootstrapValidator');
bootstrapValidator.validate();
var formdata = {};
//获取用户权限类型
// var roleIds = getCheckedRoleIds();
var userName = $('#userName').val();
var phone = $('#phone').val();
var orgId = $('#orgId').val();
var proId = $('#proId option:selected').val();
var subId = $('#subId option:selected').val();
var roleId = $('#roles option:selected').val();
var sex = $('#sex option:selected').val();
var teamId = $('#teamId option:selected').val();
var idNumber = $('#idNumber').val();
if (phone == null || phone == '') {
layer.msg('请输入手机号!');
return;
}
if (phone.length != 11) {
layer.msg('手机号格式错误!');
return;
}
if (userName == null || userName == '') {
layer.msg('请输入用户名!');
return;
}
if (orgId == null || orgId.length == 0) {
layer.msg('请选择分公司!');
return;
}
if (roleId == null || roleId.length == 0) {
layer.msg('请选择角色!');
return;
}
if (level.indexOf("4") != "-1") {
if (subId == null || subId == '' || subId == "-1") {
layer.msg('请选择分包商!');
return;
}
} else if (level.indexOf("5") != "-1") {
if (subId == null || subId == '' || subId == "-1") {
layer.msg('请选择分包商!');
return;
}
if (roleNames == '1') {
if (teamId == null || teamId == '' || teamId == "-1") {
layer.msg('请选择班组!');
return;
}
if (idNumber == null || idNumber == '') {
layer.msg('请输入身份证号!');
return;
}
}
}
formdata.userName = userName;
formdata.phone = phone;
formdata.orgId = orgId;
formdata.proId = proId;
formdata.subId = subId;
formdata.roleId = roleId;
formdata.type = roleType;
formdata.sex = sex;
formdata.teamId = teamId;
formdata.idNumber = idNumber;
console.log("formdata" + JSON.stringify(formdata))
$.ajax({
type: 'post',
url: ctxPath + '/users',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(formdata),
success: function (data) {
layer.msg("添加成功", {shift: -1, time: 1000}, function () {
location.href = ctxPath + "/pages/work/sysMag/userList.html";
});
}
});
}
// 获取工程列表
function getProInfo(orgId, proId){
var select = $('#proId');
select.empty();
select.append('<option value="">请选择工程</option>');
$.ajax({
type: 'post',
url: ctxPath+'/users/getProInfo',
data: {companyId: orgId},
async: false,
success: function(data){
data.forEach(function(d){
select.append('<option value="'+d.proId+'">'+d.proName+'</option>');
});
if(proId) select.val(proId);
layui.form.render('select');
}
});
}
function getSubInfo(proId, subId){
var select = $('#subId');
select.empty();
select.append('<option value="">请选择分包商</option>');
if(!proId){ layui.form.render('select'); return; }
$.ajax({
type: 'post',
url: ctxPath+'/register/findSubList',
data: {proId: proId},
async: false,
dataType:'json',
success: function(data){
data.forEach(function(d){
select.append('<option value="'+d.id+'">'+d.name+'</option>');
});
if(subId) select.val(subId);
layui.form.render('select');
}
});
}
// 根据公司获取分包商
function getSubInfoByCompanyId(companyId, ids){
var select = $('#subId');
select.empty();
select.append('<option value="">请选择分包商</option>');
$.ajax({
type: 'post',
url: ctxPath+'/register/findSubListByCompanyId',
data: {companyId: companyId},
async: false,
dataType:'json',
success: function(data){
data.forEach(function(d){
select.append('<option value="'+d.id+'">'+d.name+'</option>');
});
if(ids) select.val(ids);
layui.form.render('select');
}
});
}
// 初始化角色列表
function initRoles(companyId, orgId){
var select = $('#roles');
select.empty();
select.append('<option value="">请选择角色</option>');
$.ajax({
type: 'post',
url: ctxPath+'/users/getRoleInfo',
data: {companyId: companyId, orgId: orgId},
async: false,
success: function(data){
data.forEach(function(d){
select.append('<option value="'+d.roleId+'">'+d.roleName+'</option>');
});
layui.form.render('select');
}
});
}
var roleType = "";
var level = "";
var roleNames = "";
//获取角色Type
function findRoleType(roleId) {
var pro = document.getElementById("pro");
var sub = document.getElementById("sub");
var team = document.getElementById("team");
var idCard = document.getElementById("idCard");
var span = document.getElementById("qxSpan");
if (roleId != "") {
$.ajax({
type: 'POST',
url: ctxPath + '/register/findRoleType',
data: {roleId: roleId},
dataType: "json",
success: function (data) {
var type = data.type;
var roleLevel = data.roleLevel;
level = roleLevel;
var name = data.name;
if (roleLevel.indexOf("4") != "-1") {
pro.style.display = "none";
sub.style.display = "block";
team.style.display = "none";
idCard.style.display = "none";
roleNames = '0';
} else if (roleLevel.indexOf("5") != "-1") {
pro.style.display = "none";
sub.style.display = "none";
team.style.display = "none";
idCard.style.display = "block";
roleNames = '1';
} else {
pro.style.display = "none";
sub.style.display = "none";
team.style.display = "none";
idCard.style.display = "none";
roleNames = '0';
}
roleType = type;
// ✅ 更新 lay-verify
$('#idNumber').attr('lay-verify', idCard.style.display=='block' ? 'required|foremanIdNumber' : '');
$('#proId').attr('lay-verify', pro.style.display=='block' ? 'required' : '');
$('#subId').attr('lay-verify', sub.style.display=='block' ? 'required' : '');
$('#teamId').attr('lay-verify', team.style.display=='block' ? 'required' : '');
layui.form.render('select'); // ✅ 刷新 select
layui.form.render('checkbox'); // ✅ 刷新 checkbox
var info = "角色权限:";
if (type.indexOf("3") != "-1") {
info = info + "施工端 ";
} else if (type.indexOf("4") != "-1") {
info = info + "监督端 ";
}
if (type.indexOf("2") != "-1") {
if (type.indexOf("3") != "-1" || type.indexOf("4") != "-1") {
info = info + "、后台";
} else {
info = info + "后台";
}
}
if (type.indexOf("1") != "-1") {
if (type.indexOf("3") != "-1" || type.indexOf("4") != "-1" || type.indexOf("2") != "-1") {
info = info + "、大屏";
} else {
info = info + "大屏";
}
}
span.innerHTML = info;
span.style.display = "inline-block";
}
});
} else {
pro.style.display = "none";
sub.style.display = "none";
team.style.display = "none";
idCard.style.display = "none";
layui.form.render('select');
layui.form.render('checkbox');
}
}
function loadCompanyInfo(n, c) { //分公司工程联动
var companyId = c;
companyIds = c;
var orgId = n;
ns = n;
getProInfo(orgId, "");
initRoles(companyId, orgId);
getSubInfoByCompanyId(companyId, "");
// getPostInfo(companyId);
$("#idNumber").val("");
findSubType("", "");
findRoleType("")
}
function findProType(proId) {
getSubInfo(proId);
}
// 查询班组
function findSubType(subId, ids){
var select = $('#teamId');
select.empty();
select.append('<option value="">请选择班组</option>');
if(!subId){layui.form.render('select'); return;}
$.ajax({
type:'post',
url: ctxPath+'/register/findTeamList',
data:{subId:subId},
async:false,
dataType:'json',
success:function(data){
data.forEach(function(d){
select.append('<option value="'+d.id+'">'+d.name+'</option>');
});
if(ids) select.val(ids);
layui.form.render('select');
}
});
}
function querys() {
var idNumber = $("#idNumber").val();
var roles = $("#roles").val();
$.ajax({
type: 'POST',
url: ctxPath + '/users/getTeam',
data: {
idNumber: idNumber,
roles: roles
},
dataType: 'json',
success: function (data) {
console.log(data)
if (data.res == 1) {
var pro = document.getElementById("pro");
var sub = document.getElementById("sub");
var team = document.getElementById("team");
pro.style.display = "block";
sub.style.display = "block";
team.style.display = "block";
if (data.obj.length > 0) {
if (data.obj[0].einStatus == "1") {
getProInfo(ns, data.obj[0].proId);
getSubInfo(data.obj[0].proId, data.obj[0].subId);
findSubType(data.obj[0].subId, data.obj[0].teamId);
$("#orgName").val(data.obj[0].orgName);
$("#companyId").val(data.obj[0].companyId);
$("#auForm input[name$='orgId']").prop("value", data.obj[0].orgId);
} else {
getProInfo(ns, data.obj[0].proId);
getSubInfo(data.obj[0].proId, data.obj[0].subId);
findSubType(data.obj[0].subId, data.obj[0].teamId);
}
} else {
getProInfo(ns, "");
getSubInfoByCompanyId(companyIds, "");
findSubType("", "");
}
} else {
layer.msg(data.resMsg, {icon: 2});
}
}
})
}
// 清除所有错误高亮
function clearErrors() {
$('.layui-form-item').removeClass('layui-form-danger');
}
// 显示错误(弹框 + 高亮 + 聚焦)
function showError($field, msg) {
clearErrors();
// 自动查找最近的 .layui-form-item
var $item = $field.closest('.layui-form-item');
if ($item.length === 0) {
console.warn('未找到 .layui-form-item 容器', $field);
layer.msg(msg, { icon: 5 });
return;
}
// 添加错误样式
$item.addClass('layui-form-danger');
// 弹出提示
layer.msg(msg, { icon: 5 });
// 尝试聚焦(只对可聚焦元素有效)
setTimeout(() => {
if ($field.is(':input')) {
// 如果是被 Layui 渲染过的 select
if ($field.is('select') && $field.next('.layui-form-select').length) {
// 聚焦到 Layui 生成的标题区域(可点击区域)
$field.next('.layui-form-select').find('.layui-select-title').focus();
} else {
// 普通 input / 未渲染 select
$field.focus();
}
} else {
// 处理只读展示框(如 #orgName → #orgId
var realField = $('#' + ($field.attr('id').replace('Name', 'Id')));
if (realField.length && realField.is(':input')) {
if (realField.is('select') && realField.next('.layui-form-select').length) {
realField.next('.layui-form-select').find('.layui-select-title').focus();
} else {
realField.focus();
}
}
}
}, 150);
}
</script>
</body>
</html>