smsb-web-develop/src/layout/components/Navbar/index.vue

<template>
  <div class="l-flex--row c-navbar">
    <breadcrumb class="l-flex__auto c-sibling-item" />
    <div
      v-if="isSuperAdmin"
      class="l-flex__none c-sibling-item farthest has-active"
      @click="onChangeTenant"
    >
      {{ tenantName }}
    </div>
    <upload-dashboard
      v-if="isOperator"
      class="l-flex__none c-sibling-item farthest"
    />
    <el-dropdown
      class="l-flex__none c-sibling-item farthest c-navbar__user u-color--blue u-font-size--sm has-active"
      trigger="click"
      @command="onCommand"
    >
      <div class="l-flex--row">
        <img
          v-if="avatar"
          class="c-navbar__avatar"
          :src="avatar"
        >
        <span class="c-sibling-item">{{ name }}</span>
        <i class="c-sibling-item near el-icon-arrow-down" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="profile">个人设置</el-dropdown-item>
        <el-dropdown-item
          command="logout"
          divided
        >
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <radio-table-dialog
      ref="tenantDialog"
      :title="title"
      :schema="tenantSchema"
      append-to-body
      @confirm="onChoosenTenant"
    />
    <el-drawer
      title="个人设置"
      :visible.sync="drawer"
      direction="rtl"
      :size="480"
      :with-header="false"
      :destroy-on-close="true"
      append-to-body
    >
      <profile
        class="l-flex__fill"
        @close="drawer = false"
      />
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getPlatformTenants,
  resetDepartmentCache
} from '@/api/user'
import Breadcrumb from './Breadcrumb'
import UploadDashboard from './UploadDashboard'
import Profile from './Profile'

export default {
  name: 'Navbar',
  components: {
    Profile,
    Breadcrumb,
    UploadDashboard
  },
  data () {
    return {
      drawer: false,
      tenantSchema: {
        condition: { name: '' },
        list: getPlatformTenants,
        filters: [
          { key: 'name', type: 'search', placeholder: '标识' }
        ],
        cols: [
          { prop: 'remark', label: '名称' },
          { prop: 'name', label: '标识' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name',
      'isSuperAdmin',
      'isOperator',
      'tenantId',
      'tenantName'
    ]),
    title () {
      return `租户切换（${this.tenantName}）`
    }
  },
  methods: {
    onCommand (command) {
      switch (command) {
        case 'profile':
          // this.$router.push({ name: 'profile' })
          this.drawer = true
          break
        case 'logout':
          this.$store.dispatch('user/logout')
          break
        default:
          break
      }
    },
    onChangeTenant () {
      this.$refs.tenantDialog.show({ id: this.tenantId, name: this.tenantName })
    },
    onChoosenTenant ({ value, done }) {
      if (value.path !== this.tenant) {
        resetDepartmentCache()
        this.$store.commit('user/SET_TENANT', value)
      }
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.c-navbar {
  position: relative;
  height: $height--md;
  padding: 0 $padding--xl;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  overflow: hidden;
  z-index: 1;

  &__info {
    background: url("~@/assets/icon_inform.png") 0 0 / 100% 100% no-repeat;
  }

  &__user.hover-effect {
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  &__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-icon-arrow-down {
    font-weight: bolder;
  }
}
</style>