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

<template>
  <div>
    <img src="../../assets/images/logoHeader.png" />
    <span>深圳市多元世纪信息技术股份有限公司</span>
  </div>
  <div class="m-layout-header-right">
    <div @click="openDrawer">
      <span>{{ username }}，您好！</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">
        <svg class="icon svg-icon"
             aria-hidden="true">
          <use xlink:href="#icon-xiaoxi"></use>
        </svg>
      </a-badge>
    </div>
    <div>
      <a-popover v-model:visible="visible"
                 trigger="click"
                 placement="bottomRight">
        <template #content>
          <div v-for="item in setMenu"
               @click="chooseSetMenu(item.path)"
               :key="item.path">{{ item.name }}</div>
        </template>
        <a-avatar :size="24">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-popover>
      <Setting />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import APP from '@/services';
import { openModal } from '@/common/setup/modal/index';
import { UserOutlined } from '@ant-design/icons-vue';
import Setting from '@/views/setting/index.vue';

// 设置
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' },
    ];
    const { openAction } = openModal('logout');
    function chooseSetMenu(path: string) {
        // chooseSetupItem.value = path;
        openAction();
        console.log(path);
        visible.value = false;
    }

    return { visible, setMenu, chooseSetMenu };
};

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