CN-701 fix：修复report页刷新不保持状态的bug
This commit is contained in:
NEWHOME\24986
@@ -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
|
||||
}
|
||||
this.reloadUrl(newParam);
|
||||
let newParam = {
|
||||
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
|
||||
}
|
||||
@@ -167,19 +181,10 @@ 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);
|
||||
}
|
||||
|
||||
this.size(this.pageSize);
|
||||
this.currentPageNo = parseInt(this.currentPageNo);
|
||||
this.current(this.currentPageNo);
|
||||
},
|
||||
watch: {
|
||||
postPageSizes: {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<el-table
|
||||
<div>
|
||||
<el-table
|
||||
id="reportTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
@@ -14,199 +15,200 @@
|
||||
@sort-change="tableDataSort"
|
||||
@expand-change="dropExpandChange"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="props">
|
||||
<div class="down">
|
||||
<loading :loading="loadingDown"></loading>
|
||||
<div class="block drop-down-time">
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
size="small"
|
||||
:format="format"
|
||||
:clearable="false"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
:start-placeholder="$t('detections.startTime')"
|
||||
:end-placeholder="$t('detections.endTime')"
|
||||
@change="datePickerChange(props.row)"
|
||||
/>
|
||||
</div>
|
||||
<div class="expand">
|
||||
<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-right">
|
||||
<div class="demo-progress">
|
||||
<el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
|
||||
<template #default="{ percentage }">
|
||||
<span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
|
||||
<span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
|
||||
</template>
|
||||
</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>
|
||||
>
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="props">
|
||||
<div class="down">
|
||||
<loading :loading="loadingDown"></loading>
|
||||
<div class="block drop-down-time">
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
size="small"
|
||||
:format="format"
|
||||
:clearable="false"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
:start-placeholder="$t('detections.startTime')"
|
||||
:end-placeholder="$t('detections.endTime')"
|
||||
@change="datePickerChange(props.row)"
|
||||
/>
|
||||
</div>
|
||||
<div class="expand">
|
||||
<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-right">
|
||||
<div class="demo-progress">
|
||||
<el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)" :color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
|
||||
<template #default="{ percentage }">
|
||||
<span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
|
||||
<span style="font-size: 0.875rem;color: #C14843" v-else>{{percentage}}</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</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="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="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#cn-icon-shanchu"></use>
|
||||
</svg>
|
||||
<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 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 class="cn-detection__footer">
|
||||
<chart-detection-pagination
|
||||
ref="pagination"
|
||||
:page-obj="pageObj"
|
||||
@pageJump="pageJump"
|
||||
></chart-detection-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cn-detection__footer">
|
||||
<chart-detection-pagination
|
||||
ref="pagination"
|
||||
:page-obj="pageObj"
|
||||
@pageJump="pageJump"
|
||||
></chart-detection-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="30">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in customTableTitles"
|
||||
:key="`col-${index}`"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
:min-width="`${item.minWidth}`"
|
||||
:prop="item.prop"
|
||||
:resizable="true"
|
||||
:show-overflow-tooltip="item.prop === 'timePlan'"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="item.sortable"
|
||||
:width="`${item.width}`"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="30">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in customTableTitles"
|
||||
:key="`col-${index}`"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
:min-width="`${item.minWidth}`"
|
||||
:prop="item.prop"
|
||||
:resizable="true"
|
||||
:show-overflow-tooltip="item.prop === 'timePlan'"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="item.sortable"
|
||||
:width="`${item.width}`"
|
||||
>
|
||||
<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>
|
||||
<span v-else-if="item.prop === 'timePlan'">
|
||||
<template v-if="scope.row.config && scope.row.config.isScheduler === 0">
|
||||
{{$t('report.always')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
:width="270"
|
||||
trigger="hover"
|
||||
class="my-table"
|
||||
@show="handleConfig(scope.row)"
|
||||
>
|
||||
<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')}}
|
||||
<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 v-else-if="item.prop === 'timePlan'">
|
||||
<template v-if="scope.row.config && scope.row.config.isScheduler === 0">
|
||||
{{$t('report.always')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
:width="270"
|
||||
trigger="hover"
|
||||
class="my-table"
|
||||
@show="handleConfig(scope.row)"
|
||||
>
|
||||
<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 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>
|
||||
</span>
|
||||
</template>
|
||||
<el-row class="margin-l-10 margin-t-20">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col>
|
||||
<el-col :span="16">{{configPeriod}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.custom")}}</el-col>
|
||||
<el-col :span="16">{{configCustom}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col>
|
||||
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col>
|
||||
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'userName'">
|
||||
{{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'lastTime'">
|
||||
{{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'total'">
|
||||
{{scope.row[item.prop] || 0}}
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop] || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
<el-row class="margin-l-10 margin-t-20">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.period")}}</el-col>
|
||||
<el-col :span="16">{{configPeriod}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.custom")}}</el-col>
|
||||
<el-col :span="16">{{configCustom}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{$t("report.startTime")}}</el-col>
|
||||
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerStart) || '-'}}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name" >{{$t("report.endTime")}}</el-col>
|
||||
<el-col :span="16">{{dateFormatByAppearance(scope.row.schedulerEnd) || '-'}}</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'userName'">
|
||||
{{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'lastTime'">
|
||||
{{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'total'">
|
||||
{{scope.row[item.prop] || 0}}
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop] || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@@ -1,39 +1,49 @@
|
||||
<template>
|
||||
<el-pagination
|
||||
small
|
||||
ref="pagination"
|
||||
:current-page="pageObj.pageNo"
|
||||
:page-size="pageObj.pageSize"
|
||||
layout="total,prev,jumper,slot,next"
|
||||
class="chart-table-pagination"
|
||||
:total="pageObj.total"
|
||||
@current-change="currentChange"
|
||||
>
|
||||
<span>/ {{totalPage}}</span>
|
||||
</el-pagination>
|
||||
<div>
|
||||
<loading :loading="loading"></loading>
|
||||
<el-pagination
|
||||
small
|
||||
ref="pagination"
|
||||
:current-page="pageObj.pageNo"
|
||||
:page-size="pageObj.pageSize"
|
||||
layout="total,prev,jumper,slot,next"
|
||||
class="chart-table-pagination"
|
||||
:total="pageObj.total"
|
||||
@current-change="currentChange"
|
||||
>
|
||||
<span>/ {{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>
|
||||
|
||||
@@ -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,50 +226,40 @@ 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.tableData = response.data.list.map(item => {
|
||||
return {
|
||||
...item,
|
||||
config: item.config ? JSON.parse(item.config) : {}
|
||||
}
|
||||
})
|
||||
this.pageObj.total = response.data.total;
|
||||
this.$nextTick(()=>{
|
||||
this.tableData = [];
|
||||
this.tableData = response.data.list.map(item => {
|
||||
return {
|
||||
...item,
|
||||
config: item.config ? JSON.parse(item.config) : {}
|
||||
}
|
||||
})
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user