这段代码是一个基于 jQuery 的用户信息管理页面逻辑,主要实现用户个人信息的查看、修改以及密码修改功能,同时根据用户权限展示对应的薪资信息。

pull/1/head
gaoyating 6 months ago
parent cbb5575bdf
commit f6187f909e

@ -1,31 +1,44 @@
// 扩展jQuery方法添加获取URL参数的功能
(function($){
// 定义$.getData方法用于从URL查询参数中获取指定名称的值
$.getData=function(name){
// 构建正则表达式匹配URL中"name=value"的参数格式
var reg=new RegExp("(^|&)"+name+"=([^&]+)(&|$)?");
// 从URL的查询字符串?后的部分)中提取参数并匹配正则
var result = window.location.search.substr(1).match(reg);
if (result!= null) return result[2]; return null;
// 若匹配到结果则返回参数值否则返回null
if (result!= null) return result[2]; return null;
}
})(jQuery);
// 从URL参数中获取userid和power用户ID和权限等级
var userid=$.getData('userid');
var power=$.getData('power');
// 页面DOM加载完成后执行的初始化函数
$(document).ready(function(){
// 设置用户头像的宽高相等(正方形)
var w=$("#userpic").width();
$("#userpic").height(w);
// 给隐藏输入框赋值userid可能用于表单提交时传递用户ID
$("#inputNone").attr("value",userid);
// 绑定"查看信息"按钮点击事件,切换标签页
$("#showInfo").click(function(){
changeTab();
});
// 绑定"修改信息"按钮点击事件,切换标签页
$("#showAlter").click(function(){
changeTab();
});
// 加载用户基本信息
getInfo();
// 加载用户薪资信息(根据权限判断是否显示)
getSalary();
// 绑定"确认修改信息"按钮点击事件,执行修改信息逻辑
$("#alterInfoBtn").click(function(){
alterInfo();
});
// 绑定"确认修改密码"按钮点击事件,执行修改密码逻辑
$("#alterPwdBtn").click(function(){
alterPwd();
})
@ -35,6 +48,7 @@ $(document).ready(function(){
//判断对象/JSON是否为空 空返回1 非空返回0
function isEmptyObject(e) {
var t;
// 遍历对象,若存在属性则非空
for (t in e)
return 0;
return 1;
@ -42,85 +56,97 @@ function isEmptyObject(e) {
//判断字符串是否为空 空返回1 非空返回0
function isEmptyString(str){
// 若字符串为'null'或空字符串,视为空
if(str=='null'||str=='')
return 1;
return 0;
}
// 切换标签页(切换"查看信息"和"修改信息"区域的显示状态)
function changeTab(){
var info=$("#showInfodiv").css("display");
var alter=$("#showAlterdiv").css("display");
// 获取两个区域当前的显示状态
var info=$("#showInfodiv").css("display");// 查看信息区域
var alter=$("#showAlterdiv").css("display"); // 修改信息区域
// 若查看区域显示,则隐藏查看区域,淡入显示修改区域
if(info=="block"){
$("#showInfodiv").css("display","none");
$("#showAlterdiv").fadeIn();
$("#showAlterdiv").fadeIn();
}
else{
// 否则隐藏修改区域,淡入显示查看区域
$("#showAlterdiv").css("display","none")
$("#showInfodiv").fadeIn();
}
}
// 全局变量,用于存储用户信息
var info;
// 从后端获取用户详情信息并展示
function getInfo(){
$.ajax({
type:"POST",
url:"../user/getUserById.do",
dataType:"JSON",
type:"POST", // 请求类型
url:"../user/getUserById.do",// 后端接口地址根据用户ID获取信息
dataType:"JSON",// 预期返回数据类型
data:{
"userid":userid
"userid":userid // 请求参数用户ID
},
// 请求成功的回调函数
success:function(data){
if(data.code==0){
info=data.user;
var span=$("span");
if(data.code==0){// 后端返回成功状态code=0
info=data.user;// 存储用户信息到全局变量
var span=$("span");// 获取所有span标签
// 设置用户头像图片路径
$("#userpic").attr("src",'../'+info.photourl)
// 填充查看区域的用户信息(账号、身份证号、姓名、年龄、手机号)
span.filter("#account").text(info.useraccount);
span.filter("#idnum").text(info.idnumber);
span.filter("#name").text(info.username);
$("#inputName").val(info.username);
// 填充修改区域的输入框(默认显示当前信息)
span.filter("#age").text(info.age);
$("#inputAge").val(info.age)
span.filter("#phone").text(info.phonenumber);
$("#inputPhone").val(info.phonenumber)
}
else{
alert("获取信息失败");
alert("获取信息失败");// 后端返回失败
}
},
// 请求失败的回调函数
error:function(){
alert("获取信息出现错误");
}
})
}
// 提交用户基本信息修改请求
function alterInfo(){
// 从输入框获取修改后的信息
var name=$("#inputName").val();
var age=$("#inputAge").val();
var phone=$("#inputPhone").val();
// 校验输入是否为空
if(isEmptyString(name) || isEmptyString(age) || isEmptyString(phone)){
alert("请填写全信息");
}
else{
// 输入完整,发起修改请求
$.ajax({
type:"POST",
url:"../user/updateUser.do",
url:"../user/updateUser.do",// 后端修改用户信息接口
dataType:"JSON",
data:{
"userid":userid,
"password":info.password,
"username":name,
"age":age,
"power":power,
"IDnumber":info.idnumber,
"phonenumber":phone
"userid":userid, // 用户ID不变
"password":info.password, // 密码(不变,从原有信息获取)
"username":name,// 新姓名
"age":age, // 新年龄
"power":power,// 权限等级(不变)
"IDnumber":info.idnumber, // 身份证号(不变)
"phonenumber":phone // 新手机号
},
success:function(data){
if(data.code==0){
alert("修改成功");
window.location.reload();
window.location.reload();// 刷新页面加载最新信息
}
else
alert("修改失败")
@ -131,32 +157,36 @@ function alterInfo(){
})
}
}
// 提交密码修改请求
function alterPwd(){
var oldPwd=$("#inputoldPwd").val();
var newPwd=$("#inputnewPwd").val();
var renewPwd=$("#inputrenewPwd").val();
// 从输入框获取密码信息
var oldPwd=$("#inputoldPwd").val();// 原密码
var newPwd=$("#inputnewPwd").val(); // 新密码
var renewPwd=$("#inputrenewPwd").val(); // 确认新密码
if(isEmptyString(oldPwd) || isEmptyString(newPwd) || isEmptyString(renewPwd)){
alert("请填写全信息");
}
// 校验原密码是否正确(与原有信息比对)
else if(oldPwd!=info.password)
alert("原密码不正确");
// 校验新密码两次输入是否一致
else if(newPwd!=renewPwd)
alert("新密码输入错误")
else{
// 校验通过,发起密码修改请求
$.ajax({
type:"POST",
url:"../user/updateUser.do",
url:"../user/updateUser.do",// 后端修改用户信息接口(复用)
dataType:"JSON",
data:{
"userid":userid,
"password":newPwd
"userid":userid,// 用户ID
"password":newPwd // 新密码
},
success:function(data){
if(data.code==0){
alert("修改成功");
window.location.reload();
window.location.reload(); // 刷新页面
}
else
alert("修改失败")
@ -168,31 +198,38 @@ function alterPwd(){
}
}
// 获取并展示用户薪资信息(根据权限判断是否显示)
function getSalary(){
// 若权限不为"0"假设0为非员工/游客1/2/3为不同角色则显示薪资区域
if(power!="0"){
$("#showS").css("display","block");
$("#showC").css("display","block");
$("#showS").css("display","block");// 显示薪资标签
$("#showC").css("display","block");// 显示提成标签
// 从后端获取薪资配置信息
$.ajax({
type:"POST",
url:"../config/getConfig.do",
url:"../config/getConfig.do",// 后端获取配置接口
dataType:"JSON",
data:{},
data:{},// 无参数
success:function(data){
if(data.code=="0"){
var config=data.config;
if(power=="1"){
$("#salary").text(config.manage);
$("#commission").text(config.managesalary+"%");
if(data.code=="0"){// 配置获取成功
var config=data.config;// 薪资配置信息
// 根据权限等级显示对应角色的薪资和提成比例
if(power=="1"){ // 假设1为经理
$("#salary").text(config.manage); // 经理基础薪资
$("#commission").text(config.managesalary+"%");// 经理提成比例
}
else if(power=="2"){
$("#salary").text(config.staff);
$("#commission").text(config.staffsalary+"%");
else if(power=="2"){// 假设2为员工
$("#salary").text(config.staff);// 员工基础薪资
$("#commission").text(config.staffsalary+"%");// 员工提成比例
}
else{
$("#salary").text(config.cleaner);
$("#commission").text(config.cleanerssalary+"%");
else{ // 其他权限(假设为清洁工)
$("#salary").text(config.cleaner); // 清洁工基础薪资
$("#commission").text(config.cleanerssalary+"%");// 清洁工提成比例
}
}
else{
alert("获取配置错误");

Loading…
Cancel
Save