订单模块全量代码与效果：ArkTS 多表查询在 HarmonyOS 落地

发布时间：2026/8/17 8:08:21

订单模块全量代码与效果：ArkTS 多表查询在 HarmonyOS 落地
实例订单与明细Order收官文章一、文件清单文件职责行数database/OrderDao.ets数据层双表建表、事务下单、JOIN 查询、状态流转、种子约 370 行pages/samples/OrderPage.etsUI 层主从嵌套列表 状态筛选 流转按钮约 190 行resources/base/profile/main_pages.json路由注册pages/samples/OrderPage追加一行pages/Index.ets首页入口按钮追加一个按钮本篇文章完整展示可编译运行的 OrderPage 代码最后描述运行效果。二、OrderPage 完整代码import{common}fromkit.AbilityKit;import{promptAction}fromkit.ArkUI;import{OrderDao,OrderWithItems,OrderItem}from../../database/OrderDao;EntryComponentstruct OrderPage{Stateorders:OrderWithItems[][];StatestatusFilter:number-1;// -1 全部Statestats:Recordstring,number{};privatecontext:common.UIAbilityContextgetContext(this)ascommon.UIAbilityContext;privatereadonlystatusNames:string[][待支付,已支付,已发货,已完成,已取消];privatereadonlystatusColors:string[][#F59E0B,#3B82F6,#8B5CF6,#059669,#9CA3AF];aboutToAppear():void{this.refresh();}asyncrefresh():Promisevoid{try{awaitOrderDao.initSeedData(this.context);this.statsawaitOrderDao.statusStats(this.context);this.ordersawaitOrderDao.queryWithItems(this.context,this.statusFilter-1?undefined:this.statusFilter);}catch(e){promptAction.showToast({message:加载失败:${e}});}}asyncswitchFilter(f:number):Promisevoid{this.statusFilterf;awaitthis.refresh();}/** 状态流转待支付 → 已支付 → 已发货 → 已完成 */nextStatus(orderId:number,status:number):void{if(status3){return;}constnextstatus1;OrderDao.updateStatus(this.context,orderId,next).then(async(){awaitthis.refresh();promptAction.showToast({message:状态已更新为「${this.statusNames[next]}」});});}cancelOrder(orderId:number):void{promptAction.showDialog({title:取消订单,message:确定取消该订单吗,buttons:[{text:取消,color:#808080},{text:确认取消,color:#EF4444},],}).then((res:promptAction.ShowDialogSuccessResponse){if(res.index1){OrderDao.updateStatus(this.context,orderId,4).then(async(){awaitthis.refresh();promptAction.showToast({message:❌ 订单已取消});});}});}deleteOrder(id:number):void{promptAction.showDialog({title:删除订单,message:删除订单及全部明细确定吗,buttons:[{text:取消,color:#808080},{text:删除,color:#EF4444},],}).then((res:promptAction.ShowDialogSuccessResponse){if(res.index1){OrderDao.deleteOrder(this.context,id).then(async(){awaitthis.refresh();promptAction.showToast({message: 已删除});});}});}privatefmtTime(ts:number):string{constdnewDate(ts);return${d.getFullYear()}-${String(d.getMonth()1).padStart(2,0)}-${String(d.getDate()).padStart(2,0)};}build(){Column(){// 标题栏 Row(){Column(){Text( 订单与明细).fontSize(22).fontWeight(FontWeight.Bold)Text(外键一对多 · JOIN 联表查询).fontSize(11).fontColor(#999999).margin({top:2})}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(↻).fontSize(22).onClick(()this.refresh())}.width(100%).padding({left:16,right:16,top:12})// 状态统计条 Scroll(){Row({space:8}){Text(全部${this.totalOrders()}).fontSize(13).padding({left:12,right:12,top:6,bottom:6}).borderRadius(16).backgroundColor(this.statusFilter-1?#111827:#FFFFFF).fontColor(this.statusFilter-1?Color.White:#4B5563).onClick(()this.switchFilter(-1))ForEach(this.statusNames,(name:string,idx:number){Text(${name}${this.stats[String(idx)]??0}).fontSize(13).padding({left:12,right:12,top:6,bottom:6}).borderRadius(16).backgroundColor(this.statusFilteridx?this.statusColors[idx]:#FFFFFF).fontColor(this.statusFilteridx?Color.White:#4B5563).onClick(()this.switchFilter(idx))},(name:string,idx:number)${idx}-${name})}.padding({left:16,right:16,top:10})}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width(100%)// 订单列表主从嵌套 List({space:10}){ForEach(this.orders,(o:OrderWithItems){ListItem(){Column(){// 订单头Row(){Column({space:2}){Text(订单号${o.order.orderNo}).fontSize(14).fontWeight(FontWeight.Bold)Text(${o.order.customer}·${this.fmtTime(o.order.createdTime)}).fontSize(11).fontColor(#999999)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text(this.statusNames[o.order.status]).fontSize(11).padding({left:8,right:8,top:3,bottom:3}).borderRadius(10).backgroundColor(this.statusColors[o.order.status]).fontColor(Color.White)}.width(100%)// 明细列表Column(){ForEach(o.items,(it:OrderItem){Row({space:8}){Text(it.productName).fontSize(13).layoutWeight(1)Text(¥${it.price.toFixed(2)}×${it.quantity}).fontSize(12).fontColor(#6B7280)Text(¥${it.subtotal.toFixed(2)}).fontSize(13).fontWeight(FontWeight.Medium)}.width(100%).padding({top:5,bottom:5})},(it:OrderItem)${it.id}-${it.productName})}.width(100%).padding(10).backgroundColor(#F8FAFC).borderRadius(8).margin({top:8})// 订单尾Row(){Text(共${o.items.length}件商品).fontSize(12).fontColor(#6B7280)Blank()Text(合计 ¥${o.order.totalAmount.toFixed(2)}).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#DC2626)}.width(100%).margin({top:8})// 操作按钮Row({space:8}){if(o.order.status0){Button(取消订单).layoutWeight(1).height(32).backgroundColor(#EEF2F7).fontColor(#EF4444).fontSize(13).onClick(()this.cancelOrder(o.order.id))}if(o.order.status3){Button(→${this.statusNames[o.order.status1]}).layoutWeight(1).height(32).backgroundColor(#3B82F6).fontSize(13).onClick(()this.nextStatus(o.order.id,o.order.status))}Button(删除).height(32).backgroundColor(#FEE2E2).fontColor(#EF4444).fontSize(13).onClick(()this.deleteOrder(o.order.id))}.width(100%).margin({top:10})}.padding(14).backgroundColor(Color.White).borderRadius(12)}},(o:OrderWithItems)${o.order.id}-${o.order.orderNo})}.width(94%).layoutWeight(1).margin({top:10}).scrollBar(BarState.Off)}.width(100%).height(100%).backgroundColor(#F1F4F8)}privatetotalOrders():number{letsum0;Object.keys(this.stats).forEach((k:string){sumthis.stats[k];});returnsum;}}三、注册与运行main_pages.json追加pages/samples/OrderPageIndex.ets追加Button( 9 订单与明细).fontSize(15).width(70%).onClick(()this.getUIContext().getRouter().pushUrl({url:pages/samples/OrderPage}))构建验证 →BUILD SUCCESSFUL。四、运行效果描述进入「 9 订单与明细」第一屏标题栏「 订单与明细 · 外键一对多 · JOIN 联表查询」状态统计条「全部 6 · 待支付 1 · 已支付 1 · 已发货 1 · 已完成 2 · 已取消 1」下方 6 张订单卡——每张依次是订单头单号 收货人 彩色状态标签→ 浅灰明细区1~3 行商品名称 单价×数量 小计→ 订单尾共 N 件 红色合计→ 操作按钮行。交互一状态流转点订单 1待支付的「→ 已支付」→ Toast「状态已更新为「已支付」」→ 标签变蓝、统计条刷新待支付 0 / 已支付 2→ 再点「→ 已发货」「→ 已完成」推进到底。交互二取消订单对任意待支付订单点「取消订单」→ 确认框 → 状态变灰「已取消」统计条同步。交互三状态筛选点「已完成 2」→ 列表只剩 2 张绿色标签的订单 → 点「全部」恢复 6 张。交互四删除点「删除」→ 确认框提示删除明细→ 订单与明细一起消失。五、代码质量要点回顾关注点本实例做法一对多orders order_item 聚合体组装事务下单先插主表 循环插从表 commitJOIN 查询LEFT JOIN map 归组状态机页面守卫 status 3动态按钮状态统计GROUP BY status破坏确认showDialog index 1六、文章小结实例 9「订单与明细」收官。五篇文章覆盖一对多建模9-1→ 主从嵌套 UI9-2→ 事务下单与 JOIN9-3→ 双表种子9-4→ 全量代码9-5。核心技术是「先主后从」的事务写入、LEFT JOIN 展平 内存归组的联表查询、状态机驱动的动态按钮——多表建模与联表查询的能力至此系统建立。

相关新闻

黑客攻防实战：从渗透测试到APT攻击防御

黑客攻防实战：从渗透测试到APT攻击防御

1. 黑客能力的边界与真实案例解析在网络安全领域，顶级黑客的技术能力常常超出普通人的想象。他们不仅能够突破常规防御系统，更能发现系统设计者从未考虑到的漏洞。这种能力并非来自魔法，而是对计算机系统底层原理的深刻理解与创造性思维的结合…

2026/8/16 2:13:31 阅读更多 →
美团“红灯停表”悄悄按下了骑手计时器的暂停键

美团“红灯停表”悄悄按下了骑手计时器的暂停键

导语：从超时免罚到“红灯停表”：美团走上了算法的纠偏之路。北京朝阳北路和青年路交叉口，下午两点，日头把柏油路面晒得发软。外卖骑手们眼睛在手机屏幕的倒计时和路口那盏红灯之间来回跳，心里反复算着拐过这个路口还有…

2026/8/16 2:13:31 阅读更多 →
粗排与精排：揭秘大规模推荐系统的核心排序架构

粗排与精排：揭秘大规模推荐系统的核心排序架构

1. 项目概述：从“海选”到“决赛”的流量筛选逻辑在广告、搜索、推荐这些我们每天都会接触的互联网产品背后，藏着一套极其精密且高效的“流量分发”系统。它的核心任务，是在毫秒级的时间内，从上百万甚至上亿的候选内容&#xff08…

2026/8/16 2:13:31 阅读更多 →

最新新闻

从Spring Boot配置中心实战到微服务架构：如何主动“摸到感觉”

从Spring Boot配置中心实战到微服务架构：如何主动“摸到感觉”

最近在技术社区看到一个很有意思的现象：很多开发者，尤其是刚接触一个新框架或复杂系统的朋友，常常会陷入一种“混沌期”。他们看了很多教程，敲了不少代码，但总觉得知识是散的，像一堆拼图碎片，无…

2026/8/17 8:07:51 阅读更多 →
Windows安装Ubuntu Server 22.04：零基础搭建Linux学习环境

Windows安装Ubuntu Server 22.04：零基础搭建Linux学习环境

1. 项目概述：为什么要在Windows上安装Ubuntu Server？ 如果你是一名刚接触Linux的Windows用户，看到“Ubuntu Server”这个词可能会有点发怵。服务器？听起来像是数据中心里那些嗡嗡作响的大家伙，命令行界面黑漆漆的&…

2026/8/17 8:07:51 阅读更多 →
MySQL查询语句体系构建：从基础语法到性能优化的实战指南

MySQL查询语句体系构建：从基础语法到性能优化的实战指南

1. 从“大全”到“体系”：为什么你需要一份查询语句清单 每次接手一个新项目，或者临时需要写一个复杂的报表查询时，你是不是也经历过这样的场景：打开搜索引擎，输入“MySQL 如何分组统计”、“MySQL 多表连接怎么写”&a…

2026/8/17 8:07:51 阅读更多 →
从推理路由到智能体编排：声明式策略与跨层验证架构实践

从推理路由到智能体编排：声明式策略与跨层验证架构实践

1. 从推理路由到智能体编排：一个架构思维的转变 最近和几个做AI应用落地的朋友聊天，大家普遍有个痛点：系统越做越复杂，但可控性却越来越差。一个典型的场景是，你设计了一个包含多个大语言模型、工具调用和数据库查询的…

2026/8/17 8:07:51 阅读更多 →
MySQL可视化客户端深度评测：Navicat、DBeaver、HeidiSQL等工具选型与实战技巧

MySQL可视化客户端深度评测：Navicat、DBeaver、HeidiSQL等工具选型与实战技巧

1. 项目概述：为什么我们需要一个趁手的MySQL可视化客户端？干了这么多年后端开发和数据库运维，我越来越觉得，一个趁手的MySQL可视化客户端，其重要性不亚于程序员手里的IDE。它不仅仅是“看数据”的工具，更是…

2026/8/17 8:07:51 阅读更多 →
趣味编程实战：从零实现“炸弹与小猫”碰撞互动效果

趣味编程实战：从零实现“炸弹与小猫”碰撞互动效果

这次我们来看一个名为“此时，炸弹和小猫同时懵圈了！【离谱编程】”的项目。从标题来看，这很可能是一个趣味性、恶搞性或带有强烈反差效果的编程演示或代码项目，其核心在于通过代码实现某种“离谱”或出人意料的视觉效果或交互逻辑…

2026/8/17 8:06:50 阅读更多 →

日新闻

LabVIEW异步调用实战：从原理到生产者消费者模式，解决界面卡顿与并行处理难题

LabVIEW异步调用实战：从原理到生产者消费者模式，解决界面卡顿与并行处理难题

1. 项目概述：为什么异步调用是LabVIEW进阶的必修课？ 如果你用LabVIEW做过稍微复杂点的项目，尤其是涉及界面响应、多任务并行或者硬件IO等待的场景，大概率遇到过这样的窘境：前面板点个按钮，整个程序就“卡死…

2026/8/17 0:00:08 阅读更多 →
LabVIEW异步调用实战：解决界面卡顿与并行处理难题

LabVIEW异步调用实战：解决界面卡顿与并行处理难题

1. 项目概述：为什么异步调用是LabVIEW进阶的必经之路如果你在LabVIEW里写过稍微复杂点的程序，尤其是涉及到界面响应、多任务并行或者硬件IO等待，大概率会遇到一个头疼的问题：程序“卡”住了。前面板点不动，进度条不更新…

2026/8/17 0:00:08 阅读更多 →
飞书局域网文件传输实战：3种方案实现高速点对点传输

飞书局域网文件传输实战：3种方案实现高速点对点传输

1. 项目概述：为什么要在局域网内用飞书传文件？ 飞书作为一款主流的协同办公套件，其核心功能是围绕云端协作设计的。无论是文档、表格还是文件，通常的分享逻辑都是“上传到云端 -> 生成链接 -> 分享给同事”。这个流程在互联…

2026/8/17 0:00:08 阅读更多 →

周新闻

基于阿里云与通义千问（Qwen）构建AI应用：从模型调用到生产部署的完整实践指南

基于阿里云与通义千问（Qwen）构建AI应用：从模型调用到生产部署的完整实践指南

如果你是一名开发者，最近可能已经感受到了AI大模型正在从“玩具”变成“生产力工具”的强烈信号。从代码补全到智能Agent，从本地部署到云端API，我们正处在一个技术栈快速重构的节点。然而，面对层出不穷的模型、框架和工具&#xf…

2026/8/17 2:58:27 阅读更多 →
工业通信系统底层逻辑：04 反射——高频能量撞墙之后会发生什么？

工业通信系统底层逻辑：04 反射——高频能量撞墙之后会发生什么？

第四篇：反射——高频能量撞墙之后会发生什么？ —— 你以为信号已经过去了，其实它正在回来打你 老Q的现场笔记 第五季，我们正式进入工业神经系统层。这里不再是单个设备的战斗，而是整个工厂“经脉”层面的秩序之战。从这一篇开始，你将第一次看清：看似简单的信号传播，背…

2026/8/17 2:58:30 阅读更多 →
【文章复现】非线性值迭代自适应动态规划（ADP）：离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

【文章复现】非线性值迭代自适应动态规划（ADP）：离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室👇 关注我领取海量matlab电子书和…

2026/8/17 2:58:32 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速：macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/16 6:00:23 阅读更多 →
终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南：3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗？ncmdump解密工具帮你轻松解决这个困…

2026/8/16 6:00:24 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片：为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片：为英语学习 App 打造桌面级学习助手适用平台：HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0（API 26 Beta）新增了 AgentCard 智能体卡片能力，这是继 HMAF（鸿蒙智能体框架&#x…

2026/8/16 6:00:27 阅读更多 →