yos_web/src/components/newLayout/modules/navRight.vue

<template>
  <div>
    <div class="nav-right">
      <el-menu
        :collapse="true"
        style="background: none"
        text-color="#fff"
        active-text-color="#fff"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          :index="String(index + 10)"
          v-for="(item, index) in menuApp"
          :key="index"
          @click="handelMenuAppClick(item, 'app')"
        >
          <img
            width="20"
            :src="require(`@/assets/icons/${item.systemappid}.svg`)"
            alt=""
          />
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuApp: [],
      modules: [],
      system: [],
    };
  },
  methods: {
    // 查询右侧应用授权
    async query_userauth() {
      const res = await this.$api.requested({
        classname: "sysmanage.develop.userauthforweb.userauth",
        method: "query_userauth",
        content: {
          place: 2,
        },
      });
      console.log("res", res);
      if (res.code == 1) {
        this.system = res.data;
        this.modules = [];
        res.data.map((e) => {
          this.modules = [...this.modules, ...e.modules];
        });
        this.modules.map((e) => {
          this.menuApp = [...this.menuApp, ...e.apps];
        });
      }
    },
    handelMenuAppClick(app, type) {
      this.$store.dispatch("changeDetailDrawer", false);
      let at_modules = this.modules.filter((e) => {
        if (e.systemmoduleid === app.systemmoduleid) return e;
      })[0];

      let at_app = app;

      sessionStorage.setItem("active_modules", JSON.stringify(at_modules));
      const link = () => {
        this.$router.push({ path: app.path });
      };
      this.$store.dispatch("setActiveApp", {
        name: app.name,
        app: at_app,
        val: "",
        link,
      });
      this.$router.push({ path: app.path });
    },
  },
  mounted() {
    this.query_userauth();
  },
};
</script>
<style>
</style>
<style scoped>
.nav-right {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2000;
  z-index: 2003;
}
</style>