hn_cloud_web/public/html/userForm.html

782 lines
32 KiB
HTML
Raw Normal View History

<!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="30" minlength="2" type="text" id="loginName" name="loginName" required
lay-verify="required" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否管理员:</label>
<div class="layui-input-block">
<select name="isAdmin" id="isAdmin">
<option value="0">不是</option>
<option value="1"></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">
<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"><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="czl_1">
<input type="checkbox" name="permissionType" value="2" title="承载力大屏" id="czl_2">
<input type="checkbox" name="permissionType" value="3" title="领导履职" id="ldlz">
<input type="checkbox" name="permissionType" value="4" title="自有人员" id="smz_1">
<input type="checkbox" name="permissionType" value="5" title="自有人员大屏" id="smz_2">
</div>
</div>
<div id="smzqx" style="border: 3px solid #F0F0F0;padding: 10px;margin: 10px;">
<h2>实名制系统</h2>
<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" style="border: 3px solid #F0F0F0;padding: 10px;margin: 10px;">
<h2>领导履职系统</h2>
<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 class="FormElement ui-widget-content ui-corner-all" id="departmentldlz"
readonly="readonly" value="点击进行部门选择" jyValidate="required" type="text"
onclick="showRoleLdlz(); return false;"
style="border: 0; margin-top: 1%;width: 100%; color: #757575;"/>
<input type="hidden" id="departmentIdldlz" name="departmentIdldlz">
<div id='orgContentldlz' class="menuContent ztreeMC">
<ul id="departmentTreeldlz" 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="roleIdLdlz" class="layui-select" name="roleIdLdlz" lay-verify="required"></select>
</div>
</div>
</div>
<div class="layui-form-item" id="czlqx" style="border: 3px solid #F0F0F0;padding: 10px;margin: 10px;">
<h2>承载力系统</h2>
<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 class="FormElement ui-widget-content ui-corner-all" id="department"
readonly="readonly" value="点击进行部门选择" jyValidate="required" type="text"
onclick="showRoleCzl(); return false;"
style="border: 0; margin-top: 1%;width: 100%; color: #757575;"/>
<input type="hidden" id="departmentId" name="departmentId">
<div id='orgContentCzl' class="menuContent ztreeMC">
<ul id="departmentTree" 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="roleIdCzl" class="layui-select" name="roleIdCzl" lay-verify="required"></select>
</div>
</div>
</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/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 src="../public.js"></script>
<script type="text/javascript" src="../login/js/treeBind.js"></script>
<script type="text/javascript" src="../login/js/companyTree.js"></script>
<script type="text/javascript" src="../login/js/companyTreeCzl.js"></script>
<script type="text/javascript" src="../login/js/companyTreeLdlz.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': 'czlqx', // 承载力后台
'2': 'czlqx', // 承载力大屏
'3': 'ldlzqx', // 领导履职
'4': 'smzqx', // 自有人员
'5': 'smzqx' // 自有人员大屏
};
var targetId = map[value];
if (targetId) {
if (value == '1' || value == '2') {
// 检查是否至少有一个承载力被选中
var czlChecked = $('#czl_1').is(':checked') || $('#czl_2').is(':checked');
$('#czlqx').toggle(czlChecked);
getRoleCzl(form, null);
loadOrgTree();
} else if (value == '4' || value == '5') {
var smzChecked = $('#smz_1').is(':checked') || $('#smz_2').is(':checked');
$('#smzqx').toggle(smzChecked)
} else if (value == '3') {
$('#ldlzqx').toggle(checked);
getRoleLdlz(form, null);
loadOrgTreeLdlz();
}
}
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(); // 先清除所有错误样式
var dataType = data.field.permissionType;
if (dataType) {
if ($('#smz_1').is(':checked') || $('#smz_2').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;
} else if (!$('#proId').val()) {
showError($('#proId'), '请选择工程名称!');
hasError = true;
} else if (!$('#subId').val()) {
showError($('#subId'), '请选择分包商!');
hasError = true;
} else if (!$('#teamId').val()) {
showError($('#teamId'), '请选择班组!');
hasError = true;
}
if (hasError) {
return false; // 阻止提交
}
}
add(data); // 触发你的提交函数
} else {
layer.msg('请选择系统类型!', {icon: 5});
}
return false; // 阻止默认跳转
});
});
function add(data) {
var fieldData = data.field || {};
// 构建请求参数
var requestData = {
userName: fieldData.userName || null,
loginName: fieldData.loginName || null,
userPhone: fieldData.phone || null,
orgId: fieldData.orgId || null,
proId: fieldData.proId || null,
subId: fieldData.subId || null,
roleId: fieldData.roleId || null,
type: roleType || null, // 注意:后端可能期望 "type" 而不是 "permissionType"
dataType: fieldData.permissionType || null, // 注意:后端可能期望 "type" 而不是 "permissionType"
sex: fieldData.sex || null,
teamId: fieldData.teamId || null,
idCard: fieldData.idNumber || null,
isAdmin: fieldData.isAdmin || null
};
$.ajax({
type: 'post',
url: request_url + '/realname/publicLogin/addUserData',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(requestData),
success: function (data) {
if (data.code != 200) {
layer.msg(data.msg);
return;
} else {
layer.msg(data.msg);
parent.layer.close();
}
}
});
}
// 获取工程列表
function getProInfo(companyId, proId) {
var select = $('#proId');
select.empty();
select.append('<option value="">请选择工程</option>');
$.ajax({
type: 'post',
url: request_url + '/realname/publicLogin/getProList',
data: {companyId: companyId},
async: false,
success: function (data) {
var data = data.data;
if (data.length > 0) {
data.forEach(function (d) {
select.append('<option value="' + d.proId + '">' + d.proName + '</option>');
});
if (proId) select.val(proId);
layui.form.render('select');
} else {
select.append('<option value="">暂无数据</option>');
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: request_url + '/realname/publicLogin/getSubList',
data: {proId: proId},
async: false,
dataType: 'json',
success: function (data) {
var data = data.data;
if (data.length <= 0) {
select.append('<option value="">暂无数据</option>');
layui.form.render('select');
return;
} else {
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: request_url + '/realname/publicLogin/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: request_url + '/realname/publicLogin/getRoleList',
data: {companyId: companyId, orgId: orgId},
async: false,
success: function (data) {
var data = data.data;
if (data.length > 0) {
data.forEach(function (d) {
select.append('<option value="' + d.roleId + '">' + d.roleName + '</option>');
});
layui.form.render('select');
} else {
select.append('<option value="">暂无数据</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: request_url + '/realname/publicLogin/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, "");
$("#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: request_url + '/realname/publicLogin/getTeamList',
data: {subId: subId},
async: false,
dataType: 'json',
success: function (data) {
if (data.code == 200) {
var data = data.data;
data.forEach(function (d) {
select.append('<option value="' + d.id + '">' + d.name + '</option>');
});
if (ids) select.val(ids);
layui.form.render('select');
} else {
layer.msg(data.msg);
select.empty();
return;
}
}
});
}
function querys() {
var idNumber = $("#idNumber").val();
var roles = $("#roles").val();
$.ajax({
type: 'POST',
url: request_url + '/realname/publicLogin/getTeamInfo',
data: {
idNumber: idNumber,
roles: roles
},
dataType: 'json',
success: function (data) {
if (data.code == 200) {
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.data.length > 0) {
if (data.data[0].einStatus == "1") {
getProInfo(ns, data.data[0].proId);
getSubInfo(data.data[0].proId, data.data[0].subId);
findSubType(data.data[0].subId, data.data[0].teamId);
$("#orgName").val(data.data[0].orgName);
$("#companyId").val(data.data[0].companyId);
$("#auForm input[name$='orgId']").prop("value", data.data[0].orgId);
} else {
getProInfo(ns, data.data[0].proId);
getSubInfo(data.data[0].proId, data.data[0].subId);
findSubType(data.data[0].subId, data.data[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>