518 lines
25 KiB
HTML
518 lines
25 KiB
HTML
<resource-share type="script" src="/assets/js/formConfigs/userForm.js"></resource-share>
|
||
<div class="layui-fluid">
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<!-- 搜索栏 -->
|
||
<div class="layui-card-header">
|
||
<form class="layui-form layui-form-pane" lay-filter="searchForm">
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-inline" style="width: 150px;">
|
||
<select name="SearchField" lay-verify="">
|
||
<option value="UserUUID">用户编号</option>
|
||
<option value="UserJobNumber">用户工号</option>
|
||
<option value="UserName">用户昵称</option>
|
||
<option value="UserEmail">用户邮件</option>
|
||
<option value="UserTele">用户电话</option>
|
||
</select>
|
||
</div>
|
||
<div class="layui-input-inline" style="width: 200px;">
|
||
<input type="text" name="SearchKeyword" placeholder="请输入搜索关键词" class="layui-input">
|
||
</div>
|
||
<div class="layui-input-inline" style="width: 120px;">
|
||
<select name="MatchMode" lay-verify="">
|
||
<option value="Like">模糊匹配</option>
|
||
<option value="Regex">正则匹配</option>
|
||
</select>
|
||
</div>
|
||
<div class="layui-input-inline" style="width: 150px;">
|
||
<select name="SortField" lay-verify="">
|
||
<option value="UserCreateTime">创建时间</option>
|
||
<option value="UserLastLoginDate">最后登录</option>
|
||
<option value="UserName">昵称排序</option>
|
||
<option value="UserPermission">权限等级</option>
|
||
</select>
|
||
</div>
|
||
<div class="layui-input-inline" style="width: 100px;">
|
||
<select name="SortOrder" lay-verify="">
|
||
<option value="Desc">降序</option>
|
||
<option value="Asc">升序</option>
|
||
</select>
|
||
</div>
|
||
<button class="layui-btn layui-btn-normal" type="button" id="searchBtn">
|
||
<i class="layui-icon layui-icon-search"></i> 搜索
|
||
</button>
|
||
<button class="layui-btn layui-btn-primary" type="button" id="resetBtn">
|
||
<i class="layui-icon layui-icon-refresh"></i> 重置
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<table class="layui-hide" id="ID-treeTable"></table>
|
||
<script type="text/html" id="TPL-treeTable">
|
||
<div class="layui-btn-container">
|
||
<button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="NewUser">
|
||
<i class="layui-icon layui-icon-add"></i> 新建用户
|
||
</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="FullChecked">展开全部</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="FullOutChecked">收起全部</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="CopyCheckedUUID">复制选中的 UUID</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="Refresh">刷新</button>
|
||
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="batchDelete" style="float: right;">
|
||
<i class="layui-icon layui-icon-delete"></i> 批量删除
|
||
</button>
|
||
</div>
|
||
</script>
|
||
<script type="text/html" id="TPL-treeTable-tools">
|
||
<div class="layui-btn-container">
|
||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detailBackpack">查看背包</a>
|
||
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
|
||
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="CopyUUID">复制 UUID</a>
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
|
||
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
|
||
</div>
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
layui.use(['treeTable', 'layer', 'dropdown', 'form', 'formEngine', 'jquery'], function() {
|
||
const treeTable = layui.treeTable;
|
||
const layer = layui.layer;
|
||
const dropdown = layui.dropdown;
|
||
const form = layui.form;
|
||
const formEngine = layui.formEngine;
|
||
const $ = layui.jquery;
|
||
|
||
// 统一错误处理函数
|
||
function handleAjaxError(xhr) {
|
||
try {
|
||
const response = JSON.parse(xhr.responseText);
|
||
const errorMsg = response.msg || '未知错误';
|
||
layer.msg(`请求失败: ${errorMsg}`, {icon: 5});
|
||
} catch (e) {
|
||
layer.msg('网络错误或服务器错误', {icon: 5});
|
||
}
|
||
}
|
||
|
||
// 渲染树形表格（启用分页）
|
||
const tableInst = treeTable.render({
|
||
elem: '#ID-treeTable',
|
||
id: 'ID-treeTable',
|
||
url: '/API/SiteUserManagement/GetSiteUsers',
|
||
tree: {
|
||
view: {
|
||
iconLeaf: '<i class="layui-icon layui-icon-username"></i>'
|
||
},
|
||
// 如果不需要树形结构，可设置 enable: false
|
||
enable: true
|
||
},
|
||
toolbar: '#TPL-treeTable',
|
||
cols: [[
|
||
{ type: 'checkbox', fixed: 'left' },
|
||
{ field: 'UserUUID', title: '用户编号', minWidth: 120, fixed: 'left' },
|
||
{ field: 'UserJobNumber', title: '用户工号', minWidth: 120 },
|
||
{ field: 'UserName', title: '用户昵称', minWidth: 100 },
|
||
{ field: 'UserPermission', title: '用户权限', minWidth: 80, templet: function(d) {
|
||
// 权限等级格式化显示
|
||
const permissionMap = {
|
||
1.0: '管理员',
|
||
0.5: '操作员',
|
||
0.1: '普通用户'
|
||
};
|
||
return permissionMap[d.UserPermission] || d.UserPermission;
|
||
}},
|
||
{ field: 'UserGender', title: '用户性别', minWidth: 60 },
|
||
{ field: 'UserEmail', title: '用户邮件', minWidth: 180 },
|
||
{ field: 'UserEmailVerify', title: '邮件验证', minWidth: 50, templet: function(d) {
|
||
return d.UserEmailVerify ?
|
||
'<span class="layui-badge layui-bg-blue">已验证</span>' :
|
||
'<span class="layui-badge layui-bg-red">未验证</span>';
|
||
}},
|
||
{ field: 'UserAccountLicense', title: '账户许可证', minWidth: 50, templet: function(d) {
|
||
return d.UserAccountLicense ?
|
||
'<span class="layui-badge layui-bg-green">通过</span>' :
|
||
'<span class="layui-badge layui-bg-red">终止</span>';
|
||
}},
|
||
{ field: 'UserTele', title: '用户电话', minWidth: 120 },
|
||
{ field: 'UserLastLoginDate', title: '最后登录时间', minWidth: 200 },
|
||
{ field: 'UserCreateTime', title: '创建时间', minWidth: 200 },
|
||
{
|
||
fixed: 'right',
|
||
title: '操作',
|
||
width: 400,
|
||
align: 'center',
|
||
toolbar: '#TPL-treeTable-tools'
|
||
}
|
||
]],
|
||
page: true, // 启用分页
|
||
limit: 10, // 每页默认10条
|
||
limits: [5, 10, 20, 50, 100], // 每页条数选择器
|
||
request: {
|
||
pageName: 'PageIndex', // 页码参数名（匹配API）
|
||
limitName: 'PageSize' // 每页条数参数名（匹配API）
|
||
},
|
||
response: {
|
||
statusName: 'code', // 状态码字段名
|
||
statusCode: 0, // 成功状态码
|
||
countName: 'count', // 总条数字段名
|
||
dataName: 'data' // 数据列表字段名
|
||
},
|
||
error: function(xhr) {
|
||
handleAjaxError(xhr);
|
||
}
|
||
});
|
||
|
||
// 搜索按钮事件
|
||
$('#searchBtn').on('click', function() {
|
||
const formData = form.val('searchForm');
|
||
// 重新加载表格，携带搜索参数
|
||
tableInst.reload({
|
||
where: formData,
|
||
page: {
|
||
curr: 1 // 搜索后重置到第一页 (layui 2.6+ 使用 curr)
|
||
}
|
||
});
|
||
});
|
||
|
||
// 重置按钮事件
|
||
$('#resetBtn').on('click', function() {
|
||
form.val('searchForm', {
|
||
SearchField: 'UserUUID',
|
||
SearchKeyword: '',
|
||
MatchMode: 'Like',
|
||
SortField: 'UserCreateTime',
|
||
SortOrder: 'Desc'
|
||
});
|
||
// 重置表格
|
||
tableInst.reload({
|
||
where: {},
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
});
|
||
|
||
// 表头工具栏事件
|
||
treeTable.on('toolbar(ID-treeTable)', function(obj) {
|
||
const tableId = obj.config.id;
|
||
const checkStatus = treeTable.checkStatus(tableId);
|
||
const data = checkStatus.data;
|
||
|
||
switch (obj.event) {
|
||
case 'FullChecked':
|
||
layer.msg('成功展开全部', {icon: 1});
|
||
treeTable.expandAll(tableId, true);
|
||
break;
|
||
case 'FullOutChecked':
|
||
layer.msg('成功收起全部', {icon: 1});
|
||
treeTable.expandAll(tableId, false);
|
||
break;
|
||
case 'CopyCheckedUUID':
|
||
copyToClipboard({ text: data.map(row => row.UserUUID).join('\n') }).then(() => {
|
||
layer.msg(`复制成功`, {icon: 1});
|
||
})
|
||
.catch((err) => {
|
||
layer.msg(`复制失败：${err}`, {icon: 5});
|
||
});
|
||
break;
|
||
case 'Refresh':
|
||
tableInst.reload();
|
||
layer.msg('已刷新', {icon: 1});
|
||
break;
|
||
case 'NewUser':
|
||
// 打开新建用户表单
|
||
formEngine.openRegisteredForm('user-add', {
|
||
confirm: function(formData, close) {
|
||
$.ajax({
|
||
url: '/API/SiteUserManagement/AddUser',
|
||
type: 'POST',
|
||
data: formData,
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('成功添加用户', {icon: 1});
|
||
tableInst.reload();
|
||
close();
|
||
} else {
|
||
layer.msg(`添加失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
}
|
||
});
|
||
break;
|
||
case 'batchDelete':
|
||
if (data.length === 0) {
|
||
layer.msg('请选择要删除的用户', {icon: 3});
|
||
return;
|
||
}
|
||
// 获取选中用户的UUID列表
|
||
const userUUIDs = data.map(item => item.UserUUID);
|
||
layer.confirm("确定要删除选中的 " + data.length + " 个用户吗？删除后不可恢复！", {
|
||
title: '批量删除确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/BatchDeleteUsers",
|
||
type: 'POST',
|
||
data: { UserUUIDs: userUUIDs },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('删除成功', {icon: 1});
|
||
tableInst.reload();
|
||
} else {
|
||
layer.msg(`删除失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 单元格工具事件
|
||
treeTable.on(`tool(${tableInst.config.id})`, function(obj) {
|
||
const { event: layEvent, data: trData } = obj;
|
||
|
||
if (layEvent === 'detail') {
|
||
layer.open({
|
||
type: 2,
|
||
title: `用户详情 - ${trData.UserName}`,
|
||
content: `/WorkGroup/UserDetail.html?UserUUID=${trData.UserUUID}`,
|
||
area: ['800px', '600px'],
|
||
shade: 0.3,
|
||
maxmin: true
|
||
});
|
||
}
|
||
if (layEvent === 'detailBackpack') {
|
||
gerp.addTab(
|
||
`站点用户管理 - 背包 [${trData.UserName}]`,
|
||
`/KeyUnit/Backpack.html?UserUUID=${trData.UserUUID}`
|
||
);
|
||
}
|
||
else if (layEvent === 'edit') {
|
||
formEngine.openRegisteredForm('user-edit', {
|
||
data: trData,
|
||
confirm: function(formData, close) {
|
||
formData.UserUUID = trData.UserUUID;
|
||
$.ajax({
|
||
url: '/API/SiteUserManagement/ModifyUser',
|
||
type: 'POST',
|
||
data: formData,
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('成功修改用户信息', {icon: 1});
|
||
tableInst.reload();
|
||
close();
|
||
} else {
|
||
layer.msg(`修改失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
}
|
||
});
|
||
}
|
||
else if (layEvent === 'CopyUUID') {
|
||
copyToClipboard({ text: trData.UserUUID }).then(() => {
|
||
layer.msg(`复制成功，UUID: ${trData.UserUUID}`, {icon: 1});
|
||
})
|
||
.catch((err) => {
|
||
layer.msg(`复制失败：${err}`, {icon: 1});
|
||
});
|
||
}
|
||
else if (layEvent === 'delete') {
|
||
// 单个删除
|
||
layer.confirm("确定要删除用户【" + trData.UserName + "】吗？删除后不可恢复！", {
|
||
title: '删除确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/DeleteUser",
|
||
type: 'POST',
|
||
data: { UserUUID: trData.UserUUID },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('删除成功', {icon: 1});
|
||
obj.del(); // 删除表格行
|
||
tableInst.reload();
|
||
} else {
|
||
layer.msg(`删除失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
}
|
||
else if (layEvent === 'more') {
|
||
// 更多操作下拉菜单
|
||
dropdown.render({
|
||
elem: this,
|
||
show: true,
|
||
align: 'right',
|
||
data: [
|
||
{ title: '重置密码', id: 'resetPwd' },
|
||
{ title: '验证密码', id: 'verifyPassword' },
|
||
{ title: '禁用账户', id: 'disableAccount' },
|
||
{ title: '启用账户', id: 'enableAccount' },
|
||
{ title: '通过邮箱验证', id: 'enableEmailVerify' },
|
||
{ title: '结束邮箱验证', id: 'disableEmailVerify' },
|
||
],
|
||
click: function(menudata) {
|
||
switch (menudata.id) {
|
||
case 'resetPwd':
|
||
layer.prompt({
|
||
title: '重置密码',
|
||
value: '123456789',
|
||
formType: 1
|
||
}, function(pwd, index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/ResetPassword",
|
||
type: 'POST',
|
||
data: {
|
||
UserUUID: trData.UserUUID,
|
||
UserNewPassword: pwd
|
||
},
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('密码重置成功', {icon: 1});
|
||
} else {
|
||
layer.msg(`重置失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
case 'verifyPassword':
|
||
layer.prompt({
|
||
title: '验证用户密码',
|
||
formType: 1 // 密码输入框
|
||
}, function(pwd, index) {
|
||
// 发起请求验证密码
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/VerifyPassword",
|
||
type: 'POST',
|
||
data: {
|
||
UserUUID: trData.UserUUID,
|
||
UserPassword: pwd
|
||
},
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('密码正确', {icon: 1, time: 1500});
|
||
} else {
|
||
layer.msg(`密码错误：${res.msg || '未知错误'}`, {icon: 5, time: 2000});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index); // 关闭输入框
|
||
});
|
||
break;
|
||
case 'disableAccount':
|
||
layer.confirm("确定要禁用用户【" + trData.UserName + "】吗？", {
|
||
title: '禁用确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/DisableAccount",
|
||
type: 'POST',
|
||
data: { UserUUID: trData.UserUUID },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('账户已禁用', {icon: 1});
|
||
tableInst.reload();
|
||
} else {
|
||
layer.msg(`禁用失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
case 'enableAccount':
|
||
layer.confirm("确定要启用用户【" + trData.UserName + "】吗？", {
|
||
title: '启用确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/EnableAccount",
|
||
type: 'POST',
|
||
data: { UserUUID: trData.UserUUID },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('账户已启用', {icon: 1});
|
||
tableInst.reload();
|
||
} else {
|
||
layer.msg(`启用失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
case 'enableEmailVerify':
|
||
layer.confirm(`确定要通过用户【${trData.UserName}】的邮箱验证吗？`, {
|
||
title: '通过邮箱验证确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/EnableAccountEmailVerify",
|
||
type: 'POST',
|
||
data: { UserUUID: trData.UserUUID },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('邮箱验证已通过', {icon: 1});
|
||
tableInst.reload(); // 刷新表格更新状态
|
||
} else {
|
||
layer.msg(`通过失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
case 'disableEmailVerify':
|
||
layer.confirm(`确定要结束用户【${trData.UserName}】的邮箱验证状态吗？`, {
|
||
title: '结束邮箱验证确认',
|
||
icon: 3
|
||
}, function(index) {
|
||
$.ajax({
|
||
url: "/API/SiteUserManagement/DisableAccountEmailVerify",
|
||
type: 'POST',
|
||
data: { UserUUID: trData.UserUUID },
|
||
success: function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('邮箱验证已结束', {icon: 1});
|
||
tableInst.reload(); // 刷新表格更新状态
|
||
} else {
|
||
layer.msg(`结束失败：${res.msg}`, {icon: 5});
|
||
}
|
||
},
|
||
error: handleAjaxError
|
||
});
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 表单渲染
|
||
form.render();
|
||
});
|
||
</script> |