订单管理系统 (OMS) 搭建实战 - 低代码拖拽定制订单管理系统

本文首发：《订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统》

订单管理系统是很多公司，特别是电商公司最常用的内部系统之一。订单管理系统的使用者通常是仓管或者运营人员，它常被用于管理用户订单，比如添加或者修改一条发货记录，与快递 API 集成以便自动更新订单号等场景。

订单管理系统因为其复杂性，在市场上通常有一些完成度和可订制化都比较高的套件，比如说 SalesForce OMS，Oracle 的 OMS 等。但是这些系统并不太适宜小公司使用，原因有几个

1. 费用昂贵 - Salesfoce 和 Oracle 的报价常常在百万美元级别，更适合大型企业

2. 实施困难 - 即使付得起订阅费用，要将它们真正用起来，通常也需要较长的实施周期

3. 功能浪费 - 这些大型套件通常被用于全场景、超高复杂度的订单管理场景，比如电网设备、轮船建造等。而绝大多数中小企业，特别是互联网企业可能并不需要如此复杂且照顾方方面面的功能

4. 无法定制 - 如果你有一些特别的字段，或者需要实现一些相对独立的需求，这些套件无法满足 100% 的定制需求

而另一方面，如果完全自建的话，又会花费昂贵的人力成本，让本身昂贵的工程师成本用在边缘业务上。

那么有没有一个折衷的方案可以低成本地开发出完全适应自身功能的订单管理系统呢？

在本文中，我们介绍一个电商客户"M 公司"的案例，从零讲述"M 公司"如何用卡拉云快速搭建一个功能齐备的订单管理系统。这套系统目前被运营用于 M 公司的发货流程中。

搭建完成后的系统操作示意如下

1. 运营找到尚未发货的订单

2. 运营复制订单对应的地址，并到快递公司网站创建订单

3. 回到卡拉云，运营将快递单号填入并更新

1. 功能设计

首先我们简述一下需要实现的功能。

M 公司是一家电商公司，因此他们的运营需要每天在各个快递平台发货后，将发货的信息更新到数据库。数据库中的发货记录再被整理起来，形成每天的发货报表。同时在发货时，库存数据库中的记录也需要被刷新，以防止库存量过小。在功能上我们希望隐藏复杂的功能，只暴露最简单的交互以方便运营快速地操作。

在本文中，我们只用订单管理系统的其中一个功能 - 订单发货系统 来说明如何搭建，但库存系统、仓储系统等其它系统搭建原理也是一样的。

接下来我们来设计这个订单发货系统的界面。

2. 订单管理系统界面设计

在卡拉云中，界面的实现全部通过拖拽生成，因此我们完全可以通过在没有实现任何功能之前，将界面通过拖拽先设计好。

M 公司的程序员在粗略阅读过卡拉云文档后，决定用一个表格来承载所有订单记录，同时在表格上方用一个标签来说明表格的作用，如下图所示

当运营选择一个订单时，我们希望可以出现一个地址以方便运营一目了然看到，同时有一个复制按钮，可以让运营轻松复制到顺丰等快递公司网站，从而生成快递单。

我们再加入运营需要每天操作的表单，包括发货状态、快递单号和选择快递物流公司的下拉框。

到这里订单管理的发货管理界面就设计完成了，对于订单管理系统中的其它界面如库存管理、财务报表等等也类似，均可通过拖拽完成，这里就一笔带过。

设计完后的完成图如下

可以看到我们用几分钟就快速迭代出了一个功能界面，如果有其它需求，增减功能也非常快捷，几乎不需要花费昂贵的工程师时间。

3. 连接数据库

将我们刚才新建的订单管理系统与数据库连接起来之后，就可以操作真实的数据了。只有在接入数据库后，运营的操作才会真正更新到数据库中，与其它系统比如财务结算系统和库存管理系统等集成起来。

在这篇文章里，我们使用一个 demo 数据库来作说明，但实际连接生产数据库时，操作是一模一样的。首先我们需要告诉卡拉云如何连接数据库，进入数据源管理界面，添加一个 MySQL 数据库，如果你的数据库是其它类型，比如 PostgreSQL 或者 MongoDB，则请选择对应的数据库类型即可。

填入数据库信息后，点测试连接。请注意，如果你使用的是阿里云或腾讯云等云端数据库，在连接时，你需要将卡拉云的 IP 地址加入到允许访问的白名单中。

点击 测试连接 返回成功之后，我们就连接好了数据库。

4. 在订单管理界面访问数据库

至此， 我们已经可以在我们的订单管理系统中开始读取发货信息了。假设发货的数据表中有以下字段

• id - 订单 id

• user_id - 下订单的用户 id

• product_image - 订单中的产品图片

• product_name - 订单中的产品名

• shipping_company - 订单选用的快递公司，如申通、中通或顺丰等

• shipping_tracking_number - 订单号

• address - 订单的地址

如下，则我们新建一个 SQL 查询

SELECT * FROM orders;

并将这个查询命名为 getOrders。之后，我们只要引用 getOrders.data 就可以获得所有订单信息。我们在表格上将订单信息与表格绑定:

可以看到，现在我们的表格中出现了所有的订单信息。同时，如果订单中需要显示富文本，如图片，你可以设置对应的列将其展示为图片。

为了运营提升效率，我们还可以直接将表格中的列名展示为中文，比如说 product_name 我们可以将其重命名为 产品名，这样方便英文不熟练的运营使用。

5. 更新订单

现在，运营点击表格中的订单信息时，侧面的表单就会显示对应订单的信息，如发货地址等。如果运营到对应的快递公司网站上新建了一个快递请求，同时获取了一个单号后，就可以在这里更新快递单号。

我们只需要创建一个 SQL 来将运营更新的单号更新到数据库中即可。

首先我们在查询编辑界面中新建一个查询 updateOrder 并键入更新的 query

UPDATE ordersSET    shipping_company = {{shippingCompany.value}},       shipping_tracking_number = {{shippingNumberInput.value}}WHERE  id = {{orderstable.selectedrow.data.id}}

这里的 query 逻辑很简单，即将运营输入的快递公司的值和快递单号更新到数据库 orders 中即可。

至此，每当运营更新一个订单并点击更新时，数据库的数据会对应更新，同时表格自动刷新反映最新的数据。

6. 结语

可以看到，我们用非常短的时间实现了一个复杂的订单管理系统中的发货管理模块。为了简短起见，我们省略了较多其它可以用卡拉云搭建的功能，比如我们可以直接通过调用快递公司 API，直接从系统中创建一个快递订单，并将快递单号填到我们的数据库中等等。

卡拉云作为极度灵活的低代码开发平台，可以帮助你实现任意复杂的内部管理系统和后台工具，包括员工管理、库存管理、订单管理等等。如果你对卡拉云感兴趣想尝试，请点击试用或右下角的聊天窗口联系我们。

7. 附录

如果对比自己开发一个订单管理系统的话，请参考

• Vue后台管理系统
  

• Vue上传图片
  

• Vue富文本编辑器
  

参考其它解决方案

• 用户审核系统
  

扩展阅读：

• 7 种最棒的 Vue Loading 加载动画组件测评与推荐
  

• 如何在 Vue 中加入图表 - Vue echarts 使用教程
  

• Element Plus 和 Ant Design Vue 对比测评，哪个更好？
  

• Element Plus for Vue 3 入门教程
  

• 最棒的 7 个 Laravel admin 后台管理系统推荐
  

• 顶级好用的 5 款 Vue table 表格组件测评与推荐
  

• 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
  

• Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
  

本文参考：关于订单管理系统(OMS)，你需要知道这些