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";

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 tenantList = useInfo.tenantList;
  const currentId = userStore.getTenantId;
  const current = tenantList.find((item) => item.id === currentId);
  return current.name || "name";
});

const options = computed(() => {
  const tenantList = useInfo.tenantList;
  return tenantList.map((item) => {
    return {
      label: item.name,
      key: item.id,
    };
  });
});
</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>{{ useInfo.username }}</span>
        <SvgIcon style="margin-left: 6px" :name="iconName" size="14" />
      </div>
    </template>
    <div class="container">
      <div class="header">
        <n-avatar
          :src="getImgUrl(useInfo.usericon)"
          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 @click="changeFlag = !changeFlag" style="cursor: pointer">icon</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
        class="container sub-container"
        v-show="changeFlag"
        style="position: absolute; right: 17vw; width: 11.5vw; padding: 24px 0"
      >
        <div
          class="trigger"
          v-for="option in options"
          :key="option.key"
          @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>