@utogether/udp-core 1.0.0

package/src/layout/components/lay-search/components/SearchFooter.vue

@@ -0,0 +1,67 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-10 11:26:15
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-28 13:51:52
+ * @Description: 搜索底部
+-->
+<template>
+  <div class="search-footer text-[#333] dark:text-white">
+    <span class="search-footer-item">
+      <enterOutlined class="icon" />
+      {{ $t('message.btn.confirm') }}
+    </span>
+    <span class="search-footer-item">
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
+      {{ $t('message.btn.toggle') }}
+    </span>
+    <span class="search-footer-item">
+      <mdiKeyboardEsc class="icon" />
+      {{ $t('message.btn.close') }}
+    </span>
+    <p v-if="device !== 'mobile' && props.total > 0" class="search-footer-total">
+      共{{ props.total }}项
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useNav } from '../../../hooks/useNav';
+import enterOutlined from '../../../../assets/svg/enter_outlined.svg?component';
+import mdiKeyboardEsc from '../../../../assets/svg/mdi_keyboard_esc.svg?component';
+import ArrowUpLine from '@iconify-icons/ri/arrow-up-line';
+import ArrowDownLine from '@iconify-icons/ri/arrow-down-line';
+
+const props = withDefaults(defineProps<{ total: number }>(), {
+  total: 0
+});
+
+const { device } = useNav();
+</script>
+<style lang="scss" scoped>
+.search-footer {
+  display: flex;
+
+  .search-footer-item {
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+  }
+
+  .icon {
+    padding: 2px;
+    margin-right: 3px;
+    font-size: 20px;
+    box-shadow:
+      inset 0 -2px #cdcde6,
+      inset 0 0 1px 1px #fff,
+      0 1px 2px 1px #1e235a66;
+  }
+
+  .search-footer-total {
+    position: absolute;
+    right: 20px;
+  }
+}
+</style>

package/src/layout/components/lay-search/components/SearchModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-dialog
+    v-model="show"
+    class="udp-search-dialog"
+    top="5vh"
+    append-to-body
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
+    :style="{
+      borderRadius: '6px'
+    }"
+    :title="$t('message.udp.menuQuery')"
+    :before-close="handleClose"
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
+  >
+    <el-input
+      ref="inputRef"
+      v-model="keyword"
+      :placeholder="$t('message.udp.menuQuery')"
+      size="large"
+      clearable
+      @input="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIconOffline :icon="Search" class="text-primary w-[24px] h-[24px]" />
+      </template>
+    </el-input>
+    <div class="search-result-container">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty v-if="resultOptions.length === 0" :description="$t('message.emptyData')" />
+        <SearchResult
+          v-else
+          ref="resultRef"
+          v-model:value="activePath"
+          :options="resultOptions"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <SearchFooter :total="resultOptions.length" />
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, watch, computed, nextTick, shallowRef } from 'vue';
+import { useDebounceFn, onKeyStroke } from '@vueuse/core';
+import { useRouter } from 'vue-router';
+import { clone } from 'xe-utils';
+import SearchResult from './SearchResult.vue';
+import SearchFooter from './SearchFooter.vue';
+import { useNav } from '../../../hooks/useNav';
+import { transformI18n } from '../../../../plugins/i18n';
+import { usePermissionStoreHook } from '../../../../store/modules/permission';
+import Search from '@iconify-icons/ri/search-line';
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: 'update:value', val: boolean): void;
+}
+
+const { device } = useNav();
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+const router = useRouter();
+
+const keyword = ref('');
+const activePath = ref('');
+const scrollbarRef = ref();
+const resultRef = ref();
+const inputRef = ref<HTMLInputElement | null>(null);
+const resultOptions = shallowRef([]);
+const handleSearch = useDebounceFn(search, 300);
+
+/** 菜单树形结构 */
+const menusData = computed(() => {
+  return clone(usePermissionStoreHook().wholeMenus);
+});
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit('update:value', val);
+  }
+});
+
+watch(show, async val => {
+  if (val) {
+    /** 自动聚焦 */
+    await nextTick();
+    inputRef.value?.focus();
+  }
+});
+
+/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
+function flatTree(arr) {
+  const res = [];
+  function deep(arr) {
+    arr.forEach(item => {
+      res.push(item);
+      item.children && deep(item.children);
+    });
+  }
+  deep(arr);
+  return res;
+}
+
+/** 查询 */
+function search() {
+  const flatMenusData = flatTree(menusData.value);
+  resultOptions.value = flatMenusData.filter(
+    menu =>
+      keyword.value &&
+      transformI18n(menu.meta?.title)
+        .toLocaleLowerCase()
+        .includes(keyword.value.toLocaleLowerCase().trim())
+  );
+  if (resultOptions.value?.length > 0) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = '';
+  }
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    keyword.value = '';
+  }, 200);
+}
+
+function scrollTo(index) {
+  const scrollTop = resultRef.value.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
+/** key up */
+function handleUp() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index === 0) {
+    activePath.value = resultOptions.value[length - 1].path;
+    scrollTo(resultOptions.value.length - 1);
+  } else {
+    activePath.value = resultOptions.value[index - 1].path;
+    scrollTo(index - 1);
+  }
+}
+
+/** key down */
+function handleDown() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index + 1 === length) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = resultOptions.value[index + 1].path;
+  }
+}
+
+/** key enter */
+function handleEnter() {
+  const { length } = resultOptions.value;
+  if (length === 0 || activePath.value === '') return;
+  router.push(activePath.value);
+  handleClose();
+}
+
+onKeyStroke('Enter', handleEnter);
+onKeyStroke('ArrowUp', handleUp);
+onKeyStroke('ArrowDown', handleDown);
+</script>
+
+<style lang="scss" scoped>
+.search-result-container {
+  margin-top: 12px;
+}
+</style>

package/src/layout/components/lay-search/components/SearchResult.vue

@@ -0,0 +1,132 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-10 11:26:15
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-03-10 11:34:25
+ * @Description: 菜单搜索结果页
+-->
+<template>
+  <div ref="resultRef" class="result">
+    <div
+      v-for="(item, index) in options"
+      :key="item.path"
+      :ref="'resultItemRef' + index"
+      class="result-item dark:bg-[#1d1d1d]"
+      :style="itemStyle(item)"
+      @click="handleTo"
+      @mouseenter="handleMouse(item)"
+    >
+      <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
+      <span class="result-item-title">{{ $t(item.meta?.title) }}</span>
+      <enterOutlined />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { ref, computed, getCurrentInstance, onMounted } from 'vue';
+import { useEpThemeStoreHook } from '../../../../store/modules/epTheme';
+import { useRenderIcon } from '../../../../components/ReIcon/src/hooks';
+import enterOutlined from '../../../../assets/svg/enter_outlined.svg?component';
+import Bookmark2Line from '@iconify-icons/ri/bookmark-2-line';
+
+interface optionsItem {
+  path: string;
+  meta?: {
+    icon?: string;
+    title?: string;
+  };
+}
+
+interface Props {
+  value: string;
+  options: Array<optionsItem>;
+}
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+  (e: 'enter'): void;
+}
+
+const resultRef = ref();
+const innerHeight = ref();
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits<Emits>();
+
+const instance = getCurrentInstance()!;
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background: item?.path === active.value ? useEpThemeStoreHook().epThemeColor : '',
+      color: item.path === active.value ? '#fff' : '',
+      fontSize: item.path === active.value ? '16px' : '14px'
+    };
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  active.value = item.path;
+}
+
+function handleTo() {
+  emit('enter');
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, () => {
+  resizeResult();
+});
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = curInstance[0] as ElRef;
+  const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+onMounted(() => {
+  resizeResult();
+});
+
+defineExpose({ handleScroll });
+</script>
+<style lang="scss" scoped>
+.result {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin-top: 8px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &-title {
+      display: flex;
+      flex: 1;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

package/src/layout/components/lay-search/components/index.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-03-10 11:26:15
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-03-10 11:34:09
+ * @Description: file content
+ */
+import SearchModal from './SearchModal.vue';
+
+export { SearchModal };

package/src/layout/components/lay-search/index.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-03-10 11:26:15
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-10-12 11:43:49
+ * @Description: 菜单栏搜索
+-->
+<script lang="ts" setup>
+import { SearchModal } from './components';
+import { useBoolean } from '../../hooks/useBoolean';
+const { bool: show, toggle } = useBoolean();
+function handleSearch() {
+  toggle();
+}
+</script>
+
+<template>
+  <div
+    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+    @click="handleSearch"
+  >
+    <IconifyIconOffline icon="ri:search-line" />
+  </div>
+  <SearchModal v-model:value="show" />
+</template>

package/src/layout/components/lay-select-org/index.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-27 16:16:11
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 14:27:14
+ * @Description: file content
+-->
+
+<!-- 业务单元选择 -->
+<template>
+  <div style="width: 240px">
+    <el-select v-model="orgId" size="small" @change="onChange">
+      <el-option
+        v-for="element in orgList"
+        :key="element.id"
+        :label="element.orgName"
+        :value="element.id"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts">
+export default { name: 'OrgSelect' };
+</script>
+
+<script setup lang="ts">
+import { unref, computed } from 'vue';
+import to from 'await-to-js';
+import { getServiceApi } from '../../../api';
+import { useRoute, useRouter } from 'vue-router';
+import { cookies } from '@utogether/utils';
+import { useSystemStoreHook } from '../../../store/modules/system';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+
+const route = useRoute();
+const router = useRouter();
+const orgList = computed(() => useSystemStoreHook().getOrglist);
+const orgId = computed(() => useSystemStoreHook().getOrgId);
+
+const onChange = async orgId => {
+  const [err] = await to(getServiceApi().post('/uums/org/toggle', { orgId }));
+  if (!err) {
+    useSystemStoreHook().setOrgId(orgId);
+    let organizationId;
+    const query = { pageSize: 100, pageNum: 1 };
+    const [err, data]: [Error, any] = await to(getServiceApi().get('/uums/cusOrganization', query));
+    if (!err && data.list?.length) {
+      useSystemStoreHook().setInvOrgList(data.list || []);
+      const invOrg = data.list.find(f => f.orgId === orgId);
+      organizationId = invOrg.id;
+      useSystemStoreHook().setOrganizationId(organizationId);
+    }
+    const param = { orgId, organizationId };
+    cookies.set('kCookies_param', JSON.stringify(param));
+    usePermissionStoreHook().cacheOperate({ mode: 'reset' });
+    onFresh();
+  }
+};
+
+/** 刷新路由 */
+function onFresh() {
+  const { fullPath, query } = unref(route);
+  router.replace({
+    path: '/redirect' + fullPath,
+    query: query
+  });
+}
+</script>