fix: 返回列表时保持之前的 tab 状态

问题:从详情页返回时,列表总是重置到"我发起的" tab

解决方案:
1. 导航到详情页时传递 state: { fromTab: activeTab }
2. 列表页从 location.state.fromTab 恢复 tab 状态

修改文件:
- frontend/src/pages/approval/list.tsx
- frontend/src/pages/business-trip/list.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-26 18:36:41 +08:00
parent ea7f0f8820
commit f3a9e442e9
2 changed files with 12 additions and 6 deletions
+6 -3
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from 'react' import { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { List, Card, Tag, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile' import { List, Card, Tag, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile'
import { import {
@@ -45,8 +45,11 @@ const businessTypeConfig: Record<string, string> = {
export default function ApprovalList() { export default function ApprovalList() {
const { t } = useTranslation() const { t } = useTranslation()
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation()
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved' | 'cc'>('my') // 从 location.state 获取之前的 tab,默认为 'my'
const initialTab = ((location.state as any)?.fromTab as string) || 'my'
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved' | 'cc'>(initialTab)
const [list, setList] = useState<ApprovalItem[]>([]) const [list, setList] = useState<ApprovalItem[]>([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(false) const [hasMore, setHasMore] = useState(false)
@@ -144,7 +147,7 @@ export default function ApprovalList() {
// 查看详情 // 查看详情
const handleViewDetail = (id: number) => { const handleViewDetail = (id: number) => {
navigate(`/approval/${id}`) navigate(`/approval/${id}`, { state: { fromTab: activeTab } })
} }
// 格式化日期 // 格式化日期
+6 -3
View File
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { List, Card, Tag, Button, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile' import { List, Card, Tag, Button, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile'
import { AddOutline, ClockCircleOutline, CheckCircleOutline, CloseCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons' import { AddOutline, ClockCircleOutline, CheckCircleOutline, CloseCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons'
@@ -31,8 +31,11 @@ interface BusinessTripItem {
export default function BusinessTripList() { export default function BusinessTripList() {
const { t } = useTranslation() const { t } = useTranslation()
const navigate = useNavigate() const navigate = useNavigate()
const location = useLocation()
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved'>('my') // 从 location.state 获取之前的 tab,默认为 'my'
const initialTab = ((location.state as any)?.fromTab as string) || 'my'
const [activeTab, setActiveTab] = useState<'my' | 'pending' | 'approved'>(initialTab)
const [list, setList] = useState<BusinessTripItem[]>([]) const [list, setList] = useState<BusinessTripItem[]>([])
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(true) const [hasMore, setHasMore] = useState(true)
@@ -97,7 +100,7 @@ export default function BusinessTripList() {
// 查看详情 // 查看详情
const handleViewDetail = (id: number) => { const handleViewDetail = (id: number) => {
navigate(`/business-trip/detail/${id}`) navigate(`/business-trip/detail/${id}`, { state: { fromTab: activeTab } })
} }
// 新建申请 // 新建申请