controlPc/src/layouts/header/AdminHeader.vue

<template>
  <a-layout-header :class="[headerTheme, 'admin-header']">
    <div :class="['admin-header-wide', layout, pageWidth]">
      <router-link
        v-if="isMobile || layout === 'head'"
        to="/"
        :class="['logo', isMobile ? null : 'pc', headerTheme]"
      >
        <img width="32" src="@/assets/img/title.png" />
        <h1 v-if="!isMobile">{{ systemName }}</h1>
      </router-link>
      <a-divider v-if="isMobile" type="vertical" />
      <div class="breadcrumb">
        <a-breadcrumb>
          <a-breadcrumb-item
            :key="index"
            v-for="(item, index) in breadcrumb"
            v-show="item.path != '/'"
          >
            <!-- {{ item.path }} -->

            <!-- <div style="display: flex; flex-wrap: wrap"> -->
            <!-- {{ item.path }} -->
            <!-- {{ countCharacter(item.path, "/") }} -->
            <router-link
              v-if="item.path == '/channel'"
              :to="'/personnelManage' + item.path"
              >{{ item.name }}</router-link
            >

            <router-link
              v-else
              :to="countCharacter(item.path, '/') >= 2 ? item.path : ''"
              >{{ item.name }}</router-link
            >
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <!-- <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/> -->
      <!-- <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
      </div> -->
      <div :class="['admin-header-right', headerTheme]">
        <!-- <header-search class="header-item" @active="val => searchActive = val" /> -->
        <!-- <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
            <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
              <a-icon type="question-circle-o" />
            </a>
          </a-tooltip> -->
        <!-- <ExpandOutlined /> -->

        <!-- <a-icon :class="['header-notice-icon']" type="scan" /> -->

        <HeaderExpand class="header-item"></HeaderExpand>
        <!-- <header-notice class="header-item" /> -->
        <header-avatar class="header-item" />
        <!-- <a-dropdown class="lang header-item">
          <div><a-icon type="global" /> {{ langAlias }}</div>
          <a-menu
            @click="(val) => setLang(val.key)"
            :selected-keys="[lang]"
            slot="overlay"
          >
            <a-menu-item v-for="lang in langList" :key="lang.key">{{
              lang.key.toLowerCase() + " " + lang.name
            }}</a-menu-item>
          </a-menu>
        </a-dropdown> -->
      </div>
    </div>
  </a-layout-header>
</template>

<script>
// import HeaderSearch from './HeaderSearch'
// import HeaderNotice from "./HeaderNotice";
import HeaderAvatar from "./HeaderAvatar";
import HeaderExpand from "./HeaderExpand";

// import IMenu from '@/components/menu/menu'
import { mapState, mapMutations } from "vuex";
// import { getI18nKey } from "@/utils/routerUtil";

export default {
  name: "AdminHeader",
  components: { HeaderAvatar, HeaderExpand },
  props: ["collapsed", "menuData"],
  data() {
    return {
      langList: [
        { key: "CN", name: "简体中文", alias: "简体" },
        { key: "HK", name: "繁體中文", alias: "繁體" },
        { key: "US", name: "English", alias: "English" },
      ],
      searchActive: false,
      page: {},
    };
  },
  created() {
    this.page = this.$route.meta.page;
  },
  computed: {
    ...mapState("setting", [
      "theme",
      "isMobile",
      "layout",
      "systemName",
      "lang",
      "pageWidth",
    ]),
    headerTheme() {
      if (
        this.layout == "side" &&
        this.theme.mode == "dark" &&
        !this.isMobile
      ) {
        return "light";
      }
      return this.theme.mode;
    },
    langAlias() {
      let lang = this.langList.find((item) => item.key == this.lang);
      return lang.alias;
    },
    menuWidth() {
      const { layout, searchActive } = this;
      const headWidth = layout === "head" ? "100% - 188px" : "100%";
      const extraWidth = searchActive ? "600px" : "400px";
      return `calc(${headWidth} - ${extraWidth})`;
    },
    breadcrumb() {
      let page = this.page;
      let breadcrumb = page && page.matched;

      if (breadcrumb) {
        let i18nBreadcrumb = [];
        breadcrumb.forEach((item) => {
          i18nBreadcrumb.push(item.name);
        });

        return i18nBreadcrumb;
      } else {
        return this.getRouteBreadcrumb();
      }
    },
  },
  methods: {
    countCharacter(str, charToCount) {
      return str.split(charToCount).length - 1;
    },
    toggleCollapse() {
      this.$emit("toggleCollapse");
    },
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    ...mapMutations("setting", ["setLang", "correctPageMinHeight"]),
    // ...mapMutations('setting', ['correctPageMinHeight']),
    getRouteBreadcrumb() {
      let routes = this.$route.matched;
      const path = this.$route.path;
      let breadcrumb = [];
      routes
        .filter((item) => path.includes(item.path))
        .forEach((route) => {
          const path = route.path;
          console.log(route.name);
          if (route.name == "保费详情") {
            switch (path.split("/message")[0]) {
              case "/business/sales":
                breadcrumb.push({
                  path: path.split("/message")[0],
                  name: "电销",
                });
                break;
              case "/business/agent":
                breadcrumb.push({
                  path: path.split("/message")[0],
                  name: "代理人",
                });
                break;
              case "/business/channel":
                breadcrumb.push({
                  path: path.split("/message")[0],
                  name: "渠道",
                });
                break;
            }
          }
          if (route.name == "团队管理") {
            switch (path.split("/teammanage")[0]) {
              case "/personnelManage/front/personnel":
                breadcrumb.push({
                  path: path.split("/teammanage")[0],
                  name: "代理人统计",
                });
                break;
              case "/personnelManage/front/resources":
                breadcrumb.push({
                  path: path.split("/teammanage")[0],
                  name: "人力达标",
                });
                break;
            }
          }
          if (route.name == "电销详情") {
            switch (path.split("/message")[0]) {
              case "/sales":
                breadcrumb.push({
                  path: path.split("/message")[0] + "/sales",
                  name: "电销呼出",
                });
                break;
            }
          }

          breadcrumb.push({ path: path, name: route.name });
        });
      let pageTitle = this.page && this.page.title;
      if (this.customTitle || pageTitle) {
        breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle;
      }
      breadcrumb.shift();
      // console.log(breadcrumb)
      return breadcrumb;
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
</style>