83 lines
2.4 KiB
Markdown
83 lines
2.4 KiB
Markdown
# 钥匙管理组件 - 共识文档
|
||
|
||
## 需求描述
|
||
开发钥匙信息管理组件，实现钥匙柜选择、钥匙位置可视化展示、钥匙状态显示和操作历史查询功能。
|
||
|
||
## 技术实现方案
|
||
|
||
### 1. 文件夹结构
|
||
- 在`src/view`目录下创建`key`文件夹，用于存放钥匙管理相关组件
|
||
- 在`key`文件夹中创建`KeyInfo.vue`组件文件
|
||
|
||
### 2. 组件结构
|
||
- 组件使用Vue 3 Composition API实现
|
||
- 主要包含以下部分：
|
||
- 钥匙柜选择下拉框
|
||
- 钥匙位置矩阵展示区域
|
||
- 钥匙操作历史Dialog组件
|
||
|
||
### 3. 数据模型
|
||
|
||
#### 钥匙柜配置
|
||
```javascript
|
||
const keyCabinets = [
|
||
{ id: 3, name: '指挥中心钥匙柜1', capacity: 48 },
|
||
{ id: 10, name: '指挥中心钥匙柜2', capacity: 42 },
|
||
{ id: 11, name: '车队钥匙柜', capacity: 32 }
|
||
]
|
||
```
|
||
|
||
#### 钥匙数据结构
|
||
```typescript
|
||
interface KeyData {
|
||
id: number
|
||
DeviceId: number
|
||
KeyName: string
|
||
KeyLocation: string
|
||
KeyType: string
|
||
KeyState: string
|
||
Memo: string | null
|
||
}
|
||
```
|
||
|
||
#### 操作记录数据结构
|
||
```typescript
|
||
interface KeyLog {
|
||
id: number
|
||
KeyId: number
|
||
Action: string
|
||
CreateDate: string
|
||
ActionUser: string
|
||
}
|
||
```
|
||
|
||
### 4. API集成
|
||
- 使用`http.js`中的`post`函数调用两个接口：
|
||
- `/api/warehouse_keys/GetPageData` - 获取钥匙数据
|
||
- `/api/warehouse_keylog/GetPageData` - 获取钥匙操作记录
|
||
|
||
### 5. 状态管理
|
||
- 使用Vue的响应式系统管理组件状态
|
||
- 主要状态包括：选中的钥匙柜、钥匙数据、操作记录数据、Dialog显示状态等
|
||
|
||
## 验收标准
|
||
|
||
### 功能验收
|
||
1. 钥匙柜选择下拉框正确显示三个选项
|
||
2. 选择钥匙柜后，下方正确显示对应位数的方格矩阵
|
||
3. 矩阵中的格子按顺序显示序号（从左上角1号开始）
|
||
4. 成功从API获取钥匙数据并在对应位置显示
|
||
5. 钥匙图标颜色根据状态正确显示（在位-绿色，离位-红色）
|
||
6. 点击钥匙图标时显示Dialog，包含操作历史表格
|
||
7. Dialog中正确显示钥匙的操作历史记录
|
||
|
||
### 技术验收
|
||
1. 组件能够正确编译和运行
|
||
2. API调用错误时提供适当的错误处理
|
||
3. 代码风格与项目现有代码保持一致
|
||
4. 组件具有良好的可维护性和可扩展性
|
||
|
||
## 任务边界限制
|
||
- 本次任务仅实现钥匙信息管理的前端展示功能
|
||
- 不涉及钥匙的申请、归还等操作功能
|
||
- 不涉及后端API的开发和修改 |