168 lines
3.7 KiB
Markdown
168 lines
3.7 KiB
Markdown
# 钥匙管理组件 - 任务拆分文档
|
||
|
||
## 任务依赖图
|
||
|
||
```mermaid
|
||
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函数中添加对新路由的处理
|
||
|
||
**实现约束**：
|
||
- 导入路径正确
|
||
- 处理逻辑与其他组件保持一致 |