一个Blazor+WinForm+MAUI+PDA实现的条码比对系统

条码比对系统是由单机版桌面软件和Android版的PDA扫码软件组成,桌面软件采用Blazor与WinForm进行混合开发,PDA扫码软件采用MAUI进行开发,这个项目都是基于.NET技术进行构建,这也是将近期学习Blazor和MAUI这两门技术应用到实践当中。

1. 项目背景

  • 朋友公司外仓发货时把客户标签贴错了,导致客户扫码入库异常,被客户投诉,为此损失百万订单
  • 为防止后续再次出现上述问题,因此开发一套条码比对系统来预防此类问题出现

2. 项目需求

  • 客户下单后,将通知外仓备货,打印客户条码标签贴到纸箱上
  • 外仓现场距离办公室远,无网络
  • 根据客户订单明细和装箱配置自动生成总箱数(要考虑尾箱)
  • 每箱出货码及数量必须与客户码及数量一致
  • 总箱数和每箱条码比对一致,才能打印出货单,由司机签字装货

3. 技术方案

根据上述需求,系统分为PC单机版软件 + PDA扫码软件 + 数据传输接口三部分组成

  • PC单机版软件:采用Blazor+WinForm进行混合开发
  • PDA扫码软件:采用MAUI开发原生Android应用
  • 数据传输接口:采用WebApi进行数据交互(用于PDA扫码完成后拿到办公室上载扫码数据)

4. 功能设计

1)PC单机版软件

主界面

  • 装箱配置

配置料号与每箱数量关系,用于比对时自动根据出货清单的数量计算出货箱数。

  • 条码比对

点击【新增】按钮进入比对页面添加一条比对记录,可对记录进行编辑、删除和打印交货单;交货完成可点击【归档】按钮将记录归入历史记录中。

点击【新增】按钮进入比对操作页面,在"扫码清单"下拉选择由扫描枪上载的扫码记录;点击【导入出货清单】将出货清单Excel导入系统;点击【比对】按钮将导入的出货清单与选择的扫码记录进行比对,比对结果显示在"单货比对结果"中,明细结果全部一致且总箱数一致,比对结果才一致;比对结果一致方可打印交货单放行。

  • 扫码记录

用于查询由扫码枪PDA软件上载的扫码记录,点击名称连接查看该批扫码明细记录。

  • 历史记录

用于查询历史比对记录,点击【取消归档】可取消归档该记录。

2)PDA扫码软件

  • 扫码主页

打开条码比对PDA软件默认显示扫码主页,在文本框输入备注信息,再点击【开始扫码】按钮进入扫码比对页面,对逐个装箱条码进行扫码比对,全部扫码比对完成后点击【上载数据】按钮,将该批比对数据上载到电脑端比对管理系统与出货清单进行比对。

点击【开始扫码】后,显示扫码比对页面,按下PDA扫描枪按键,自动匹配条码信息至出货码,客户码、数量码,自动比对出货码与客户码是否一致,一致显示OK,否则显示FAIL;点击【确认继续】按钮继续扫描下一个装箱,如果条码不允许重复,可勾选"禁止提交重复条码选项",全部扫完点击【全部完成】按钮返回扫码主页。

  • 扫码记录

点击底部【记录】Tab菜单进入扫码记录页面,该功能主要是用于查询历史扫描的记录信息。

  • 软件设置

点击底部【设置】Tab菜单进入软件设置页面,该功能主要是配置电脑端服务器主机地址,用于上载扫码记录,点击【测试连接】按钮测试与服务器链路是否通畅。

5. 遇到的问题

最初扫码时光标需要定位到一个文本框才能扫码,每次扫码需要点击文本框,用户体验很差,最终是通过PDA的广播功能解决这个问题,关键代码如下:

csharp 复制代码
//定义扫码广播接收者
[BroadcastReceiver(Enabled = true, Exported = true)]
[IntentFilter(new[] { MainActivity.IntentAction })]
class ScanBroadcastReceiver : BroadcastReceiver
{
    public override void OnReceive(Context context, Intent intent)
    {
        var value = intent.GetStringExtra("value");//扫码接收到的条码字符
        AppSetting.OnScan?.Invoke(value);          //调用扫码处理委托
    }
}

//在Android入口注册和卸载扫码广播接收者
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
    internal const string IntentAction = "android.intent.action.SCANRESULT";
    private ScanBroadcastReceiver scanReceiver;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        scanReceiver = new ScanBroadcastReceiver();//创建接收者
    }

    protected override void OnResume()
    {
        base.OnResume();
        //注册接收者
        RegisterReceiver(scanReceiver, new Android.Content.IntentFilter(IntentAction));
    }

    protected override void OnPause()
    {
        UnregisterReceiver(scanReceiver);//卸载接收者
        base.OnPause();
    }
}

//在扫码页面使用广播接收者
public partial class ScanPage : ContentPage
{
    private ScanItem scan = new();

    public ScanPage()
    {
        InitializeComponent();
        BindingContext = scan;
        AppSetting.OnScan = OnCodeChanged;//进入页面设置扫码处理委托
    }

    private void OnCodeChanged(string text)
    {
        //text即是PDA扫码接收到的条码字符串,在此处理条码数据
    }
}
相关推荐
tianxingzhe3717 天前
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
ui·blazor·abp·.net blazor·radzen blazor
景少18 天前
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
blazor
程序设计实验室1 个月前
Blazor Hybrid 实战体验:那些你可能没预料到的坑没预料到的坑
c#·blazor
程序设计实验室1 个月前
PC软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
c#·blazor
known1 个月前
Blazor开发框架Known-V2.0.13
blazor·known
known2 个月前
Blazor静态服务端呈现(静态SSR)身份认证
blazor
known2 个月前
Blazor开发框架Known-V2.0.10
blazor·known
lee5763 个月前
.net 8.0 下 Blazor 通过 SignalR 与 Winform 交互
blazor·signalr
known3 个月前
Blazor开发框架Known-V2.0.9
blazor·known
界面开发小八哥3 个月前
界面控件DevExpress Blazor v24.2路线图预览——支持.NET 9、新增桑基图等
.net·界面控件·blazor·devexpress·ui开发