农产品进货管理系统 - 简单易用的进货记录工具 - 常规

<!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>  &lt;div class=&quot;columns&quot;&gt;
    &lt;div class=&quot;column is-half&quot;&gt;
      &lt;form id=&quot;purchase-form&quot;&gt;
        &lt;div class=&quot;field&quot;&gt;
          &lt;label class=&quot;label&quot;&gt;产品名称&lt;/label&gt;
          &lt;div class=&quot;control&quot;&gt;
            &lt;input id=&quot;product-name&quot; class=&quot;input&quot; type=&quot;text&quot; placeholder=&quot;请输入产品名称&quot; required&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;field&quot;&gt;
          &lt;label class=&quot;label&quot;&gt;进货数量&lt;/label&gt;
          &lt;div class=&quot;control&quot;&gt;
            &lt;input id=&quot;quantity&quot; class=&quot;input&quot; type=&quot;number&quot; placeholder=&quot;请输入进货数量&quot; required&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;field&quot;&gt;
          &lt;label class=&quot;label&quot;&gt;进货价格&lt;/label&gt;
          &lt;div class=&quot;control&quot;&gt;
            &lt;input id=&quot;price&quot; class=&quot;input&quot; type=&quot;number&quot; step=&quot;0.01&quot; placeholder=&quot;请输入进货价格&quot; required&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;field&quot;&gt;
          &lt;div class=&quot;control&quot;&gt;
            &lt;button id=&quot;confirmBtn&quot; class=&quot;button is-primary&quot;&gt;确认进货&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;h2 class=&quot;subtitle has-text-centered&quot;&gt;进货记录&lt;/h2&gt;

  &lt;table id=&quot;purchaseTable&quot; class=&quot;table is-fullwidth&quot;&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;产品名称&lt;/th&gt;
        &lt;th&gt;进货数量&lt;/th&gt;
        &lt;th&gt;进货价格&lt;/th&gt;
        &lt;th&gt;进货时间&lt;/th&gt;
        &lt;th&gt;操作&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;苹果&lt;/td&gt;
        &lt;td&gt;100&lt;/td&gt;
        &lt;td&gt;5.99&lt;/td&gt;
        &lt;td&gt;2021-08-01&lt;/td&gt;
        &lt;td&gt;
          &lt;button class=&quot;button is-small is-danger delete-btn&quot;&gt;删除&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- 其他进货记录行 --&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>
  </section>
  <script src="./bulma.min.js"></script>
  <script>
    const confirmBtn = document.getElementById('confirmBtn');
    const purchaseTable = document.getElementById('purchaseTable');

    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>
          </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);
        });
      });

      document.getElementById('purchase-form').reset();
    });
  </script>
</body>
</html>