duty-management-web/src/layout/header/head-com.vue

<template>
  <div class="head-com">
    <div class="head-com-left">
      <CusEllipsis :value="dutyPeopleCpt"/>
    </div>
    <div class="head-com-right">
      <img class="icon-date" src="@/assets/images/layout/head_icon-1.png">
      <div class="date">{{currentDateCpt}}</div>
      <img class="icon-user" src="@/assets/images/layout/head_icon-2.png">
      <div class="name">{{$store.state.app.userInfo?.displayName}}</div>
      <div class="dept">{{$store.state.app.userInfo?.dept?.organizationName}}</div>
      <div class="button __hover" @click="onLogout">退出</div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {toLogin} from "@/utils/permissions";
import {ElMessageBox} from "element-plus";

export default defineComponent({
  name: '',
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
    })
    const dutyPeopleCpt = computed(() => {
      let str = ''
      const dutyHallLeader = `值班厅领导：${store.state.app.dutyInfo?.dutyHallLeader ? store.state.dictionary.dutyHallLeaderMap.get(store.state.app.dutyInfo.dutyHallLeader) : '无'}`
      const totalClass = `总值班：${store.state.app.dutyInfo?.totalClass ? store.state.dictionary.totalClassMap.get(store.state.app.dutyInfo.totalClass) : '无'}`
      const shiftLeader = `带班领导：${store.state.app.dutyInfo?.shiftLeader ? store.state.dictionary.shiftLeaderMap.get(store.state.app.dutyInfo.shiftLeader) : '无'}`
      const dutyPerson = `值班员：${store.state.app.dutyInfo?.dutyPerson ? store.state.app.dutyInfo.dutyPerson.split(',').map(v => store.state.dictionary.dutyPersonMap.get(v)) : '无'}`
      str += `${dutyHallLeader}   ${totalClass}   ${shiftLeader}   ${dutyPerson}`
      return str
    })
    const currentDateCpt = computed(() => {
      let d = ''
      switch (new Date(store.state.app.timestamp).getDay()) {
        case 0: d = '星期日'
          break
        case 1: d = '星期一'
          break
        case 2: d = '星期二'
          break
        case 3: d = '星期三'
          break
        case 4: d = '星期四'
          break
        case 5: d = '星期五'
          break
        case 6: d = '星期六'
          break
      }
      return that.$util.YMDHms(store.state.app.timestamp) + ' ' + d
    })
    const onLogout = () => {
      ElMessageBox.confirm('请确认是否退出登录！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        that.$api.logout()
        toLogin()
      }).catch(() => {})
    }
    //  获取字典
    const initDictionary = () => {
      store.dispatch('dictionary/LOAD_DICT_LIST', 'duty_hall_leader')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'total_class')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'shift_leader')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'duty_person')
    }
    onMounted(() => {
      initDictionary()
      store.dispatch('app/LOAD_DUTY_INFO')
    })
    return {
      ...toRefs(state),
      dutyPeopleCpt,
      currentDateCpt,
      onLogout
    }
  },
})
</script>

<style scoped lang="scss">
  .head-com {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-top: 42px;
    box-sizing: border-box;
    background-image: url("@/assets/images/layout/head_bg.png");
    background-size: 100% 100%;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #2EB8FF;
    line-height: 20px;
    .head-com-left {
      width: 30%;
      margin-left: 30px;
      height: fit-content;
    }
    .head-com-right {
      margin-right: 30px;
      height: fit-content;
      display: flex;
      .icon-date, .icon-user {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        margin-top: 1px;
      }
      .date {
        margin-right: 16px;
      }
      .name {
        margin-right: 4px;
      }
      .dept {
        margin-right: 16px;
      }
      .button {
        background-image: url("@/assets/images/layout/head_exit.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 54px;
        height: 26px;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>