3.7 KiB
3.7 KiB
钥匙管理组件 - 任务拆分文档
任务依赖图
graph TD
T1[创建文件夹结构] --> T2[创建KeyInfo组件]
T2 --> T3[实现钥匙柜选择功能]
T2 --> T4[实现钥匙矩阵展示]
T2 --> T5[实现钥匙状态显示]
T2 --> T6[实现操作历史Dialog]
T3 --> T7[集成API获取钥匙数据]
T5 --> T7
T6 --> T8[集成API获取操作记录]
T7 --> T9[更新路由配置]
T8 --> T9
T9 --> T10[更新Main.vue]
子任务详细信息
T1: 创建文件夹结构
输入契约：
- 项目根目录：
h:/Code/仓库管理系统/warehouse
输出契约：
- 创建文件夹：
src/view/key
实现约束：
- 使用标准的文件夹创建命令
- 确保文件夹结构与项目其他功能模块保持一致
T2: 创建KeyInfo组件
输入契约：
- 已创建的
src/view/key文件夹 - 参考项目中其他组件的结构和样式
输出契约：
- 创建文件：
src/view/key/KeyInfo.vue - 组件基本结构完整
实现约束：
- 使用Vue 3 Composition API
- 遵循项目现有的组件开发规范
T3: 实现钥匙柜选择功能
输入契约：
KeyInfo.vue组件- 三个钥匙柜的配置信息
输出契约：
- 完整的钥匙柜选择下拉框
- 选择事件处理逻辑
实现约束：
- 使用ElementPlus的
<el-select>组件 - 提供默认选中项
T4: 实现钥匙矩阵展示
输入契约：
KeyInfo.vue组件- 钥匙柜选择功能
输出契约：
- 根据选中钥匙柜动态生成方格矩阵
- 矩阵中格子显示正确的序号
实现约束：
- 矩阵布局合理，美观
- 序号从左上角1号开始，按从左到右、从上到下的顺序排列
T5: 实现钥匙状态显示
输入契约：
KeyInfo.vue组件- 钥匙矩阵展示功能
- 钥匙数据
输出契约：
- 在对应位置显示钥匙图标
- 根据KeyState属性设置图标颜色
实现约束：
- "在位"状态显示绿色
- "离位"状态显示红色
- 图标清晰可见
T6: 实现操作历史Dialog
输入契约：
KeyInfo.vue组件- 钥匙状态显示功能
输出契约：
- 点击钥匙图标显示Dialog
- Dialog中包含操作历史表格
- 正确处理Dialog的显示和隐藏
实现约束：
- 使用ElementPlus的
<el-dialog>和<el-table>组件 - Dialog内容布局合理
T7: 集成API获取钥匙数据
输入契约：
KeyInfo.vue组件- 项目中的http.js
- API接口：
/api/warehouse_keys/GetPageData
输出契约：
- 成功从API获取钥匙数据
- 正确处理和存储数据
- 错误处理机制
实现约束：
- 使用项目现有的http.js进行请求
- 处理API返回的数据格式
- 添加适当的加载状态
T8: 集成API获取操作记录
输入契约：
KeyInfo.vue组件- 项目中的http.js
- API接口：
/api/warehouse_keylog/GetPageData
输出契约：
- 成功从API获取钥匙操作记录
- 正确显示在Dialog中
- 错误处理机制
实现约束：
- 使用项目现有的http.js进行请求
- 动态传递KeyId参数
- 添加适当的加载状态
T9: 更新路由配置
输入契约：
src/router/index.ts文件KeyInfo.vue组件
输出契约：
- 在路由配置中添加KeyInfo组件的路由
- 设置正确的路径和参数
实现约束：
- 路由路径：
/index/key/info - 设置
meta.requiresAuth: true
T10: 更新Main.vue
输入契约：
src/view/Main.vue文件- 新增的KeyInfo组件
- 更新后的路由配置
输出契约：
- 在Main.vue中导入KeyInfo组件
- 在handleMenuSelect函数中添加对新路由的处理
实现约束：
- 导入路径正确
- 处理逻辑与其他组件保持一致