beforeRouteEnter方法
当从表单页面跳转到详情页面做一些操作后,需要返回定位到原先表单的页面。此时路由跳转需要做一些判断就要用到beforeRouteEnter方法<template><div class="content-container opinion-container"><div class="content-t
·
当从表单页面跳转到详情页面做一些操作后,需要返回定位到原先表单的页面。此时路由跳转需要做一些判断就要用到beforeRouteEnter方法
<template>
<div class="content-container opinion-container">
<div class="content-tool">
<el-form :inline="true" :model="feedbackForm" class="clearfix" size="medium" label-width="70px" label-position="left" @submit.native.prevent>
<el-form-item label="反馈内容">
<el-input v-model="feedbackForm.name" maxLength="50" @keyup.13.native="search" @blur="spaceName('feedbackForm', 'name', feedbackForm.name)" placeholder="请输入反馈内容搜索"></el-input>
</el-form-item>
<el-form-item label="状态" label-width="auto">
<el-select @visible-change="foldSearch" v-model="feedbackForm.status" placeholder="请选择状态">
<el-option label="全部" value="0"></el-option>
<el-option label="待处理" value="1"></el-option>
<el-option label="处理中" value="2"></el-option>
<el-option label="已处理" value="3"></el-option>
<el-option label="已关闭" value="4"></el-option>
<el-option label="已撤回" value="5"></el-option>
</el-select>
<el-button type="primary" @click="search" class="content-tool--qry el-button-reset">查询</el-button>
<el-button @click="resetSearch" class="content-tool--reset el-button-reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="content-operate clearfix">
<div class="table-record">
<span>已选择<span class="table-record--selected"> {{multipleSelection.length}} </span>项,</span>
<span>总共<span> {{page.total}} </span>项</span>
</div>
<el-dropdown class="content-operate-import" @command="handleCommand" placement="bottom-start">
<el-button class=" el-button-reset" type="primary">
导出<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="exportFileSelect">导出选择数据</el-dropdown-item>
<el-dropdown-item command="exportFileAll">导出全部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="table">
<el-table
ref="multipleSelection"
class="device-table"
:data="feedbackTable"
tooltip-effect="dark"
style="width: 100%; font-size: 14px;"
v-loading="loading"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="30">
</el-table-column>
<el-table-column
:show-overflow-tooltip="true"
label="反馈内容">
<template slot-scope="scope">
<el-button class="text-ellipsis" style="width:100%;text-align:left;" @click="rowClick(scope.row.feedbackId)" type="text">{{scope.row.content}}</el-button>
</template>
</el-table-column>
<el-table-column
prop="feedbackType"
width="100"
label="反馈类型">
</el-table-column>
<el-table-column
prop="userName"
width="150"
label="反馈者">
</el-table-column>
<el-table-column
width="200"
prop="equipmentModel"
show-overflow-tooltip
label="设备型号">
<template slot-scope="scope">
<span class="status-text">{{scope.row.equipmentModel || '-'}}</span>
</template>
</el-table-column>
<el-table-column
width="150"
prop="createDate"
label="反馈时间">
</el-table-column>
<el-table-column
width="120"
label="状态">
<template slot-scope="scope">
<span class="status-text" :class="[scope.row.statusClassName]">{{scope.row.statusText}}</span>
</template>
</el-table-column>
<el-table-column
width="150"
label="操作">
<template slot-scope="scope">
<div class="table-tool">
<!-- 待处理 -->
<template v-if="scope.row.feedbackStatus === '1' ">
<el-button @click.stop="assign(scope.row,'1' )" type="text">指派</el-button>
<el-button @click.stop="feedbackClose(scope.row.feedbackId,'1' )" type="text">关闭</el-button>
</template>
<!-- 处理中 -->
<template v-if="scope.row.feedbackStatus === '2' ">
<el-button @click.stop="feedbackHandled(scope.row.feedbackId,'1' )" type="text">已处理</el-button>
<el-button type="text" disabled>关闭</el-button>
</template>
<!-- 已处理 -->
<template v-if="scope.row.feedbackStatus === '3' ">
<el-button type="text" disabled>已处理</el-button>
<el-button type="text" disabled>关闭</el-button>
</template>
<!-- 已关闭和撤回 -->
<template v-if="scope.row.feedbackStatus === '4' || scope.row.feedbackStatus === '5' ">
<el-button type="text" disabled>指派</el-button>
<el-button type="text" disabled>关闭</el-button>
</template>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-area">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="page.curPage"
:page-size="page.pageSize"
layout="total, prev, pager, next"
:total="page.total">
</el-pagination>
</div>
<!-- 指派弹框 -->
<el-dialog title="指派" width="540px" :visible.sync="assignDialogVisible" class="assign-dialog-wrap" :close-on-click-modal="false" @close="assignDialogCancel">
<el-form :model="assignForm" :rules="assignRules" ref="assignForm" label-width="80px">
<el-form-item label="功能模块" prop="module">
<el-select v-model="assignForm.module" placeholder="请选择功能模块">
<el-option label="移动端-商店" value="1"></el-option>
<el-option label="移动端-消息" value="2"></el-option>
<el-option label="移动端-工作台" value="3"></el-option>
<el-option label="移动端-通讯录" value="4"></el-option>
<el-option label="移动端-我的" value="5"></el-option>
<el-option label="PC-首页" value="6"></el-option>
<el-option label="PC-应用" value="7"></el-option>
<el-option label="PC-发现" value="8"></el-option>
</el-select>
</el-form-item>
<el-form-item label="优先级" prop="priority">
<el-radio-group v-model="assignForm.priority" @change="priorityRadioChange">
<el-radio :label="1">紧急</el-radio>
<el-radio :label="2">极高</el-radio>
<el-radio :label="3">高</el-radio>
<el-radio :label="4">中</el-radio>
<el-radio :label="5">低</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="严重程度" prop="severity">
<el-radio-group v-model="assignForm.severity" @change="severityRadioChange">
<el-radio :label="1">致命</el-radio>
<el-radio :label="2">高</el-radio>
<el-radio :label="3">中</el-radio>
<el-radio :label="4">低</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="运营人员" prop="operator">
<el-select v-model="assignForm.operator" multiple placeholder="请选择运营人员">
<el-option v-for="item in operatorOptions" :key="item.operatingUserId" :label="item.name" :value="item.operatingUserId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="指派备注" prop="msg" class="entered-box">
<el-input :rows="2" maxlength="50" type="textarea" placeholder="请输入内容" v-model="assignForm.msg" @blur="spaceName('assignForm','msg', assignForm.msg)">
</el-input>
<span class="entered-text">{{assignForm.msg.length}}/50</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="assignDialogCancel">取 消</el-button>
<el-button type="primary" @click="assignDialogConfirm">确 定</el-button>
</div>
</el-dialog>
<!-- 已处理弹框 -->
<el-dialog title="已处理" width="540px" :visible.sync="handledDialogVisible" class="assign-dialog-wrap" :close-on-click-modal="false" @close="handledDialogCancel">
<el-form :model="handledForm" :rules="handledRules" ref="handledForm" label-width="70px" >
<el-form-item label="评价" prop="appraise">
<el-radio-group v-model="handledForm.appraise" @change="appraiseRadioChange">
<el-radio :label="1">好评</el-radio>
<el-radio :label="2">中评</el-radio>
<el-radio :label="3">差评</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="评语" prop="comment" class="entered-box">
<el-input :rows="3" maxlength="50" type="textarea" placeholder="请输入内容" v-model="handledForm.comment" @blur="spaceName('handledForm','comment', handledForm.comment)">
</el-input>
<span class="entered-text">{{handledForm.comment.length}}/50</span>
</el-form-item>
<el-form-item label="处理备注" prop="remark" class="entered-box">
<el-input :rows="3" maxlength="50" type="textarea" placeholder="请输入内容,备注内容将在终端展示" v-model="handledForm.remark" @blur="spaceName('handledForm','remark', handledForm.remark)">
</el-input>
<span class="entered-text">{{handledForm.remark.length}}/50</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handledDialogCancel">取 消</el-button>
<el-button type="primary" @click="handledDialogConfirm">确 定</el-button>
</div>
</el-dialog>
<!-- 关闭弹框 -->
<el-dialog title="关闭" width="540px" :visible.sync="closeDialogVisible" class="assign-dialog-wrap" :close-on-click-modal="false" @close="closeDialogCancel">
<el-form :model="closeForm" ref="closeForm" label-width="70px" >
<el-form-item label="关闭备注" class="entered-box">
<el-input :rows="3" maxlength="50" type="textarea" placeholder="请输入内容,备注内容将在终端展示" v-model="closeForm.remark" @blur="spaceName('closeForm','remark', closeForm.remark)"></el-input>
<span class="entered-text">{{closeForm.remark.length}}/50</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialogCancel">取 消</el-button>
<el-button type="primary" @click="closeDialogConfirm">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import api from '@/api/feedbackApi';
import { duplicateClick } from '@/utils/index';
import feedbackMixins from './mixins/feedbackMixins';
export default {
name: 'feedbackMgt',
beforeRouteEnter(to, from, next) {
if (from.name === 'feedbackDetail') {
sessionStorage.setItem('getInitInfoFlag', 'true');
next();
} else {
sessionStorage.setItem('getInitInfoFlag', 'false');
next();
}
},
data() {
return {
feedbackForm: {
status: '0',
name: '',
},
loading: false,
multipleSelection: [],
pageMultipleSelection: {},
feedbackTable: [],
page: {
curPage: 1,
pageSize: 10,
total: 0,
},
clickTag: 0,
};
},
mixins: [
feedbackMixins,
],
created() {
const getInitInfoFlag = sessionStorage.getItem('getInitInfoFlag');
if (getInitInfoFlag === 'true') {
const initInfo = JSON.parse(sessionStorage.getItem('getInitInfo'));
this.page.curPage = initInfo.pageNum;
this.page.pageSize = initInfo.pageSize;
this.feedbackForm.name = initInfo.searchKeyword;
this.feedbackForm.status = initInfo.feedbackStatus;
}
this.init();
},
methods: {
// 表单收起查询
/*
* @param {isFold} Boolean 下拉框折叠
*/
foldSearch(isFold) {
if (!isFold) {
this.search();
}
},
init() {
this.loading = true;
const curPageTemp = this.page.curPage;
api.fetchFeedBackPage({
params: {
params: {
pageNum: this.page.curPage - 1,
pageSize: this.page.pageSize,
searchKeyword: this.feedbackForm.name,
feedbackStatus: this.feedbackForm.status,
},
},
}).then((data) => {
this.loading = false;
this.feedbackTable = this.formatData(data.data.content);
this.page.total = data.data.total;
this.page.curPage = curPageTemp;
}).catch((err) => {
this.loading = false;
this.$message({
type: 'error',
message: err.response.message || '您访问的网页出错了,请重新刷新页面或联系管理员。',
duration: 2000,
});
});
},
// 格式化数据
formatData(data) {
let res = data;
const feedbackStatus = {
1: {
className: 'status-text-primary',
text: '待处理',
},
2: {
className: 'status-text-success',
text: '处理中',
},
3: {
className: 'status-text-info',
text: '已处理',
},
4: {
className: 'status-text-warning',
text: '已关闭',
},
5: {
className: 'status-text-danger',
text: '已撤回',
},
};
if (Array.isArray(data) && data.length > 0) {
res = data.map((item) => {
item.statusText = (feedbackStatus[item.feedbackStatus] && feedbackStatus[item.feedbackStatus].text) || '';
item.statusClassName = (feedbackStatus[item.feedbackStatus] && feedbackStatus[item.feedbackStatus].className) || '';
return item;
});
}
return res;
},
// 进入详情
rowClick(feedbackId) {
// 进入详情是将本页数据放入缓存,待返回时取出
const initInfo = {
pageNum: this.page.curPage,
pageSize: this.page.pageSize,
searchKeyword: this.feedbackForm.name,
feedbackStatus: this.feedbackForm.status,
};
sessionStorage.setItem('getInitInfo', JSON.stringify(initInfo));
this.$router.push({
path: '/opinionFeedback/feedbackDetail',
query: {
feedbackId,
},
});
},
// 查询
search() {
this.init();
},
handleCurrentChange(val) {
this.page.curPage = val;
this.multipleSelection = [];
this.pageMultipleSelection = {};
this.init();
},
// 重置
resetSearch() {
this.feedbackForm.name = '';
this.feedbackForm.status = '0';
this.page.curPage = 1;
this.init();
},
// 导出选择处理
handleCommand(command) {
switch (command) {
case 'exportFileSelect':
this.exportFileSelect();
break;
case 'exportFileAll':
this.exportFileAll();
break;
default:
break;
}
},
// 导出选择的反馈信息excel
exportFileSelect() {
duplicateClick(this).then(() => {
if (!this.multipleSelection.length > 0) {
this.$message({
message: '请选择反馈内容',
type: 'warning',
});
} else {
let url = '/map-store/admin/feedback/exportExcel?flag=1';
this.multipleSelection.forEach((item) => {
url = `${url}&feedbackIds=${item.feedbackId}`;
});
window.location = `${url}`;
}
}).catch(() => {});
},
// 导出所有反馈信息excel
exportFileAll() {
window.location = `/map-store/admin/feedback/exportExcel?searchKeyword=${this.feedbackForm.name}&feedbackStatus=${this.feedbackForm.status}&flag=0`;
},
handleSelectionChange(val) {
this.pageMultipleSelection[this.page.curPage] = val;
this.multipleSelection = [];
Object.keys(this.pageMultipleSelection).forEach((page) => {
this.pageMultipleSelection[page].forEach((item) => {
this.multipleSelection.push(item);
});
});
},
},
};
</script>
<style lang="less" scoped>
.content-container {
padding: 0 20px;
background: #fff;
}
.content-tool{
padding: 28px 18px;
margin-bottom: 20px;
border: 1px solid #ebeef5;
.el-select{
width: 260px;
margin-right: 50px;
}
}
.opinion-container{
padding-bottom: 30px;
.el-form--inline{
font-size: 0;
.el-form-item{
margin: 0;
& + .el-form-item{
margin-left: 50px;
}
}
}
}
.content-operate{
padding: 20px 0;
}
.table-record{
float: right;
line-height: 36px;
}
.assign-dialog-wrap{
.el-form-item:last-child{
margin-bottom: 0;
}
.el-select{
width: 100%;
}
}
</style>
<style lang="less">
.opinion-container{
.table-tool {
font-size: 0;
button{
padding: 0;
vertical-align: middle;
&:first-child{
span{
width: 45px;
display: inline-block;
padding-right: 10px;
border-right: 1px solid #EBEEF5;
text-align: left;
}
}
}
}
.text-ellipsis{
text-overflow: ellipsis;
padding: 0;
overflow: hidden;
}
.content-tool{
.el-form-item:first-child{
.el-form-item__content{
width: 232px;
}
}
}
}
.page-area{
margin: 20px 0;
text-align: right;
}
// 状态按钮
.status-text{
display: inline-block;
padding: 6px 9px;
border-radius: 4px;
font-size: 12px;
line-height: 1;
&.status-text-primary{
background: #E8F5FF;
border: 1px solid #BFE4FF;
color: #20A0FF;
}
&.status-text-success{
background: #EFF9EC;
border: 1px solid #D2EECA;
color: #77C953;
}
&.status-text-info{
background: #F4F4F4;
border: 1px solid #E0E0E1;
color: #909399;
}
&.status-text-warning{
background: #FDF5EC;
border: 1px solid #F8E4CA;
color: #E6A23C;
}
&.status-text-danger{
background: #FDF0F0;
border: 1px solid #FBD5D6;
color: #F56C6C;
}
}
.table-record--selected{
font-size: 14px;
color: #20A0FF;
line-height: 14px;
}
.entered-box{
position: relative;
.el-textarea__inner{
padding-bottom: 24px;
}
.entered-text{
position: absolute;
bottom: 1px;
right: 14px;
width: 95%;
padding-bottom: 10px;
text-align: right;
background: #fff;
padding-bottom: 11px;
font-family: MicrosoftYaHei;
font-size: 14px;
color: #909399;
letter-spacing: 0;
line-height: 14px;
user-select:none;
}
}
</style>
如图,点击反馈内容字段进入详情页面后跳转回来依旧在第五页,而且查询条件不变。操作方法是在进入详情页面时在方法rowClick(){}中将本表单的页面的基本信息存入到缓存。在进入表单页之前调用beforeRouteEnter(){}方法,判断路由是否是从详情页过来的,因为有可能是直接点击菜单栏进去的表单页,然后给一个标志信息到缓存,是否是详情页过来的。然后页面初始化加载方法created(){}中根据标志信息是否取出缓存中的信息即可。
更多推荐
所有评论(0)