基于大模型的旅游平台（十一）

本文介绍了管理员端火车票订单页面前端方法的实现。

首先定义函数来更新分页按钮，实现了一个基本的分页功能，并且在用户点击分页按钮时动态加载对应页码的订单数据。首先先计算总页数，然后对分页按钮进行渲染，并定义。点击分页按钮触发的回调函数。

function updatePaginationButtons(pageNum, pageSize, uid, totalOrders) {
          // 计算总页数
          var totalPages = Math.ceil(totalOrders / pageSize);

          // 渲染分页按钮
          laypage.render({
              elem: 'paginationButtons', // 分页按钮容器
              count: totalOrders, // 总记录数
              limit: pageSize, // 每页显示条数
              curr: pageNum, // 当前页数
              layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 自定义分页布局
              jump: function(obj, first) { // 点击分页按钮触发的回调函数
                  if (!first) { // 非首次加载页面才触发
                      fetchAndPopulateOrders(obj.curr, obj.limit, uid);
                  }
              }
          });
      }

接着定义函数来获取订单数据并填充表格。使用 fetch API 来获取订单数据，并打印返回的数据，以便调试。首先先确认返回的数据是否包含订单数据和订单总数，当有相应的数据时再对其进行操作。每次操作时先清空表格内容然后再填充订单数据到表格中。

function fetchAndPopulateOrders(pageNum, pageSize, uid) {
          var url = '/train/order/page?pageNum=' + pageNum + '&pageSize=' + pageSize + '&uid=' + uid;

          // 使用 fetch API 来获取订单数据
          fetch(url)
          .then(response => response.json())
          .then(data => {
              // 打印返回的数据，以便调试
              console.log("Data type:", typeof data);
              console.log("Data:", data);

              // 确保返回的数据包含订单数据和订单总数
              if (data.code === 200 && data.data && Array.isArray(data.data.data)) {
                   orders = data.data.data;
                  var totalOrders = data.data.total;

                  // 清空表格内容
                  document.getElementById("tableBody").innerHTML = "";

                  // 填充订单数据到表格中

                  orders.forEach(trainOrder => {
    var row = '<tr>';
    row += '<td>' + trainOrder.id + '</td>';
    row += '<td>' + trainOrder.uid + '</td>';
    row += '<td>' + trainOrder.trainNo + '</td>';
    row += '<td>' + trainOrder.dptStationName + '</td>';
    row += '<td>' + trainOrder.arrStationName + '</td>';
    row += '<td>' + trainOrder.dptTime + '</td>';
    row += '<td>' + trainOrder.arrTime + '</td>';
    row += '<td>' + trainOrder.type + '</td>';
    var operationButtons = `
        <button class="layui-btn layui-btn-normal layui-btn-sm edit-order-btn" data-order-id="${trainOrder.id}">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm delete-order-btn" data-order-id="${trainOrder.id}">删除</button>`;
    row += '<td>' + operationButtons + '</td>';
    row += '</tr>';
    document.getElementById("tableBody").innerHTML += row;
});

                  // 更新分页按钮
                  updatePaginationButtons(pageNum, pageSize, uid, totalOrders);
              } else {
                  console.error("Invalid data format:", data);
              }
          })
          .catch(error => console.error('Error fetching orders:', error));
      }

然后完善编辑按钮和删除按钮的点击事件。

首先是编辑按钮，点击后获取该订单的ID，然后从订单列表中找到对应的订单数据，并将这些数据填充到编辑表单中。最后，打开编辑对话框。

        orderId = e.target.getAttribute("data-order-id");
        var orderToEdit = orders.find(order => order.id==orderId);
        document.getElementById("editOrderId").value = orderToEdit.id;
        document.getElementById("editUserId").value = orderToEdit.uid;
        document.getElementById("editTrainNumber").value = orderToEdit.trainNo;
        document.getElementById("editDepartureStation").value = orderToEdit.dptStationName;
        document.getElementById("editArrivalStation").value = orderToEdit.arrStationName;
        document.getElementById("editDepartureTime").value = orderToEdit.dptTime;
        document.getElementById("editArrivalTime").value = orderToEdit.arrTime;
        document.getElementById("editType").value = orderToEdit.type;
        openEditDialog();

定义打开对话框的openEditDialog 函数，该函数使用了 layui.layer.open 方法来打开一个弹出层，用于编辑订单。在这个函数中，指定了弹出层的类型、标题、内容和大小。

function openEditDialog() {
            layui.layer.open({
                type: 1,
                title: '编辑订单',
                content: $('#editDialog'),
                area: ['500px', '550px']
            });
        }

定义基于 layui 的表单提交处理的函数，用来编辑订单信息并通过 AJAX 请求发送到服务器。

 layui.form.on('submit(editSubmit)', function(data){
    // 获取编辑表单中的数据
    var formData = data.field;

    // 更新订单信息
    var orderId = formData.orderId;
    var trainOrder = {
        id: orderId,
        uid: formData.userId,
        trainNo: formData.trainNumber,
        dptStationName: formData.departureStation,
        arrStationName: formData.arrivalStation,
        dptTime: formData.departureTime,
        arrTime: formData.arrivalTime,
        type: formData.type
    };

    $.ajax({
             type: "POST",
             url: "/train/order",
             contentType: "application/json", // 设置请求内容类型为 JSON
             data: JSON.stringify(trainOrder), // 将订单对象转换为 JSON 字符串并传入
             success: function (response) {
                 if (response.code === 200 && response.message === "success") {
                     alert("更改成功！");
                     layui.layer.closeAll();
                     fetchAndPopulateOrders(pageNum, pageSize, uid);
                     // 可以根据需要执行其他操作，例如跳转到订单页面等
                 } else {
                     console.error("更改失败:", response.message);
                 }
             },
             error: function (xhr) {
                 console.error("更改时发生错误:", xhr.status, xhr.statusText);
             }
         });



    // 阻止表单默认提交
    return false;
});

然后是删除按钮。通过 e.target.getAttribute("data-order-id") 获取要删除的订单的ID，并将其赋值给 orderId 变量。使用 layer.confirm 方法弹出确认对话框，询问用户是否确定要删除该订单。如果用户点击确定按钮，会执行包含 AJAX 请求的回调函数。发送 DELETE 请求到 /train/order/ + orderId 地址，以删除对应订单。如果删除成功，弹出提示框显示“删除成功”，并在控制台输出成功信息。关闭所有弹出层，然后调用 fetchAndPopulateOrders(1, 10, uid) 函数重新加载订单列表的第一页数据。如果删除失败，控制台输出错误信息，并可以进行适当的错误处理，例如提示用户或记录错误信息。

var orderId = e.target.getAttribute("data-order-id");

          // 弹出确认对话框
          layer.confirm('确定要删除该订单吗？', {
              btn: ['确定', '取消'], // 按钮
              title: '确认退订订单'
          }, function() {
              // 用户点击确定，发送 AJAX 请求删除订单
              $.ajax({
                  url: '/train/order/' + orderId,
                  type: 'DELETE',
                  success: function(success) {
                      // 删除成功后的操作，更新订单列表
                      if (success) {
                      alert("删除成功！");
                          console.log("Order deleted successfully");
                          layer.closeAll();
                          // 调用函数重新加载订单列表
                          fetchAndPopulateOrders(1, 10, uid); // 重新加载第一页数据
                      } else {
                          console.error("Failed to delete order");
                      }
                  },
                  error: function(xhr, status, error) {
                      // 删除失败时的操作，可以提示用户或者记录错误信息等
                      console.error("Error deleting order:", error);
                  }
              });

 

这样就完成了编辑和删除操作。新增操作和编辑操作相似就不加赘述了。接着是搜索操作。

当用户点击搜索按钮（时，获取输入框中的用户 ID，并调用函数 fetchAndPopulateOrders。

$('#search-button').click(function () {
        var uid = $('input[name="userId"]').val();
        fetchAndPopulateOrders(1, 10, uid);
    });

通过以上步骤就完成了管理员端火车票订单页面前端方法的实现。