66 lines
3.2 KiB
HTML
66 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>人员档案 - 智能排产系统</title>
|
|
<link rel="stylesheet" href="../css/common.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="header" id="header"></header>
|
|
<div class="body">
|
|
<aside class="sidebar" id="sidebar"></aside>
|
|
<main class="main">
|
|
<h1 class="page-title">人员档案</h1>
|
|
<div class="toolbar">
|
|
<button class="btn btn-primary" onclick="addPersonModal()">+ 新增人员</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body table-wrap">
|
|
<table id="personTable">
|
|
<thead><tr><th>人员编码</th><th>姓名</th><th>班组</th><th>可执行工序</th><th>状态</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="../js/data.js"></script>
|
|
<script src="../js/common.js"></script>
|
|
<script>
|
|
initPage('personnel');
|
|
if (!apsData.personnel) apsData.personnel = [];
|
|
function render() {
|
|
const tbody = document.querySelector('#personTable tbody');
|
|
tbody.innerHTML = apsData.personnel.map(p => {
|
|
const team = findById(apsData.teams, p.teamId);
|
|
const ops = (p.skillMatrix || []).map(s => { const op = findById(apsData.operations, s.operationId); return op ? op.name : ''; }).filter(Boolean).join('、');
|
|
return `<tr><td>${p.code}</td><td>${p.name}</td><td>${team ? team.name : '-'}</td><td>${ops || '-'}</td><td>${p.status}</td></tr>`;
|
|
}).join('') || '<tr><td colspan="5" class="text-center text-muted">无人员数据</td></tr>';
|
|
}
|
|
function addPersonModal() {
|
|
const teamOpts = apsData.teams.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
|
|
const opOpts = apsData.operations.map(o => `<option value="${o.id}">${o.name}</option>`).join('');
|
|
openModal('新增人员', `
|
|
<div class="form-row"><div class="form-group"><label>人员编码</label><input id="p_code"></div><div class="form-group"><label>姓名</label><input id="p_name"></div></div>
|
|
<div class="form-row"><div class="form-group"><label>班组</label><select id="p_team">${teamOpts}</select></div><div class="form-group"><label>可执行工序</label><select id="p_op">${opOpts}</select></div></div>
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="savePerson()">保存</button>`);
|
|
}
|
|
function savePerson() {
|
|
const code = document.getElementById('p_code').value.trim();
|
|
const name = document.getElementById('p_name').value.trim();
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和姓名', 'error');
|
|
apsData.personnel.push({
|
|
id: apsData.$utils.nextId('personnel'), code, name, teamId: Number(document.getElementById('p_team').value),
|
|
skillMatrix: [{ operationId: Number(document.getElementById('p_op').value), proficiencyLevel: 3 }],
|
|
status: 'ACTIVE'
|
|
});
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|