dev/dcp-web-gate/src_old/components/taber.vue

<template>
  <!-- v-if="ifTable" -->
  <div>
    <div class="header1">
      <div class="header2">
        <span
          v-for="(i, value) in tabers"
          :class="index == value ? 'tabersItem2' : 'tabersItem1'"
          @click="tabersChange(i, value)"
          >{{ $t(i.label) }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/api/bus"; //注意引入
export default {
  name: "Taber",
  data() {
    return {
      index: "",
      ifTable: false,
      tabers: [
        {
          label: "common.ProjectResources",
          value: "projectPresentation",
          item: [
            {
              value: "projectPresentationDetails",
            },
          ],
        },
        {
          label: "common.NewsData",
          value: "realTimeInfo1",
          item: [
            {
              value: "realTimeInfoItemdetails",
            },
            {
              value: "realTimeInfoLatetDevelopment",
            },
          ],
        },
         {
          label: "common.GlobalData",
          value: "realTimeInfo",
          // item: [
          //   {
          //     value: "realTimeInfoLatetDevelopment",
          //   },
          // ],
        },
        {
          label: "common.CountryInformation",
          value: "countryInformation",
          item: [
            {
              value: "countryNationalSpace",
            },
          ],
        },
        {
          label: "common.EnterpriseShow",
          value: "enterprise",
          item: [
            {
              value: "enterpriseDetails",
            },
          ],
        },
        {
          label: "common.FinancialServices",
          value: "financialServices",
          item: [
            {
              value: "FinancialServicesAgency",
            },
            {
              value: "FinancialServiceInvestmentGuide",
            },
            {
              value: "FinancialServiceProjectEvaluation",
            },
            {
              value: "FinancialServicesFundIdeas",
            },
            {
              value: "FinancialServicesAgency",
            },
            {
              value: "FinancialServicesGuideDetails",
            },
          ],
        },
        {
          label: "common.ThinkTankConsulting",
          value: "thinkTankConsulting",
          item: [
            {
              value: "thinkTankConsulting1",
            },
            {
              value: "thinkTankConsulting2",
            },
            {
              value: "ThinkTankArticleDetail",
            },
          ],
        },
        {
          label: "common.CooperationNetwork",
          value: "IntroductionMemberProfile",
          item: [
            {
              value: "IntroductionMemberProfile",
            },
            {
              value: "IntroductionMemberInformation",
            },
            {
              value: "IntroductionMembershipApplication",
            },
            {
              value: "IntroductionAllianceOverview",
            },
            {
              value: "IntroductionAllianceMemberInformation",
            },
            {
              value: "IntroductionApplicationMembership",
            },
            {
              value: "IntroductionGeneralSituation",
            },
            {
              value: "IntroductionPartnerInformation",
            },
            {
              value: "IntroductionCustomService",
            },
            {
              value: "IntroductionFundingApplication",
            },
            {
              value: "IntroductionPresentationDetails",
            },
          ],
        },
        {
          label: "common.Cooperation&Communication",
          value: "cooperationExchange",
          item: [
            {
              value: "cooperationExchangeListDetails",
            },
          ],
        },
        {
          label: "common.NationalregionalCommissions",
          value: "nationalregionalCommittees",
          item: [
            {
              value: "nationalregionalCommissions2",
            },
          ],
        },
        // {
        //   label: "common.ResourceSharing",
        //   value: "resourceSharing",
        //   item: [
        //     {
        //       value: "resourceSharing1",
        //     },
        //     {
        //       value: "resourceSharingDetails",
        //     },
        //   ],
        // },
        {
          label: "common.ConferenceService",
          value: "conferenceServices",
        },
        {
          label: "common.ExhibitionService",
          value: "exhibitionService2",
          item: [
            {
              value: "ExhibitionService2",
            },
          ],
        },
      ],
      router: "",
      taberDemo: [],
    };
  },
  watch: {
    "$store.state.router"() {
      this.getSave();
    },
    "$route.path"() {
      let path = this.$route.path.substr(1);
      this.$store.commit("modify", path);
      window.localStorage.setItem("router", path);
      this.getSave();
    },
  },
  created() {
    this.$nextTick(() => {
      this.getSave();
    });
  },
  methods: {
    getSave() {
      const that = this;
      let path = this.$route.path.substr(1);
      this.ifTable = false;
      this.tabers.forEach((i, index) => {
        if (
          (that.$store.state.router && path == i.value) ||
          that.$store.state.router == i.value
        ) {
          console.log(path, i.value, that.$store.state.router);
          that.index = index;
          that.BusChange(i);
          return (that.ifTable = true);
        } else if (path && i.item) {
          i.item.forEach((a, j) => {
            if (path == a.value) {
              that.index = index;
              that.ifTable = true;
              that.BusChange(i);
              return;
            }
          });
        }
        console.log(this.ifTable);
      });

      // let arr_filter =  this.tabers.filter((x,index)=>{
      //     return  x.value==this.$store.state.router;
      // })
      // let flag
      // console.log(arr_filter)
      // if(arr_filter.length>0){
      //     // this.ifTable=true
      //     flag = this.tabers.findIndex(item=>{
      //     return item.label == arr_filter[0].label;
      // })
      // }else {
      //     // this.ifTable=false
      // }
      let indexDemo = this.index;
      if (this.index < 6) {
        this.tabers.splice(6, 6);
      } else {
        this.tabers.splice(0, 6);
        this.index = indexDemo - 6;
      }
    },
    tabersChange(i, index) {
        // console.log("i++++",i,"index+++++",index)
      this.index = index;
      this.BusChange(i);
      if (i.value !== "1") {
        this.$router.replace(i.value);
        this.$store.commit("modify", i.value);
        window.localStorage.setItem("router", i.value);
      }
    },
    BusChange(i) {
      Bus.$emit("title", i); //存 Bus.$emit
      Bus.$emit("serch", i); //存 Bus.$emit
    },
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
.header1 {
  /* width:1500px; */
  height: 60px;
  margin: auto;
  /* background: #2c558a; */
}
.header2 {
  width: 1200px;
  height: 60px;
  margin: auto;
  position: relative;
  /* background: skyblue; */
}
.tabersItem1 {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
  line-height: 40px;
  /* margin-right: 50px; */
  cursor: pointer;
  color: #fff;
}
.tabersItem2 {
  display: inline-block;
  text-align: center;
  margin: 0 10px;
  line-height: 40px;
  /* margin-right: 50px; */
  color: #fff;
  cursor: pointer;
  border-bottom: 2px solid #32dd45;
}
</style>