foton-laws-system-front/src/pages/regulatoryRepository/accessStandardsAndRegulations/index.vue

<!-- 标准法规库 - 目标市场准入清单 -->
<template>
  <div id="accessStandardsAndRegulations" class="v-class">
    <el-tabs v-model="tabValue" style="height: 100%;">
      <el-tab-pane v-for="(item,index) in list" :key="index" :label="item.label" :name="item.name">
        <div v-if="tabValue === 'listOfCountries'" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
          <list-of-countries></list-of-countries>
        </div>
        <div v-else-if="tabValue === 'listProject'" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
          <list-project></list-project>
        </div>
        <div v-else-if="tabValue === 'listOther'" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
          <list-other></list-other>
        </div>
        <div v-else-if="tabValue === 'localProductsOrProjectLibrary'" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
          <local-products-or-project-library></local-products-or-project-library>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import listOfCountries from "../accessStandardsAndRegulations/page/listOfCountries";
import listProject from "../accessStandardsAndRegulations/page/listProject";
import listOther from "../accessStandardsAndRegulations/page/listOther";
import localProductsOrProjectLibrary from "../localProductsOrProjectLibrary/index";

export default {
  name: "AccessStandardsAndRegulations",
  data() {
    return {
      list: [],
      tabValue: "listProject",
      menuName: ["国家/地区清单", "项目类清单", "其他清单", "重点标准跟踪清单"]
    };
  },
  methods: {},
  components: {
    localProductsOrProjectLibrary,
    listOfCountries,
    listProject,
    listOther
  },
  props: {},
  computed: {},
  watch: {},
  mounted() {
    var list = [];
    const menuList = this.$store.getters.getMenuList;
    let menuData = [];
    let menuID = ["b05b562950cb6d0aef539fad30b7386a", "63e05705d0c8013162caa34f9fe52865", "418123d180abf67bd2c46d5a694baaa5", "5a75523729b04102a565167004d640e9"];
    this.menuName.forEach(item => {
      for (let i = 0; i < menuList.length; i++) {
        let entity = menuList[i];
        if (item != entity.menuName) continue;
        if (menuID.indexOf(entity.id) >= 0 && menuData.indexOf(entity.id) == -1) {
          menuData.push(entity.id);
          if (entity.id === "b05b562950cb6d0aef539fad30b7386a") {
            list.push({
              label: "国家/地区清单",
              name: "listOfCountries"
            });
            continue;
          } else if (entity.id === "63e05705d0c8013162caa34f9fe52865") {
            list.push({
              label: "车型类别清单",
              name: "listProject"
            });
            continue;
          }else if (entity.id === "5a75523729b04102a565167004d640e9") {
            list.push({
              label: "其他清单",
              name: "listOther"
            });
            continue;
          } else {
            list.push({
              label: "项目清单",
              name: "localProductsOrProjectLibrary"
            });
            continue;
          }
        }
      }
    });
    this.list = list;
    this.tabValue = this.list[0].name;
  },
  beforeRouteLeave(to, from, next) {
    const toName = ["ListOfStandardsAndRegulationsDetails", "AccessStandardDetails", "LocalProductDetail", "OtherAddEit"];
    // 离开此页面之前,记录tabName以便返回使用,如果将要访问的页面不是这两个,则清空tabName
    if (toName.includes(to.name)) {
      this.$store.commit("SET_ACCESS_STANDARD_REG_TABS", this.tabValue);
    } else {
      this.$store.commit("SET_ACCESS_STANDARD_REG_TABS");
    }
    setTimeout(() => {
      next();
    }, 100);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$store.state.accessStandRegTabName !== "") {
        vm.tabValue = vm.$store.state.accessStandRegTabName;
      }
    });
  }
};
</script>

<style lang="less" scoped>
@import '~@/assets/styles/style';
@import '~@/assets/styles/mixins';

#accessStandardsAndRegulations {
  height: 100%;
  padding: 0 10px;
  background: #fff;
  display: flex;
  flex-direction: column;

  /deep/ .el-tabs {
    flex: auto;
    display: flex;
    flex-direction: column;

    /deep/ .el-tabs__header {
      margin: 0 !important;
    }

    .el-tabs__content {
      height: 100% !important;
      flex: auto;
      position: relative;
      display: flex;
      flex-direction: column;

      .el-tab-pane {
        height: 100%;
        flex: auto;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>