农产品进货管理系统 - 简单易用，高效管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>农产品进货管理</title>
<link rel="stylesheet" href="./bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title has-text-centered">农产品进货管理</h1>
<pre><code> <div class="columns">
<div class="column is-half">
<form id="purchase-form">
<div class="field">
<label class="label">产品名称</label>
<div class="control">
<input id="product-name" class="input" type="text" placeholder="请输入产品名称" required>
</div>
</div>
<div class="field">
<label class="label">进货数量</label>
<div class="control">
<input id="quantity" class="input" type="number" placeholder="请输入进货数量" required>
</div>
</div>
<div class="field">
<label class="label">进货价格</label>
<div class="control">
<input id="price" class="input" type="number" step="0.01" placeholder="请输入进货价格" required>
</div>
</div>
<div class="field">
<div class="control">
<button id="confirmBtn" class="button is-primary">确认进货</button>
</div>
</div>
</form>
</div>
</div>
<h2 class="subtitle has-text-centered">进货记录</h2>
<table id="purchaseTable" class="table is-fullwidth">
<thead>
<tr>
<th>
产品名称
<button class="button is-small sort-btn" data-sort="name">排序</button>
</th>
<th>
进货数量
<button class="button is-small sort-btn" data-sort="quantity">排序</button>
</th>
<th>
进货价格
<button class="button is-small sort-btn" data-sort="price">排序</button>
</th>
<th>
进货时间
<button class="button is-small sort-btn" data-sort="date">排序</button>
</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>100</td>
<td>5.99</td>
<td>2021-08-01</td>
<td>
<button class="button is-small is-danger delete-btn">删除</button>
<button class="button is-small is-warning edit-btn">编辑</button>
</td>
</tr>
<!-- 其他进货记录行 -->
</tbody>
</table>
</div>
</code></pre>
</section>
<div id="editModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<!-- 编辑表单 -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script src="./bulma.min.js"></script>
<script>
const confirmBtn = document.getElementById('confirmBtn');
const purchaseTable = document.getElementById('purchaseTable');
const editModal = document.getElementById('editModal');
const closeBtn = editModal.querySelector('.modal-close');
confirmBtn.addEventListener('click', function(event) {
event.preventDefault();
const productName = document.getElementById('product-name').value;
const quantity = document.getElementById('quantity').value;
const price = document.getElementById('price').value;
if (!productName || !quantity || !price) {
return;
}
const purchaseDate = new Date().toLocaleDateString();
let html = `
<tr>
<td>${productName}</td>
<td>${quantity}</td>
<td>${price}</td>
<td>${purchaseDate}</td>
<td>
<button class="button is-small is-danger delete-btn">删除</button>
<button class="button is-small is-warning edit-btn">编辑</button>
</td>
</tr>
`;
purchaseTable.querySelector('tbody').innerHTML += html;
const deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach(btn => {
btn.addEventListener('click', function() {
const row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
});
});
const editBtns = document.querySelectorAll('.edit-btn');
editBtns.forEach(btn => {
btn.addEventListener('click', function() {
editModal.classList.add('is-active');
});
});
closeBtn.addEventListener('click', function() {
editModal.classList.remove('is-active');
});
document.getElementById('purchase-form').reset();
});
const sortBtns = document.querySelectorAll('.sort-btn');
sortBtns.forEach(btn => {
btn.addEventListener('click', function() {
const sortKey = this.dataset.sort;
const tbody = purchaseTable.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((a, b) => {
const aValue = a.querySelector(`td:nth-child(${sortKey === 'name' ? 1 : sortKey === 'quantity' ? 2 : sortKey === 'price' ? 3 : 4})`).textContent;
const bValue = b.querySelector(`td:nth-child(${sortKey === 'name' ? 1 : sortKey === 'quantity' ? 2 : sortKey === 'price' ? 3 : 4})`).textContent;
if (sortKey === 'date') {
return new Date(aValue) - new Date(bValue);
} else {
return aValue.localeCompare(bValue);
}
});
tbody.innerHTML = '';
rows.forEach(row => {
tbody.appendChild(row);
});
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Jwh 著作权归作者所有。请勿转载和采集!