配送车辆调度 - 解决分配任务后未移除列表的问题 - 常规

配送车辆调度 - 解决分配任务后未移除列表的问题

非常抱歉，之前的代码缺少将已分配的任务从任务列表中移除的逻辑。以下是修复了这个问题的完整代码：

<!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='./semantic.min.css'>
  <style>
    .ui.container {
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <div class='ui container'>
    <h1 class='ui dividing header'>配送车辆调度</h1>

    <form class='ui form'>
      <div class='field'>
        <label>选择日期</label>
        <input type='date' placeholder='选择日期' required>
      </div>

      <div class='field'>
        <label>选择配送区域</label>
        <select class='ui dropdown' name='area' required>
          <option value=''>选择配送区域</option>
          <option value='area1'>区域1</option>
          <option value='area2'>区域2</option>
          <option value='area3'>区域3</option>
        </select>
      </div>

      <div class='field'>
        <label>选择配送车辆</label>
        <select class='ui dropdown' name='vehicle' required>
          <option value=''>选择配送车辆</option>
          <option value='vehicle1'>车辆1</option>
          <option value='vehicle2'>车辆2</option>
          <option value='vehicle3'>车辆3</option>
        </select>
      </div>

      <button class='ui primary button' type='submit'>调度车辆</button>
    </form>

    <div id='assignedTasks' style='display: none;'>
      <h2 class='ui dividing header'>已分配任务</h2>
      <!-- 根据已分配车辆动态创建任务列表 -->
    </div>

    <h2 class='ui dividing header'>配送任务列表</h2>
    <table class='ui celled table'>
      <thead>
        <tr>
          <th>配送单号</th>
          <th>配送地址</th>
          <th>备注</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>地址1</td>
          <td>备注1</td>
        </tr>
        <tr>
          <td>002</td>
          <td>地址2</td>
          <td>备注2</td>
        </tr>
        <!-- 其他配送任务行 -->
      </tbody>
    </table>
  </div>

  <script src='./jquery.min.js'></script>
  <script src='./semantic.min.js'></script>
  <script>
    $('.ui.dropdown').dropdown();

    const form = document.querySelector('.ui.form');
    const scheduleBtn = form.querySelector('.ui.primary.button');
    const taskTable = form.nextElementSibling.querySelector('.ui.celled.table');

    scheduleBtn.addEventListener('click', function(event) {
      event.preventDefault();

      const selectedDate = form.querySelector('input[type='date']').value;
      const selectedArea = form.querySelector('.ui.dropdown[name='area']').value;
      const selectedVehicle = form.querySelector('.ui.dropdown[name='vehicle']').value;

      if (!selectedDate || !selectedArea || !selectedVehicle) {
        return;
      }

      // 执行配送车辆调度逻辑，将任务分配给选定的车辆

      // 示例：将任务添加到已分配车辆的任务列表中
      const tasks = Array.from(taskTable.querySelectorAll('tbody tr'));
      const assignedTable = document.getElementById(selectedVehicle + '-table');

      tasks.forEach(task => {
        assignedTable.querySelector('tbody').appendChild(task.cloneNode(true));
        task.parentNode.removeChild(task);
      });

      const assignedTasks = document.getElementById('assignedTasks');
      assignedTasks.style.display = 'block';

      if (!assignedTable) {
        const tableHtml = `
          <table class='ui celled table' id='${selectedVehicle}-table'>
            <thead>
              <tr>
                <th>配送单号</th>
                <th>配送地址</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <!-- 已分配任务行 -->
            </tbody>
          </table>
        `;
        assignedTasks.innerHTML += tableHtml;
      }

      form.reset();
    });
  </script>
</body>
</html>

请将以上代码保存为一个HTML文件，并将semantic.min.css和semantic.min.js文件放置在同一根目录下。这个完整的代码示例包含了之前提供的所有功能，并进行了修复，现在应该可以将任务从任务列表中移除并添加到已分配车辆的任务列表中。

非常抱歉给您带来了困扰。希望这个修复后的代码可以正常运行，并满足您对食材供应链配送环节实时监管系统中配送车辆调度功能的要求。如果还有其他问题，请随时告诉我。