内部网页应用 · 设计与前端实现

把部门内部要用的网页应用一个个做出来,也把过程讲清楚

这里记录我在日常工作中设计并实现的内部网页应用,从需求梳理、界面设计到前端实现,方便部门同事随时查看进度与成果。

作者的工作台环境,屏幕上展示着正在开发的网页应用

流程联动提示

一条链路,串起订单到报工

从订单录入到现场报工共六步联动,每一步的产出都是下一步的输入。点击任意一步可以进入对应页面查看或操作。库表数据可按文件整体重建:在仓库库存页导入 CSV / Excel 后,先清空现有库存记录再按导入文件写入,适合替换试运行遗留数据。

1

订单录入主联动

在订单导入页上传订单文件或手工录入订单,作为整条流程的起点承接全部订单信息。

进入对应页面
2

仓库库表出库入库

库存库表支持入库与出库;入库包含「检验成品分拣后报工入库」分支,按库区分别记录,并可导入外部仓库文件按库区 + 型号 + 库位整体重建。

进入对应页面
3

订单匹配库表型号落入周转库

订单按型号与库存库表比对,匹配到的订单号与订单内容信息落入周转库。

进入对应页面
4

订单所需滑块出库落入打标区

按订单出库所需滑块,记录从周转库推进到打标区。

进入对应页面
5

打标报工落入待配送区

打标完成后报工,记录进入待配送区等待配送。

进入对应页面
6

配送至现场报工落入报工区

配送至现场后报工,落入报工区 ABC 库区库位并归档到报工台账。

进入对应页面

入库分支与库区

入库分支:检验成品分拣后报工入库。库区分 6车间、7车间、外贸、内销打标、备库、备块打标、3厂库区,共 7 个分支区域。

6车间7车间外贸内销打标备库备块打标3厂库区

常用技能概览

这些是我在日常开发中反复用到的能力,完整的能力说明和分组可以在「关于与技能」里看到。

React 组件开发90%
界面样式与响应式布局86%
需求梳理与流程图84%
跨组沟通与需求对齐85%
TypeScript80%
接口联调77%

精选作品

从近期落地的内部应用里挑出几个,点击卡片可以看到它解决了什么问题、目前做到哪一步。

查看全部作品

同事们怎么说

这些反馈来自实际使用和协作过的部门同事,也是我继续迭代的依据。

原来要反复确认的排期问题,现在做成了一个能直接看的页面,沟通省事很多。

产品组同事头像

产品组同事

需求提出方

有想法或者发现了问题?

不管是新的需求,还是使用中遇到的麻烦,都可以通过反馈入口告诉我,我会把它们排进后续计划。

去反馈
浙ICP备2026087860号-1