401 lines
19 KiB
HTML
401 lines
19 KiB
HTML
|
||
<!-- 引入部门表单配置 -->
|
||
<script type="text/javascript" src="/ASSETS/js/formConfigs/departmentMemberForm.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
||
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body>
|
||
<div class="x-nav">
|
||
<span class="layui-breadcrumb">
|
||
<a>首页</a>
|
||
<a>工作室</a>
|
||
<a><cite>部门人员管理</cite></a>
|
||
</span>
|
||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
|
||
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
||
</a>
|
||
<div class="layui-btn-group" style="float:right;margin-top:3px;margin-right:10px;">
|
||
<button class="layui-btn layui-btn-small" id="viewSwitchBtn">
|
||
当前视图: <span id="currentViewName">加载中...</span>
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="layui-fluid">
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-col-md12">
|
||
<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-warm layui-btn-sm" lay-event="AddMember">添加成员</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="DeleteUser">删除选中的用户</button>
|
||
<button class="layui-btn layui-btn-sm" lay-event="Refresh">刷新</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-warm layui-btn-xs" lay-event="edit">编辑</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;
|
||
|
||
// 从URL获取DepartmentUUID参数
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const urlDepartmentUUID = urlParams.get('DepartmentUUID') || ''; // 优先使用URL中的UUID
|
||
|
||
// 视图列表（从API获取，统一字段格式）
|
||
let viewList = [];
|
||
// 当前选中的视图（关键：存储当前部门信息）
|
||
let currentView = null;
|
||
// 表格实例
|
||
let tableInst = null;
|
||
|
||
// 从API获取视图列表（统一映射格式）
|
||
function getViewList() {
|
||
return new Promise((resolve, reject) => {
|
||
$.get('/API/Department/GetDepartments', function(res) {
|
||
if (res.code === 0 && Array.isArray(res.data)) {
|
||
viewList = [
|
||
{ DepartmentUUID: '0'.repeat(32), DepartmentName: '所有部门', EnglishName: 'All Departments' },
|
||
...res.data.map(item => ({
|
||
DepartmentUUID: item.DepartmentUUID,
|
||
DepartmentName: item.DepartmentName,
|
||
EnglishName: item.DepartmentEnglishName,
|
||
...item
|
||
}))
|
||
];
|
||
resolve(viewList);
|
||
} else {
|
||
reject('获取视图列表失败：' + (res.msg || '未知错误'));
|
||
}
|
||
}).fail(err => {
|
||
reject('网络错误：' + err.statusText);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 渲染树形表格（使用当前视图的DepartmentUUID和DepartmentName）
|
||
function renderTable() {
|
||
if (!currentView?.DepartmentUUID) return null;
|
||
|
||
return treeTable.render({
|
||
elem: '#ID-treeTable',
|
||
id: 'ID-treeTable',
|
||
// 请求参数携带部门UUID和名称（与视图列表字段保持一致）
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`,
|
||
tree: {
|
||
view: {
|
||
iconLeaf: '<i class="layui-icon layui-icon-username"></i>'
|
||
}
|
||
},
|
||
toolbar: '#TPL-treeTable',
|
||
cols: [[
|
||
{ type: 'checkbox', fixed: 'left' },
|
||
{ field: 'DepartmentUUIDs', title: '部门编号', minWidth: 10 },
|
||
{ field: 'Departments', title: '员工部门', minWidth: 50 },
|
||
{ field: 'PersonInChargeStatus', title: '员工类别', minWidth: 50, templet: function(d) {
|
||
return d.PersonInChargeStatus ?
|
||
'<span class="layui-badge layui-bg-yellow">负责人</span>' :
|
||
'<span class="layui-badge layui-bg-blue">职员</span>';
|
||
}},
|
||
{ field: 'UserUUID', title: '员工编号', minWidth: 100 },
|
||
{ field: 'UserJobNumber', title: '员工工号', minWidth: 100 },
|
||
{ field: 'UserName', title: '员工昵称', minWidth: 100 },
|
||
{ field: 'UserPermission', title: '员工权限', minWidth: 50 },
|
||
{ field: 'UserGender', title: '员工性别', minWidth: 50 },
|
||
{ field: 'UserEmail', title: '员工邮件', minWidth: 100 },
|
||
{ field: 'UserTele', title: '员工电话', minWidth: 100 },
|
||
{ field: 'UserLastLoginDate', title: '员工账户最后登录时间', minWidth: 200 },
|
||
{ field: 'UserCreateTime', title: '员工账户创建时间', minWidth: 200 },
|
||
{
|
||
fixed: 'right',
|
||
title: '操作',
|
||
width: 200,
|
||
align: 'center',
|
||
toolbar: '#TPL-treeTable-tools'
|
||
}
|
||
]],
|
||
page: false
|
||
});
|
||
}
|
||
|
||
// 渲染视图切换下拉菜单（使用DepartmentName作为显示文本，DepartmentUUID作为标识）
|
||
function renderViewDropdown() {
|
||
dropdown.render({
|
||
elem: '#viewSwitchBtn',
|
||
data: viewList.map(view => ({
|
||
title: view.DepartmentName, // 显示部门名称
|
||
id: view.DepartmentUUID // 用部门UUID作为唯一标识
|
||
})),
|
||
click: function(data) {
|
||
const selectedView = viewList.find(view => view.DepartmentUUID === data.id);
|
||
if (selectedView && selectedView.DepartmentUUID !== currentView?.DepartmentUUID) {
|
||
currentView = selectedView;
|
||
// 更新URL中的DepartmentUUID参数，保持同步
|
||
urlParams.set('DepartmentUUID', currentView.DepartmentUUID);
|
||
window.history.replaceState(null, '', `${window.location.pathname}?${urlParams.toString()}`);
|
||
|
||
// 更新视图显示
|
||
document.getElementById('currentViewName').textContent = currentView.DepartmentName;
|
||
tableInst = renderTable();
|
||
xadmin.updateTabTitle(`部门管理 - 视图 [${currentView.DepartmentName}]`);
|
||
layer.msg(`已切换到${currentView.DepartmentName}`, {icon: 1});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化当前视图（优先匹配URL中的DepartmentUUID）
|
||
function initCurrentView() {
|
||
if (urlDepartmentUUID && viewList.length > 0) {
|
||
// 优先通过URL中的DepartmentUUID匹配视图
|
||
const matchedView = viewList.find(view => view.DepartmentUUID === urlDepartmentUUID);
|
||
if (matchedView) {
|
||
return matchedView;
|
||
} else {
|
||
layer.msg(`未找到ID为${urlDepartmentUUID}的部门，将使用默认视图`, {icon: 3});
|
||
}
|
||
}
|
||
// 无匹配时使用第一个视图（所有部门）
|
||
return viewList.length > 0 ? viewList[0] : null;
|
||
}
|
||
|
||
// 初始化页面
|
||
async function init() {
|
||
try {
|
||
// 1. 加载视图列表
|
||
await getViewList();
|
||
|
||
if (viewList.length === 0) {
|
||
document.getElementById('currentViewName').textContent = '无视图数据';
|
||
layer.msg('未获取到部门视图数据', {icon: 2});
|
||
return;
|
||
}
|
||
|
||
// 2. 初始化当前视图（优先URL参数）
|
||
currentView = initCurrentView();
|
||
if (!currentView) {
|
||
document.getElementById('currentViewName').textContent = '视图初始化失败';
|
||
return;
|
||
}
|
||
|
||
// 3. 更新视图显示名称
|
||
document.getElementById('currentViewName').textContent = currentView.DepartmentName;
|
||
|
||
// 4. 渲染表格和下拉菜单
|
||
tableInst = renderTable();
|
||
renderViewDropdown();
|
||
|
||
} catch (err) {
|
||
document.getElementById('currentViewName').textContent = '加载失败';
|
||
layer.msg(err, {icon: 2});
|
||
}
|
||
}
|
||
|
||
// 启动初始化
|
||
init();
|
||
|
||
// 表头工具栏事件
|
||
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 'DeleteUser':
|
||
Toast.warning('部门变更操作', '删除成员应由组织决定！', 3000);
|
||
layer.confirm("确定要删除这些成员吗？即使删除后可以还原添加，但仍然会影响 GERP-ATSA 自动计划安排", {
|
||
title: '删除确认',
|
||
icon: 3,
|
||
}, function(index) {
|
||
$.post(`/API/Department/DeleteDepartmentMember`, {
|
||
DepartmentUUID: currentView.DepartmentUUID,
|
||
UserUUIDs: data.map(row => row.UserUUID).join('\n')
|
||
}, function(data) {
|
||
if (data.code == 0) {
|
||
layer.msg('删除成功', {icon: 1});
|
||
if (tableInst) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
}
|
||
} else {
|
||
layer.msg(`删除失败：${data.msg}`, {icon: 5});
|
||
}
|
||
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
||
layer.close(index);
|
||
});
|
||
break;
|
||
case 'Refresh':
|
||
if (tableInst && currentView) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
layer.msg('已刷新', {icon: 1});
|
||
}
|
||
break;
|
||
case 'AddMember':
|
||
// 关键修复1：添加成员时使用 currentView.DepartmentUUID（当前选中视图的部门ID）
|
||
if (!currentView?.DepartmentUUID) {
|
||
layer.msg('请先选择部门视图', {icon: 2});
|
||
return;
|
||
}
|
||
formEngine.openRegisteredForm('department-member-add', {
|
||
confirm: function(data, close) {
|
||
// 携带当前选中部门的UUID
|
||
data.DepartmentUUID = currentView.DepartmentUUID;
|
||
$.post(`/API/Department/AddDepartmentMember`, data, function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('成功添加成员', {icon: 1});
|
||
// 重新加载当前视图的表格数据
|
||
if (tableInst) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
}
|
||
close();
|
||
} else {
|
||
layer.msg(`添加失败：${res.msg}`, {icon: 5});
|
||
}
|
||
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 单元格工具事件
|
||
treeTable.on(`tool(ID-treeTable)`, function(obj) {
|
||
const { event: layEvent, data: trData, tr: trElem, config: { id: tableId } } = obj;
|
||
|
||
if (layEvent === 'detail') {
|
||
xadmin.add_tab_f(
|
||
`部门成员 - [${trData.UserName}]`,
|
||
`/WorkGroup/MemberCard.html?UserUUID=${trData.UserUUID}`
|
||
);
|
||
}
|
||
else if (layEvent === 'edit') {
|
||
formEngine.openRegisteredForm('department-edit', {
|
||
data: trData,
|
||
confirm: function(data, close) {
|
||
// 编辑时携带当前选中部门的UUID（确保修改的是当前视图的部门数据）
|
||
data.DepartmentUUID = currentView.DepartmentUUID;
|
||
$.post('/API/Department/ModifyDepartmentSettings', data, function(res) {
|
||
if (res.code == 0) {
|
||
layer.msg('成功修改部门信息', {icon: 1});
|
||
// 重新加载当前视图的表格数据
|
||
if (tableInst) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
}
|
||
close();
|
||
} else {
|
||
layer.msg(`修改失败：${res.msg}`, {icon: 5});
|
||
}
|
||
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
||
}
|
||
});
|
||
}
|
||
else if (layEvent === 'more') {
|
||
dropdown.render({
|
||
elem: this,
|
||
show: true,
|
||
align: 'right',
|
||
data: [{ title: '删除', id: 'del' }, { title: '设为负责人', id: 'setPersonInCharge' }],
|
||
click: function(menudata) {
|
||
if (menudata.id === 'del') {
|
||
Toast.warning('部门变更操作', '删除成员应由组织决定！', 3000);
|
||
layer.confirm(`确定要删除 ${trData.UserName} 吗？即使删除后可以还原添加，但仍然会影响 GERP-ATSA 自动计划安排`, {
|
||
title: '删除确认',
|
||
icon: 3,
|
||
}, function(index) {
|
||
$.post(`/API/Department/DeleteDepartmentMember`, {
|
||
DepartmentUUID: currentView.DepartmentUUID,
|
||
UserUUIDs: trData.UserUUID
|
||
}, function(data) {
|
||
if (data.code == 0) {
|
||
layer.msg('删除成功', {icon: 1});
|
||
obj.del();
|
||
// 重新加载当前视图的表格数据
|
||
if (tableInst) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
}
|
||
} else {
|
||
layer.msg(`删除失败：${data.msg}`, {icon: 5});
|
||
}
|
||
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
||
layer.close(index);
|
||
});
|
||
}
|
||
if (menudata.id === 'setPersonInCharge') {
|
||
Toast.warning('部门变更操作', '负责人应由组织决定！', 3000);
|
||
layer.confirm(`确认要将 ${trData.UserName} 会影响 GERP-ATSA 自动计划安排`, {
|
||
title: '设置确认',
|
||
icon: 3,
|
||
}, function(index) {
|
||
$.post(`/API/Department/SetPersonInCharge`, {
|
||
DepartmentUUID: currentView.DepartmentUUID,
|
||
UserUUID: trData.UserUUID
|
||
}, function(data) {
|
||
if (data.code == 0) {
|
||
layer.msg('设置部门负责人成功', {icon: 1});
|
||
obj.del();
|
||
// 重新加载当前视图的表格数据
|
||
if (tableInst) {
|
||
tableInst.reload({
|
||
url: `/API/Department/GetDepartmentMembers?DepartmentUUID=${currentView.DepartmentUUID}`
|
||
});
|
||
}
|
||
} else {
|
||
layer.msg(`设置部门负责人失败：${data.msg}`, {icon: 5});
|
||
}
|
||
}).fail(() => layer.msg('网络错误', {icon: 5}));
|
||
layer.close(index);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |