1.开发遇到了新的需求：再进入到视频播放界面，需要支持可以点击上一条下一条按钮，实现数据切换的功能
2.功能开发的理解
需要考虑到以上的需求，
1.由于视频的入口不一致，要根据入口的不同，实现不同的上一条下一条
2.当数据发现跨页跳转的时候，需要调用和请求不同的接口
3.当数据发生跨页的时候，返回列表的时候，需要回到跨页后的列表
3.开发思路
首先，开发之前思路一定很重要，要先理清楚思路，再进行开发。（上一条下一条统称为跨条）
1，如何进行跨条切换，并且在筛选过后，要按照筛选的条件来进行跨条：在每次调用数据的时候，将里面的请求参数，列表的数据，全部储存到sessionStorage中，免得进入详情页后，刷新页面跨条失败的情况，然后在详情页通过findIndex参数，找到他在哪里
2.判断是否发生跨页，跨页后就发送相关请求，参数从sessionStorage里面获取。
4.开始开发
1.只有在用户点击的时候，再对数据进行存储，因为这里涉及到返回的时候，要取sessionStorage内的值。
点击的时候调用接口请求参数，并存储，传递false表示要存储 initTable(false)
const initTable = (isClear = true) => {
if (sessionStorage.getItem('nextOrPrev')) {
tableData.value.current = JSON.parse(sessionStorage.getItem('nextOrPrev'))?.filterList.currentPage
}
Api.send(ApiConfig.EVIDENCELIST, {
currentPage: tableData.value.current,
pageSize: tableData.value.pageSize,
sortName: sort.sortName,
sortOrder: sort.sortOrder,
...props.searchForm,
iconTypes:iconTypes
}).then((res) => {
if (res.data.status == 0 && res.data.msg == "success") {
if (!isClear) {
const filterList = {
currentPage: tableData.value.current,
pageSize: tableData.value.pageSize,
sortName: sort.sortName,
sortOrder: sort.sortOrder,
...props.searchForm,
iconTypes: iconTypes
}
const total = {
total:res.data.data.totalCount
}
const type = {
type:'evidence'
}
sesionPrevOrNext(res.data.data.list,filterList,total,type)
}
}
}).finally(() =>{
route.name === 'evidence' && isClear && sessionStorage.removeItem('nextOrPrev')
});
};
sesionPrevOrNext是封装的函数
// 证据上一页下一页方法封装
export const sesionPrevOrNext = (lists,filterLists,totals,types) => {
const eviIdList = lists.map(item => (
{
id:item.evidenceId || item.id,
accessClass:item.accessClass,
viewStatus:item.viewStatus
}
))
const filterList = filterLists
const total = totals
const type = types
sessionStorage.setItem('nextOrPrev',JSON.stringify({
eviIdList,
filterList,
total,
type
}))
}
进入详情后，切换，这是按钮
<div>
<a-button :disabled="forbidPrev" @click="goPrevOrNext(false)">
<icon-left />
上一条
</a-button>
<a-button :disabled="forbidNext" @click="goPrevOrNext(true)">
下一条
<icon-right />
</a-button>
</div>
4.判断
// 去上一个证据或者去下一个证据
const forbidPrev = ref(false)
const forbidNext = ref(false)
// 获取证据数据并禁用相关按钮 getEviInfoList接口的调用，等详情页数据获取成功后再调用，否则可能会去不到实时的值，因为有延迟
const getEviInfoList = () => {
const {
eviIdList,filterList,total } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
const index = eviIdList.findIndex(item => item.id === route.query.id)
// 当证据所处为第一页的第一个证据时，应该禁用上一页
if (filterList.currentPage == 1 && index === 0) {
forbidPrev.value = true
}else{
forbidPrev.value = false
}
// 计算他是否是最后一页的最后一个证据，禁用下一页
const curEviCount = index + 1 + filterList.pageSize * (filterList.currentPage - 1)
// 计算是否为最后一页的最后一个属性证据
if (curEviCount===total.total) {
forbidNext.value = true
}else{
forbidNext.value = false
}
// 请求数据 满足以下条件后，才对跨页数据进行数据请求
let requestPrevData = index === 0 && filterList.currentPage !== 1
let requestNextData = index + 1 === filterList.pageSize && curEviCount !== total.total
return {
eviIdList,filterList,requestPrevData,requestNextData,index }
}
5.跳转
const goPrevOrNext = async (flag: boolean) => {
const {
eviIdList,filterList,requestPrevData,requestNextData,index } = getEviInfoList()
if (flag) {
// 当下一个证据有跨页，请求新的数据
if (requestNextData) {
// 下一页取他的第一个证据
filterList.currentPage = filterList.currentPage + 1
//等待数据请求完成之后，再执行以下代码逻辑
const res = await initTable(filterList)
if (res === 0) {
// 及时更新eviIdList，filterList数据 否则会取到未更新的sessionStorage数据
const {
eviIdList } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
//跨页后的第一个
gotoDetail(eviIdList[0])
}
}else{
gotoDetail(eviIdList[index + 1])
}
} else {
// 当上一个证据有跨页，请求新的数据
if (requestPrevData) {
// 前一页应倒过来
let prevNum = null
filterList.currentPage = filterList.currentPage - 1
const res = await initTable(filterList)
if (res === 0) {
const {
eviIdList, filterList } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
prevNum = filterList.pageSize - 1
gotoDetail(eviIdList[prevNum])
}
}else{
gotoDetail(eviIdList[index - 1])
}
}
console.log(index, flag, route.query.id, JSON.parse(sessionStorage.getItem('nextOrPrev')))
}
5.1跳转不同，这里可能涉及到不同的入口，他的跳转方式不同，所有通过这个来控制
const gotoDetail = (record) => {
const {
type } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
if(type.type === 'evidence' || type.type === 'folderEvi'){
myAndAlleviGo(record)
}else if(type.type === 'myShare' || type.type === 'othersShare'){
shareMeOrOtherGo(record)
}else if(type.type === 'deleteEvi'){
deleteEviGo(record)
}
};
const myAndAlleviGo = (record) => {
if (
(record.accessClass == 1 && PERMMAP["dem:eems:evidence:viewEvidence:unrestricted"]) ||
(record.accessClass == 2 && PERMMAP["dem:eems:evidence:viewEvidence:restricted"]) ||
(record.accessClass == 3 && PERMMAP["dem:eems:evidence:viewEvidence:confidential"])
) {
if (record.viewStatus) {
router.replace({
name: "evidenceDetail",
params: record.id,
query: {
id: record.id,
accessClass: record.accessClass
}
});
} else if (!record.viewStatus) {
_this.$message.error($t('evidence.mapIndex.requestAccess'));
}
} else {
if (!record.viewStatus) {
_this.$message.error($t('evidence.mapIndex.requestAccess'));
} else {
_this.$message.error($t('evidence.mapIndex.requestAccess'));
}
}
}
const shareMeOrOtherGo = (record) => {
router.replace({
name: "evidenceDetail",
params: record.id,
query: {
pageFlag:'share',
id: record.id
}
});
};
const deleteEviGo = (record) => {
router.replace({
name: "evidenceDetail",
params: record.id,
query: {
id: record.id,
accessClass: record.accessClass,
isDelete: 1
}
})
}
6.跨页获取数据
// 跨页获取数据
const initTable = (filterLists) => {
const {
type:Types } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
// 将异步操作封装成 Promise 对象
return new Promise((resolve, reject) => {
//书写映射，避免重复的if判断
const requestApi = {
"evidence":ApiConfig.EVIDENCELIST,
'myShare':ApiConfig.GETSHAREEVIDENCEFROMME,
'othersShare':ApiConfig.GETSHAREEVIDENCETOME,
'deleteEvi':ApiConfig.EVIDENCELIST,
'folderEvi':ApiConfig.QUERYFOLDEREVI
}
Api.send(requestApi[Types.type], filterLists).then((res) => {
if (res.data.status == 0) {
const filterList = filterLists
const total = {
total: res.data.data.totalCount
}
const type = {
type:Types.type
}
sesionPrevOrNext(res.data.data.list,filterList,total,type)
// 异步操作完成后调用 resolve 函数
resolve(res.data.status)
} else {
// 如果异步操作出错，则调用 reject 函数
reject()
}
})
})
}
