363 lines
13 KiB
HTML
363 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>用户查询--新增</title>
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="../../layui-v2.8.18/layui/css/layui.css">
|
||
|
|
<link rel="stylesheet" type="text/css" media="screen" href="../../css/publicStyles.css">
|
||
|
|
<link rel="stylesheet" href="../../css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
|
||
|
|
<style>
|
||
|
|
.layui-form-label {
|
||
|
|
width: 16%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-inline {
|
||
|
|
width: 90%
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-input {
|
||
|
|
width: 84%
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea {
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-form-select dl {
|
||
|
|
position: absolute;
|
||
|
|
left: 16%;
|
||
|
|
top: 50px;
|
||
|
|
padding: 5px 0;
|
||
|
|
z-index: 899;
|
||
|
|
min-width: 84%;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 2px;
|
||
|
|
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
xm-select {
|
||
|
|
background-color: #FFF;
|
||
|
|
position: relative;
|
||
|
|
border: 1px solid #E6E6E6;
|
||
|
|
border-radius: 2px;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
outline: none;
|
||
|
|
height: 45px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
xm-select > .xm-tips {
|
||
|
|
color: #757575 !important;
|
||
|
|
padding: 0 10px;
|
||
|
|
position: absolute;
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
align-items: center;
|
||
|
|
font-family: math;
|
||
|
|
font-size: 16px !important;
|
||
|
|
margin-top: 2px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
xm-select > .xm-label .scroll .label-content {
|
||
|
|
display: flex;
|
||
|
|
padding: 7px 10px !important;
|
||
|
|
}
|
||
|
|
#orgContent{
|
||
|
|
display:none;
|
||
|
|
overflow: auto;
|
||
|
|
width: 30%;
|
||
|
|
height: 300px;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
background-color: rgb(255 255 255);
|
||
|
|
left: 195.875px;
|
||
|
|
border: 1px solid #e1e1e1;
|
||
|
|
top: 48px;
|
||
|
|
}
|
||
|
|
.layui-form-select .layui-edge {
|
||
|
|
left: 86%;
|
||
|
|
}
|
||
|
|
.layui-input {
|
||
|
|
width: 69%;
|
||
|
|
}
|
||
|
|
.layui-form-select dl {
|
||
|
|
left: 16%;
|
||
|
|
min-width: 69%;
|
||
|
|
}
|
||
|
|
.layui-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form class="layui-form" id="projectForm" action="" onsubmit="">
|
||
|
|
<div class="layui-form-item" style="margin-top: 2%;width: 99%">
|
||
|
|
<div class="layui-form-item" style="margin-top: 3%;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>用户名：</label>
|
||
|
|
<input type="text" name="username" lay-verify="required"
|
||
|
|
id="username" required class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="margin-top: 20px;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>联系方式：</label>
|
||
|
|
<input type="text" name="phone" lay-verify="required" id="phone" maxlength="11" class="layui-input" readonly>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="margin-top: 20px;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>部门：</label>
|
||
|
|
<input class="inp" id="department" readonly="readonly" style="text-align: center;font-size: 26px;height:40px;border: 1px solid #f1ecec;width: 30%;" value="点击进行部门选择" jyValidate="required" type="text" onclick="showRole(); return false;" />
|
||
|
|
<input type="hidden" id="departmentId" name="departmentId">
|
||
|
|
<div id='orgContent' class="menuContent ztreeMC">
|
||
|
|
<ul id="departmentTree" class="ztree accountOrgTree"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="margin-top: 20px;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>角色：</label>
|
||
|
|
<select id="roleId" class="layui-select" name="roleId" lay-verify="required">
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<button type="submit" class="layui-btn" id="commit" lay-submit lay-filter="demo1">提交</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script type="text/javascript" src="../../js/jquery/jquery-3.6.0.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
||
|
|
<script type="text/javascript" src="../../layui-v2.8.18/layui/layui.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/common_methon.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/dict.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/select.js"></script>
|
||
|
|
<script src="../../css/ztree/3.5/jquery.ztree.all.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var form;
|
||
|
|
var layuiForm;
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
$("#commit").click(function () {
|
||
|
|
var formData = {
|
||
|
|
"username": $("#username").val(),
|
||
|
|
"phone": $("#phone").val(),
|
||
|
|
"departmentId": $("#departmentId").val(),
|
||
|
|
"roleId": $("#roleId").val()
|
||
|
|
}
|
||
|
|
addInfo(formData);
|
||
|
|
});
|
||
|
|
|
||
|
|
layui.use(['form', 'laydate', 'upload'], function () {
|
||
|
|
form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
|
||
|
|
layuiForm = form;
|
||
|
|
laydate = layui.laydate;
|
||
|
|
form.render();
|
||
|
|
form.verify({});
|
||
|
|
/**
|
||
|
|
* 人员角色下拉框
|
||
|
|
*/
|
||
|
|
getRole(form, null);
|
||
|
|
/**
|
||
|
|
* 部门下拉树
|
||
|
|
*/
|
||
|
|
loadOrgTree();
|
||
|
|
/**
|
||
|
|
* 修改方法调用数据回显
|
||
|
|
*/
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
async: false, // 默认异步true,false表示同步
|
||
|
|
url: ctxPath + '/users/getListPerson',// 请求地址
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data: {}, //获取提交的表单字段
|
||
|
|
success: function (data) {
|
||
|
|
var resMsg = data.resMsg;
|
||
|
|
if ("数据获取成功" === resMsg) {
|
||
|
|
let info = data.obj.sysUser;
|
||
|
|
$("#username").val(info.username);
|
||
|
|
$("#phone").val(info.phone);
|
||
|
|
getRole(form, info.roleId);
|
||
|
|
$("#departmentId").val(info.departmentId);
|
||
|
|
$("#department").val(info.department);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, e) {
|
||
|
|
// layer.close(loadingMsg);
|
||
|
|
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 验证成功后才会执行下面的操作
|
||
|
|
/**
|
||
|
|
* 点击除了部门输入框和下拉树范围之外的地方,关闭下拉树列表
|
||
|
|
*/
|
||
|
|
$(document).on('click',function(e){
|
||
|
|
if ($(e.target).closest('#orgContent').length == 0 && $(e.target).closest('#department').length == 0){
|
||
|
|
hideRole();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 新增或修改的提交方法
|
||
|
|
* @param formData
|
||
|
|
* @returns {boolean}
|
||
|
|
*/
|
||
|
|
function addInfo(formData) {
|
||
|
|
// if (!phone_reg($("#phone").val())) {
|
||
|
|
// layer.msg("手机号码错误,请仔细核对!", {icon: 0});
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
// if ($("#department").val() == "点击进行部门选择") {
|
||
|
|
// layer.msg("请选择部门!", {icon: 0});
|
||
|
|
// return false;
|
||
|
|
// }
|
||
|
|
// formUrl = ctxPath + "/users/updatePerson";
|
||
|
|
tip = '修改';
|
||
|
|
// 加载提示
|
||
|
|
addLoadingMsg = top.layer.msg('数据上传中,请稍候...', {
|
||
|
|
icon: 16,
|
||
|
|
scrollbar: false,
|
||
|
|
time: 0,
|
||
|
|
shade: [0.8, '#393D49']
|
||
|
|
});
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: 'post',
|
||
|
|
url: ctxPath + '/users/updatePerson',
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
async: false,
|
||
|
|
data: JSON.stringify(formData),
|
||
|
|
contentType: "application/json; charset=utf-8",
|
||
|
|
success: function (data) {
|
||
|
|
if (data.resMsg === "发起成功") {
|
||
|
|
layer.closeAll();
|
||
|
|
top.layer.close(addLoadingMsg); //再执行关闭
|
||
|
|
layer.msg(tip + '成功', {icon: 1, time: 2000});
|
||
|
|
location.reload();
|
||
|
|
} else if (data.resMsg === "人员已存在") {
|
||
|
|
top.layer.close(addLoadingMsg); //再执行关闭
|
||
|
|
layer.msg("用户已存在", {icon: 0, time: 2000})
|
||
|
|
}else if (data.resMsg === "手机号已存在") {
|
||
|
|
top.layer.close(addLoadingMsg); //再执行关闭
|
||
|
|
layer.msg("手机号已存在", {icon: 0, time: 2000})
|
||
|
|
}else {
|
||
|
|
top.layer.close(addLoadingMsg); //再执行关闭
|
||
|
|
layer.msg(tip + '失败', {icon: 2, time: 2000});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (err) {
|
||
|
|
console.log("获取工程下拉列表出错：", err);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据id获取单个数据进行回显
|
||
|
|
*/
|
||
|
|
function getList() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/** 树的方法开始 */
|
||
|
|
var machines = new Set(); //专业容器
|
||
|
|
var size = 1; //序号
|
||
|
|
var map =[];
|
||
|
|
var mapinfo={};
|
||
|
|
function loadOrgTree(){
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: ctxPath + "/users/getDepartmentTree",
|
||
|
|
data: {},
|
||
|
|
dataType: "json",
|
||
|
|
success: function(data) {
|
||
|
|
$.fn.zTree.init($("#departmentTree"),{view:{dblClickExpand:true,selectedMulti:false,nameIsHTML:true},data:{simpleData:{enable: true}},
|
||
|
|
callback:{onClick:clickRole
|
||
|
|
}},data.obj);
|
||
|
|
// 获取树对象
|
||
|
|
var treeObj = $.fn.zTree.getZTreeObj("departmentTree");
|
||
|
|
/* 获取所有树节点 */
|
||
|
|
var nodes = treeObj.transformToArray(treeObj.getNodes());
|
||
|
|
//展开第一级树
|
||
|
|
treeObj.expandNode(nodes[1], true);
|
||
|
|
},
|
||
|
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
||
|
|
alert("未连接到服务器，请检查网络！");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 专业的选择
|
||
|
|
*/
|
||
|
|
var preisShow=false;//窗口是否显示
|
||
|
|
function showRole() {
|
||
|
|
if(preisShow){
|
||
|
|
hideRole();
|
||
|
|
}else{
|
||
|
|
var obj = $("#department");
|
||
|
|
var offpos = $("#department").position();
|
||
|
|
$("#orgContent").css({width:offpos.width+"px",left:offpos.left+"px",top:offpos.top+obj.heigth+"px"}).slideDown("fast");
|
||
|
|
preisShow=true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideRole(){
|
||
|
|
$("#orgContent").fadeOut("fast");
|
||
|
|
preisShow=false;
|
||
|
|
}
|
||
|
|
var isParent = null
|
||
|
|
var examPerfession = null;
|
||
|
|
var typeId = null;
|
||
|
|
function clickRole(e, treeId, treeNode) {
|
||
|
|
// if(!treeNode.isParent){
|
||
|
|
var check = (treeNode);
|
||
|
|
if(check){
|
||
|
|
var zTree = $.fn.zTree.getZTreeObj("departmentTree"),
|
||
|
|
nodes = zTree.getSelectedNodes(),v ="",n ="",o="",p="";
|
||
|
|
for (var i=0, l=nodes.length; i<l; i++) {
|
||
|
|
v += nodes[i].name + ",";//获取name值
|
||
|
|
n += nodes[i].id + ",";//获取id值
|
||
|
|
o += nodes[i].other + ",";//获取自定义值
|
||
|
|
var pathNodes=nodes[i].getPath();
|
||
|
|
for(var y=0;y<pathNodes.length;y++){
|
||
|
|
p+=pathNodes[y].name+"/";//获取path/name值
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (v.length > 0 ) v = v.substring(0, v.length-1);
|
||
|
|
if (n.length > 0 ) n = n.substring(0, n.length-1);
|
||
|
|
if (o.length > 0 ) o = o.substring(0, o.length-1);
|
||
|
|
if (p.length > 0 ) p = p.substring(0, p.length-1);
|
||
|
|
$("#departmentId").val(n);
|
||
|
|
$("#department").val(p);
|
||
|
|
// typeId = n;
|
||
|
|
examPerfession = n;
|
||
|
|
isParent = treeNode.isParent;
|
||
|
|
typeId = treeNode.type;
|
||
|
|
hideRole();
|
||
|
|
}
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
/**树的方法结束*/
|
||
|
|
|
||
|
|
</script>
|