ShibeiWorkPlatform_Frontend/src/views/main-shuju/main-content.vue

<template>
  <main :class="['aui-content']">
    <!-- tab展示内容 -->
    <template>
      <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
        <iframe
          :src="
            $router.currentRoute.meta.iframeURL +
            '?token=' +
            token +
            '&customerId=' +
            customerId
          "
          ref="iframe"
          class="m-iframe"
          id="iframe"
          width="100%"
          height="100%"
          frameborder="0"
          scrolling="yes"
        />
      </template>
      <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
        <router-view @changeCustomerName="changeCustomerName" />
      </keep-alive>
    </template>
  </main>
</template>

<script>
import { isURL } from "@/utils/validate";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      iframeUrl: "",
      token: "",
      customerId: "",
    };
  },
  watch: {
    // "$router.currentRoute.name": function () {
    //   console.log($router.currentRoute);
    // },
  },
  created() {
    this.token = localStorage.getItem("token");
    this.customerId = localStorage.getItem("customerId");
  },
  methods: {
    changeCustomerName(customerName) {
      this.$emit("changeCustomerName", customerName);
    },
    // tabs, 是否通过iframe展示
    tabIsIframe(url) {
      // this.appendIframe(url)
      // this.iframeUrl =
      //   url +
      //   "?token=" +
      //   localStorage.getItem("token") +
      //   "&customerId=" +
      //   localStorage.getItem("customerId");

      // return /^http[s]?:\/\/.*/.test(url);
      return isURL(url);
    },
    // tabs, 选中tab
    tabSelectedHandle(tab) {
      tab = this.$store.state.contentTabs.filter(
        (item) => item.name === tab.name
      )[0];
      if (tab) {
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query },
        });
      }
    },
    // tabs, 删除tab
    tabRemoveHandle(tabName) {
      if (tabName === "home") {
        return false;
      }
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name !== tabName
      );
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName =
          this.$store.state.contentTabsActiveName = "home";
        return false;
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        let tab =
          this.$store.state.contentTabs[
            this.$store.state.contentTabs.length - 1
          ];
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query },
        });
      }
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => {
          return (
            item.name === "home" ||
            item.name === this.$store.state.contentTabsActiveName
          );
        }
      );
    },
    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        (item) => item.name === "home"
      );
      this.$router.push({ name: "home" });
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>