1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- <template>
- <header class="header-bar">
- <span ></span>
- <span>
- <slot name="header-user">
- <el-dropdown @command="handleCommand">
- <span class="account-name">{{accountInfo.userName}} <i class="el-icon-arrow-down"></i></span>
- <template #dropdown>
- <el-dropdown-menu>
- <slot name="pre-dropdown"></slot>
- <el-dropdown-item command="logout">退出</el-dropdown-item>
- <slot name="dropdown" />
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </slot>
- </span>
- </header>
- </template>
- <script>
- import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
- import { computed } from 'vue'
- import { Token } from '@/lib/token'
- import { useRouter } from 'vue-router'
- // import { accountService } from '@/api'
- import store from '../../store'
- import { useCipConfig } from '@cip/components/hooks/use-cip-config'
- export default {
- name: 'CipHeaderBar',
- components: {
- ElDropdown, ElDropdownMenu, ElDropdownItem
- },
- setup () {
- // const store = useStore()
- const cipConfig = useCipConfig()
- const router = useRouter()
- const accountInfo = computed(() => {
- return store.state.accountInfo || {}
- })
- const handleCommand = (command) => {
- if (command === 'logout') {
- if (cipConfig.logout) {
- cipConfig.logout()
- } else {
- Token.remove()
- location.href = `${router.options.history.base}/login`
- }
- }
- }
- return { accountInfo, handleCommand }
- }
- }
- </script>
- <style lang="less">
- .main-framework__header{
- .header-bar{
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 12px;
- margin-left: auto;
- }
- .account-name{
- cursor: pointer;
- font-weight: bold;
- }
- }
- </style>
|