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

本文描述了飞机票订单的管理员前端页面是怎么编写的。

首先添加一个输入框，可以输入用户的ID便于搜索查找，然后是搜索按钮，点击进行搜索操作。

<div class="layui-container" style="margin-top:10px">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-bottom: 30px">
                <div class="layui-inline" style="margin-left: 12%">
                    <label class="layui-form-label">用户ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userId" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="search-button">搜索</button>
                </div>
            </div>
        </form>
    </div>

紧接着是新增按钮，点击后新增订单。

<div style="margin-left:50px">
        <button type="button" class="layui-btn layui-btn-normal" id="new-button">
            <i class="layui-icon">&#xe654;</i>添加 </button>
    </div>

然后是主体部分，结合layui框架提供了一个响应式的表格结构用于展示订单信息，并设计了一个分页按钮区域。实际的数据填充和分页逻辑需要通过JavaScript实现，通过AJAX请求获取数据并动态更新DOM。

<div class="layui-container" >
        <div class="layui-row">
            <div class="layui-col-md12">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户ID</th>
                        <th>航班号</th>
                        <th>航空公司名称</th>
                        <th>起飞机场名称</th>
                        <th>到达机场名称</th>
                        <th>起飞时间</th>
                        <th>到达时间</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tableBody">
                    <!-- 这里将会动态填充订单数据 -->
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div id="paginationButtons" class="layui-box"></div>
            </div>
        </div>
    </div>

然后写一个对话框，包括一个表单，用于编辑飞机订单的信息，它具有以下结构：

1. 对话框容器：

   <div id="editDialog" class="dialog-content" style="display: none;"> <!-- 表单内容 --> </div>

   这是一个包含订单编辑表单的容器，具有id="editDialog" 和 class="dialog-content" 属性。通过设置 style="display: none;"，默认隐藏对话框。

2. 表单结构：

   <form class="layui-form" lay-filter="editForm"> <!-- 表单项 --> </form>

   • <form>： 用于包裹表单元素的标签，layui-form 是layui框架提供的表单类。
   • lay-filter="editForm"： 表单过滤器，用于在JavaScript中获取和处理表单数据。

3. 表单项：

   <div class="layui-form-item"> 
   <label class="layui-form-label">订单ID</label> 
   <div class="layui-input-block"> <input type="text" id="editOrderId" name="orderId" lay-verify="required" readonly> 
   </div> 
   </div> <!-- 其他表单项省略 -->

   • <div class="layui-form-item">： 表单项容器，表示一个表单项。
   • <label>： 表单项的标签，用于描述输入字段。
   • <div class="layui-input-block">： 输入字段的容器。
   • <input>： 输入字段，可以是文本、日期、数字等类型。
   • id： 唯一标识该字段。
   • name： 字段的名称，用于在JavaScript中获取和处理表单数据。
   • lay-verify="required"： 验证规则，表示该字段为必填项。
   • readonly： 只读属性，表示该字段为只读。

4. 提交按钮：

   <button class="layui-btn" lay-submit lay-filter="editSubmit" id="editSubmit">更改</button>

   • <button>： 提交按钮。
   • class="layui-btn"： layui框架提供的按钮样式。
   • lay-submit： 表示该按钮为提交按钮。
   • lay-filter="editSubmit"： 过滤器，用于在JavaScript中监听按钮点击事件。
   • id="editSubmit"： 唯一标识该按钮。

由于新增操作和编辑操作有些许不同，因此还要再写一个关于新增的对话框，用于新增飞机订单信息。和之前的对话框类似，它包含了一个表单，以及相应的输入框、验证规则和提交按钮。初始状态下该对话框也是隐藏的，需要通过相应的事件触发来显示并进行新增订单信息的操作。

这样前端的编写就基本完成了。