MTP2.0_WEB/src/layout/components/header.vue

<template>
  <!-- 风险管理 -->

  <div v-if="isOemByEnum(OemType.manager)">
    <img src="../../assets/images/logoHeader.png" />
    <span>深圳市多元世纪信息技术股份有限公司</span>
  </div>
  <!-- 云融 -->

  <div v-else-if="isOemByEnum(OemType.wrspot)">
    <img src="../../assets/images/headLogo.jpg" />
    <span>云融</span>
  </div>
  <div v-else>
    <img src="../../assets/images/logoHeader.png" />
    <span>深圳市多元世纪信息技术股份有限公司</span>
  </div>
  <div class="m-layout-header-right">
    <div @click="openDrawer">
      <span>{{ getUserName() }}，您好！</span>
    </div>
    <div class="relative">
      <!-- <a-input-search ref="userNameInput"
                          class="searchInput"
                          readonly
                          placeholder="请输入代码/名称"
                          @pressEnter="search">
            </a-input-search>-->
      <!-- <a-icon type="search" /> -->
    </div>
    <div class="news-container">
      <a-badge @click="openNotice"
               :dot="getUnReadNoticeLength() > 0">
        <svg class="icon svg-icon"
             aria-hidden="true">
          <use xlink:href="#icon-xiaoxi" />
        </svg>
      </a-badge>
    </div>
    <div>
      <a-popover v-model:visible="visible"
                 trigger="click"
                 placement="bottomRight">
        <template #content>
          <div v-for="item in setMenu"
               class="popItem"
               @click="chooseSetMenu(item.path)"
               :key="item.path">{{ item.name }}</div>
        </template>
        <a-avatar :size="24">
          <template #icon>
            <!-- <SettingFilled /> -->
            <svg class="icon svg-icon"
                 aria-hidden="true">
              <use xlink:href="#icon-yonghu4" />
            </svg>
          </template>
        </a-avatar>
      </a-popover>
      <Setting />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import { openModal } from '@/common/setup/modal/index';
import { UserOutlined } from '@ant-design/icons-vue';
import Setting from '@/views/setting/index.vue';
import { getUserName } from '@/services/bus/user';
import { logout } from '@/services/bus/login';
import APP from '@/services';
import Router from '@/router';
import { handleNotice } from '@/views/setting/notice/setup';
import { isOemByEnum, OemType } from '@/common/config/projectName';
import { changeTheme, ThemeEnum } from '@/common/config/theme';

// 设置
const setFn = () => {
    const visible = ref<boolean>(false);
    const chooseSetupItem = ref<string>('');
    provide('ControlModal', chooseSetupItem);
    const setMenu = [
        // { name: '修改密码', path: 'password' },
        // { name: '收货地址', path: 'addresss' },
        // // {name: '发票', path: 'setup-password'},
        // { name: '手机号码绑定/解绑', path: 'phone' },
        // { name: '关于我们', path: 'aboutUs' },
        { name: '退出', path: 'logout' },
        // { name: '白主题', path: ThemeEnum.light },
        // { name: '黑主题', path: ThemeEnum.dark },
    ];
    const { openAction } = openModal('logout');
    function chooseSetMenu(path: string) {
        if (path === 'logout') {
            logout();
            APP.closeServer();
            Router.replace('/login');
        } else {
            changeTheme(path as ThemeEnum);
            // openAction();
        }
        visible.value = false;
    }

    return { visible, setMenu, chooseSetMenu };
};

// 搜索
const onSearch = () => {
    function search(value: string) {}
    return { search };
};
export default defineComponent({
    components: {
        UserOutlined,
        Setting,
    },
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup() {
        const { openAction: openNotice } = openModal('notice');
        const { getUnReadNoticeLength } = handleNotice();
        return {
            openNotice,
            getUserName,
            getUnReadNoticeLength,
            ...setFn(),
            ...onSearch(),
            isOemByEnum,
            OemType,
        };
    },
});
</script>