|
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>模具主檔 - 完整互動版</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
</head>
|
|
<body class="bg-gray-50 p-6 min-h-screen text-gray-700">
|
|
|
|
<div class="max-w-7xl mx-auto bg-white rounded-lg shadow-sm border border-gray-100 p-6">
|
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800">模具主檔</h1>
|
|
<button onclick="openAddModal()" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md font-medium transition duration-150 flex items-center gap-1 cursor-pointer">
|
|
<span>+</span> 新增模具
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end mb-6">
|
|
<div class="md:col-span-4">
|
|
<input type="text" placeholder="搜尋模具編號/模具名稱/備註..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
|
|
</div>
|
|
<div class="md:col-span-2 relative">
|
|
<label class="absolute -top-2.5 left-2 bg-white px-1 text-xs text-gray-500">模具種類</label>
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
|
|
<option>全部</option>
|
|
<option>刀具</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-2 relative">
|
|
<label class="absolute -top-2.5 left-2 bg-white px-1 text-xs text-gray-500">生產線別</label>
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
|
|
<option>全部</option>
|
|
<option>手動線</option>
|
|
<option>自動線</option>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-4 flex justify-end gap-2">
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium cursor-pointer">搜尋</button>
|
|
<button class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium cursor-pointer">清空</button>
|
|
<button class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center gap-1 cursor-pointer">
|
|
📥 下載Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto border border-gray-200 rounded-lg">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 text-gray-500 text-sm border-b border-gray-200 font-medium">
|
|
<th class="p-3">模具編號</th>
|
|
<th class="p-3">模具名稱</th>
|
|
<th class="p-3">模具類型</th>
|
|
<th class="p-3">生產線別</th>
|
|
<th class="p-3 text-emerald-600 font-bold">所屬區域</th>
|
|
<th class="p-3">使用狀態</th>
|
|
<th class="p-3">備註</th>
|
|
<th class="p-3">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="moldTableBody" class="divide-y divide-gray-100 text-sm">
|
|
<tr class="hover:bg-gray-50 transition-colors" data-id="1">
|
|
<td class="p-3 font-bold mold-code">1</td>
|
|
<td class="p-3 mold-name">1</td>
|
|
<td class="p-3 font-bold mold-type">刀具</td>
|
|
<td class="p-3 mold-line">手動線</td>
|
|
<td class="p-3 mold-area">A區</td>
|
|
<td class="p-3 mold-status">在庫</td>
|
|
<td class="p-3 text-gray-400 mold-note">123</td>
|
|
<td class="p-3 flex gap-2">
|
|
<button onclick="openEditModal(this)" class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">✏️ 修改</button>
|
|
<button onclick="deleteRow(this)" class="bg-red-600 hover:bg-red-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">🗑️ 刪除</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors" data-id="2">
|
|
<td class="p-3 font-bold mold-code">2</td>
|
|
<td class="p-3 mold-name">2</td>
|
|
<td class="p-3 font-bold mold-type">刀具</td>
|
|
<td class="p-3 mold-line">自動線</td>
|
|
<td class="p-3 mold-area">B區</td>
|
|
<td class="p-3 mold-status">在庫</td>
|
|
<td class="p-3 text-gray-400 mold-note"></td>
|
|
<td class="p-3 flex gap-2">
|
|
<button onclick="openEditModal(this)" class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">✏️ 修改</button>
|
|
<button onclick="deleteRow(this)" class="bg-red-600 hover:bg-red-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">🗑️ 刪除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mt-4 text-xs text-gray-500">
|
|
<div>共 <span id="totalCount" class="font-bold text-gray-700">2</span> 筆資料</div>
|
|
<div class="flex gap-1">
|
|
<button class="px-2 py-1 border border-gray-300 rounded bg-gray-100 cursor-not-allowed text-gray-400">上一頁</button>
|
|
<button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
|
|
<button class="px-2 py-1 border border-gray-300 rounded bg-gray-100 cursor-not-allowed text-gray-400">下一頁</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modalOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden justify-center items-center z-50 transition-opacity">
|
|
<div class="bg-white rounded-xl shadow-xl border border-gray-200 w-full max-w-lg mx-4 overflow-hidden transform transition-all scale-95 duration-200">
|
|
|
|
<div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
|
|
<h3 id="modalTitle" class="text-lg font-bold text-gray-800">新增模具資料</h3>
|
|
<button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 text-xl font-bold cursor-pointer">×</button>
|
|
</div>
|
|
|
|
<form id="moldForm" onsubmit="handleFormSubmit(event)" class="p-6 space-y-4">
|
|
<input type="hidden" id="editingRowId">
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">模具編號 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="inputCode" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">模具名稱 <span class="text-red-500">*</span></label>
|
|
<input type="text" id="inputName" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">模具類型</label>
|
|
<select id="inputType" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<option value="刀具">刀具</option>
|
|
<option value="模組">模組</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">生產線別</label>
|
|
<select id="inputLine" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<option value="手動線">手動線</option>
|
|
<option value="自動線">自動線</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-emerald-600 mb-1">所屬區域 <span class="text-emerald-500">*</span></label>
|
|
<input type="text" id="inputArea" placeholder="例如：A區" required class="w-full px-3 py-2 border border-emerald-300 bg-emerald-50/30 rounded-md text-sm focus:ring-2 focus:ring-emerald-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">使用狀態</label>
|
|
<select id="inputStatus" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<option value="在庫">在庫</option>
|
|
<option value="使用中">使用中</option>
|
|
<option value="維修中">維修中</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-600 mb-1">備註</label>
|
|
<textarea id="inputNote" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none resize-none"></textarea>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-2 pt-2 border-t border-gray-100">
|
|
<button type="button" onclick="closeModal()" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50 cursor-pointer">取消</button>
|
|
<button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-md text-sm font-medium cursor-pointer">儲存確認</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const modal = document.getElementById('modalOverlay');
|
|
const form = document.getElementById('moldForm');
|
|
const tableBody = document.getElementById('moldTableBody');
|
|
const totalCountSpan = document.getElementById('totalCount');
|
|
|
|
// 更新左下角顯示的資料筆數
|
|
function updateCount() {
|
|
totalCountSpan.textContent = tableBody.children.length;
|
|
}
|
|
|
|
// 關閉 Modal 並清空欄位
|
|
function closeModal() {
|
|
modal.classList.remove('flex');
|
|
modal.classList.add('hidden');
|
|
form.reset();
|
|
document.getElementById('editingRowId').value = '';
|
|
}
|
|
|
|
// 開啟「新增」Modal
|
|
function openAddModal() {
|
|
document.getElementById('modalTitle').textContent = '新增模具資料';
|
|
document.getElementById('editingRowId').value = '';
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
}
|
|
|
|
// 開啟「修改」Modal 帶入舊資料
|
|
function openEditModal(button) {
|
|
document.getElementById('modalTitle').textContent = '修改模具資料';
|
|
|
|
// 抓取該行 (tr) 的 DOM
|
|
const row = button.closest('tr');
|
|
const rowId = row.getAttribute('data-id');
|
|
|
|
// 抓取原本格子內的值
|
|
const code = row.querySelector('.mold-code').textContent;
|
|
const name = row.querySelector('.mold-name').textContent;
|
|
const type = row.querySelector('.mold-type').textContent;
|
|
const line = row.querySelector('.mold-line').textContent;
|
|
const area = row.querySelector('.mold-area').textContent;
|
|
const status = row.querySelector('.mold-status').textContent;
|
|
const note = row.querySelector('.mold-note').textContent;
|
|
|
|
// 寫入到 Dialog 表單輸入框中
|
|
document.getElementById('editingRowId').value = rowId;
|
|
document.getElementById('inputCode').value = code;
|
|
document.getElementById('inputName').value = name;
|
|
document.getElementById('inputType').value = type;
|
|
document.getElementById('inputLine').value = line;
|
|
document.getElementById('inputArea').value = area;
|
|
document.getElementById('inputStatus').value = status;
|
|
document.getElementById('inputNote').value = note;
|
|
|
|
// 開啟 Dialog
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
}
|
|
|
|
// 處理表單送出 (新增 / 修改 共用)
|
|
function handleFormSubmit(event) {
|
|
event.preventDefault(); // 阻止頁面重整
|
|
|
|
const editingId = document.getElementById('editingRowId').value;
|
|
const code = document.getElementById('inputCode').value;
|
|
const name = document.getElementById('inputName').value;
|
|
const type = document.getElementById('inputType').value;
|
|
const line = document.getElementById('inputLine').value;
|
|
const area = document.getElementById('inputArea').value;
|
|
const status = document.getElementById('inputStatus').value;
|
|
const note = document.getElementById('inputNote').value;
|
|
|
|
if (editingId) {
|
|
// =============== 執行「修改」運算 ===============
|
|
const targetRow = document.querySelector(`tr[data-id="${editingId}"]`);
|
|
if (targetRow) {
|
|
targetRow.querySelector('.mold-code').textContent = code;
|
|
targetRow.querySelector('.mold-name').textContent = name;
|
|
targetRow.querySelector('.mold-type').textContent = type;
|
|
targetRow.querySelector('.mold-line').textContent = line;
|
|
targetRow.querySelector('.mold-area').textContent = area;
|
|
targetRow.querySelector('.mold-status').textContent = status;
|
|
targetRow.querySelector('.mold-note').textContent = note;
|
|
}
|
|
} else {
|
|
// =============== 執行「新增」運算 ===============
|
|
const newId = Date.now(); // 用時間戳記當作臨時唯一的 data-id
|
|
const newRowHTML = `
|
|
<tr class="hover:bg-gray-50 transition-colors" data-id="${newId}">
|
|
<td class="p-3 font-bold mold-code">${code}</td>
|
|
<td class="p-3 mold-name">${name}</td>
|
|
<td class="p-3 font-bold mold-type">${type}</td>
|
|
<td class="p-3 mold-line">${line}</td>
|
|
<td class="p-3 mold-area">${area}</td>
|
|
<td class="p-3 mold-status">${status}</td>
|
|
<td class="p-3 text-gray-400 mold-note">${note}</td>
|
|
<td class="p-3 flex gap-2">
|
|
<button onclick="openEditModal(this)" class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">✏️ 修改</button>
|
|
<button onclick="deleteRow(this)" class="bg-red-600 hover:bg-red-700 text-white text-xs px-2 py-1 rounded flex items-center gap-1 cursor-pointer">🗑️ 刪除</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
// 將新資料插在表格的最上方
|
|
tableBody.insertAdjacentHTML('afterbegin', newRowHTML);
|
|
}
|
|
|
|
updateCount();
|
|
closeModal();
|
|
}
|
|
|
|
// =============== 執行「刪除」運算 ===============
|
|
function deleteRow(button) {
|
|
const row = button.closest('tr');
|
|
const code = row.querySelector('.mold-code').textContent;
|
|
|
|
// 提示防呆確認
|
|
if (confirm(`確認是否刪除編號為【${code}】的模具資料？`)) {
|
|
row.remove();
|
|
updateCount();
|
|
}
|
|
}
|
|
|
|
// 點擊背景空白處關閉
|
|
modal.addEventListener('click', function(e) {
|
|
if (e.target === modal) {
|
|
closeModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|