beforeRouteEnter方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/85234873

当从表单页面跳转到详情页面做一些操作后，需要返回定位到原先表单的页面。此时路由跳转需要做一些判断就要用到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">&nbsp;{{multipleSelection.length}}&nbsp;</span>项,</span>
        <span>总共<span>&nbsp;{{page.total}}&nbsp;</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(){}中根据标志信息是否取出缓存中的信息即可。