water-ldht/src/vab/components/VabNavBar/index.vue

<template>
  <div class="nav-bar-container">
    <el-row :gutter="15">
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
        <div class="left-panel">
          <vab-fold />
          <el-select
            v-model="projectId"
            filterable
            placeholder="请选择"
            size="small"
            style="margin-left: 20px"
            @change="e => onToggleProject(e)"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-link
            type="primary"
            :href="url"
            :underline="false"
            target="_blank"
          >
            首页大屏
          </el-link>
          <!--          <el-dropdown @command="onToggleProject">-->
          <!--            <span class="el-dropdown-link cursor">-->
          <!--              {{ activeProject.name }}-->
          <!--              <el-icon class="el-icon&#45;&#45;right">-->
          <!--                <arrow-down />-->
          <!--              </el-icon>-->
          <!--            </span>-->
          <!--            <template #dropdown>-->
          <!--              <el-dropdown-menu>-->
          <!--                <el-dropdown-item-->
          <!--                  v-for="pro in projectList"-->
          <!--                  :key="pro.id"-->
          <!--                  :command="pro"-->
          <!--                >-->
          <!--                  {{ pro.name }}-->
          <!--                </el-dropdown-item>-->
          <!--              </el-dropdown-menu>-->
          <!--            </template>-->
          <!--          </el-dropdown>-->
        </div>
      </el-col>
      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
        <div class="right-panel">
          <vab-full-screen />
          <vab-avatar />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { openFirstMenu } from '@/config';
import { filterRoutes } from '@/utils/routes';
import { handleMenu } from '@/utils/menu';
import { fetchMenuByProject, getCurrentUserProjects } from '@/api/menu';

export default {
  name: 'VabNavBar',
  props: {
    layout: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      firstMenu: '',
      projectList: [],
      activeProject: {},
      projectId: '',
      projectName: '',
      url: '',
    };
  },
  computed: {
    ...mapGetters({
      routes: 'routes/routes',
    }),
    handleRoutes() {
      return this.routes.filter(item => item.hidden !== true && item.meta);
    },
  },
  watch: {
    $route: {
      handler(route) {
        const firstMenu = route.matched[0].path || '/';
        // if (this.firstMenu !== firstMenu) {
        //   this.firstMenu = firstMenu;
        //   this.handleTabClick({ name: firstMenu }, true);
        // }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getProjectList();
    this.setUrl();
  },
  methods: {
    ...mapMutations({
      setRoute: 'routes/setRoutes',
    }),
    setUrl() {
      const userId = sessionStorage.getItem('projectId');
      this.url =
        'https://dp.lidinghb.com/chudy_visual/view/1699334659609071616?projectId=' +
        userId;
    },
    handleTabClick(tab, mounted) {
      const childrenArr = this.routes.find(
        item => item.path === tab.name
      ).children;
      if (mounted !== true && openFirstMenu)
        this.$router.push(childrenArr[0].path);
    },
    async getProjectList() {
      const { data } = await getCurrentUserProjects();
      this.projectList = data;
      const projectId = sessionStorage.getItem('projectId');
      const projectName = sessionStorage.getItem('projectName');
      const act = data.find(it => Number(it.id) === Number(projectId));
      if (act) {
        this.projectId = Number(projectId);
        this.projectName = projectName;
      } else {
        sessionStorage.setItem('projectId', data[0].id);
        sessionStorage.setItem('projectName', data[0].name);
        this.projectId = Number(data[0].id);
        this.projectName = data[0].name;
      }
    },
    async onToggleProject(e) {
      var projectId = this.projectId;
      var project = this.projectList.find(
        it => Number(it.id) === Number(projectId)
      );
      sessionStorage.setItem('projectId', projectId);
      sessionStorage.setItem('projectName', project.name);
      // const menus = await fetchMenuByProject(project);
      // const temp = filterRoutes(handleMenu(menus), true);
      // const getPath = t => {
      //   return t?.children?.length ? getPath(t?.children[0]) : t?.path;
      // };
      // const path = getPath(temp[0]);

      // this.setRoute(temp);
      // this.$router.push(path);
      this.$router.go(0);
      // this.$router.replace(this.$route.path);
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar-container {
  position: relative;
  height: $base-nav-bar-height;
  padding-right: $base-padding;
  padding-left: $base-padding;
  overflow: hidden;
  user-select: none;
  background: $base-color-white;
  box-shadow: $base-box-shadow;

  .left-panel {
    display: flex;
    align-items: center;
    justify-items: center;
    height: $base-nav-bar-height;

    :deep {
      span {
        font-size: 14px;
        margin-left: 20px;
        color: rgba(68, 68, 68, 1);
      }

      .breadcrumb-container {
        margin-left: $base-padding;
      }

      .el-tabs {
        margin-left: $base-padding;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__item {
          > div {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }
      }

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
  }

  .right-panel {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    height: $base-nav-bar-height;

    :deep {
      [class*='ri-'] {
        margin-left: $base-padding;
        color: $base-color-gray;
        cursor: pointer;
      }

      button {
        [class*='ri-'] {
          margin-left: 0;
          color: $base-color-white;
          cursor: pointer;
        }
      }
    }
  }
}
.cursor {
  &:hover {
    cursor: pointer;
  }
}
.el-dropdown-menu {
  width: auto;
  height: 500px;
  overflow-y: auto;
}
</style>