web/packages/layout/work-bench/index.vue

<template>
  <work-bench-layout>
    <template v-slot:nav>
      <router-view name="nav">
        <template v-slot:nav-user-info="{ info }">
          <slot name="nav-user-info" v-bind:info="info"></slot>
        </template>
      </router-view>
    </template>
    <template v-slot:menu>
      <router-view v-show="$route.query.aside !== '0'" name="menu" :before-select="onBeforeSelect"
                   @open="onOpenMenu"></router-view>
    </template>
    <router-view id="work-bench-container"></router-view>
  </work-bench-layout>
</template>

<script>
import WorkBenchLayout from './layout'
import { mapActions, mapGetters } from 'vuex'
import { checkCanNextMenu } from '../../utils/menu'

export default {
  name: 'work-bench',
  components: {
    [WorkBenchLayout.name]: WorkBenchLayout
  },
  computed: {
    ...mapGetters('work-bench/dialog', [
      'dialogOptions'
    ])
  },
  async beforeRouteEnter (to, from, next) {
    next(async (vm) => {
      await vm.getMenus()
      await vm.checkNextMenu(to)
    })
  },
  async beforeRouteUpdate (to, from, next) {
    await this.checkNextMenu(to)
    next()
  },
  methods: {
    ...mapActions('work-bench', [
      'getMenus'
    ]),
    ...mapActions('work-bench/menu', [
      'tryMatchMenu',
      'tryFindMenu'
    ]),
    ...mapActions('work-bench/dialog', [
      'openDialog'
    ]),
    /**
     * 更新路由时检验菜单
     * @param to
     * @returns {Promise<void>}
     */
    async checkNextMenu (to) {
      const findMenuInfo = await this.tryFindMenu({
        link: to.query.link || to.fullPath
      })
      const canNext = checkCanNextMenu.apply(this, [findMenuInfo.findMenu])
      if (canNext) {
        this.tryMatchMenu({
          link: to.query.link || to.fullPath,
          find: findMenuInfo
        })
      }
    },
    /**
     * 默认前置校验
     * @param menu
     * @returns {boolean}
     */
    beforeSelect (menu) {
      return checkCanNextMenu.apply(this, [menu])
    },
    /**
     * 打开菜单前置校验钩子
     * @param menu
     * @returns {Promise<boolean>}
     */
    async onBeforeSelect (menu) {
      let canNext = true
      const spareFn = this.beforeSelect.bind(this)
      canNext = await new Promise((resolve) => {
        const next = (result) => {
          resolve(Boolean(result))
        }

        this.$BRACE.$emit({
          fKey: 'onBeforeSelect',
          spareFn: (menu, next) => {
            next(spareFn(menu))
          }
        }, menu, next)
      })
      return canNext
    },
    /**
     * 调用公共函数打开页面
     * @param menu
     */
    openMenu (menu) {
      this.$BRACE.methods.open({
        route: menu
      })
    },
    /**
     * 打开菜单事件发布
     * @param menu
     */
    onOpenMenu (menu) {
      this.$BRACE.$emit({
        fKey: 'onOpenMenu',
        spareFn: (menu, next) => {
          next(menu)
        }
      }, menu, this.openMenu.bind(this))
    }
  }
}
</script>

<style lang="scss">
@import "../../style/index";

.content-shadow {
  background: #FFFFFF;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0800);
  border-radius: 5px 5px 5px 5px;
}

.abnormal-tip {
  margin: $padding-lg;
  padding: $padding-xl;
  @extend .content-shadow;
}

.custom-message-box {
  width: 380px !important;
  border-radius: 8px;

  .custom-confirm-btn {
    margin-top: 12px;
    width: 132px;
    height: 36px;
    background: #2cb7ca;
    border-radius: 6px;
    border: 0;
    font-size: 16px;
  }

  .el-message-box__message {
    font-size: 14px;
    color: #686868;
  }
}
</style>