<template>
|
<Layout.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 v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
|
<LayoutMenu
|
:isHorizontal="true"
|
:theme="getHeaderTheme"
|
:splitType="getSplitType"
|
:menuMode="getMenuMode"
|
/>
|
</div>
|
<!-- menu-end -->
|
|
<!-- action -->
|
<div :class="`${prefixCls}-action`">
|
<AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
|
|
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
|
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
|
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
|
<AppLocalePicker
|
v-if="getShowLocalePicker"
|
:reload="true"
|
:showText="false"
|
:class="`${prefixCls}-action__item`"
|
/>
|
<div style="width: 120px">
|
<ApiSelect
|
:api="getProdTree"
|
style="width: 100%"
|
:params="{ userId: useUserStore().getUserInfo.userId }"
|
v-model:value="factory"
|
labelField="deptName"
|
valueField="deptCode"
|
placeholder="请选择工厂"
|
@change="changeProd"
|
/></div>
|
<UserDropDown :theme="getHeaderTheme" />
|
|
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
</div>
|
</Layout.Header>
|
</template>
|
<script lang="ts" setup>
|
import { Layout } from 'ant-design-vue';
|
import { computed, onMounted, ref, unref } from 'vue';
|
import { ApiSelect } from '/@/components/Form/index';
|
import { useUserStore } from '/@/store/modules/user';
|
import { AppLocalePicker, AppLogo, AppSearch } from '@/components/Application';
|
import { SettingButtonPositionEnum } from '@/enums/appEnum';
|
import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
|
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
|
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
|
import { useRootSetting } from '@/hooks/setting/useRootSetting';
|
import { useAppInject } from '@/hooks/web/useAppInject';
|
import { useDesign } from '@/hooks/web/useDesign';
|
import { useLocale } from '@/locales/useLocale';
|
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
|
import { propTypes } from '@/utils/propTypes';
|
import { ApiTreeSelect } from '@/components/Form';
|
import { getProdTree } from '/@/api/tigerapi/dept';
|
|
import LayoutMenu from '../menu/index.vue';
|
import LayoutTrigger from '../trigger/index.vue';
|
import { ErrorAction, FullScreen, LayoutBreadcrumb, Notify, UserDropDown } from './components';
|
import { SwitchOrgCode } from '/@/api/sys/user';
|
|
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
|
loading: true,
|
});
|
defineOptions({ name: 'LayoutHeader' });
|
|
const props = defineProps({
|
fixed: propTypes.bool,
|
});
|
const { prefixCls } = useDesign('layout-header');
|
const {
|
getShowTopMenu,
|
getShowHeaderTrigger,
|
getSplit,
|
getIsMixMode,
|
getMenuWidth,
|
getIsMixSidebar,
|
} = useMenuSetting();
|
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
const factory = ref(useUserStore().getUserInfo.prodCode);
|
const {
|
getHeaderTheme,
|
getShowFullScreen,
|
getShowNotice,
|
getShowContent,
|
getShowBread,
|
getShowHeaderLogo,
|
getShowHeader,
|
getShowSearch,
|
} = useHeaderSetting();
|
|
const { getShowLocalePicker } = useLocale();
|
|
const { getIsMobile } = useAppInject();
|
|
const getHeaderClass = computed(() => {
|
const theme = unref(getHeaderTheme);
|
return [
|
prefixCls,
|
{
|
[`${prefixCls}--fixed`]: props.fixed,
|
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
[`${prefixCls}--${theme}`]: theme,
|
},
|
];
|
});
|
|
const getShowSetting = computed(() => {
|
if (!unref(getShowSettingButton)) {
|
return false;
|
}
|
const settingButtonPosition = unref(getSettingButtonPosition);
|
|
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
|
return unref(getShowHeader);
|
}
|
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
|
});
|
|
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;
|
});
|
|
function changeProd(e) {
|
const userInfo = useUserStore().getToken;
|
const org = useUserStore().getUserInfo.prodCode;
|
// globSetting.useOrg == 'Y'
|
// ? useUserStore().getUserInfo.orgCode
|
// : useUserStore().getUserInfo.prodCode;
|
SwitchOrgCode(userInfo, '', e).then(() => {
|
if (org != e) {
|
location.reload();
|
}
|
});
|
}
|
</script>
|
<style lang="less">
|
@import url('./index.less');
|
</style>
|
