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 { 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 } })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 格式化日期
|
// 格式化日期
|
||||||
|
|||||||
@@ -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 } })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新建申请
|
// 新建申请
|
||||||
|
|||||||
Reference in New Issue
Block a user