vue-vben-admin学习day2

在顶部导航栏处添加下拉框

<template>
  <Header :class="getHeaderClass">
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <AppLogo
        v-if="getShowHeaderLogo || getIsMobile"
        :class="`${prefixCls}-logo`"
        :theme="getHeaderTheme"
        :style="getLogoWidth"
      />
      <LayoutTrigger
        v-if="
          (getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
        "
        :theme="getHeaderTheme"
        :sider="false"
      />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu
        :isHorizontal="true"
        :theme="getHeaderTheme"
        :splitType="getSplitType"
        :menuMode="getMenuMode"
      />
    </div>
    <!-- action  -->
    <div :class="`${prefixCls}-action`" style="flex: 1; justify-content: flex-end">
      <!-- <Notify
        v-if="getShowNotice"
        @view-message="viewMessage"
        :class="`${prefixCls}-action__item notify-item`"
        title="消息"
        style="margin-right: 10px; margin-left: 15px"
      /> -->
      <span><label class="select-label">切换</label> </span>
      <Select
        :disabled="deptItemDisabled"
        :options="deptList"
        style="min-width: 150px"
        placeholder="请选择"
        @change="onChangeDept"
        :allowClear="false"
        :fieldNames="{ label: 'name', value: 'id' }"
      />
      <AppLocalePicker
        v-if="getShowLocalePicker"
        :reload="true"
        :showText="false"
        :class="`${prefixCls}-action__item`"
      />
      <UserDropDown :theme="getHeaderTheme" />
    </div>
  </Header>
  <div ref="modal">
    <BasicModal
      @register="register"
      title="消息详情"
      width="50%"
      :canFullscreen="false"
      :draggable="false"
      :showOkBtn="false"
      :getContainer="() => $refs.modal"
    >
      <template #title>
        <div>
          <ContainerOutlined />
          消息详情
        </div>
      </template>
      <View :message-id="messageId" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, computed, ref } from 'vue';

  import { propTypes } from '/@/utils/propTypes';

  import { Layout, Select } from 'ant-design-vue';
  import { AppLogo, AppLocalePicker } from '/@/components/Application';
  import LayoutMenu from '../menu/index.vue';
  import LayoutTrigger from '../trigger/index.vue';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';

  import { Notify, UserDropDown, LayoutBreadcrumb } from './components';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useModal, BasicModal } from '/@/components/Modal';
  import { ContainerOutlined } from '@ant-design/icons-vue';
  import View from '/@/views/siteMessage/View.vue';
  import { useLocale } from '/@/locales/useLocale';

  export default defineComponent({
    name: 'LayoutHeader',
    components: {
      Select,
      SelectItem: Select.Item,
      Header: Layout.Header,
      AppLogo,
      LayoutTrigger,
      LayoutBreadcrumb,
      LayoutMenu,
      UserDropDown,
      ContainerOutlined,
      BasicModal,
      View,
      Notify,
      AppLocalePicker,
    },
    props: {
      fixed: propTypes.bool,
    },
    setup(props) {
      const selectedOption = ref('');
      const deptItemDisabled = ref(false);
      const deptList = ref([
        { id: '1', name: '部门1' },
        { id: '2', name: '部门2' },
      ]);

      const onChangeDept = (_value, option) => {
        console.log('Selected department:', option);
        // Update state or trigger related actions
      };
      const { prefixCls } = useDesign('layout-header');
      const {
        getShowTopMenu,
        getShowHeaderTrigger,
        getSplit,
        getIsMixMode,
        getMenuWidth,
        getIsMixSidebar,
      } = useMenuSetting();

      const { getHeaderTheme, getShowNotice, getShowContent, getShowBread, getShowHeaderLogo } =
        useHeaderSetting();

      const { getIsMobile } = useAppInject();

      const getHeaderClass = computed(() => {
        const theme = unref(getHeaderTheme);
        return [
          prefixCls,
          {
            [`${prefixCls}--fixed`]: props.fixed,
            [`${prefixCls}--mobile`]: unref(getIsMobile),
            [`${prefixCls}--${theme}`]: theme,
          },
        ];
      });

      const getLogoWidth = computed(() => {
        if (!unref(getIsMixMode) || unref(getIsMobile)) {
          return {};
        }
        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
        return { width: `${width}px` };
      });

      const getSplitType = computed(() => {
        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
      });

      const getMenuMode = computed(() => {
        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
      });

      const messageId = ref('');
      const [register, { openModal }] = useModal();

      const { getShowLocalePicker } = useLocale();

      return {
        prefixCls,
        getHeaderClass,
        getShowHeaderLogo,
        getHeaderTheme,
        getShowHeaderTrigger,
        getIsMobile,
        getShowBread,
        getShowContent,
        getSplitType,
        getSplit,
        getMenuMode,
        getShowTopMenu,
        getShowNotice,
        getLogoWidth,
        getIsMixSidebar,
        messageId,
        register,
        openModal,
        getShowLocalePicker,
        selectedOption,
        deptItemDisabled,
        deptList,
        onChangeDept,
      };
    },
    methods: {
      viewMessage(messageId) {
        this.messageId = messageId;
        this.openModal();
      },
    },
  });
</script>
<style lang="less">
  @import './index.less';

  .custom-tag-style {
    background-color: #ffffff !important;
    color: #0960bd !important;
    border: 2px solid #0960bd !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    margin: 0 auto !important;
  }

  .select-label {
    color: black;
    margin-right: 10px;
  }

  .custom-icon-style {
    color: #0960bd !important;
    padding: 0 !important;
  }
</style>