ocr-web/src/layout/components/Header/UserSettings.vue

<script lang="ts" setup>
import { computed, inject, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUser } from '@/store/modules/user'
import { getImgUrl } from '@/utils/urlUtils'
import defaultAvatar from '@/assets/icons/avatar.svg'

const emit = defineEmits<{
  (e: 'logout'): void
}>()

const router = useRouter()

const userStore = useUser()

const useInfo = userStore.getUserInfo

const aiDisabled = ref(false)

function handleSelect(row) {
  userStore.updateTenantId(row.key)
  location.reload()
}

function logIt(e) {
  return false
}

// 一键查看
function goHome(e) {
  router.push({ name: 'home' })
}

// 任务审批
function goTask(e) {
  router.push({ name: 'task-main' })
}

// AI工单
function goWorksheet(e) {
  router.push({ name: 'worksheet-main' })
}

// 任务终审
function goFinal(e) {
  router.push({ name: 'final-main' })
}

const mousetrap = inject('mousetrap') as any
onMounted(() => {
  mousetrap.bind('g h', goHome)
  mousetrap.bind('g t', goTask)
  mousetrap.bind('g a', goWorksheet)
  mousetrap.bind('g e', goFinal)
})

const showPopover = ref(false)
const popRef = ref(null)
const changeFlag = ref(false)

const iconName = computed(() => {
  return showPopover.value ? 'expand' : 'collapse'
})

function handleUpdateShow(show: boolean) {
  showPopover.value = show
}

function logOut() {
  (popRef.value as any).setShow(false)
  emit('logout')
}

const currentCompanyName = computed(() => {
  const deptlist = useInfo.deptlist
  const currentId = userStore.getTenantId
  const current = deptlist.find(item => item.id === currentId)
  return current.name || 'name'
})

const options = computed(() => {
  const deptlist = useInfo.deptlist
  return deptlist.map((item) => {
    return {
      label: item.departname,
      key: item.deptno,
    }
  })
})
</script>

<template>
  <n-popover
    ref="popRef"
    style="border-radius: 10px"
    placement="bottom-end"
    raw
    :show-arrow="false"
    trigger="click"
    @update:show="handleUpdateShow"
  >
    <template #trigger>
      <div class="setting">
        <span style="color: #333333">{{ useInfo.username }}</span>
        <SvgIcon style="margin-left: 6px" :name="iconName" size="16" />
      </div>
    </template>
    <div class="container">
      <div class="header">
        <n-avatar
          :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatar"
          round
          style="width: 53px; height: 53px"
        />
        <div style="margin-left: 12px">
          <span style="display: block" class="user-name">{{ useInfo.username }}</span>
          <span style="display: block" class="depart-name">{{ useInfo.departname }}</span>
        </div>
      </div>
      <div class="trigger">
        <span>{{ currentCompanyName }}</span>
        <span style="cursor: pointer" @click="changeFlag = !changeFlag"><SvgIcon name="switchCompany" size="24" /></span>
      </div>
      <div class="item">
        <span>AI设置开关</span>
        <n-switch v-model:value="aiDisabled" />
      </div>
      <div class="trigger">
        联系我们
      </div>
      <n-divider style="margin-top: 0px; margin-bottom: 10px; padding: 0 22px" />
      <div class="trigger" @click="logOut">
        退出登录
      </div>
      <div
        v-show="changeFlag"
        class="container sub-container"
        style="position: absolute; right: 17vw; width: 11.5vw; padding: 24px 0"
      >
        <div
          v-for="option in options"
          :key="option.key"
          class="trigger"
          @click="handleSelect(option)"
        >
          {{ option.label }}
        </div>
      </div>
    </div>
  </n-popover>
</template>

<style lang="less" scoped>
.container {
  .header {
    .user-name {
      font-size: 16px;
    }
    .depart-name {
      font-size: 12px;
    }
  }
}
.setting {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.container {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  justify-content: center;
  background-color: #ffffff;
  width: 16vw;
  position: relative;

  .header {
    border-radius: 10px 10px 0px 0px;
    background: linear-gradient(122deg, #4867ff 5%, #a0b3ff 100%);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    color: #ffffff;
    height: 80px;
  }

  .trigger,
  .item {
    display: flex;
    justify-content: space-between;
    padding: 13px 20px;
    cursor: pointer;
    color: #333333;
  }

  .trigger:hover {
    background-color: #e8f2ff;
  }
}

::v-deep(.n-dropdown-option) {
  color: lime;
  background: red;
}

::v-deep(.n-dropdown-option-body__label) {
  color: lime;
}
</style>