baozhida_erp/src/layouts/Header/index.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import Breadcrumb from './Breadcrumb.vue'
// import Notice from './Notice.vue'
import { Expand, Fold, List, SwitchButton, UserFilled } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/src/dropdown.scss'
const globalStore = GlobalStore()
const router = useRouter()
const logOut = () => {
  sessionStorage.clear()
  globalStore.SET_User_Tokey('')
  globalStore.SET_User_Info({})
  globalStore.SET_Flat_Menu([])
  router.replace('/login')
}
const info = computed(() => globalStore.GET_User_Info)
const goTask = () => {
  window.open(`http://dootask.baozhida.cn/gologin/index.html?uuid=${info.value.T_uuid}&name=${info.value.T_name}`)
}
const getTime = () => {
  return new Date().toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
  })
}

let time = ref(getTime())

setInterval(() => {
  time.value = getTime()
}, 1000 * 60)
</script>

<template>
  <div class="header">
    <el-row>
      <el-col :xl="15" :lg="13" :sm="12" class="d-flex">
        <el-button
          class="isCollapse"
          type="primary"
          :icon="globalStore.GET_isCollapse ? Expand : Fold"
          link
          @click="globalStore.SET_isCollapse"
        ></el-button>
        <Breadcrumb></Breadcrumb>
      </el-col>
      <el-col :xl="2" :lg="2" :sm="3" class="notice">
        <el-link type="primary" @click="goTask"
          ><el-icon> <List /> </el-icon>任务管理</el-link
        >
      </el-col>
      <el-col :xl="2" :sm="2" class="notice">
        <!-- <el-popover placement="bottom-end" :width="400" trigger="click">
          <template #reference>
            <el-button type="primary" circle>
              <i class="iconfont el-icon">&#xe63e;</i>
            </el-button>
          </template>
          <Notice></Notice>
        </el-popover> -->
        <el-dropdown>
          <el-button type="primary" circle>
            <i class="iconfont el-icon">&#xe63e;</i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>action</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :xl="3" :lg="4" :sm="4" class="notice">
        <el-dropdown>
          <div class="avatar">
            <el-avatar> <img src="@/assets/images/avatar.jpg" /> </el-avatar>
            <span>{{ globalStore.GET_User_Info.T_name }}</span>
            <el-icon class="el-icon">
              <arrow-down />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="UserFilled" @click="router.push('/user')">个人中心</el-dropdown-item>
              <el-dropdown-item :icon="SwitchButton" @click="logOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :xl="2" :sm="3" class="notice">{{ time }}</el-col>
    </el-row>
    <!-- <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <div style="flex-grow: 1" />
      <el-menu-item index="1">Element Plus</el-menu-item>
      <el-sub-menu index="2">
        <template #title>Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu> -->
  </div>
</template>

<style scoped lang="scss">
.header {
  width: 100%;
  color: #fff;
  // background-color: rgba(18, 21, 39, 0.86);
  .el-menu-demo {
    color: #fff;
    background-color: rgba(18, 21, 39, 0.86);
  }
  .notice {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .d-flex {
    display: flex;
    align-items: center;
    .isCollapse {
      margin-right: 1rem;
      font-size: 1.35rem;
    }
  }
  .avatar {
    cursor: pointer;
    display: flex;
    align-items: center;
    span,
    .el-icon {
      color: #fff;
    }
    span {
      margin-left: 0.5rem;
    }
  }
}
</style>