fix:修复report页点击tab栏,地址栏和分页刷新的问题

This commit is contained in:
刘洪洪
2022-09-15 15:12:33 +08:00
parent 67bc7be6f0
commit 79a578537e
2 changed files with 63 additions and 45 deletions

View File

@@ -12,7 +12,9 @@
:layout="layout"
:total="pageObj.total"
>
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini" :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
:popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
:popper-class="popClass" @visible-change="popperVisible">
<el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
@@ -48,8 +50,7 @@ export default {
setup () {
const { query } = useRoute()
const pageSize = ref(defaultPageSize)
console.log('初始化路由信息', query);
let currentPageNo = ref(query.pageNo || 1)
const currentPageNo = ref(query.pageNo || 1)
return {
pageSize,
@@ -80,10 +81,10 @@ export default {
* 向地址栏添加/删除参数
*/
reloadUrl (newParam, clean) {
const { query } = this.$route;
let newUrl = urlParamsHandler(window.location.href, query, newParam);
const { query } = this.$route
let newUrl = urlParamsHandler(window.location.href, query, newParam)
if (clean) {
newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
}
overwriteUrl(newUrl)
},
@@ -127,10 +128,10 @@ export default {
this.scrollbarToTop()
// this.currentPageNo = val;
let newParam = {
const newParam = {
pageNo: val
}
this.reloadUrl(newParam);
this.reloadUrl(newParam)
},
/**
* 更改页码大小
@@ -141,10 +142,10 @@ export default {
this.$emit('pageSize', val)
this.backgroundColor()
let newParam = {
const newParam = {
pageSize: val
}
this.reloadUrl(newParam);
this.reloadUrl(newParam)
},
scrollbarToTop () {
this.$nextTick(() => {
@@ -159,7 +160,10 @@ export default {
resetPageSizes: function () {
if (this.postPageSizes) {
this.pageSizes = this.postPageSizes.map((item) => {
return { label: item + this.$t('pageSize'), value: item }
return {
label: item + this.$t('pageSize'),
value: item
}
})
}
},
@@ -182,9 +186,9 @@ export default {
}
}
this.size(this.pageSize);
this.currentPageNo = parseInt(this.currentPageNo);
this.current(this.currentPageNo);
this.size(this.pageSize)
this.currentPageNo = parseInt(this.currentPageNo)
this.current(this.currentPageNo)
},
watch: {
postPageSizes: {

View File

@@ -40,6 +40,7 @@
:category-list="builtinReportLeftMenu"
:height="mainTableHeight"
:table-data="tableData"
:category-id="builtinId"
@delete="del"
@edit="edit"
@download="download"
@@ -156,7 +157,7 @@ export default {
*/
setup () {
const { query } = useRoute()
const builtinId = ref(parseInt(query.ategoryId) || '')
const builtinId = ref(parseInt(query.categoryId) || '')
const urlPageNo = ref(parseInt(query.pageNo) || 1)
return {
@@ -173,22 +174,34 @@ export default {
},
mounted () {
this.$nextTick(() => {
this.queryGetTempData();
});
this.queryGetTempData()
})
},
watch: {
builtinId (n) {
const { query } = this.$route
let newUrl = urlParamsHandler(window.location.href, query, {
ategoryId: n
categoryId: n,
pageNo: 1,
pageSize: 20
})
// 点击“全部”或者首次进入界面时,不显示左侧菜单栏参数
const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
if (n === null) {
let newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
delete newQuery.ategoryId;
newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
delete newQuery.categoryId
} else {
delete newQuery.startTime
delete newQuery.endTime
delete newQuery.expandId
delete newQuery.expandPage
delete newQuery.pageNo
delete newQuery.pageSize
}
newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
overwriteUrl(newUrl)
}
},
@@ -205,16 +218,16 @@ export default {
})
if (this.builtinId !== '') {
this.builtinTabs (this.builtinId);
this.builtinTabs(this.builtinId, 'init')
} else {
this.getTableData();
this.getTableData()
}
}
this.builtinLeftLoading = false
})
},
getTableData (params) {
this.searchLabel = null;
this.searchLabel = null
if (params) {
this.searchLabel = { ...this.searchLabel, ...params }
}
@@ -227,11 +240,11 @@ export default {
}
if (this.builtinId !== '') {
this.searchLabel.categoryId = this.builtinId;
this.searchLabel.categoryId = this.builtinId
}
// 该请求不知道为什么会走2次此处留个记录后续解决。
this.getNum = this.getNum + 1;
this.getNum = this.getNum + 1
if (this.getNum > 0) {
get(listUrl, this.searchLabel).then(response => {
// this.tools.loading = false
@@ -240,14 +253,14 @@ export default {
response.data.list[i].status = response.data.list[i].status + ''
}
this.$nextTick(() => {
this.tableData = [];
this.tableData = []
this.tableData = response.data.list.map(item => {
return {
...item,
config: item.config ? JSON.parse(item.config) : {}
}
})
this.pageObj.total = response.data.total;
this.pageObj.total = response.data.total
})
// TODO 回到顶部
}
@@ -257,9 +270,13 @@ export default {
/**
* 点击左侧tab页
*/
builtinTabs (id) {
builtinTabs (id, flag) {
this.builtinId = id
this.getTableData({ categoryId: id });
if (flag === undefined) {
this.pageObj.pageNo = 1
this.pageObj.pageSize = 20
}
this.getTableData({ categoryId: id })
},
edit (u) {
this.initConfig(u)
@@ -305,9 +322,6 @@ export default {
}
}
}
},
beforeDestroy(to, from, next) {
this.getNum = null;
}
}
</script>