hn_cloud_web/public/html/userForm.html

732 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<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>