vue列表叫号按钮2.0

之前做的叫号按钮只简单实现了功能，还有很多细节没有完善，这次2.0版本完善了其他细节功能：

叫号功能示意图

1.在原有的基础上，叫号数组改成对象形式，关键字就是排号，这样改变列表数据顺序时，叫号按钮也会跟着变
2.在离开这个页面，有短时间进入时，保持倒计时状态

<el-table-column label="操作" width="350">
            <template slot-scope="scope">
              <div>
                <template>
                  <button size="mini" class="button2" v-if="!sending[scope.row.project_no].isShow"
                    @click="call(scope.row)">叫号</button>
                  <button size="mini" v-else disabled class="btndis">{{ sending[scope.row.project_no].leftSecond
                    }}秒</button>
                </template>
              </div>
            </template>
          </el-table-column>

js部分

getdData(){
if (this.tableData.length > 0) {
          let sendingArr = JSON.parse(
            window.sessionStorage.getItem("sending")
          );
          //先清除所有的定时器，避免重复倒计时
          for (let i = 0; i <= 10000; i++) {
            clearInterval(i)
          }
          // console.log(sendingArr == {})
          if (sendingArr == {}) {
            // console.log(111)
            this.sending = {};
            this.tableData.forEach(item => {
              item.project_no = parseInt(item.project_no)//将后台获取的字符串类型转为数字类型，用于排序，避免按照字符串排序
              this.$set(this.sending, item.project_no, { isShow: false, leftSecond: 0 })
            });
            console.log("sending", this.sending);
          }
          else {
            this.tableData.forEach(item => {
              this.$set(this.sending, item.project_no, { isShow: false, leftSecond: 0 })
              for (let i in sendingArr) {
                if (item.project_no == i) {
                  this.$set(this.sending, item.project_no, sendingArr[i])
                  this.timeDown(i)
                }
              }
              item.project_no = parseInt(item.project_no)
            });
            console.log(this.sending);
          }
        }
   }

//倒计时
      timeDown(index) {
        console.log("倒计时");
        if (this.sending[index].leftSecond == 0) {
          this.sending[index].leftSecond = this.second;
        }
        const timmer = setInterval(() => {
          // console.log(new Date())
          this.sending[index].leftSecond--;
          if (this.sending[index].leftSecond <= 0) {
            //停止计时
            clearInterval(timmer);
            this.sending[index].leftSecond = 0;
            this.sending[index].isShow = false;
          }
        }, 1000);
      },
      //叫号
      call(row) {
        // 防止重复提交，显示倒计时
        if (this.sending[row.project_no].isShow) return;
        this.sending[row.project_no].isShow = true;
        // console.log(this.sending[row.project_no].isShow);
        // 倒计时
        this.timeDown(row.project_no);
        // console.log(row);
      },
    },

beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被验证前调用
      // 不能获取组件实例 `this` ！
      // 因为当守卫执行时，组件实例还没被创建！
      console.log("进入组件")
      let pretime = JSON.parse(sessionStorage.getItem("time"))
      if (pretime == null) {
        next();
      } else {
        pretime = new Date(pretime)
        let now = new Date();
        let leave = now.getTime() - pretime.getTime();
        leave = Math.floor(leave / 1000);
        // console.log(leave)
        if (leave >= 10) {//判断离开时间是否大于倒计时时间
          window.sessionStorage.removeItem("sending")
          next();
        } else {
          next()
        }
      }

    },
    //通过路由规则，离开该组件时被调用
    beforeRouteLeave(to, from, next) {
      // console.log("learn--beforeRouteLeave", to, from);
      console.log("离开组件")
      //也可以在搜索，数据更新，重新渲染了页面的时候使用
      let sendingArr = {};
      for (let i in this.sending) {
        if (this.sending[i].isShow) {
          sendingArr[i] = this.sending[i]
        }
      }
      //将还在倒计时的部分存入缓存
      window.sessionStorage.setItem("sending", JSON.stringify(sendingArr));
      window.sessionStorage.setItem("time", JSON.stringify(new Date()));
      next();
    }

//禁止用F5键和ctrl+r键进行恶意疯狂快速刷新
  document.onkeydown = function (e) {
    e = window.event || e;
    var keycode = e.keyCode || e.which;
    if (keycode == 116 || (event.ctrlKey && event.keyCode == 82)) {
      if (window.event) {// ie
        try { e.keyCode = 0; } catch (e) { console.log("禁止用F5键和ctrl+r键") }
        e.returnValue = false;
      } else {// firefox
        e.preventDefault();
      }
    }
  }