gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-701 fix：修复report页刷新不保持状态的bug

Browse Source
This commit is contained in:
NEWHOME\24986
2022-09-13 16:54:41 +08:00
parent c6821a6e5b
commit bda7886d27
4 changed files with 350 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/common/Pagination.vue
View File

@@ -24,6 +24,9 @@
import { defaultPageSize } from '@/utils/constants'
import { storageKey } from '@/utils/constants'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { parseInt } from 'lodash'
export default {
name: 'pagination',
@@ -39,9 +42,23 @@ export default {
default: 'total, prev, pager, next, slot'
}
},
/**
* 添加vue3的setup，目的是添加/获取地址栏的参数
*/
setup () {
const { query } = useRoute()
const pageSize = ref(defaultPageSize)
console.log('初始化路由信息', query);
let currentPageNo = ref(query.pageNo || 1)
return {
pageSize,
currentPageNo
}
},
data () {
return {
pageSize: defaultPageSize,
// pageSize: defaultPageSize,
pageSizes: [
{
label: '20' + this.$t('pageSize'),
@@ -108,25 +125,22 @@ export default {
this.$emit('pageNo', val)
this.backgroundColor()
this.scrollbarToTop()
// this.currentPageNo = val;
sessionStorage.setItem('report_pagination_current', JSON.stringify(val));
if(val != null) {
let newParam = {
currentPage: val
pageNo: val
}
this.reloadUrl(newParam);
}
},
/**
* 更改页码大小
*/
size (val) {
// eslint-disable-next-line vue/no-mutating-props
this.pageObj.pageNo = 1
// this.pageObj.pageNo = 1
this.$emit('pageSize', val)
this.backgroundColor()
sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
let newParam = {
pageSize: val
}
@@ -168,18 +182,9 @@ export default {
}
}
let pageSize = sessionStorage.getItem('report_pagination_size'); // 缓存的每页个数
let currentPage = sessionStorage.getItem('report_pagination_current'); // 当前页码
if(pageSize !== undefined && pageSize !== null) {
pageSize = JSON.parse(pageSize);
this.size(pageSize);
}
if(currentPage !== undefined && currentPage !== null) {
currentPage = JSON.parse(currentPage);
this.current(currentPage);
}
this.size(this.pageSize);
this.currentPageNo = parseInt(this.currentPageNo);
this.current(this.currentPageNo);
},
watch: {
postPageSizes: {

67
src/components/table/report/reportTestTable.vue
View File

@@ -1,4 +1,5 @@
<template>
<div>
<el-table
id="reportTable"
ref="dataTable"
@@ -207,6 +208,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@@ -220,6 +222,8 @@ import { ref } from 'vue'
import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { useRoute } from 'vue-router'
export default {
name: 'builtinReportTable',
mixins: [table],
@@ -299,7 +303,7 @@ export default {
total: 0,
resetPageNo: true
},
expandedIds: [],
// expandedIds: [],
interval: null,
typeMappings: [
{ key: 'day', value: this.$t('report.daily') },
@@ -321,11 +325,44 @@ export default {
selectIds: [], // 单行选中的id列表
}
},
/**
* 添加vue3的setup，目的是添加/获取地址栏的参数
*/
setup () {
const { startTime, endTime } = getNowTime(60 * 24 * 30)
const timeRange = ref([startTime, endTime])
const { query } = useRoute()
let expandedId = [];
if(query.expandId) {
expandedId.push(parseInt(query.expandId))
}
const expandedIds = ref(expandedId || [])
return {
timeRange,
expandedIds
}
},
watch: {
'tableData'(newVal, oldVal) {
if(newVal) {
this.showSelectedRow();
}
},
expandedIds(newVal, oldVal) {
if(newVal != undefined && newVal.length>0) {
let newParam = {
expandId: newVal[0]
}
this.reloadUrl(newParam);
} else {
// 删除地址栏参数，然后删除缓存
let newQuery = this.$route.query // 深拷贝路由数据
delete newQuery.expandId;
delete newQuery.expandPaginaTionPage;
this.reloadUrl(newQuery, 'cleanOldParams');
}
}
},
computed: {
@@ -375,10 +412,9 @@ export default {
* 即展开表格后刷新界面，保持展开效果
*/
expandTable() {
let expandInfo = sessionStorage.getItem('report_expand_table');
expandInfo = JSON.parse(expandInfo);
let expandInfo = this.expandedIds;
if(expandInfo !== null && expandInfo !== undefined) {
if(expandInfo !== undefined && expandInfo.length>0) {
let obj = {
id: expandInfo[0]
}
@@ -473,22 +509,6 @@ export default {
if (expandedRows.length > 0 && row) {
this.expandedIds.push(row.id)
this.datePickerChange(row)
// 存入缓存，随后向地址栏添加参数
sessionStorage.setItem('report_expand_table', JSON.stringify(this.expandedIds));
let newParam = {
expandId: row.id
}
this.reloadUrl(newParam);
} else {
// 删除地址栏参数，然后删除缓存
let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
delete newQuery.expandId;
delete newQuery.expandPaginaTionPage;
this.reloadUrl(newQuery, 'cleanOldParams');
sessionStorage.setItem('report_expand_table', null);
sessionStorage.setItem('report_select_expand_pagination', null);
}
},
datePickerChange (row, show) {
@@ -644,13 +664,6 @@ export default {
},
beforeUnmount () {
clearInterval(this.interval)
},
setup () {
const { startTime, endTime } = getNowTime(60 * 24 * 30)
const timeRange = ref([startTime, endTime])
return {
timeRange
}
}
}
</script>

51
src/views/charts/charts/chartDetectionPagination.vue
View File

@@ -1,4 +1,6 @@
<template>
<div>
<loading :loading="loading"></loading>
<el-pagination
small
ref="pagination"
@@ -11,29 +13,37 @@
>
<span>/&nbsp;{{totalPage}}</span>
</el-pagination>
</div>
</template>
<script>
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { useRoute } from 'vue-router'
import { ref, shallowRef } from 'vue'
import { parseInt } from 'lodash'
import Loading from '@/components/common/Loading'
export default {
name: 'chartDetectionPagination',
props: {
pageObj: Object,
},
components: {
Loading
},
data() {
return {
newPageObj: {},
initNum: -1,
loading: false,
timer: null
}
},
setup () {
const { query } = useRoute()
const pageNo = ref(query.expandPaginaTionPage || 1)
return {
pageNo
}
},
// setup () {
// const { query } = useRoute()
// const pagination = ref(query.expandPaginaTionPage || 1)
// return {
// pagination
// }
// },
computed: {
totalPage() {
const remainder = this.pageObj.total % this.pageObj.pageSize
@@ -49,10 +59,8 @@ export default {
* 当前页改变
*/
currentChange: function(val) {
this.$emit('pageJump', val)
this.pageObj.pageNo = val
sessionStorage.setItem('report_select_expand_pagination', JSON.stringify(val))
this.$emit('pageJump', val)
let newParam = {
expandPaginaTionPage: val,
@@ -62,22 +70,25 @@ export default {
overwriteUrl(newUrl)
},
initData() {
let pageNo = sessionStorage.getItem('report_select_expand_pagination');
if (pageNo != null) {
pageNo = JSON.parse(pageNo)
this.pageObj.pageNo = pageNo
this.currentChange(pageNo, 'init')
}
let pageNo = this.pageNo;
this.timer = setTimeout(() => {
this.currentChange(parseInt(pageNo));
}, 500);
},
},
mounted() {
this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
this.$nextTick(() => {
setTimeout(() => {
this.initNum = this.initNum+1;
if(this.initNum === 0) {
this.$nextTick(()=>{
this.initData()
}, 100)
})
}
},
beforeDestroy(to, from, next) {
clearTimeout(this.timer);
}
}
</script>

86
src/views/report/reportTest.vue
View File

@@ -78,6 +78,8 @@ import { api } from '@/utils/api'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import ReportBox from '@/components/rightBox/report/ReportBox'
import Loading from '@/components/common/Loading'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
export default {
name: 'Report',
@@ -85,7 +87,7 @@ export default {
return {
builtinReportLeftMenu: [], // 左侧列表菜单数据
builtinColor: false,
builtinId: -1,
// builtinId: '',
url: api.reportTemp,
blankObject: {
id: '',
@@ -145,7 +147,21 @@ export default {
'report.december'
],
tableId: 'builtinReportTable',
builtinLeftLoading: false
builtinLeftLoading: false,
getNum: -1
}
},
/**
* 添加vue3的setup，目的是添加/获取地址栏的参数
*/
setup () {
const { query } = useRoute()
const builtinId = ref(parseInt(query.ategoryId) || '')
const urlPageNo = ref(parseInt(query.pageNo) || 1)
return {
builtinId,
urlPageNo
}
},
mixins: [dataListMixin],
@@ -160,18 +176,23 @@ export default {
this.queryGetTempData();
});
},
methods: {
/**
* 向地址栏添加/删除参数
*/
reloadUrl (newParam, clean) {
const { query } = this.$route;
let newUrl = urlParamsHandler(window.location.href, query, newParam);
if(clean) {
newUrl = urlParamsHandler(window.location.href, query, newParam, clean);
watch: {
builtinId (n) {
const { query } = this.$route
let newUrl = urlParamsHandler(window.location.href, query, {
ategoryId: n
})
// 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
if(n === null) {
let newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
delete newQuery.ategoryId;
newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
}
overwriteUrl(newUrl)
}
},
methods: {
queryGetTempData () {
this.builtinLeftLoading = true
get(api.reportCategory).then(res => {
@@ -182,13 +203,10 @@ export default {
config: c.config ? JSON.parse(c.config) : {}
}
})
let tabId = sessionStorage.getItem('report_select_tab');
if(tabId != null) {
tabId = JSON.parse(tabId);
this.builtinId = tabId;
this.builtinTabs(this.builtinId);
if(this.builtinId !== '') {
this.builtinTabs (this.builtinId);
} else {
this.builtinId = null;
this.getTableData();
}
}
@@ -196,6 +214,7 @@ export default {
})
},
getTableData (params) {
this.searchLabel = null;
if (params) {
this.searchLabel = { ...this.searchLabel, ...params }
}
@@ -207,18 +226,21 @@ export default {
listUrl = this.listUrl
}
let urlTabId = this.$route.query.tabId;
if(this.builtinId !== '') {
this.searchLabel.categoryId = this.builtinId;
}
// 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
// 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
// 后面条件是点击菜单栏后刷新界面的情况
if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
// 该请求不知道为什么会走2次，此处留个记录，后续解决。
this.getNum = this.getNum + 1;
if(this.getNum >0) {
get(listUrl, this.searchLabel).then(response => {
// this.tools.loading = false
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
this.$nextTick(()=>{
this.tableData = [];
this.tableData = response.data.list.map(item => {
return {
...item,
@@ -226,31 +248,18 @@ export default {
}
})
this.pageObj.total = response.data.total;
})
// TODO 回到顶部
}
})
}
},
/**
* 点击左侧tab页
*/
builtinTabs (id) {
this.getTableData({ categoryId: id })
this.builtinId = id
sessionStorage.setItem('report_select_tab', JSON.stringify(id));
if(id != null) {
let newParam = {
tabId: id
}
this.reloadUrl(newParam);
} else {
let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝路由数据
delete newQuery.tabId;
this.reloadUrl(newQuery, 'cleanOldParams');
}
this.getTableData({ categoryId: id });
},
edit (u) {
this.initConfig(u)
@@ -296,6 +305,9 @@ export default {
}
}
}
},
beforeDestroy(to, from, next) {
this.getNum = null;
}
}
</script>