@utogether/udp-core 2.0.0-beta.26 → 2.0.0-beta.28

package/src/layout/components/lay-sidebar/mixNav.vue

@@ -1,261 +1,261 @@
-<script setup lang="ts">
-import { ref, watch, toRaw, onMounted, nextTick } from 'vue';
-import { storageLocal } from '@utogether/utils';
-import OrgSelect from '../lay-select-org/index.vue';
-import Search from '../lay-search/index.vue';
-// import Notice from '../lay-notice/index.vue';
-import extraIcon from './extraIcon.vue';
-import avatars from '../../../assets/images/avatars.jpg';
-import { transformI18n } from '../../../plugins/i18n';
-import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
-import { useEpThemeStoreHook } from '../../../store/modules/epTheme';
-import { getParentPaths, findRouteByPath } from '../../../router/utils';
-import { useNav } from '../../hooks/useNav';
-import { useTranslationLang } from '../../hooks/useTranslationLang';
-import { usePermissionStoreHook } from '../../../store/modules/permission';
-import globalization from '../../../assets/svg/globalization.svg?component';
-import { kSYSCONFIG } from '../../../contant';
-
-const menuRef = ref();
-const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
-
-const {
-  device,
-  logout,
-  onPanel,
-  toggleSideBar,
-  resolvePath,
-  appHook,
-  userInfo,
-  getDivStyle,
-  avatarsStyle,
-  getDropdownItemStyle,
-  getDropdownItemClass,
-  passwordItems
-} = useNav();
-
-const refScrollbar = ref(null);
-const defaultActive = ref(null);
-const record: IRecord = {};
-
-const showModal = ref(false);
-
-const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
-
-function getDefaultActive(routePath) {
-  const wholeMenus = usePermissionStoreHook().wholeMenus;
-  // 当前路由的父级路径
-  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
-  defaultActive.value = findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
-}
-
-onMounted(() => {
-  getDefaultActive(route.path);
-});
-
-nextTick(() => {
-  menuRef.value?.handleResize();
-});
-
-watch(
-  () => route.path,
-  () => {
-    getDefaultActive(route.path);
-  }
-);
-
-const handleResetPwd = (): void => {
-  record.id = userInfo['id'];
-  showModal.value = true;
-};
-
-const handleScroll = e => {
-  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
-  const scrollbar = refScrollbar.value;
-  // scrollbar.wrap$获取到包裹容器的element对象
-  scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft + wheelDelta);
-};
-</script>
-
-<template>
-  <div v-if="device !== 'mobile'" class="horizontal-header">
-    <div
-      :class="classes.container"
-      :title="appHook.sidebar.opened ? $t('message.udp.collapse') : $t('message.udp.expand')"
-      @click="toggleSideBar"
-    >
-      <svg
-        :fill="useEpThemeStoreHook().fill"
-        :class="['hamburger', appHook.sidebar.opened ? 'is-active-hamburger' : '']"
-        viewBox="0 0 1024 1024"
-        xmlns="http://www.w3.org/2000/svg"
-        width="64"
-        height="64"
-      >
-        <path
-          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-        />
-      </svg>
-    </div>
-
-    <el-scrollbar ref="refScrollbar" style="max-width: 66%" @wheel.prevent="handleScroll">
-      <template #default>
-        <el-menu
-          ref="menu"
-          :default-active="defaultActive"
-          :ellipsis="false"
-          class="horizontal-header-menu"
-          mode="horizontal"
-          router
-        >
-          <el-menu-item
-            v-for="route in usePermissionStoreHook().wholeMenus"
-            :key="route.path"
-            :index="resolvePath(route) || route.redirect"
-          >
-            <template #title>
-              <div v-if="toRaw(route.meta.icon)" :class="['sub-menu-icon', route.meta.icon]">
-                <component :is="useRenderIcon(route.meta && toRaw(route.meta.icon))" />
-              </div>
-              <!-- <span class="select-none">{{ transformI18n(route.meta.title) }}</span>
-              <FontIcon
-                v-if="route.meta.extraIcon"
-                width="30px"
-                height="30px"
-                style="position: absolute; right: 10px"
-                :icon="route.meta.extraIcon"
-                :svg="route.meta.extraIcon ? true : false"
-              /> -->
-              <div :style="getDivStyle">
-                <span class="select-none">
-                  {{ transformI18n(route.meta.title) }}
-                </span>
-                <extraIcon :extra-icon="route.meta.extraIcon" />
-              </div>
-            </template>
-          </el-menu-item>
-        </el-menu>
-      </template>
-    </el-scrollbar>
-    <div class="horizontal-header-right">
-      <!-- 业务单元选择 -->
-      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
-      <!-- 菜单搜索 -->
-      <Search />
-      <!-- 通知 -->
-      <!-- <Notice id="header-notice" /> -->
-      <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigger="click">
-        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
-              @click="translationCh"
-            >
-              <span v-show="locale === 'zh'" class="check-zh">
-                <IconifyIconOffline icon="ri:check-line" />
-              </span>
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
-              @click="translationEn"
-            >
-              <span v-show="locale === 'en'" class="check-en">
-                <IconifyIconOffline icon="ri:check-line" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 退出登陆 -->
-      <el-dropdown trigger="click">
-        <span class="select-none el-dropdown-link navbar-bg-hover">
-          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p class="dark:text-white">{{ userInfo.name }}</p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="logout">
-            <el-dropdown-item @click="handleResetPwd">
-              <IconifyIconOffline icon="ri:edit-2-fill" />
-              {{ $t('message.udp.passwordReset') }}
-            </el-dropdown-item>
-            <el-divider style="margin: 3px 0 !important" />
-            <el-dropdown-item @click="logout">
-              <IconifyIconOffline icon="switch-button" />
-              {{ $t('message.udp.logout') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <span class="el-icon-setting navbar-bg-hover" @click="onPanel">
-        <IconifyIconOffline icon="ri:settings-5-fill" />
-      </span>
-    </div>
-
-    <ut-modal-form
-      v-if="showModal"
-      :record="record"
-      :items="passwordItems()"
-      :width="360"
-      :height="240"
-      :title="$t('message.udp.passwordReset')"
-      data-status="update"
-      url="/uums/user/updatePwd"
-      method="put"
-      @close="showModal = false"
-      @confirm="logout()"
-    />
-  </div>
-</template>
-
-<style module="classes" scoped>
-.container {
-  padding: 0 15px;
-}
-</style>
-
-<style lang="scss" scoped>
-.hamburger {
-  width: 20px;
-  height: 20px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.is-active-hamburger {
-  transform: rotate(180deg);
-}
-
-.translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
-
-  .check-zh {
-    position: absolute;
-    left: 20px;
-  }
-
-  .check-en {
-    position: absolute;
-    left: 20px;
-  }
-}
-
-.logout {
-  max-width: 120px;
-
-  ::v-deep(.el-dropdown-menu__item) {
-    display: inline-flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-  }
-}
-</style>
+<script setup lang="ts">
+import { ref, watch, toRaw, onMounted, nextTick } from 'vue';
+import { storageLocal } from '@utogether/utils';
+import OrgSelect from '../lay-select-org/index.vue';
+import Search from '../lay-search/index.vue';
+// import Notice from '../lay-notice/index.vue';
+import extraIcon from './extraIcon.vue';
+import avatars from '../../../assets/images/avatars.jpg';
+import { transformI18n } from '../../../plugins/i18n';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+import { useEpThemeStoreHook } from '../../../store/modules/epTheme';
+import { getParentPaths, findRouteByPath } from '../../../router/utils';
+import { useNav } from '../../hooks/useNav';
+import { useTranslationLang } from '../../hooks/useTranslationLang';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+import globalization from '../../../assets/svg/globalization.svg?component';
+import { kSYSCONFIG } from '../../../contant';
+
+const menuRef = ref();
+const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
+
+const {
+  device,
+  logout,
+  onPanel,
+  toggleSideBar,
+  resolvePath,
+  appHook,
+  userInfo,
+  getDivStyle,
+  avatarsStyle,
+  getDropdownItemStyle,
+  getDropdownItemClass,
+  passwordItems
+} = useNav();
+
+const refScrollbar = ref(null);
+const defaultActive = ref(null);
+const record: IRecord = {};
+
+const showModal = ref(false);
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
+function getDefaultActive(routePath) {
+  const wholeMenus = usePermissionStoreHook().wholeMenus;
+  // 当前路由的父级路径
+  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
+  defaultActive.value = findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+});
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getDefaultActive(route.path);
+  }
+);
+
+const handleResetPwd = (): void => {
+  record.id = userInfo['id'];
+  showModal.value = true;
+};
+
+const handleScroll = e => {
+  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
+  const scrollbar = refScrollbar.value;
+  // scrollbar.wrap$获取到包裹容器的element对象
+  scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft + wheelDelta);
+};
+</script>
+
+<template>
+  <div v-if="device !== 'mobile'" class="horizontal-header">
+    <div
+      :class="classes.container"
+      :title="appHook.sidebar.opened ? $t('message.udp.collapse') : $t('message.udp.expand')"
+      @click="toggleSideBar"
+    >
+      <svg
+        :fill="useEpThemeStoreHook().fill"
+        :class="['hamburger', appHook.sidebar.opened ? 'is-active-hamburger' : '']"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+        />
+      </svg>
+    </div>
+
+    <el-scrollbar ref="refScrollbar" style="max-width: 66%" @wheel.prevent="handleScroll">
+      <template #default>
+        <el-menu
+          ref="menu"
+          :default-active="defaultActive"
+          :ellipsis="false"
+          class="horizontal-header-menu"
+          mode="horizontal"
+          router
+        >
+          <el-menu-item
+            v-for="route in usePermissionStoreHook().wholeMenus"
+            :key="route.path"
+            :index="resolvePath(route) || route.redirect"
+          >
+            <template #title>
+              <div v-if="toRaw(route.meta.icon)" :class="['sub-menu-icon', route.meta.icon]">
+                <component :is="useRenderIcon(route.meta && toRaw(route.meta.icon))" />
+              </div>
+              <!-- <span class="select-none">{{ transformI18n(route.meta.title) }}</span>
+              <FontIcon
+                v-if="route.meta.extraIcon"
+                width="30px"
+                height="30px"
+                style="position: absolute; right: 10px"
+                :icon="route.meta.extraIcon"
+                :svg="route.meta.extraIcon ? true : false"
+              /> -->
+              <div :style="getDivStyle">
+                <span class="select-none">
+                  {{ transformI18n(route.meta.title) }}
+                </span>
+                <extraIcon :extra-icon="route.meta.extraIcon" />
+              </div>
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </template>
+    </el-scrollbar>
+    <div class="horizontal-header-right">
+      <!-- 业务单元选择 -->
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <!-- <Notice id="header-notice" /> -->
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" trigger="click">
+        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <span v-show="locale === 'zh'" class="check-zh">
+                <IconifyIconOffline icon="ri:check-line" />
+              </span>
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline icon="ri:check-line" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 退出登陆 -->
+      <el-dropdown trigger="click">
+        <span class="select-none el-dropdown-link navbar-bg-hover">
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p class="dark:text-white">{{ userInfo.name }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <el-dropdown-item @click="handleResetPwd">
+              <IconifyIconOffline icon="ri:edit-2-fill" />
+              {{ $t('message.udp.passwordReset') }}
+            </el-dropdown-item>
+            <el-divider style="margin: 3px 0 !important" />
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline icon="switch-button" />
+              {{ $t('message.udp.logout') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span class="el-icon-setting navbar-bg-hover" @click="onPanel">
+        <IconifyIconOffline icon="ri:settings-5-fill" />
+      </span>
+    </div>
+
+    <ut-modal-form
+      v-if="showModal"
+      :record="record"
+      :items="passwordItems()"
+      :width="360"
+      :height="240"
+      :title="$t('message.udp.passwordReset')"
+      data-status="update"
+      url="/uums/user/updatePwd"
+      method="put"
+      @close="showModal = false"
+      @confirm="logout()"
+    />
+  </div>
+</template>
+
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
+
+<style lang="scss" scoped>
+.hamburger {
+  width: 20px;
+  height: 20px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.is-active-hamburger {
+  transform: rotate(180deg);
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+
+.logout {
+  max-width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>