From 44ef538691b8be0fd925ca80c49157bad14962e8 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 06 七月 2024 22:01:26 +0800
Subject: [PATCH] 一些优化
---
src/layouts/default/header/index.vue | 263 ++++++++++++++++++++++++----------------------------
1 files changed, 120 insertions(+), 143 deletions(-)
diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue
index 7140c85..9885ee6 100644
--- a/src/layouts/default/header/index.vue
+++ b/src/layouts/default/header/index.vue
@@ -1,5 +1,5 @@
<template>
- <Header :class="getHeaderClass">
+ <Layout.Header :class="getHeaderClass">
<!-- left start -->
<div :class="`${prefixCls}-left`">
<!-- logo -->
@@ -21,7 +21,7 @@
<!-- left end -->
<!-- menu start -->
- <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+ <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
<LayoutMenu
:isHorizontal="true"
:theme="getHeaderTheme"
@@ -33,7 +33,7 @@
<!-- action -->
<div :class="`${prefixCls}-action`">
- <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+ <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
@@ -47,156 +47,133 @@
:showText="false"
:class="`${prefixCls}-action__item`"
/>
- <AppDept class="dept"/>
-
+ <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>
- </Header>
+ </Layout.Header>
</template>
-<script lang="ts">
- import { defineComponent, unref, computed } from 'vue';
-
- import { propTypes } from '/@/utils/propTypes';
-
+<script lang="ts" setup>
import { Layout } from 'ant-design-vue';
- import { AppLogo } from '/@/components/Application';
+ 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';
- import { AppSearch } from '/@/components/Application';
-
- import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
- import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
- import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-
- import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
- import { SettingButtonPositionEnum } from '/@/enums/appEnum';
- import { AppLocalePicker } from '/@/components/Application';
-
- import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction,AppDept } from './components';
- import { useAppInject } from '/@/hooks/web/useAppInject';
- import { useDesign } from '/@/hooks/web/useDesign';
-
- import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
- import { useLocale } from '/@/locales/useLocale';
-
- export default defineComponent({
- name: 'LayoutHeader',
- components: {
- Header: Layout.Header,
- AppLogo,
- LayoutTrigger,
- LayoutBreadcrumb,
- LayoutMenu,
- UserDropDown,
- AppLocalePicker,
- FullScreen,
- Notify,
- AppSearch,
- ErrorAction,
- AppDept,
- SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
- loading: true,
- }),
- },
- props: {
- fixed: propTypes.bool,
- },
- setup(props) {
- const { prefixCls } = useDesign('layout-header');
- const {
- getShowTopMenu,
- getShowHeaderTrigger,
- getSplit,
- getIsMixMode,
- getMenuWidth,
- getIsMixSidebar,
- } = useMenuSetting();
- const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
- useRootSetting();
-
- 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;
- });
-
- return {
- prefixCls,
- getHeaderClass,
- getShowHeaderLogo,
- getHeaderTheme,
- getShowHeaderTrigger,
- getIsMobile,
- getShowBread,
- getShowContent,
- getSplitType,
- getSplit,
- getMenuMode,
- getShowTopMenu,
- getShowLocalePicker,
- getShowFullScreen,
- getShowNotice,
- getUseErrorHandle,
- getLogoWidth,
- getIsMixSidebar,
- getShowSettingButton,
- getShowSetting,
- getShowSearch,
- };
- },
+ 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');
--
Gitblit v1.9.3