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 label="国家/地区清单" name="listOfCountries" v-if="country">
        <list-of-countries></list-of-countries>
      </el-tab-pane>
      <el-tab-pane label="车型类别清单" name="listProject" v-if="project">
        <list-project></list-project>
      </el-tab-pane>
      <el-tab-pane label="重点标准跟踪清单" name="listTracking" v-if="tracking">
        <list-tracking></list-tracking>
      </el-tab-pane>
      <el-tab-pane label="其他清单" name="listOther" v-if="other">
        <list-other></list-other>
      </el-tab-pane>
      <el-tab-pane label="项目清单" name="localProductsOrProjectLibrary" v-if="library">
        <local-products-or-project-library></local-products-or-project-library>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  name: "AccessStandardsAndRegulations",
  data() {
    return {
      country: false,
      project: false,
      tracking: false,
      other: false,
      library: false,
      list: [],
      tabValue: "",
      menuName: ["国家/地区清单", "车型类别清单", "重点标准跟踪清单", "其他清单", "项目清单"]
    };
  },
  methods: {
  },
  components: {
    localProductsOrProjectLibrary,
    listOfCountries,
    listTracking,
    listProject,
    listOther
  },
  props: {},
  computed: {},
  watch: {},
  mounted() {
    var list = [];
    const menuList = this.$store.getters.getMenuList;
    let menuData = [];
    let menuID = ["b05b562950cb6d0aef539fad30b7386a", "63e05705d0c8013162caa34f9fe52865","418123d180abf67bd2c46d5a694baaa5", "a1170d77f4332e5f45ce520e63b00e15", "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") {
            this.country = true
          } else if (entity.id === "63e05705d0c8013162caa34f9fe52865") {
            this.project = true
          }else if (entity.id === "418123d180abf67bd2c46d5a694baaa5") {
            this.tracking = true
          }else if (entity.id === "5a75523729b04102a565167004d640e9") {
            this.other = true
          } else if (entity.id === "a1170d77f4332e5f45ce520e63b00e15") {
             this.library = true
          }
        }
      }
    });
    this.tabValue = this.country ? 'listOfCountries' : (this.project ? 'listProject' : (this.tracking ? 'listTracking' : (this.other ? 'listOther' : (this.library ? 'localProductsOrProjectLibrary' : ''))))
    // if(this.country){
    //   this.tabValue = "listOfCountries"
    //   return;
    // }else if(this.project){
    //   this.tabValue = "listProject"
    //   return;
    // }else if(this.tracking){
    //   this.tabValue = "listTracking"
    //   return;
    // }else if(this.other){
    //   this.tabValue = "listOther"
    //   return;
    // }else if(this.library){
    //   this.tabValue = "localProductsOrProjectLibrary"
    //   return;
    // }
  },
  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 {
  //min-height: calc(100% - 20px);
  height: inherit;
  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: 10px;
        flex: auto;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>