哈尔滨前端兼职程序员外包

需求描述

软件前端二次开发
一、 技术栈
后端框架： RuoYi-Vue-Plus
前端框架： Vue 3
UI 组件库： Element Plus
构建工具： Vite
二、 功能需求详情
已接工单列表页面
功能描述： 需要一个页面，展示当前用户已接收的工单列表。
UI元素： 列表至少应包含工单编号、工单名称、总工作量、状态等信息。
操作按钮： 每条工单记录需有一个 【协作】 按钮。
工单协作页面
入口： 从“已接工单列表”点击【协作】按钮进入。
页面信息展示：
显示当前工单的基本信息：工单编号、名称、总工作量、已登记工作量、剩余工作量。
RFID刷卡登记功能：
页面应有一个监听RFID读卡器的机制。
用户刷RFID卡后，自动识别用户信息
识别成功后，动态显示当前刷卡人员信息（如姓名），并允许其填写本次工作量。
工作量登记表单：
表单包含：刷卡人姓名（只读）、工作量（输入框，类型为number）。
有一个【提交】按钮。
关键校验逻辑：
前台校验： 在用户输入工作量并点击提交时，必须进行校验：本次提交的工作量 + 已登记总工作量 <= 工单总工作量。
如果超过，使用Element Plus的 ElMessage.error 给出明确提示：“提交失败！本次工作量提交后将会超过工单总工作量，请重新输入。”
如果未超过，则调用提交接口。
数据接口对接 (API)
1. 获取已接工单列表
方法： GET
用途： 用于填充“已接工单列表”页面。
2. 获取工单详情及已登记工作量
方法： GET
用途： 进入协作页面时调用，获取该工单的总工作量和当前已登记的总工作量。
3. 根据RFID卡号获取用户信息
方法： GET
用途： 刷卡后，根据卡号查询是哪个用户操作的。
4. 提交工作量
方法： POST
用途： 提交单次工作量记录。
后端需做二次校验： 同样需要校验 已有总量 + 本次工作量 <= 工单总工作量，确保数据最终一致性。
三、 页面与组件规划
页面 (Views)
ReceivedOrderList.vue: 已接工单列表页面。
OrderCollaboration.vue: 工单协作页面。接收路由参数 orderId。
RfidReaderInput.vue: 一个封装了RFID监听逻辑的输入框组件（如果前端需要处理硬件信号）。
CollaborationHistoryTable.vue: 一个展示当前工单所有协作记录的表格组件（如果需求有要求历史记录）。
四、 核心实现思路 (前端)
RFID监听：
方案A（常见）：硬件方将读卡器模拟为键盘输入，聚焦到某个输入框时刷卡，会自动输入卡号。通过监听输入框的 input 或 change 事件（可加入防抖）来触发用户查询。
方案B：通过WebSocket或串口通信API直接与读卡器交互，此方案更复杂但体验更好。
工作量校验：
在 OrderCollaboration.vue 页面的数据中，需要维护两个关键数据：
totalWorkload: { type: Number, required: true } // 工单总工作量
registeredWorkload: { type: Number, default: 0 } // 已登记总量
提交前的校验逻辑：
接口联动：
进入 OrderCollaboration.vue 后，在 onMounted 生命周期中，根据 route.params.orderId 调用 接口2 获取工单详情和已登记总量。
用户刷卡后，调用 接口3 获取用户信息并填充表单。
提交表单时，调用 接口4。提交成功后，必须重新调用接口2 更新最新的 registeredWorkload，并清空表单。
需求类型
生产管理软件开发
需求标签
二次开发、生产加工、不限
结算方式
按项目付费
任务预算
可议价
其他高级设置（选填）
不限制参与数量 | 全国服务商 | 全国服务商 | 2025年09月22日完成 | 无反馈要求 | 无开票要求

保存