zc_saas_admin/src/views/classHoursReview/index.vue

<template>
  <div id="classHoursReviews">
    <el-tabs
      v-model="parseSession.activeData"
      :closable="parseSession.options.length > 1"
      @tab-remove="removeTab"
      :before-leave="beforeLeave"
    >
      <el-tab-pane
        lazy
        v-for="(item, index) in parseSession.options"
        :key="item.keyId"
        :label="item.realName + '-' + item.goodsName"
        :name="item.keyId"
        ><study-times :key="index" :setData="item" @removeTab="removeTab"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import studyTimes from "./studyTimes.vue";
export default {
  name: "ClassHoursReviews",
  components: { studyTimes },
  data() {
    return {
      parseSession: {
        options: [],
      },
    };
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      const SESSION = sessionStorage.getItem("hoursAudit");
      if (SESSION) {
        this.parseSession = JSON.parse(SESSION);
      } else {
        console.log("错误处理");
      }
    },
    beforeLeave(activeName) {
      try {
        console.log(activeName, "activeName处理");
        this.parseSession.activeData = activeName;
        sessionStorage.setItem("hoursAudit", JSON.stringify(this.parseSession));
        console.log("处理成功");
        return true;
      } catch (error) {
        console.log("错误处理");
        return false;
      }
    },
    removeTab(targetName) {
      let tabs = JSON.parse(JSON.stringify(this.parseSession.options));
      let activeName = this.parseSession.activeData;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.keyId === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.keyId;
            }
          }
        });
      }
      let ary = tabs.filter((tab) => tab.keyId !== targetName);
      this.$set(this.parseSession, "options", ary);
      this.$set(this.parseSession, "activeData", activeName);
    },
  },
  destroyed() {
    sessionStorage.removeItem("hoursAudit");
    console.log("清除");
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-tabs__content{
  padding: 6px;
}
</style>