81 lines
5.1 KiB
HTML
81 lines
5.1 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="row">
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-header flex justify-between">班组<button class="btn btn-sm btn-primary" onclick="addTeamModal()">+ 新增</button></div>
|
|
<div class="card-body table-wrap"><table id="teamTable"><thead><tr><th>编码</th><th>名称</th><th>车间</th><th>人数</th><th>技能等级</th></tr></thead><tbody></tbody></table></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-header flex justify-between">班次<button class="btn btn-sm btn-primary" onclick="addShiftModal()">+ 新增</button></div>
|
|
<div class="card-body table-wrap"><table id="shiftTable"><thead><tr><th>编码</th><th>名称</th><th>开始</th><th>结束</th><th>休息</th><th>加班</th></tr></thead><tbody></tbody></table></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="../js/data.js"></script>
|
|
<script src="../js/common.js"></script>
|
|
<script>
|
|
initPage('teams');
|
|
function render() {
|
|
const tt = document.querySelector('#teamTable tbody');
|
|
tt.innerHTML = apsData.teams.map(t => {
|
|
const ws = findById(apsData.workshops, t.workshopId);
|
|
return `<tr><td>${t.code}</td><td>${t.name}</td><td>${ws ? ws.name : '-'}</td><td>${t.memberCount}</td><td>${t.skillLevel}</td></tr>`;
|
|
}).join('') || '<tr><td colspan="5" class="text-center text-muted">无数据</td></tr>';
|
|
const st = document.querySelector('#shiftTable tbody');
|
|
st.innerHTML = apsData.shifts.map(s => {
|
|
const breaks = (s.breakPeriods || []).map(b => `${b.start}-${b.end}`).join('、');
|
|
return `<tr><td>${s.code}</td><td>${s.name}</td><td>${s.startTime}</td><td>${s.endTime}</td><td>${breaks || '-'}</td><td>${s.isOvertime ? '是' : '否'}</td></tr>`;
|
|
}).join('') || '<tr><td colspan="6" class="text-center text-muted">无数据</td></tr>';
|
|
}
|
|
function addTeamModal() {
|
|
const wsOpts = apsData.workshops.map(w => `<option value="${w.id}">${w.name}</option>`).join('');
|
|
openModal('新增班组', `
|
|
<div class="form-row"><div class="form-group"><label>编码</label><input id="t_code"></div><div class="form-group"><label>名称</label><input id="t_name"></div></div>
|
|
<div class="form-row"><div class="form-group"><label>车间</label><select id="t_ws">${wsOpts}</select></div><div class="form-group"><label>人数</label><input id="t_count" type="number" value="10"></div></div>
|
|
<div class="form-row"><div class="form-group"><label>技能等级</label><input id="t_level" value="L3"></div></div>
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveTeam()">保存</button>`);
|
|
}
|
|
function saveTeam() {
|
|
const code = document.getElementById('t_code').value.trim();
|
|
const name = document.getElementById('t_name').value.trim();
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和名称', 'error');
|
|
apsData.teams.push({ id: apsData.$utils.nextId('team'), code, name, workshopId: Number(document.getElementById('t_ws').value), memberCount: Number(document.getElementById('t_count').value), skillLevel: document.getElementById('t_level').value, status: 'ACTIVE' });
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
function addShiftModal() {
|
|
openModal('新增班次', `
|
|
<div class="form-row"><div class="form-group"><label>编码</label><input id="s_code"></div><div class="form-group"><label>名称</label><input id="s_name"></div></div>
|
|
<div class="form-row"><div class="form-group"><label>开始时间</label><input id="s_start" type="time" value="08:00"></div><div class="form-group"><label>结束时间</label><input id="s_end" type="time" value="16:00"></div></div>
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveShift()">保存</button>`);
|
|
}
|
|
function saveShift() {
|
|
const code = document.getElementById('s_code').value.trim();
|
|
const name = document.getElementById('s_name').value.trim();
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和名称', 'error');
|
|
apsData.shifts.push({ id: apsData.$utils.nextId('shift'), code, name, startTime: document.getElementById('s_start').value, endTime: document.getElementById('s_end').value, breakPeriods: [], isOvertime: false, status: 'ACTIVE' });
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
|
}
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|