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:
@@ -1,5 +1,5 @@
|
||||
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 { List, Card, Tag, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile'
|
||||
import {
|
||||
@@ -45,8 +45,11 @@ const businessTypeConfig: Record<string, string> = {
|
||||
export default function ApprovalList() {
|
||||
const { t } = useTranslation()
|
||||
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 [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
@@ -144,7 +147,7 @@ export default function ApprovalList() {
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (id: number) => {
|
||||
navigate(`/approval/${id}`)
|
||||
navigate(`/approval/${id}`, { state: { fromTab: activeTab } })
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { List, Card, Tag, Button, Tabs, PullToRefresh, InfiniteScroll } from 'antd-mobile'
|
||||
import { AddOutline, ClockCircleOutline, CheckCircleOutline, CloseCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons'
|
||||
@@ -31,8 +31,11 @@ interface BusinessTripItem {
|
||||
export default function BusinessTripList() {
|
||||
const { t } = useTranslation()
|
||||
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 [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
@@ -97,7 +100,7 @@ export default function BusinessTripList() {
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (id: number) => {
|
||||
navigate(`/business-trip/detail/${id}`)
|
||||
navigate(`/business-trip/detail/${id}`, { state: { fromTab: activeTab } })
|
||||
}
|
||||
|
||||
// 新建申请
|
||||
|
||||
Reference in New Issue
Block a user