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

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

  <div v-if="isOemByEnum(OemType.manager)">
    <img src="../../assets/images/logoHeader.png" />
    <span>{{getCompanyName()}}</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>{{getCompanyName()}}</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"
                          placeholder="请输入代码/名称"
                          @pressEnter="search">
                          readonly
            </a-input-search>-->
      <!-- <a-icon type="search" /> -->
    </div>
    <div v-if="isOemByEnum(OemType.wrspot)">
      <a-popover trigger="click"
                 placement="bottom"
                 overlayClassName="friendPopover">
        <template #content>
          <Friend />
        </template>
        <span class="friendIcon">
          <svg class="icon svg-icon"
               aria-hidden="true">
            <use xlink:href="#icon-pengyou1" />
          </svg>
        </span>
      </a-popover>
    </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-yonghu1" />
                        </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, SettingFilled } from '@ant-design/icons-vue';
import Setting from '@/views/setting/index.vue';
import { getUserName, getCompanyName } 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';
import { initData } from '@/common/methods';
import Friend from '@/views/setting/friends/index.vue';

// 设置
const setFn = () => {
    const visible = ref<boolean>(false);
    const chooseSetupItem = ref<string>('');
    provide('ControlModal', chooseSetupItem);
    const setMenu = ref([{ name: '退出', path: 'logout' }]);
    // const setMenu = [
    //     // { name: '修改密码', path: 'password' },
    //     // { name: '收货地址', path: 'addresss' },
    //     // // {name: '发票', path: 'setup-password'},
    //     // { name: '手机号码绑定/解绑', path: 'phone' },
    //     // { name: '关于我们', path: 'aboutUs' },
    //     { name: '白主题', path: ThemeEnum.light },
    //     { name: '黑主题', path: ThemeEnum.dark },
    //     { name: '退出', path: 'logout' },
    // ];
    initData(() => {
        if (isOemByEnum(OemType.wrspot)) {
            const theme = [
                { name: '白主题', path: ThemeEnum.light },
                { name: '黑主题', path: ThemeEnum.dark },
            ];
            setMenu.value = [...theme, ...setMenu.value];
        }
    });
    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,
        Friend,
        SettingFilled,
    },
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup() {
        const { openAction: openNotice } = openModal('notice');
        const { getUnReadNoticeLength } = handleNotice();
        return {
            openNotice,
            getUserName,
            getUnReadNoticeLength,
            ...setFn(),
            ...onSearch(),
            isOemByEnum,
            OemType,
            getCompanyName,
        };
    },
});
</script>
<style lang="less">
.friendIcon {
    .icon {
        font-size: 20px;
        line-height: 32px;
        margin: 6px 5px;
    }
}
</style>