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

解决报告模块刷新重置

Browse Source
This commit is contained in:
NEWHOME\24986
2022-09-09 19:35:58 +08:00
parent dea91e5ad1
commit 503315b8ad
4 changed files with 274 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,6 +23,7 @@
<script>
import { defaultPageSize } from '@/utils/constants'
import { storageKey } from '@/utils/constants'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
export default {
name: 'pagination',
@@ -58,6 +59,17 @@ export default {
}
},
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);
}
overwriteUrl(newUrl)
},
popperVisible: function (visible) {
if (visible == true) {
this.$nextTick(() => {
@@ -96,12 +108,29 @@ export default {
this.$emit('pageNo', val)
this.backgroundColor()
this.scrollbarToTop()
sessionStorage.setItem('report_pagination_current', JSON.stringify(val));
if(val != null) {
let newParam = {
currentPage: val
}
this.reloadUrl(newParam);
}
},
/**
* 更改页码大小
*/
size (val) {
// eslint-disable-next-line vue/no-mutating-props
this.pageObj.pageNo = 1
this.$emit('pageSize', val)
this.backgroundColor()
sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
let newParam = {
pageSize: val
}
this.reloadUrl(newParam);
},
scrollbarToTop () {
this.$nextTick(() => {
@@ -122,10 +151,10 @@ export default {
},
// 设置当前页的样式
backgroundColor () {
this.list = this.$refs.page.$el.children[2].children
for (let i = 0; i < this.list.length; i++) {
// const element = this.list[i]
}
// this.list = this.$refs.page.$el.children[2].children
// for (let i = 0; i < this.list.length; i++) {
// // const element = this.list[i]
// }
}
},
mounted () {
@@ -138,6 +167,19 @@ export default {
this.pageSize = parseInt(pageSize)
}
}
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);
}
},
watch: {
postPageSizes: {

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

@@ -6,9 +6,10 @@
:height="height"
:expand-row-keys="expandedIds"
empty-text=" "
row-key="id"
border
tooltip-effect="light"
:row-key="(row) => { return row.id }"
:reserve-selection="true"
@header-dragend="dragend"
@sort-change="tableDataSort"
@expand-change="dropExpandChange"
@@ -197,7 +198,7 @@
</el-table-column>
</el-table>
<div class="table-operation-all">
<el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
<el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
<div class="table-operation-all-span">
<span>{{ $t('overall.all') }}</span>
<div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="checkboxIds.id ? tableOperation(['delete', checkboxIds]) : ''">
@@ -214,6 +215,7 @@ import Loading from '@/components/common/Loading'
import { del, get } from '@/utils/http'
import { api } from '@/utils/api'
import { storageKey, report } from '@/utils/constants'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { ref } from 'vue'
import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
@@ -281,6 +283,7 @@ export default {
}
],
checkboxAll: false,
isIndeterminate: false,
checkboxIds: {},
batchDow: false,
builtinId: '',
@@ -314,7 +317,15 @@ export default {
monthList: report.monthList,
weekOptions: report.weekOptions,
configPeriod: '',
configCustom: ''
configCustom: '',
selectIds: [], // 单行选中的id列表
}
},
watch: {
'tableData'(newVal, oldVal) {
if(newVal) {
this.showSelectedRow();
}
}
},
computed: {
@@ -355,7 +366,41 @@ export default {
}
}
},
mounted() {
this.expandTable();
},
methods: {
/**
* 进入页面判断是否需要展开表格
* 即展开表格后刷新界面，保持展开效果
*/
expandTable() {
let expandInfo = sessionStorage.getItem('report_expand_table');
expandInfo = JSON.parse(expandInfo);
if(expandInfo !== null && expandInfo !== undefined) {
let obj = {
id: expandInfo[0]
}
this.dropExpandChange(obj, expandInfo);
}
},
/**
* 显示选中的行，即分页后依旧显示
*/
showSelectedRow() {
let selectIds = this.selectIds;
this.$nextTick(() => {
if(selectIds.length>0) {
this.tableData.forEach(item =>{
if(selectIds.includes(item.id)) {
this.$refs.dataTable.toggleRowSelection(item);
}
})
}
});
},
getJobStatus (report) {
if (report.state === 1 && report.upload === 1) {
return this.$t('overall.completed')
@@ -368,27 +413,82 @@ export default {
this.tableOperation(arr)
}
},
/**
* 单行选中
*/
selectionChange (objs) {
this.$emit('selectionChange', objs)
this.checkboxIds.id = objs.map(item => { return item.id }).join(',')
this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
this.batchDow = objs.length > 0
this.checkboxIds.id = objs.map(item => { return item.id }).join(',');
this.batchDow = objs.length > 0;
this.checkboxAll = objs.length === this.tableData.length;
this.isIndeterminate = objs.length > 0 && objs.length < this.tableData.length;
// 选中状态回显
let selectIds = [];
if(objs.length > 0) {
objs.forEach(item => {
selectIds.push(item.id);
})
this.selectIds = selectIds;
}
},
/**
* 全选按钮
*/
selectAll (objs) {
let selectIds = [];
this.isIndeterminate = false;
if (objs) {
objs.forEach(item => {
this.$refs.dataTable.toggleAllSelection(item)
this.$refs.dataTable.toggleAllSelection(item);
// this.checkboxAll = true;
selectIds.push(item.id);
})
} else {
this.$refs.dataTable.clearSelection()
}
this.selectIds = selectIds;
},
/**
* 向地址栏添加/删除参数
*/
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);
}
overwriteUrl(newUrl)
},
/**
* 表格左侧点击展开收起
*/
dropExpandChange (row, expandedRows) {
this.expandedIds = []
clearInterval(this.interval)
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) {

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

@@ -14,34 +14,70 @@
</template>
<script>
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { useRoute } from 'vue-router'
import { ref, shallowRef } from 'vue'
export default {
name: 'chartDetectionPagination',
props: {
pageObj: Object
pageObj: Object,
},
data () {
data() {
return {
newPageObj: {},
}
},
// setup () {
// const { query } = useRoute()
// const pagination = ref(query.expandPaginaTionPage || 1)
// return {
// pagination
// }
// },
computed: {
totalPage () {
totalPage() {
const remainder = this.pageObj.total % this.pageObj.pageSize
if (remainder) {
return parseInt(this.pageObj.total / this.pageObj.pageSize) + 1
} else {
return parseInt(this.pageObj.total / this.pageObj.pageSize)
}
}
},
},
methods: {
currentChange: function (val) {
/**
* 当前页改变
*/
currentChange: function(val) {
this.$emit('pageJump', val)
this.pageObj.pageNo = val
sessionStorage.setItem('report_select_expand_pagination', JSON.stringify(val))
let newParam = {
expandPaginaTionPage: val,
}
const { query } = this.$route
let newUrl = urlParamsHandler(window.location.href, query, newParam)
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')
}
},
mounted () {
},
mounted() {
this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
}
this.$nextTick(() => {
setTimeout(() => {
this.initData()
}, 100)
})
},
}
</script>

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

@@ -75,6 +75,7 @@ import builtinReportTable from '@/components/table/report/reportTestTable'
import cnDataList from '@/components/table/CnDataList'
import dataListMixin from '@/mixins/data-list'
import { api } from '@/utils/api'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import ReportBox from '@/components/rightBox/report/ReportBox'
import Loading from '@/components/common/Loading'
@@ -84,7 +85,7 @@ export default {
return {
builtinReportLeftMenu: [], // 左侧列表菜单数据
builtinColor: false,
builtinId: '',
builtinId: -1,
url: api.reportTemp,
blankObject: {
id: '',
@@ -154,7 +155,23 @@ export default {
builtinReportTable,
ReportBox
},
mounted () {
this.$nextTick(() => {
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);
}
overwriteUrl(newUrl)
},
queryGetTempData () {
this.builtinLeftLoading = true
get(api.reportCategory).then(res => {
@@ -165,6 +182,15 @@ 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);
} else {
this.builtinId = null;
this.getTableData();
}
}
this.builtinLeftLoading = false
})
@@ -180,6 +206,13 @@ export default {
if (this.listUrl) {
listUrl = this.listUrl
}
let urlTabId = this.$route.query.tabId;
// 该请求不知道为什么会走2次，此处留个记录，后续解决。为避免请求两次，所以加上判断保证请求一次
// 前面条件是第一次进来时，左侧菜单栏点击缓存为null的情况；
// 后面条件是点击菜单栏后刷新界面的情况
if((this.builtinId === null) || (this.builtinId > -1 && urlTabId !== undefined)) {
get(listUrl, this.searchLabel).then(response => {
// this.tools.loading = false
if (response.code === 200) {
@@ -192,14 +225,32 @@ export default {
config: item.config ? JSON.parse(item.config) : {}
}
})
this.pageObj.total = response.data.total
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');
}
},
edit (u) {
this.initConfig(u)
@@ -245,9 +296,6 @@ export default {
}
}
}
},
mounted () {
this.queryGetTempData()
}
}
</script>