更新oa工作台
This commit is contained in:
@@ -1,84 +0,0 @@
|
||||
# 菜单 Store 使用说明
|
||||
|
||||
## 问题描述
|
||||
|
||||
之前菜单 API 在多个地方被重复调用：
|
||||
1. `CommonHeader.vue` - 面包屑导航需要菜单数据
|
||||
2. `CommonAside.vue` - 侧边栏菜单需要菜单数据
|
||||
3. `router/index.js` - 动态路由加载需要菜单数据
|
||||
|
||||
这导致访问页面时会发送多次相同的 API 请求，浪费资源。
|
||||
|
||||
## 解决方案
|
||||
|
||||
使用 Pinia Store 统一管理菜单数据，实现：
|
||||
- **单例加载**：确保同一时间只发送一次 API 请求
|
||||
- **缓存机制**：5分钟缓存，减少重复请求
|
||||
- **响应式更新**：所有组件自动同步更新
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 在组件中使用
|
||||
|
||||
```javascript
|
||||
import { useMenuStore } from '@/stores';
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
|
||||
// 获取菜单（会自动使用缓存，避免重复请求）
|
||||
await menuStore.fetchMenus();
|
||||
|
||||
// 强制刷新菜单（跳过缓存）
|
||||
await menuStore.refreshMenus();
|
||||
|
||||
// 使用菜单数据
|
||||
const menus = menuStore.menus; // 响应式数据
|
||||
const isLoading = menuStore.loading;
|
||||
```
|
||||
|
||||
### 2. 计算属性
|
||||
|
||||
```javascript
|
||||
import { computed } from 'vue';
|
||||
import { useMenuStore } from '@/stores';
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
|
||||
// 自动响应菜单数据变化
|
||||
const menuList = computed(() => menuStore.menus);
|
||||
```
|
||||
|
||||
### 3. 登出时重置
|
||||
|
||||
```javascript
|
||||
// 在登出时调用
|
||||
menuStore.resetMenus();
|
||||
```
|
||||
|
||||
## Store API
|
||||
|
||||
### 状态
|
||||
- `menus` - 菜单列表（响应式）
|
||||
- `loading` - 加载状态
|
||||
- `error` - 错误信息
|
||||
- `isLoaded` - 是否已加载
|
||||
|
||||
### 方法
|
||||
- `fetchMenus(forceRefresh = false)` - 获取菜单（优先使用缓存）
|
||||
- `refreshMenus()` - 强制刷新菜单（跳过缓存）
|
||||
- `resetMenus()` - 重置菜单状态（登出时使用）
|
||||
- `clearCache()` - 清除缓存
|
||||
|
||||
## 缓存机制
|
||||
|
||||
- 缓存 key 基于用户类型和角色ID：`menu_cache_{loginType}_{roleId}`
|
||||
- 缓存有效期：5分钟
|
||||
- 自动过期：超过5分钟自动失效
|
||||
- 后台更新：首次加载使用缓存，同时在后台更新
|
||||
|
||||
## 性能优化
|
||||
|
||||
1. **避免重复请求**：多个组件同时请求时，只发送一次 API 请求
|
||||
2. **智能缓存**：5分钟内使用缓存，减少服务器压力
|
||||
3. **响应式更新**：所有组件自动同步，无需手动刷新
|
||||
|
||||
@@ -1,192 +0,0 @@
|
||||
# OA 基础数据 Store 使用说明
|
||||
|
||||
## 概述
|
||||
|
||||
`useOAStore` 是一个专门用于管理 OA（办公自动化）模块基础数据的 Pinia Store，包括部门、职位、角色等数据。它提供了缓存机制，避免重复请求，大幅减少资源占用。
|
||||
|
||||
## 主要特性
|
||||
|
||||
### 1. 智能缓存机制
|
||||
- **缓存时间**：默认 5 分钟（可配置）
|
||||
- **自动判断**：如果缓存有效，直接返回缓存数据，不发起网络请求
|
||||
- **缓存隔离**：部门、职位、角色数据独立缓存
|
||||
|
||||
### 2. 并发请求控制
|
||||
- **防重复请求**：如果数据正在加载中，后续请求会等待加载完成
|
||||
- **并行加载**：`fetchAllBaseData` 方法会并行请求所有基础数据
|
||||
|
||||
### 3. 统一数据管理
|
||||
- 所有 OA 相关页面共享同一份数据
|
||||
- 数据更新后，所有使用该数据的组件自动响应
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 基本使用
|
||||
|
||||
```javascript
|
||||
import { useOAStore } from '@/stores/oa';
|
||||
|
||||
const oaStore = useOAStore();
|
||||
|
||||
// 获取部门列表（带缓存）
|
||||
await oaStore.fetchDepartments();
|
||||
|
||||
// 获取职位列表（带缓存）
|
||||
await oaStore.fetchPositions();
|
||||
|
||||
// 获取角色列表（带缓存）
|
||||
await oaStore.fetchRoles();
|
||||
|
||||
// 批量获取所有基础数据（推荐用于页面初始化）
|
||||
await oaStore.fetchAllBaseData();
|
||||
```
|
||||
|
||||
### 强制刷新
|
||||
|
||||
```javascript
|
||||
// 强制刷新部门数据（忽略缓存）
|
||||
await oaStore.fetchDepartments(true);
|
||||
|
||||
// 或者使用 refresh 方法
|
||||
await oaStore.refreshDepartments();
|
||||
|
||||
// 刷新所有基础数据
|
||||
await oaStore.refreshAll();
|
||||
```
|
||||
|
||||
### 获取特定数据
|
||||
|
||||
```javascript
|
||||
// 根据ID获取部门信息
|
||||
const department = oaStore.getDepartmentById(1);
|
||||
|
||||
// 根据ID获取职位信息
|
||||
const position = oaStore.getPositionById(1);
|
||||
|
||||
// 根据ID获取角色信息
|
||||
const role = oaStore.getRoleById(1);
|
||||
```
|
||||
|
||||
### 在组件中使用响应式数据
|
||||
|
||||
```javascript
|
||||
import { computed } from 'vue';
|
||||
import { useOAStore } from '@/stores/oa';
|
||||
|
||||
const oaStore = useOAStore();
|
||||
|
||||
// 响应式的部门列表
|
||||
const departments = computed(() => oaStore.departments);
|
||||
|
||||
// 响应式的部门树
|
||||
const departmentTree = computed(() => oaStore.departmentTree);
|
||||
|
||||
// 响应式的职位列表
|
||||
const positions = computed(() => oaStore.positions);
|
||||
|
||||
// 响应式的角色列表
|
||||
const roles = computed(() => oaStore.roles);
|
||||
|
||||
// 加载状态
|
||||
const loadingDepartments = computed(() => oaStore.loadingDepartments);
|
||||
const loadingPositions = computed(() => oaStore.loadingPositions);
|
||||
const loadingRoles = computed(() => oaStore.loadingRoles);
|
||||
```
|
||||
|
||||
### 缓存管理
|
||||
|
||||
```javascript
|
||||
// 清除所有缓存
|
||||
oaStore.clearCache();
|
||||
|
||||
// 清除特定缓存
|
||||
oaStore.clearDepartmentsCache();
|
||||
oaStore.clearPositionsCache();
|
||||
oaStore.clearRolesCache();
|
||||
```
|
||||
|
||||
## 性能优化效果
|
||||
|
||||
### 优化前
|
||||
- 每次进入员工管理页面，都会发起 4 个独立的网络请求：
|
||||
1. 获取部门列表
|
||||
2. 获取职位列表
|
||||
3. 获取角色列表
|
||||
4. 获取员工列表
|
||||
|
||||
- 如果用户频繁切换页面，会产生大量重复请求
|
||||
|
||||
### 优化后
|
||||
- **首次访问**：发起 4 个请求（并行请求，速度更快）
|
||||
- **缓存有效期内再次访问**：只发起 1 个请求（员工列表）
|
||||
- **缓存过期后**：自动刷新缓存，再次进入缓存有效期
|
||||
|
||||
### 性能提升
|
||||
- **请求次数减少**：75% 减少（从 4 次减少到 1 次）
|
||||
- **响应速度提升**：缓存命中时，几乎瞬时响应
|
||||
- **服务器压力降低**：减少 75% 的基础数据请求
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 1. 页面初始化
|
||||
```javascript
|
||||
onMounted(async () => {
|
||||
// 使用批量获取方法，利用缓存机制
|
||||
await oaStore.fetchAllBaseData();
|
||||
// 然后获取业务数据
|
||||
await fetchEmployees();
|
||||
});
|
||||
```
|
||||
|
||||
### 2. 数据更新后
|
||||
```javascript
|
||||
// 如果修改了部门、职位或角色，需要刷新相关缓存
|
||||
await addDepartment(newDepartment);
|
||||
await oaStore.refreshDepartments(); // 刷新部门缓存
|
||||
```
|
||||
|
||||
### 3. 编辑时确保数据最新
|
||||
```javascript
|
||||
const handleEdit = async (item) => {
|
||||
// 确保基础数据已加载（使用缓存）
|
||||
await oaStore.fetchAllBaseData();
|
||||
// 然后加载业务数据
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **缓存时间**：默认 5 分钟，如果需要更频繁的更新，可以修改 `cacheTime` 常量
|
||||
2. **租户隔离**：缓存是基于当前租户的，不同租户的数据不会混淆
|
||||
3. **数据一致性**：如果后端数据更新频繁，可以在更新操作后调用 `refresh` 方法
|
||||
4. **内存占用**：缓存数据存储在内存中，页面刷新后会清空
|
||||
|
||||
## API 参考
|
||||
|
||||
### 状态
|
||||
- `departments`: 部门列表（扁平结构）
|
||||
- `departmentTree`: 部门树结构
|
||||
- `positions`: 职位列表
|
||||
- `roles`: 角色列表
|
||||
- `loadingDepartments`: 部门加载状态
|
||||
- `loadingPositions`: 职位加载状态
|
||||
- `loadingRoles`: 角色加载状态
|
||||
|
||||
### 方法
|
||||
- `fetchDepartments(forceRefresh)`: 获取部门列表
|
||||
- `fetchPositions(departmentId, forceRefresh)`: 获取职位列表
|
||||
- `fetchRoles(forceRefresh)`: 获取角色列表
|
||||
- `fetchAllBaseData(forceRefresh)`: 批量获取所有基础数据
|
||||
- `getDepartmentById(id)`: 根据ID获取部门
|
||||
- `getPositionById(id)`: 根据ID获取职位
|
||||
- `getRoleById(id)`: 根据ID获取角色
|
||||
- `refreshDepartments()`: 刷新部门数据
|
||||
- `refreshPositions()`: 刷新职位数据
|
||||
- `refreshRoles()`: 刷新角色数据
|
||||
- `refreshAll()`: 刷新所有数据
|
||||
- `clearCache()`: 清除所有缓存
|
||||
- `clearDepartmentsCache()`: 清除部门缓存
|
||||
- `clearPositionsCache()`: 清除职位缓存
|
||||
- `clearRolesCache()`: 清除角色缓存
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user