81 lines
4.6 KiB
HTML
81 lines
4.6 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="addFactoryModal()">+ 新增工厂</button>
|
||
|
|
<button class="btn" onclick="addWorkshopModal()">+ 新增车间</button>
|
||
|
|
</div>
|
||
|
|
<div id="orgTree"></div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="../js/data.js"></script>
|
||
|
|
<script src="../js/common.js"></script>
|
||
|
|
<script>
|
||
|
|
initPage('factory-organization');
|
||
|
|
function render() {
|
||
|
|
const container = document.getElementById('orgTree');
|
||
|
|
container.innerHTML = apsData.factories.map(f => {
|
||
|
|
const workshops = apsData.workshops.filter(w => w.factoryId == f.id);
|
||
|
|
return `
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">${f.name} <span class="text-muted">(${f.code})</span><span class="badge badge-${f.status==='ACTIVE'?'success':'default'} ml-2">${f.status}</span></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<p><strong>地址：</strong>${f.address || '-'} <strong>时区：</strong>${f.timezone}</p>
|
||
|
|
<table>
|
||
|
|
<thead><tr><th>车间编码</th><th>车间名称</th><th>状态</th><th>下属产线</th></tr></thead>
|
||
|
|
<tbody>
|
||
|
|
${workshops.map(ws => {
|
||
|
|
const lines = apsData.lines.filter(l => l.workshopId == ws.id).map(l => l.name).join('、');
|
||
|
|
return `<tr><td>${ws.code}</td><td>${ws.name}</td><td>${ws.status}</td><td class="text-muted">${lines || '-'}</td></tr>`;
|
||
|
|
}).join('') || '<tr><td colspan="4" class="text-center text-muted">无车间</td></tr>'}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
}).join('') || '<div class="empty-state">暂无工厂数据</div>';
|
||
|
|
}
|
||
|
|
function addFactoryModal() {
|
||
|
|
openModal('新增工厂', `
|
||
|
|
<div class="form-row"><div class="form-group"><label>工厂编码</label><input id="f_code"></div><div class="form-group"><label>工厂名称</label><input id="f_name"></div></div>
|
||
|
|
<div class="form-row"><div class="form-group"><label>时区</label><input id="f_tz" value="Asia/Shanghai"></div><div class="form-group"><label>地址</label><input id="f_addr"></div></div>
|
||
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveFactory()">保存</button>`);
|
||
|
|
}
|
||
|
|
function saveFactory() {
|
||
|
|
const code = document.getElementById('f_code').value.trim();
|
||
|
|
const name = document.getElementById('f_name').value.trim();
|
||
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和名称', 'error');
|
||
|
|
apsData.factories.push({ id: apsData.$utils.nextId('factory'), code, name, timezone: document.getElementById('f_tz').value, address: document.getElementById('f_addr').value, status: 'ACTIVE' });
|
||
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
||
|
|
}
|
||
|
|
function addWorkshopModal() {
|
||
|
|
const opts = apsData.factories.map(f => `<option value="${f.id}">${f.name}</option>`).join('');
|
||
|
|
openModal('新增车间', `
|
||
|
|
<div class="form-row"><div class="form-group"><label>所属工厂</label><select id="w_fid">${opts}</select></div><div class="form-group"><label>车间编码</label><input id="w_code"></div></div>
|
||
|
|
<div class="form-row"><div class="form-group"><label>车间名称</label><input id="w_name"></div></div>
|
||
|
|
`, `<button class="btn" onclick="closeModal()">取消</button><button class="btn btn-primary" onclick="saveWorkshop()">保存</button>`);
|
||
|
|
}
|
||
|
|
function saveWorkshop() {
|
||
|
|
const code = document.getElementById('w_code').value.trim();
|
||
|
|
const name = document.getElementById('w_name').value.trim();
|
||
|
|
if (!code || !name) return showToast('校验失败', '请填写编码和名称', 'error');
|
||
|
|
apsData.workshops.push({ id: apsData.$utils.nextId('workshop'), factoryId: Number(document.getElementById('w_fid').value), code, name, status: 'ACTIVE', createdAt: apsData.$utils.fmtDateTime(new Date()), updatedAt: apsData.$utils.fmtDateTime(new Date()) });
|
||
|
|
apsData.$utils.save(apsData); closeModal(); showToast('保存成功'); render();
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|