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

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

@@ -24,6 +24,9 @@
import { defaultPageSize } from '@/utils/constants' import { defaultPageSize } from '@/utils/constants'
import { storageKey } from '@/utils/constants' import { storageKey } from '@/utils/constants'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools' import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { parseInt } from 'lodash'
export default { export default {
name: 'pagination', name: 'pagination',
@@ -39,9 +42,23 @@ export default {
default: 'total, prev, pager, next, slot' 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 () { data () {
return { return {
pageSize: defaultPageSize, // pageSize: defaultPageSize,
pageSizes: [ pageSizes: [
{ {
label: '20' + this.$t('pageSize'), label: '20' + this.$t('pageSize'),
@@ -108,25 +125,22 @@ export default {
this.$emit('pageNo', val) this.$emit('pageNo', val)
this.backgroundColor() this.backgroundColor()
this.scrollbarToTop() this.scrollbarToTop()
// this.currentPageNo = val;
sessionStorage.setItem('report_pagination_current', JSON.stringify(val)); let newParam = {
if(val != null) { pageNo: val
let newParam = {
currentPage: val
}
this.reloadUrl(newParam);
} }
this.reloadUrl(newParam);
}, },
/** /**
* 更改页码大小 * 更改页码大小
*/ */
size (val) { size (val) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
this.pageObj.pageNo = 1 // this.pageObj.pageNo = 1
this.$emit('pageSize', val) this.$emit('pageSize', val)
this.backgroundColor() this.backgroundColor()
sessionStorage.setItem('report_pagination_size', JSON.stringify(val));
let newParam = { let newParam = {
pageSize: val pageSize: val
} }
@@ -167,19 +181,10 @@ export default {
this.pageSize = parseInt(pageSize) this.pageSize = parseInt(pageSize)
} }
} }
let pageSize = sessionStorage.getItem('report_pagination_size'); // 缓存的每页个数 this.size(this.pageSize);
let currentPage = sessionStorage.getItem('report_pagination_current'); // 当前页码 this.currentPageNo = parseInt(this.currentPageNo);
this.current(this.currentPageNo);
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: { watch: {
postPageSizes: { postPageSizes: {

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

@@ -1,5 +1,6 @@
<template> <template>
<el-table <div>
<el-table
id="reportTable" id="reportTable"
ref="dataTable" ref="dataTable"
:data="tableData" :data="tableData"
@@ -14,199 +15,200 @@
@sort-change="tableDataSort" @sort-change="tableDataSort"
@expand-change="dropExpandChange" @expand-change="dropExpandChange"
@selection-change="selectionChange" @selection-change="selectionChange"
> >
<el-table-column type="expand" width="30"> <el-table-column type="expand" width="30">
<template #default="props"> <template #default="props">
<div class="down"> <div class="down">
<loading :loading="loadingDown"></loading> <loading :loading="loadingDown"></loading>
<div class="block drop-down-time"> <div class="block drop-down-time">
<el-date-picker <el-date-picker
v-model="timeRange" v-model="timeRange"
size="small" size="small"
:format="format" :format="format"
:clearable="false" :clearable="false"
type="datetimerange" type="datetimerange"
range-separator="To" range-separator="To"
:start-placeholder="$t('detections.startTime')" :start-placeholder="$t('detections.startTime')"
:end-placeholder="$t('detections.endTime')" :end-placeholder="$t('detections.endTime')"
@change="datePickerChange(props.row)" @change="datePickerChange(props.row)"
/> />
</div> </div>
<div class="expand"> <div class="expand">
<chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data> <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
<div class="expand-cell" v-for="(item, index) in downDataList" :key="index"> <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
<div class="expand-right"> <div class="expand-right">
<div class="demo-progress"> <div class="demo-progress">
<el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')"> <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
<template #default="{ percentage }"> <template #default="{ percentage }">
<span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span> <span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
<span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span> <span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
</template> </template>
</el-progress> </el-progress>
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{dateFormatByAppearance(item.ctime)}}</div>
</div>
<div class="expand-icon">
<div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['download', item])">
<loading :loading="loadingTableId === item.id" size="small"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
<use xlink:href="#cn-icon-download2"></use>
</svg>
</div> </div>
<div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['preview', item])"> </div>
<loading :loading="loadingPreviewId === item.id" size="small"></loading> <div class="expand-left">
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}"> <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
<use xlink:href="#cn-icon-preview"></use> <div class="expand-time">
</svg> <div>{{ $t('report.creationTime') }}</div>
<div>{{dateFormatByAppearance(item.ctime)}}</div>
</div> </div>
<div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)"> <div class="expand-icon">
<svg class="icon" aria-hidden="true"> <div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['download', item])">
<use xlink:href="#cn-icon-shanchu"></use> <loading :loading="loadingTableId === item.id" size="small"></loading>
</svg> <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
<use xlink:href="#cn-icon-download2"></use>
</svg>
</div>
<div class="table-operation-item--no-border" :class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}" @click="reportOperation(['preview', item])">
<loading :loading="loadingPreviewId === item.id" size="small"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-preview"></use>
</svg>
</div>
<div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#cn-icon-shanchu"></use>
</svg>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="cn-detection__footer">
<chart-detection-pagination
ref="pagination"
:page-obj="pageObj"
@pageJump="pageJump"
></chart-detection-pagination>
</div>
</div> </div>
<div class="cn-detection__footer"> </template>
<chart-detection-pagination </el-table-column>
ref="pagination" <el-table-column
:page-obj="pageObj" :resizable="false"
@pageJump="pageJump" align="center"
></chart-detection-pagination> type="selection"
</div> width="30">
</div> </el-table-column>
</template> <el-table-column
</el-table-column> v-for="(item, index) in customTableTitles"
<el-table-column :key="`col-${index}`"
:resizable="false" :fixed="item.fixed"
align="center" :label="item.label"
type="selection" :min-width="`${item.minWidth}`"
width="30"> :prop="item.prop"
</el-table-column> :resizable="true"
<el-table-column :show-overflow-tooltip="item.prop === 'timePlan'"
v-for="(item, index) in customTableTitles" :sort-orders="['ascending', 'descending']"
:key="`col-${index}`" :sortable="item.sortable"
:fixed="item.fixed" :width="`${item.width}`"
:label="item.label" >
:min-width="`${item.minWidth}`" <template #header>
:prop="item.prop" <span class="data-column__span">{{item.label}}</span>
:resizable="true" <div class="col-resize-area"></div>
:show-overflow-tooltip="item.prop === 'timePlan'" </template>
:sort-orders="['ascending', 'descending']" <template #default="scope" :column="item">
:sortable="item.sortable" <span v-if="item.prop === 'timeLimit'">
:width="`${item.width}`" {{handleTimeRange(scope.row)}}
>
<template #header>
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template #default="scope" :column="item">
<span v-if="item.prop === 'timeLimit'">
{{handleTimeRange(scope.row)}}
</span>
<span v-else-if="item.prop === 'categoryId'">
<span v-for="(item, i) in categoryList" :key="i">
<span v-if="scope.row.categoryId === item.id">{{item.name}}</span>
</span> </span>
</span> <span v-else-if="item.prop === 'categoryId'">
<span v-else-if="item.prop === 'timePlan'"> <span v-for="(item, i) in categoryList" :key="i">
<template v-if="scope.row.config && scope.row.config.isScheduler === 0"> <span v-if="scope.row.categoryId === item.id">{{item.name}}</span>
{{$t('report.always')}} </span>
</template> </span>
<template v-else-if="scope.row.config && scope.row.config.isScheduler === 1"> <span v-else-if="item.prop === 'timePlan'">
<el-popover <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
placement="right-start" {{$t('report.always')}}
:width="270" </template>
trigger="hover" <template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
class="my-table" <el-popover
@show="handleConfig(scope.row)" placement="right-start"
> :width="270"
<template #reference> trigger="hover"
<span> class="my-table"
<template v-if="scope.row.config && scope.row.config.schedulerConfig"> @show="handleConfig(scope.row)"
<template v-if="scope.row.config.schedulerConfig.type === 'day'"> >
{{$t('report.daily')}} <template #reference>
<span>
<template v-if="scope.row.config && scope.row.config.schedulerConfig">
<template v-if="scope.row.config.schedulerConfig.type === 'day'">
{{$t('report.daily')}}
</template>
<template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
{{$t('report.weekly')}}
</template>
<template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
{{$t('report.monthly')}}
</template>
<template v-else-if="scope.row.config.schedulerConfig.type === ''">
{{$t('report.oneTime')}}
</template>
<template v-else>
-
</template>
</template> </template>
<template v-else-if="scope.row.config.schedulerConfig.type === 'week'"> </span>
{{$t('report.weekly')}} </template>
</template> <el-row class="margin-l-10 margin-t-20">
<template v-else-if="scope.row.config.schedulerConfig.type === 'month'"> <el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col>
{{$t('report.monthly')}} <el-col :span="16">{{configPeriod}}</el-col>
</template> </el-row>
<template v-else-if="scope.row.config.schedulerConfig.type === ''"> <el-row class="margin-l-10">
{{$t('report.oneTime')}} <el-col :span="8" class="tooltip-column-name">{{$t("report.custom")}}</el-col>
</template> <el-col :span="16">{{configCustom}}</el-col>
<template v-else> </el-row>
- <el-row class="margin-l-10">
</template> <el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col>
</template> <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col>
</span> </el-row>
</template> <el-row class="margin-l-10">
<el-row class="margin-l-10 margin-t-20"> <el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col>
<el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col> <el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col>
<el-col :span="16">{{configPeriod}}</el-col> </el-row>
</el-row> </el-popover>
<el-row class="margin-l-10"> </template>
<el-col :span="8" class="tooltip-column-name">{{$t("report.custom")}}</el-col> <template v-else>
<el-col :span="16">{{configCustom}}</el-col> -
</el-row> </template>
<el-row class="margin-l-10"> </span>
<el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col> <span v-else-if="item.prop === 'userName'">
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col> {{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
</el-row> </span>
<el-row class="margin-l-10"> <span v-else-if="item.prop === 'lastTime'">
<el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col> {{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col> </span>
</el-row> <span v-else-if="item.prop === 'total'">
</el-popover> {{scope.row[item.prop] || 0}}
</template> </span>
<template v-else> <span v-else>{{scope.row[item.prop] || '-'}}</span>
- </template>
</template> </el-table-column>
</span> <el-table-column
<span v-else-if="item.prop === 'userName'"> :resizable="false"
{{(scope.row.sysUser && scope.row.sysUser.name) || '-'}} :width="operationWidth"
</span> fixed="right">
<span v-else-if="item.prop === 'lastTime'"> <template #header>
{{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}} <div class="table-operation-title">{{$t('overall.option')}}</div>
</span> </template>
<span v-else-if="item.prop === 'total'"> <template #default="scope">
{{scope.row[item.prop] || 0}} <div class="table-operation-items">
</span> <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
<span v-else>{{scope.row[item.prop] || '-'}}</span> <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
</template> </div>
</el-table-column> </template>
<el-table-column </el-table-column>
:resizable="false" </el-table>
:width="operationWidth" <div class="table-operation-all">
fixed="right"> <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
<template #header> <div class="table-operation-all-span">
<div class="table-operation-title">{{$t('overall.option')}}</div> <span>{{ $t('overall.all') }}</span>
</template> <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="checkboxIds.id ? tableOperation(['delete', checkboxIds]) : ''">
<template #default="scope"> <loading :loading="loading"></loading>
<div class="table-operation-items"> <span>{{$t('report.batchDeletion')}}</span>
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
<button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
</div> </div>
</template>
</el-table-column>
</el-table>
<div class="table-operation-all">
<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]) : ''">
<loading :loading="loading"></loading>
<span>{{$t('report.batchDeletion')}}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@@ -220,6 +222,8 @@ import { ref } from 'vue'
import { dateFormatToUTC, getNowTime } from '@/utils/date-util' import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination' import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
import ChartNoData from '@/views/charts/charts/ChartNoData' import ChartNoData from '@/views/charts/charts/ChartNoData'
import { useRoute } from 'vue-router'
export default { export default {
name: 'builtinReportTable', name: 'builtinReportTable',
mixins: [table], mixins: [table],
@@ -299,7 +303,7 @@ export default {
total: 0, total: 0,
resetPageNo: true resetPageNo: true
}, },
expandedIds: [], // expandedIds: [],
interval: null, interval: null,
typeMappings: [ typeMappings: [
{ key: 'day', value: this.$t('report.daily') }, { key: 'day', value: this.$t('report.daily') },
@@ -321,11 +325,44 @@ export default {
selectIds: [], // 单行选中的id列表 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: { watch: {
'tableData'(newVal, oldVal) { 'tableData'(newVal, oldVal) {
if(newVal) { if(newVal) {
this.showSelectedRow(); 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: { computed: {
@@ -375,10 +412,9 @@ export default {
* 即展开表格后刷新界面，保持展开效果 * 即展开表格后刷新界面，保持展开效果
*/ */
expandTable() { expandTable() {
let expandInfo = sessionStorage.getItem('report_expand_table'); let expandInfo = this.expandedIds;
expandInfo = JSON.parse(expandInfo);
if(expandInfo !== null && expandInfo !== undefined) { if(expandInfo !== undefined && expandInfo.length>0) {
let obj = { let obj = {
id: expandInfo[0] id: expandInfo[0]
} }
@@ -473,22 +509,6 @@ export default {
if (expandedRows.length > 0 && row) { if (expandedRows.length > 0 && row) {
this.expandedIds.push(row.id) this.expandedIds.push(row.id)
this.datePickerChange(row) 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) { datePickerChange (row, show) {
@@ -644,13 +664,6 @@ export default {
}, },
beforeUnmount () { beforeUnmount () {
clearInterval(this.interval) clearInterval(this.interval)
},
setup () {
const { startTime, endTime } = getNowTime(60 * 24 * 30)
const timeRange = ref([startTime, endTime])
return {
timeRange
}
} }
} }
</script> </script>

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

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

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

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