web/packages/work-bench-frame/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="showMenu" 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
  },
  data () {
    return {
      nowTryMenuStatus: true
    }
  },
  computed: {
    ...mapGetters('work-bench/dialog', [
      'dialogOptions'
    ]),
    showMenu () {
      return this.nowTryMenuStatus && this.$route.query.aside !== '0'
    }
  },
  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
      })
      // 没有找到匹配的菜单时，用于隐藏侧边菜单
      this.nowTryMenuStatus = Boolean(findMenuInfo.findMenu)
      // 仅在有内容时进行菜单选中的尝试
      if (this.nowTryMenuStatus) {
        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,
.custom-alert-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;
  }

  .el-message-box__headerbtn .el-message-box__close{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFZSURBVHgB7ZfLjYMwEIaH151OkhJSA0KC26a0zQ0kRA2UsOkkd17rQUJCq2Bs/8Pm4u+EEP75NBbjgcjj8Xg+T9u2l7quv0gIzqqq6mLybHj0AMsNw9AFQfAtIckZnBWGYWciGZCBnLpM13vzPN+LongQILe59Zqm6VaW5XNvjbaCfd9ft3KMayXfyDFpHMdX3TptBTXBVpXcy1DbfM/z/AEJopKInLGgqyQqZyVoKykhZy1oKikl5yR4JLmECsktWeTInuQ7XOUYZ0HGRBKRYyBBRieJyi0ZdCLjOBLK6VuMnN3Mv3wkiKTTFuv63NpqtiCjmlij3n4QEgOGk6DNCSElCQ8LulYiIQmNWyZ9DpV0HlhtmjAiGZwth0pq20ySJD8q9EWgHMMSf1sQZ/M7dOsOt5j/7NSR1anwVOJsXSvJclEU3bIsexIKSzZNI/rjzpnk8Xg8n+cXjfMeGT1wE4IAAAAASUVORK5CYII=) no-repeat center;
    background-size: contain;
  }
  .el-icon-close:before{
    content: '';
  }
}
.custom-alert-box {
   padding-bottom: 32px!important;
  .el-message-box__header{
    padding-top: 32px!important;
  }
  .el-message-box__title{
    line-height: 28px;
  }
  .el-message-box__btns{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0 32px;
  }
  .custom-confirm-btn{
    margin-left: 0!important;
  }
  .custom-default-btn,
  .custom-default-btn:hover,
  .custom-default-btn:focus{
    width: 132px;
    height: 36px;
    margin-top: 12px;
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #DCDFE6;
    color: #686868;
    font-size: 16px;
  }
}
</style>