2026-05-12-table-qrcode-orders-design.md 3.0 KB

餐桌码查看关联订单

日期: 2026-05-12 补充: 2026-04-30-qr-table-ordering-design.md(扫码点餐设计)

背景

扫码点餐上线后,商家需要查看某张餐桌的所有关联订单,以便掌握每桌的点餐和出餐情况。当前餐桌码管理页面(TableQRCode.vue)只有 CRUD 和二维码查看,没有订单查看入口。

需求

商家在餐桌码管理页面,点击某张餐桌码的「订单」按钮,弹出该餐桌关联的所有订单列表。

用户类型与权限

用户类型 userType 可查看范围
普通商家 1 自己摊位下的餐桌码关联订单
摊主 4 自己摊位下的餐桌码关联订单
夜市管理员 3 夜市下所有摊位的餐桌码关联订单

后端

新增接口

GET /table-qrcode/getTableOrders

请求参数:

参数 类型 必填 说明
id long 餐桌码 ID
page int 页码,默认 1
size int 每页条数,默认 10
state string 订单状态筛选

权限校验:

  1. 根据 id 查出餐桌码记录
  2. 普通商家/摊主:验证记录的 storeId 属于当前用户
  3. 夜市管理员:验证记录的 nightMarketId 属于当前用户

查询逻辑:

  1. 从餐桌码记录取 id 作为 tableId
  2. 查询 pos_order 表中 table_id = 该 id 的订单
  3. 按 cretim 降序排列
  4. 支持按 state 筛选

返回格式(复用现有 getstoreorderlist 的字段):

{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "total": 5,
    "records": [
      {
        "id": 100,
        "ddId": "DD20260512001",
        "amount": 350,
        "state": 2,
        "type": 2,
        "cretim": "2026-05-12 12:30:00",
        "diningStatus": 0,
        "food": [...]
      }
    ]
  }
}

实现位置

TableQrcodeController.java 中新增方法,复用已有的 PosOrderServiceInfoUserService

前端

改动文件

文件 改动
src/api/tableQrcode.js 新增 getTableOrders API 方法
src/views/TableQRCode.vue 操作列新增「订单」按钮 + 订单弹窗

TableQRCode.vue 改动

  1. 操作列:在现有按钮(查看二维码、编辑、删除)旁新增「订单」按钮
  2. 订单弹窗
    • el-dialog 展示该餐桌的订单列表
    • 表格列:订单号、金额、订单状态(tag 标签)、出餐状态、下单时间
    • 顶部可选:订单状态筛选下拉
  3. 数据加载:点击按钮时调用 GET /table-qrcode/{id}/orders

不涉及的范围

  • 订单详情页面(复用现有)
  • 餐桌状态联动(下单→使用中,结账→空闲)
  • 多次加餐/拼单
  • 按桌号分组统计

影响文件清单

文件 改动
TableQrcodeController.java 新增 getTableOrders 接口(GET /table-qrcode/getTableOrders?id=xxx
tableQrcode.js (前端 API) 新增 getTableOrders 方法
TableQRCode.vue 新增订单按钮和订单弹窗