docs: 整理项目问题文档,修复审批列表数据混乱

- 新增 PROJECT_ISSUES.md 统一管理所有问题和解决方案
- 精简 CLAUDE.md,移除重复的问题记录部分
- 修复审批列表数据混乱问题(React 18 StrictMode + 状态管理)
- 修复首次加载不显示数据问题(requestIdRef 清理时机)
- 修复页码初始值错误(hasMore 默认值)
- 修复后端响应序列化问题(Eloquent 模型转数组)
- 添加审批人和抄送人重复校验
- 修复双 header 问题
- 调整申请页面 padding-bottom

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 09:12:21 +08:00
parent 214992b163
commit b7919910f1
9 changed files with 559 additions and 220 deletions
+53 -196
View File
@@ -197,203 +197,20 @@ docker logs x-server-backend -f
2. frpc 将 8080 暴露到公网
3. 飞书回调地址配置为公网域名
## 已知问题和解决方案
### Webman 框架要点
### 页面间状态丢失问题 ⚠️ 重要!
#### 问题1:navigate(-1) 不传递 state
**现象:** 使用 `navigate(-1, { state })` 返回上一页时,`location.state` 为 `null`
**原因:** React Router 在使用 `navigate(-1)` 时,`state` 参数不可靠
**解决方案:** 使用 sessionStorage 传递数据
#### 问题2:多次选择导致状态丢失
**现象:**
- 选择审批人后,再选择抄送人,审批人状态丢失
- 先选择抄送人,再选择审批人,抄送人状态丢失
**原因:**
- 每次导航时,目标页面组件会重新挂载
- 重新挂载时,所有 useState 都会重置为初始值
- sessionStorage 在第一次读取后被清除,第二次挂载时无数据可恢复
**解决方案:**
1. **使用独立的 sessionStorage key**(不要共用一个 key)
2. **不在 useEffect 中立即清除 sessionStorage**
3. **每次挂载时从 sessionStorage 恢复状态**
4. **只在业务操作完成后才清除 sessionStorage**(提交、保存等)
**正确实现:**
```tsx
// 选择页面 - 使用独立的 key
const handleConfirm = () => {
if (type === 'approver') {
sessionStorage.setItem('selectedApprovers', JSON.stringify(selectedUsers))
} else if (type === 'cc') {
sessionStorage.setItem('selectedCc', JSON.stringify(selectedUsers))
}
navigate(-1)
}
// 申请页面 - 每次挂载时恢复状态
useEffect(() => {
const approversData = sessionStorage.getItem('selectedApprovers')
const ccData = sessionStorage.getItem('selectedCc')
if (approversData) {
setApprovers(JSON.parse(approversData))
}
if (ccData) {
setCcUsers(JSON.parse(ccData))
}
}, [])
// 提交/保存成功后清除
const handleSubmit = async () => {
// ... 提交逻辑 ...
sessionStorage.removeItem('selectedApprovers')
sessionStorage.removeItem('selectedCc')
navigate('/business-trip')
}
```
**关键点:**
- ✅ 不同类型数据使用独立的 sessionStorage key
- ✅ 不在 useEffect 中清除 sessionStorage
- ✅ 每次挂载都恢复状态,确保组件重新挂载时状态不丢失
- ✅ 只在业务操作完成后清除 sessionStorage
**相关文件:**
- `frontend/src/pages/business-trip/select-approver.tsx`
- `frontend/src/pages/business-trip/select-cc.tsx`
- `frontend/src/pages/business-trip/apply.tsx`
#### 问题3:导航时草稿保存不及时
**现象:** 用户输入内容后快速点击选择人员,返回时输入的内容丢失
**原因:** React 的 useEffect 是异步执行的,用户快速导航时,useEffect 可能还没来得及保存到 sessionStorage
**解决方案:** 在导航处理函数中立即保存草稿
```tsx
const handleSelectApprovers = () => {
// 导航前立即保存草稿
const draftData = { reason, itineraries }
sessionStorage.setItem('businessTripDraft', JSON.stringify(draftData))
navigate('/business-trip/apply/select-approver', { state: { selected: approvers, type: 'approver' } })
}
const handleSelectCc = () => {
// 导航前立即保存草稿
const draftData = { reason, itineraries }
sessionStorage.setItem('businessTripDraft', JSON.stringify(draftData))
navigate('/business-trip/apply/select-cc', { state: { selected: ccUsers, type: 'cc' } })
}
```
**关键点:**
- ✅ 导航前同步保存草稿数据,不依赖 useEffect
- ✅ 保留 useEffect 自动保存作为备份机制(防止用户不导航就离开页面)
### 申请页面完整数据流
申请页面(如出差申请)需要处理三种场景:
1. **首次进入(新建申请)**
- 清除旧的 sessionStorage 数据
- 加载默认审批人/抄送人
- 初始化空表单
2. **从选择页面返回**
- 从 sessionStorage 恢复草稿数据
- 从 sessionStorage 恢复人员数据(审批人/抄送人)
- 日期字符串需要转换为 Date 对象
3. **提交/保存成功**
- 清除所有 sessionStorage 数据
- 导航回列表页
**实现要点:**
- 使用 `location.state?.fromSelection` 标记返回状态
- 使用独立的 sessionStorage key:`businessTripDraft`, `selectedApprovers`, `selectedCc`
- 导航前立即保存草稿,不依赖 useEffect
- 日期对象序列化/反序列化处理
**相关文件:**
- `frontend/src/pages/business-trip/apply.tsx` - 申请页面主逻辑
- `frontend/src/pages/business-trip/select-approver.tsx` - 审批人选择
- `frontend/src/pages/business-trip/select-cc.tsx` - 抄送人选择
### Ant Design Mobile DatePicker 点击无反应
**问题:** DatePicker 组件使用 children render prop 方式时,点击无法弹出选择框
**原因:** antd-mobile 5.x 的 DatePicker children render prop 点击事件绑定存在问题
**解决方案:** 使用 `visible` 属性手动控制弹框显示
```tsx
// ❌ 错误用法 - 点击无反应
<DatePicker value={value} onConfirm={setValue}>
{(value) => <button>{value ? '已选择' : '请选择'}</button>}
</DatePicker>
// ✅ 正确用法 - 使用 visible 属性
const [visible, setVisible] = useState(false)
<div onClick={() => setVisible(true)}>
{value ? '已选择' : '请选择'}
</div>
<DatePicker
visible={visible}
onConfirm={(val) => {
setValue(val)
setVisible(false)
}}
onClose={() => setVisible(false)}
onCancel={() => setVisible(false)}
/>
```
**相关文件:**
- `frontend/src/main.tsx` - 需要导入 `import 'antd-mobile/es/global'`
- `frontend/src/pages/business-trip/apply.tsx` - 正确使用示例
### Ant Design Mobile 全局样式导入
**必须导入全局样式:**
```tsx
import 'antd-mobile/es/global'
```
否则弹框、遮罩等组件将无法正常显示。
### Selector 组件对号图标隐藏
**问题:** Selector 组件选中时显示对号图标和背景色,想要只保留背景色
**解决方案:** 使用 `showCheckMark` 属性
```tsx
<Selector showCheckMark={false} options={options} />
```
### PSR-4 自动加载
**PSR-4 自动加载**
- 目录名必须是 PascalCase(Controller、Model、Service、Util)
- 不能用小写(controller、model、service、util)
### React 版本
- 必须使用 React 18.3.1(不能用19)
- @types/react 和 @types/react-dom 也要用 v18
### 数据库连接
**数据库连接**
- 使用 Webman 官方 `webman/database` 包
- 使用 `support\Db` facade 进行数据库操作
- 使用 `Db::connection()` 获取数据库连接进行事务处理
### Bootstrap 接口
**Bootstrap 接口**
- 方法签名:`public static function start(?\Workerman\Worker $worker): void`
- 需要添加 `use Workerman\Worker;`
### Webman 官方依赖包
**官方依赖包**
```bash
composer require workerman/webman:^2.0
composer require webman/database:^2.0
@@ -403,20 +220,24 @@ composer require illuminate/events:^11.0
composer require symfony/var-dumper:^7.0
```
### User Store 状态管理
- 使用 Zustand with persistence
### 前端框架要点
**React 版本**
- 必须使用 React 18.3.1(不能用19)
- @types/react 和 @types/react-dom 也要用 v18
**Ant Design Mobile**
- 必须导入全局样式:`import 'antd-mobile/es/global'`
- DatePicker 使用 `visible` 属性控制弹框显示
**Zustand 状态管理**
- 登录时必须调用 `login(user, token)` 方法设置状态
- Token 存储在 localStorage,key 为 `token`
- 登录页面必须正确初始化 Zustand store,否则后续页面获取不到用户信息
### 类型定义注意
**类型定义**
- `User.id` 是 `number` 类型(后端返回整型)
- `User.company_id` 是 `number` 类型(数据库字段名)
### Docker 容器重启
- CMD 使用 `php start.php start`(不要用 `-d`)
- 前台运行,避免容器退出
## 语言切换位置
1. **首页** - 右上角显示当前语言国旗,点击切换
@@ -442,3 +263,39 @@ composer require symfony/var-dumper:^7.0
2. 实现公司切换功能
3. 完善权限控制
4. 添加更多业务类型(费用报销、请假申请、采购申请)
---
## 快速参考
### 查看问题汇总
所有历史问题已整理在项目根目录的 `PROJECT_ISSUES.md` 文件中。
### 让 CLAUDE 加载问题文档
```
请参考 /www/x-server-mobile/PROJECT_ISSUES.md 中的问题汇总
```
### 调试后端
```bash
# 查看日志
docker logs x-server-backend -f --tail 50
# 重启后端
docker compose restart backend
# 复制文件到容器
docker cp host_file x-server-backend:/app/app/service/xxx.php
# 重载 workers(不重启整个服务)
docker exec x-server-backend php /app/webman reload
```
### 数据库操作
```bash
# 进入 MySQL 容器
docker exec -it 1Panel-mysql-409s mysql -uroot -pmysql_xEsdPa xserver
# 运行测试数据脚本
docker exec x-server-backend php /app/test_data.php
```
+366
View File
@@ -0,0 +1,366 @@
# X-Server Mobile 项目问题汇总
本文档记录项目开发过程中遇到的问题和解决方案,便于 CLAUDE 后续参考。
---
## 1. 审批列表数据混乱问题
**问题**:审批列表的三个 tab(我发起的、待我审批、我已审批)显示的数据不正确
**原因**:
- 前端状态管理问题:`setActiveTab` 是异步的,`loadData` 函数使用旧状态值
- React 18 StrictMode 导致 useEffect 执行两次,造成重复请求和状态混乱
**解决方案**:
```typescript
// 在 loadData 中添加 tab 参数,直接传递目标 tab 值
const loadData = async (pageNum: number = 1, isRefresh: boolean = false, tab?: string) => {
const currentTab = tab || activeTab // 使用传入的 tab 参数
// ...
}
// 切换 tab 时直接传递新值
const handleTabChange = (key: string) => {
setActiveTab(key as 'my' | 'pending' | 'approved')
loadData(1, true, key) // 直接传递 key
}
```
**相关文件**:`frontend/src/pages/approval/list.tsx`
---
## 2. 列表首次加载不显示数据问题
**问题**:首次进入审批列表时,"我发起的"不显示数据,需要切换其他 tab 再切换回来才显示
**原因**:
- React 18 StrictMode 导致组件快速 mount/unmount
- useEffect cleanup 函数中 `requestIdRef.current = null` 清空了请求 ID
- 正在进行的 API 请求返回时,`requestIdRef.current` 已经是 null,导致响应被跳过
**解决方案**:
```typescript
useEffect(() => {
loadData(1, true)
return () => {
mountedRef.current = false
// 不清空 requestIdRef,让异步请求能够正常完成处理
}
}, [])
```
**相关文件**:`frontend/src/pages/approval/list.tsx`
---
## 3. 页码初始值导致请求错误数据
**问题**:前端请求 page=2 而不是 page=1
**原因**:
- `InfiniteScroll` 组件在挂载时触发 `loadMore`,因为 `hasMore` 初始值是 `true`
**解决方案**:
```typescript
const [hasMore, setHasMore] = useState(false) // 改为 false,避免挂载时立即触发加载更多
```
**相关文件**:`frontend/src/pages/approval/list.tsx`
---
## 4. 后端响应序列化问题
**问题**:后端返回数据时发生错误,进程不断重启
**原因**:
- Eloquent 模型对象存在循环引用,JSON 序列化失败
**解决方案**:
```php
// 在 ApprovalService::getList() 中将模型对象转换为纯数组
$listArray = $list->map(function ($item) {
return [
'id' => $item->id,
'title' => $item->title,
'business_type' => $item->business_type,
'status' => $item->status,
'created_at' => $item->created_at ? $item->created_at->toDateTimeString() : null,
'applicant' => $item->applicant ? [
'id' => $item->applicant->id,
'name' => $item->applicant->name,
] : null,
'flow' => $item->flow ? [
'id' => $item->flow->id,
'name' => $item->flow->name,
] : null,
];
})->toArray();
return [
'list' => $listArray,
'total' => $total,
'page' => $page,
'page_size' => $pageSize,
];
```
**相关文件**:`backend/app/service/ApprovalService.php`
---
## 5. 审批人和抄送人重复校验
**问题**:提交申请时,审批人和抄送人可能存在重复
**解决方案**:
```php
// 在 BusinessTripService::submit() 中添加校验
$approverIds = array_column($approvers, 'id');
$ccUserIds = array_column($ccUsers, 'id');
// 检查审批人列表中是否有重复
if (count($approverIds) !== count(array_unique($approverIds))) {
throw new \Exception('审批人列表中有重复用户');
}
// 检查抄送人列表中是否有重复
if (count($ccUserIds) !== count(array_unique($ccUserIds))) {
throw new \Exception('抄送人列表中有重复用户');
}
// 检查审批人和抄送人是否有重叠
$overlap = array_intersect($approverIds, $ccUserIds);
if (!empty($overlap)) {
throw new \Exception('审批人和抄送人不能是同一个人');
}
```
**相关文件**:`backend/app/service/BusinessTripService.php`
---
## 6. 测试数据节点配置错误
**问题**:测试数据与实际审批节点配置不匹配
**解决方案**:
- 修正数据库中订单的 `current_nodes` 字段,使用正确的节点 ID
- 确保节点 ID 与实际审批人匹配
**相关数据库表**:`approval_node`, `approval_order`
---
## 7. 双 header 问题
**问题**:部分页面有两个 header(MobileLayout 的 Header + 页面的 NavBar)
**解决方案**:
```typescript
// 在 MobileLayout.tsx 中全局隐藏 Header
const showHeader = false
```
**相关文件**:`frontend/src/components/layout/MobileLayout.tsx`
---
## 8. 申请页面 padding-bottom 过大
**问题**:申请页面底部留白太大
**解决方案**:
```css
.apply {
padding-bottom: 1.5rem; /* 从 80px 改为 1.5rem */
}
```
**相关文件**:`frontend/src/pages/business-trip/apply.module.css`
---
## 9. 前端文件路径大小写问题
**问题**:容器内使用小写目录 `service`,而本地编辑器可能是大写 `Service`
**解决方案**:
- 注意容器内路径为 `/app/app/service/`(小写)
- 编辑文件后需要复制到容器并重启服务
---
## 10. React 状态管理最佳实践
### 使用 ref 追踪异步状态
```typescript
const loadingRef = useRef(false) // 同步状态,避免闭包陷阱
const requestIdRef = useRef<string | null>(null) // 追踪请求 ID
```
### useEffect 依赖清理
```typescript
useEffect(() => {
// 不要在 cleanup 中清空正在使用的 ref
return () => {
mountedRef.current = false
// requestIdRef.current = null // ❌ 不要清空,让异步请求正常完成
}
}, [])
```
### 函数参数优先于状态
```typescript
// ❌ 错误:使用可能过期的状态
const loadData = async () => {
await api.get('/list', { type: activeTab }) // activeTab 可能是旧值
}
// ✅ 正确:直接传递参数
const loadData = async (tab?: string) => {
const currentTab = tab || activeTab
await api.get('/list', { type: currentTab })
}
```
---
## 开发注意事项
1. **数据库密码**:mysql_xEsdPa
2. **数据库名称**:xserver(不是 x_server_mobile)
3. **MySQL 容器名**:1Panel-mysql-409s
4. **后端容器内路径**:/app/(不是 /www/x-server-mobile/backend/)
5. **调试后端**:
- 编辑文件后需要复制到容器:`docker cp host_file container:/app/path`
- 重启后端:`docker compose restart backend`
- 或重载 workers:`docker exec x-server-backend php /app/webman reload`
6. **查看日志**:`docker logs x-server-backend -f --tail 50`
7. **React 18 StrictMode**:开发模式下 useEffect 会执行两次,需要注意副作用
---
## 历史问题汇总(早期开发阶段)
### 1. 缺少 webman/database 包
**解决方案**:`composer require webman/database:^2.0`
### 2. 登录状态没有正确设置到 Zustand store
**解决方案**:在登录成功后调用 `login(result.data.user, result.data.token)`
### 3. User 类型定义中 id 类型错误
**解决方案**:将 `id: string` 改为 `id: number`
### 4. 选择审批人后表单数据丢失
**原因**:每次导航时组件重新挂载,sessionStorage 在第一次读取后被清除
**解决方案**:使用独立的 sessionStorage key,不在 useEffect 中清除
### 5. DatePicker 点击无反应
**原因**:antd-mobile 5.x 的 DatePicker children render prop 点击事件绑定有问题
**解决方案**:使用 `visible` 属性手动控制弹框显示
### 6. 审批列表"我已审批"过滤逻辑错误
**问题**:显示了所有已审批的订单,包括还在审批中的
**解决方案**:只显示已完成状态的订单(approved、rejected、cancelled)
### 7. Dialog 按钮不显示
**问题**:使用 `confirmText`/`cancelText` 参数无效
**解决方案**:使用 `actions` prop 自定义按钮
### 8. React key 重复警告
**问题**:审批人和抄送人的 avatar 使用相同 key
**解决方案**:添加前缀区分 `approver-${id}` 和 `cc-${id}`
### 9. 飞书登录回调地址
**解决方案**:更新为 https://xsm.dev.hnxinyouhe.com/login
### 10. 审批节点数据库重复
**解决方案**:删除重复节点
### 11. 页面间状态丢失
**问题**:`navigate(-1)` 不传递 state,`location.state` 为 null
**解决方案**:使用 sessionStorage 传递数据
### 12. sessionStorage 使用规范
**问题**:多次选择导致状态丢失
**关键点**:
- 不同类型数据使用独立的 sessionStorage key
- 不在 useEffect 中清除 sessionStorage
- 每次挂载时从 sessionStorage 恢复状态
- 只在业务操作完成后清除 sessionStorage(提交、保存等)
### 13. 导航前草稿保存不及时
**解决方案**:在导航处理函数中立即保存草稿
### 14. 申请页面完整数据流
申请页面(如出差申请)需要处理三种场景:
**场景1:首次进入(新建申请)**
- 清除旧的 sessionStorage 数据
- 加载默认审批人/抄送人
- 初始化空表单
**场景2:从选择页面返回**
- 从 sessionStorage 恢复草稿数据
- 从 sessionStorage 恢复人员数据(审批人/抄送人)
- 日期字符串需要转换为 Date 对象
**场景3:提交/保存成功**
- 清除所有 sessionStorage 数据
- 导航回列表页
**实现要点:**
- 使用 `location.state?.fromSelection` 标记返回状态
- 使用独立的 sessionStorage key:`businessTripDraft`, `selectedApprovers`, `selectedCc`
- 导航前立即保存草稿,不依赖 useEffect
- 日期对象序列化/反序列化处理
**相关文件:**
- `frontend/src/pages/business-trip/apply.tsx` - 申请页面主逻辑
- `frontend/src/pages/business-trip/select-approver.tsx` - 审批人选择
- `frontend/src/pages/business-trip/select-cc.tsx` - 抄送人选择
### 16. Ant Design Mobile 全局样式
**必须导入**:`import 'antd-mobile/es/global'`,否则弹框、遮罩等组件无法正常显示
### 17. Selector 组件隐藏对号图标
**解决方案**:使用 `showCheckMark={false}` 属性
### 18. Bootstrap 接口签名
**方法签名**:`public static function start(?\Workerman\Worker $worker): void`
### 19. PSR-4 自动加载
**目录名必须是 PascalCase**(Controller、Model、Service、Util)
### 20. Docker 容器 CMD
**使用前台运行**:`php start.php start`(不要用 `-d`),避免容器退出
---
## 文件修改记录
### 前端文件
- `frontend/src/pages/approval/list.tsx` - 修复状态管理和请求逻辑
- `frontend/src/components/layout/MobileLayout.tsx` - 隐藏 Header
- `frontend/src/pages/business-trip/apply.module.css` - 调整 padding-bottom
- `frontend/src/pages/business-trip/apply.tsx` - 修复 key 重复、草稿保存
- `frontend/src/pages/approval/detail.tsx` - Dialog 按钮修复、字段标签中文显示
- `frontend/src/services/api.ts` - 添加请求日志
- `frontend/src/main.tsx` - 导入 antd-mobile 全局样式
### 后端文件
- `backend/app/service/BusinessTripService.php` - 添加重复校验
- `backend/app/service/ApprovalService.php` - 数据序列化修复
- `backend/app/controller/ApprovalController.php` - 响应返回修复
- `backend/app/model/ApprovalOrder.php` - 模型定义
- `backend/config/database.php` - 数据库配置
- `backend/config/route.php` - 路由配置
### 数据库
- `approval_node` 表 - 删除重复节点
- `approval_order` 表 - 修正 current_nodes 字段
+12 -7
View File
@@ -38,14 +38,19 @@ class ApprovalController extends BaseController
$page = (int) $request->get('page', 1);
$pageSize = (int) $request->get('page_size', 20);
// 添加日志
error_log("Approval list request: userId={$userId}, type={$type}, page={$page}");
try {
$result = $this->service->getList($userId, $type, $page, $pageSize);
$result = $this->service->getList($userId, $type, $page, $pageSize);
error_log("Approval list result: count=" . count($result['list']));
return $this->success($result);
// 使用 json() 全局函数返回 JSON
return json([
'code' => 0,
'message' => 'success',
'data' => $result,
]);
} catch (\Exception $e) {
error_log("❌ Error in list controller: " . $e->getMessage() . "\n" . $e->getTraceAsString());
return $this->error($e->getMessage());
}
}
/**
+27 -1
View File
@@ -183,10 +183,12 @@ class ApprovalService
switch ($type) {
case 'my':
$query->where('applicant_id', $userId);
error_log("🔍 Debug 'my' query: userId={$userId}");
break;
case 'pending':
// 获取用户待审批的订单
$pendingOrderIds = $this->getPendingOrderIds($userId);
error_log("🔍 Debug 'pending' query: userId={$userId}, pendingOrderIds=" . json_encode($pendingOrderIds));
$query->whereIn('id', $pendingOrderIds);
break;
case 'approved':
@@ -197,19 +199,43 @@ class ApprovalService
->pluck('order_id')
->unique()
->toArray();
error_log("🔍 Debug 'approved' query: userId={$userId}, approvedOrderIds=" . json_encode($approvedOrderIds));
$query->whereIn('id', $approvedOrderIds)
->whereIn('status', [ApprovalOrder::STATUS_APPROVED, ApprovalOrder::STATUS_REJECTED, ApprovalOrder::STATUS_CANCELLED]);
break;
}
$total = $query->count();
error_log("🔍 Debug total count: type={$type}, total={$total}");
$list = $query->orderBy('created_at', 'desc')
->offset(($page - 1) * $pageSize)
->limit($pageSize)
->get();
error_log("🔍 Debug list count: type={$type}, page={$page}, count=" . $list->count());
// 转换为数组避免序列化问题
$listArray = $list->map(function ($item) {
return [
'id' => $item->id,
'title' => $item->title,
'business_type' => $item->business_type,
'status' => $item->status,
'created_at' => $item->created_at ? $item->created_at->toDateTimeString() : null,
'applicant' => $item->applicant ? [
'id' => $item->applicant->id,
'name' => $item->applicant->name,
] : null,
'flow' => $item->flow ? [
'id' => $item->flow->id,
'name' => $item->flow->name,
] : null,
];
})->toArray();
return [
'list' => $list,
'list' => $listArray,
'total' => $total,
'page' => $page,
'page_size' => $pageSize,
@@ -103,6 +103,26 @@ class BusinessTripService
throw new \Exception('当前状态无法提交');
}
// 验证审批人和抄送人不能重复
$approverIds = array_column($approvers, 'id');
$ccUserIds = array_column($ccUsers, 'id');
// 检查审批人列表中是否有重复
if (count($approverIds) !== count(array_unique($approverIds))) {
throw new \Exception('审批人列表中有重复用户');
}
// 检查抄送人列表中是否有重复
if (count($ccUserIds) !== count(array_unique($ccUserIds))) {
throw new \Exception('抄送人列表中有重复用户');
}
// 检查审批人和抄送人是否有重叠
$overlap = array_intersect($approverIds, $ccUserIds);
if (!empty($overlap)) {
throw new \Exception('审批人和抄送人不能是同一个人');
}
// 获取审批流程(简化版:直接使用第一个审批人作为单人审批)
$flow = ApprovalFlow::where('business_type', 'business_trip')
->where('status', 1)
@@ -9,7 +9,7 @@ export default function MobileLayout() {
const location = useLocation()
const mainRef = useRef<HTMLDivElement>(null)
const showHeader = location.pathname !== '/login'
const showHeader = false // 所有页面都不显示 Header
const showTabBar = false // 暂时隐藏底部 Tab
// 路由变化时滚动到顶部
+62 -12
View File
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'
import { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { List, Card, Tag, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile'
@@ -49,17 +49,42 @@ export default function ApprovalList() {
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved'>('my')
const [list, setList] = useState<ApprovalItem[]>([])
const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(true)
const [hasMore, setHasMore] = useState(false) // 改为 false,避免挂载时立即触发加载更多
const [page, setPage] = useState(1)
const currentTabRef = useRef(activeTab) // 用于追踪当前有效的 tab
const loadingRef = useRef(false) // 用于同步追踪 loading 状态
const requestIdRef = useRef<string | null>(null) // 用于追踪当前请求 ID
const mountedRef = useRef(true) // 组件挂载时立即设为 true
// 更新 ref 当 activeTab 变化时
useEffect(() => {
currentTabRef.current = activeTab
}, [activeTab])
// 加载数据 - 接收 tab 参数避免使用旧的 activeTab
const loadData = async (pageNum: number = 1, isRefresh: boolean = false, tab?: string) => {
if (loading) return
// 使用 ref 检查 loading,避免 React 18 StrictMode 双重调用
if (loadingRef.current) {
console.log('⏸️ Request blocked - already loading')
return
}
// 使用传入的 tab 参数,如果没有则使用当前 activeTab
const currentTab = tab || activeTab
console.log('🔍 Loading approval list:', { currentTab, activeTab, tab, pageNum, isRefresh })
const requestId = `${currentTab}-${pageNum}-${Date.now()}`
requestIdRef.current = requestId
console.log('🔍 Loading approval list START:', {
requestId,
currentTab,
activeTab,
tab,
pageNum,
isRefresh,
currentTabRef: currentTabRef.current
})
loadingRef.current = true
setLoading(true)
try {
const result = await approvalApi.getList({
@@ -68,21 +93,36 @@ export default function ApprovalList() {
page_size: 20,
})
console.log('📦 API response:', { type: currentTab, count: result?.list?.length, result })
console.log('📦 API response received:', {
requestId,
type: currentTab,
count: result?.list?.length,
currentTabRefNow: currentTabRef.current
})
// 检查是否是最新的请求
if (requestIdRef.current !== requestId) {
console.log('⏭️ Skipping outdated response:', { requestId, latestRequestId: requestIdRef.current })
return
}
console.log('📦 API response validated - processing data')
const newList = result?.list || []
if (isRefresh || pageNum === 1) {
// 只在当前 tab 与请求的 tab 一致时才更新数据
if (currentTabRef.current === currentTab) {
console.log('✅ Updating list for tab:', currentTab, 'items:', newList.length)
setList(newList)
setHasMore(newList.length >= 20)
setPage(pageNum)
} else {
setList([...list, ...newList])
console.log('⏭️ Skipping update - tab changed from', currentTab, 'to', currentTabRef.current)
}
setHasMore(newList.length >= 20)
setPage(pageNum)
} catch (error: any) {
console.error('Failed to load approvals:', error)
} finally {
loadingRef.current = false
setLoading(false)
}
}
@@ -90,6 +130,7 @@ export default function ApprovalList() {
// 切换标签
const handleTabChange = (key: string) => {
console.log('🔄 Tab changing from', activeTab, 'to', key)
currentTabRef.current = key as 'my' | 'pending' | 'approved' // 立即更新 ref
setActiveTab(key as 'my' | 'pending' | 'approved')
setList([])
setHasMore(true)
@@ -100,17 +141,26 @@ export default function ApprovalList() {
// 刷新
const handleRefresh = async () => {
await loadData(1, true)
await loadData(1, true, activeTab)
}
// 加载更多
const handleLoadMore = async () => {
await loadData(page + 1, false)
await loadData(page + 1, false, activeTab)
}
// 初始加载
useEffect(() => {
mountedRef.current = true
// 强制使用页码 1,忽略当前 page 状态
console.log('🚀 Initial load effect, forcing page=1')
loadData(1, true)
return () => {
console.log('🧹 Cleanup function called')
mountedRef.current = false
// 不清空 requestIdRef,让异步请求能够正常完成处理
}
}, [])
// 查看详情
@@ -2,7 +2,7 @@
min-height: 100vh;
background: #f5f5f5;
padding: 12px;
padding-bottom: 80px;
padding-bottom: 1.5rem;
}
.form {
+17 -2
View File
@@ -96,8 +96,23 @@ export const businessTripApi = {
// ========== 审批 API ==========
export const approvalApi = {
getList: (params: { type?: string; page?: number; page_size?: number }) =>
api.get('/approval/list', { params }),
getList: (params: { type?: string; page?: number; page_size?: number }) => {
console.log('🚀 API Request approval/list:', params)
return api.get('/approval/list', { params })
.then(res => {
console.log('✅ API Response approval/list:', {
requestParams: params,
responseData: res,
listCount: res?.list?.length,
listIds: res?.list?.map((item: any) => ({ id: item.id, title: item.title, status: item.status }))
})
return res
})
.catch(err => {
console.error('❌ API Error approval/list:', err)
throw err
})
},
getDetail: (id: number) => api.get(`/approval/detail/${id}`),