@utogether/udp-core 1.0.0

package/src/views/uhome/components/menu-favorite.vue

@@ -0,0 +1,331 @@
+<template>
+  <vxe-modal
+    v-model="showModal"
+    :loading="loading"
+    width="75%"
+    height="80%"
+    title="常用菜单设置(拖动可改变菜单顺序)"
+    class-name="u-favorite-modal"
+    show-footer
+    @close="onClose"
+  >
+    <template #default>
+      <div class="">
+        <el-scrollbar heigth="100" class="w-full border-b border-slate-300">
+          <template #default>
+            <div class="w-full h-24">
+              <el-empty v-if="!favoriteMenus.length" :image-size="50" description="" class="p-0" />
+              <draggable
+                :list="favoriteMenus"
+                handle=".drag-item"
+                animation="300"
+                item-key="id"
+                class="flex"
+                @end="onMoveEnd"
+              >
+                <template #item="{ element, index }">
+                  <div class="">
+                    <div
+                      class="h-24 w-24 flex justify-center items-center flex-col relative drag-item ut-menu-top-item"
+                    >
+                      <div
+                        class="rounded-full w-10 h-10 flex items-center justify-center"
+                        :style="{ backgroundColor: getColor(index) }"
+                      >
+                        <iconify-icon-offline
+                          :icon="element.icon || `ri:${icons[index]}-line`"
+                          class="text-2xl text-white"
+                        />
+                      </div>
+                      <span
+                        class="w-[90%] text-xs mt-2 text-ellipsis overflow-hidden whitespace-nowrap text-center"
+                      >
+                        {{ element.menuName }}
+                      </span>
+                      <i
+                        class="ri-indeterminate-circle-line right-3 top-2 text-base hidden ut-menu-del"
+                        @click="onRemoveFavorite(element, index)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+            </div>
+          </template>
+        </el-scrollbar>
+        <el-scrollbar class="u-favorite-menu--contain">
+          <template #default>
+            <div class="p-3">
+              <div v-for="menu in menuList" :key="menu.id" class="grandparent-node">
+                <div class="flex items-center">
+                  <div class="w-2 h-4 bg-green-400" />
+                  <div class="ml-1 font-bold text-base">{{ menu.menuName }}</div>
+                </div>
+                <div class="pl-3 py-2">
+                  <vxe-checkbox-group v-model="checkboxModel[menu.id]" @change="onChange(menu, $event)">
+                    <vxe-checkbox
+                      v-for="item in handleMenuCategoryGroup(menu).menus"
+                      :key="item.id"
+                      :label="item.id"
+                      :content="item.menuName"
+                    />
+                  </vxe-checkbox-group>
+                </div>
+                <div
+                  v-for="item in handleMenuCategoryGroup(menu).folder"
+                  :key="item.id"
+                  class="parent-node pl-3"
+                >
+                  <div class="flex items-center">
+                    <div class="w-2 h-4 bg-blue-400" />
+                    <div class="ml-1 font-bold text-sm">{{ item.menuName }}</div>
+                  </div>
+
+                  <div class="pl-3 py-2">
+                    <vxe-checkbox-group
+                      v-model="checkboxModel[item.id]"
+                      @change="onChange(item, $event)"
+                    >
+                      <vxe-checkbox
+                        v-for="child in handleMenuCategoryGroup(item).menus"
+                        :key="child.id"
+                        :label="child.id"
+                        :content="child.menuName"
+                      />
+                    </vxe-checkbox-group>
+                  </div>
+                  <div
+                    v-for="child in handleMenuCategoryGroup(item).folder"
+                    :key="child.id"
+                    class="child-node pl-3"
+                  >
+                    <div class="flex items-center">
+                      <div class="w-2 h-4 bg-red-400" />
+                      <div class="ml-1 font-bold text-sm">{{ child.menuName }}</div>
+                    </div>
+
+                    <div class="py-2">
+                      <vxe-checkbox-group
+                        v-model="checkboxModel[child.id]"
+                        @change="onChange(item, $event)"
+                      >
+                        <vxe-checkbox
+                          v-for="subChild in handleMenuCategoryGroup(child).menus"
+                          :key="subChild.id"
+                          :label="subChild.id"
+                          :content="subChild.menuName"
+                        />
+                      </vxe-checkbox-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-scrollbar>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end">
+        <ut-button content="cancel" status="warning" @tap="onClose" />
+        <ut-button content="confirm" @tap="onConfirm" />
+      </div>
+    </template>
+  </vxe-modal>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { clone, max } from 'xe-utils';
+import { dbstorage, delay, warnMessage, successMessage } from '@utogether/utils';
+import Draggable from 'vuedraggable';
+import { getServiceApi } from '../../../api';
+
+interface IProps {
+  dataSource: IRecord[];
+  icons: Array<String>;
+  userName: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  dataSource: () => [],
+  icons: () => [],
+  userName: ''
+});
+
+// 用户菜单
+const favoriteMenus = ref([]);
+const menuList = ref([]);
+const showModal = ref(false);
+const loading = ref(false);
+const checkboxModel = ref<IRecord>({});
+// const cacheCheckModel = {}; // 缓存最初选中的数据
+
+const url = '/upms/v1/menuFavority';
+
+const getCacheMenuList = async () => {
+  menuList.value = await dbstorage.getItem(`U-${props.userName}-ROUTES`);
+  menuList.value = menuList.value.filter(f => f.menuCode !== 'SysHome');
+  await delay(64);
+  setCheckboxedMenu();
+};
+
+/** 上部删除 */
+const onRemoveFavorite = (item, idx) => {
+  favoriteMenus.value.splice(idx, 1);
+  const index = checkboxModel.value[item.parentId]?.findIndex(f => f === item.menuId);
+  checkboxModel.value[item.parentId].splice(index, 1);
+  // index = cacheCheckModel[item.parentId]?.findIndex(f => f.id === item.id);
+  // cacheCheckModel[item.parentId].splice(index, 1);
+};
+
+/** 菜单分组 */
+const handleMenuCategoryGroup = data => {
+  const folder = [];
+  const menus = [];
+  data.children.forEach(e => {
+    if (['5', '100'].includes(e.menuCategory)) {
+      folder.push(e);
+    } else {
+      menus.push(e);
+    }
+  });
+  return { folder, menus };
+};
+
+/** 设置默认选中 */
+const setCheckboxedMenu = () => {
+  props.dataSource.forEach(data => {
+    if (checkboxModel.value[data.parentId]) {
+      checkboxModel.value[data.parentId].push(data.menuId);
+      // cacheCheckModel[data.parentId].push(data);
+    } else {
+      checkboxModel.value[data.parentId] = [data.menuId];
+      // cacheCheckModel[data.parentId] = [data];
+    }
+  });
+};
+/** checkbox change */
+const onChange = (menu, event) => {
+  debugger;
+  if (event.checked) {
+    // 新增
+    if (favoriteMenus.value.length === 16) {
+      nextTick(() => {
+        checkboxModel.value[menu.id].splice(checkboxModel.value[menu.id].length - 1, 1);
+      });
+      return warnMessage('最多只能选择16个常用功能');
+    }
+    // const max = getMax();
+    // if (cacheCheckModel[menu.id]) {
+    //   cacheCheckModel[menu.id].push({ id: event.label, seqNo: max + 10 });
+    // } else {
+    //   cacheCheckModel[menu.id] = [{ id: event.label, seqNo: max + 10 }];
+    // }
+
+    const menuItem = menu.children.find(f => f.id === event.label);
+    if (menuItem) {
+      menuItem.seqNo = getMax() + 10;
+      menuItem.menuId = menuItem.id;
+      favoriteMenus.value.push(menuItem);
+    }
+  } else {
+    // 顶部删除
+    let idx = favoriteMenus.value.findIndex(f => f.menuId === event.label);
+    idx !== -1 && favoriteMenus.value.splice(idx, 1);
+    // checkbox删除
+    idx = checkboxModel.value[menu.id].findIndex(f => f === event.label);
+    idx !== -1 && checkboxModel.value[menu.id].splice(idx, 1);
+    // 缓存删除
+    // idx = cacheCheckModel[menu.id].findIndex(f => f.id === event.label);
+    // idx !== -1 && cacheCheckModel[menu.id].splice(idx, 1);
+  }
+};
+const onMoveEnd = () => {
+  favoriteMenus.value.forEach((item, idx) => {
+    item.seqNo = (idx + 1) * 10;
+  });
+};
+/** 获取排序最大值 */
+const getMax = () => {
+  return max(favoriteMenus.value, item => item.seqNo)?.seqNo || 0;
+};
+const onConfirm = () => {
+  console.log(favoriteMenus);
+  const body = favoriteMenus.value.map(m => {
+    return {
+      userName: props.userName,
+      menuId: m.menuId,
+      seqNo: m.seqNo
+    };
+  });
+  console.log(body);
+  loading.value = true;
+  getServiceApi()
+    .post(url, body)
+    .then(() => {
+      successMessage();
+      onClose();
+      emit('success');
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const onClose = () => {
+  showModal.value = false;
+  emit('close');
+};
+
+const getColor = idx => {
+  const colorSet = ['#409eff', '#67c23a', '#13c2c2', '#e85f33', 'orange'];
+  return colorSet[idx % 5];
+};
+
+const emit = defineEmits<{ (e: 'close'): void; (e: 'success'): void }>();
+
+onMounted(() => {
+  favoriteMenus.value = clone(props.dataSource, true);
+  showModal.value = true;
+  getCacheMenuList();
+});
+</script>
+<style lang="scss">
+.u-favorite-modal {
+  .vxe-modal--body .vxe-modal--content {
+    padding: 0;
+    overflow: hidden !important;
+  }
+
+  .el-empty {
+    &__description {
+      margin-top: 10px;
+    }
+  }
+
+  .ut-menu-top-item:hover {
+    .ut-menu-del {
+      position: absolute;
+      display: inline-block;
+      color: rgb(240 94 94);
+      cursor: pointer;
+    }
+  }
+
+  .u-favorite-menu--contain {
+    height: calc(100vh - 320px);
+  }
+
+  .vxe-checkbox,
+  .vxe-checkbox + .vxe-checkbox {
+    width: 120px;
+    padding: 4px 0;
+    margin-right: 10px;
+    margin-left: 0;
+  }
+
+  .vxe-modal--footer {
+    border-top: 1px solid #e8e8e8;
+  }
+}
+</style>

package/src/views/uhome/su-welcome.vue

@@ -0,0 +1,339 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-11-02 10:04:05
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-29 17:04:36
+ * @FilePath: /front-web-mes/src/views/uhome/su-welcome.vue
+ * @Description: 欢迎页面
+-->
+<template>
+  <div class="ut-home m-3">
+    <!-- 顶部 -->
+    <div class="h-32 mb-4 p-4 flex justify-between items-center bg-white home-page">
+      <div class="flex flex-row items-center flex-[2]">
+        <div>
+          <el-avatar size="large" class="text-4xl font-bold bg-[var(--el-color-primary)]">{{
+            firstName
+          }}</el-avatar>
+        </div>
+        <div class="ml-4 text-xs flex-[2]">
+          <div class="flex justify-center items-center">
+            <span> {{ getCurrentPeriod() }}, {{ systemHook.getUserInfo?.name || '' }},欢迎回来！ </span>
+            <div
+              class="flex flex-[2] justify-center items-center font-bold"
+              style="color: var(--el-color-primary)"
+            >
+              星光不问赶路人,岁月不负有心人,以梦为马,不负韶华!
+            </div>
+          </div>
+          <div class="py-2 text-gray-500 flex">
+            <span class="inline-block"> 所属角色: </span>
+            <div class="w-2/3">{{ getRole() }}</div>
+          </div>
+          <div class="text-gray-500 flex">
+            <span class="inline-block"> 所属组织: </span>
+            <div class="w-2/3">{{ getOrg() }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col">
+        <span class="text-4xl">
+          <ut-countdown :show-days="false" :show-labels="false" />
+        </span>
+        <div class="mt-1 ml-3">{{ getLunarDay() }}</div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <el-row class="m-2" :gutter="10">
+      <el-col v-spinning="loading" :lg="24" :md="24" class="">
+        <el-card class="mb-2">
+          <template #header>
+            <div class="flex items-center justify-between dark:bg-black">
+              <span class="font-bold">常用菜单</span>
+              <span class="text-xs text-gray-400 cursor-pointer" @click="onFavoriteMenu">
+                <span>更多</span>
+                <i class="vxe-icon-arrow-right" />
+              </span>
+            </div>
+          </template>
+
+          <div class="default:bg-white dark:bg-black">
+            <el-empty
+              v-if="!menuList.length"
+              :image-size="100"
+              description="快来添加常用菜单吧!"
+              class="p-0 pb-3"
+            />
+            <ul
+              class="p-0 w-full h-full grid grid-rows-1 grid-cols-8 u-dashed-menu"
+              :class="{ 'grid-rows-2': menuList.length > 8 }"
+            >
+              <li
+                v-for="(item, idx) in menuList"
+                :key="item.id"
+                class="text-center list-none bg-white"
+                @click="onClickMenu(item)"
+              >
+                <div class="h-20 flex justify-center items-center flex-col">
+                  <div
+                    class="rounded-full w-10 h-10 flex items-center justify-center"
+                    :style="{ backgroundColor: getColor(idx) }"
+                  >
+                    <iconify-icon-offline
+                      :icon="item.icon || `ri:${icons[idx]}-line`"
+                      class="text-2xl text-white"
+                    />
+                  </div>
+                  <span class="text-xs mt-2">{{ item.menuName }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div />
+        </el-card>
+      </el-col>
+
+      <el-col :xl="16" :lg="12" :md="24">
+        <el-card class="mb-2">
+          <template #header>
+            <div class="font-bold">
+              <span>个人动态</span>
+            </div>
+          </template>
+          <div class="p-3">
+            <ul class="p-0 w-full h-full">
+              <li
+                v-for="item in logList"
+                :key="item.id"
+                class="w-full list-none p-2 border-b border-gray-200"
+              >
+                <div class="flex">
+                  <div>
+                    <el-avatar class="text-base">{{ firstName }}</el-avatar>
+                  </div>
+                  <div class="ml-3">
+                    <div>
+                      <span class="text-blue-600 mr-3">{{ item.browser }}</span>
+                      <span>{{ item.browserVersion || item.platformVersion }}</span>
+                    </div>
+                    <div class="text-gray-400 text-sm">{{ item.loginTime }}</div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧 -->
+      <el-col :xl="8" :lg="12" :md="24" class="">
+        <el-card class="mb-2">
+          <template #header>
+            <div class="font-bold">
+              <span>日历</span>
+            </div>
+          </template>
+          <div class="p-1">
+            <ut-calendar :holidays="holidays" :statutory-holiday="statutoryHoliday" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <menu-favorite
+      v-if="showFavorite"
+      :data-source="menuList"
+      :user-name="systemHook.getUserInfo.userName"
+      :icons="icons"
+      @close="showFavorite = false"
+      @success="getMenuList"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import dayjs from 'dayjs';
+import { lunarCalendar, cookies } from '@utogether/utils';
+import { useSystemStoreHook } from '../../store/modules/system';
+import { getServiceApi } from '../../api';
+import { kLOGINER } from '../../contant';
+import menuFavorite from './components/menu-favorite.vue';
+defineOptions({ name: 'SuHome' });
+
+const systemHook = useSystemStoreHook();
+const router = useRouter();
+
+const menuList = ref([]);
+const logList = ref([]);
+const showFavorite = ref(false);
+const loading = ref(false);
+
+const firstName = computed(() => {
+  return systemHook.getUserInfo.name?.slice(0, 1);
+});
+
+// 角色
+const getRole = () => {
+  const isAdmin = systemHook.isAdminRole;
+  if (isAdmin) {
+    return '系统管理员';
+  } else {
+    return systemHook.getUserInfo?.sysRoles?.map(m => m.roleName).join(',');
+  }
+};
+
+// 组织
+const getOrg = () => {
+  const isAdmin = systemHook.isAdminRole;
+  if (isAdmin) {
+    return '【系统管理员】拥有所有组织';
+  } else {
+    if (getRole() === '项目组管理员') {
+      return '【项目组管理员】拥有所有组织';
+    }
+    return systemHook.getOrglist?.map(m => m.orgName).join(',');
+  }
+};
+
+// 获取时间段
+const getCurrentPeriod = () => {
+  const hour = Number(dayjs().format('HH'));
+  return hour < 12 ? '上午好' : hour < 18 ? '下午好' : '晚上好';
+};
+
+const getLunarDay = () => {
+  const time = new Date();
+  const lunarday = lunarCalendar.solar2lunar(
+    time.getFullYear(),
+    time.getMonth() + 1,
+    time.getDate()
+  ) as IRecord;
+  const { gzYear, IMonthCn, IDayCn, cMonth, cDay, ncWeek } = lunarday;
+  return `${cMonth}月${cDay}日 ${gzYear}${IMonthCn}${IDayCn} ${ncWeek}`;
+};
+
+/** 查询收藏菜单功能 */
+const getMenuList = () => {
+  const url = '/upms/v1/menuFavority';
+  loading.value = true;
+  const query = { pageSize: 20, pageNum: 1, userName: cookies.get(kLOGINER) };
+  getServiceApi()
+    .get(url, query)
+    .then((res: IResponseData) => {
+      menuList.value = res?.list || [];
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+const onClickMenu = item => {
+  router.push(item.menuPath);
+};
+
+const getUserLog = () => {
+  const url = '/upms/v1/userMonitor';
+  const query = { pageSize: 8, pageNum: 1, employeeName: systemHook.getUserInfo?.name };
+  getServiceApi()
+    .get(url, query)
+    .then((res: IResponseData) => {
+      logList.value = res?.list || [];
+    });
+};
+
+const onFavoriteMenu = () => {
+  showFavorite.value = true;
+};
+
+onMounted(() => {
+  getMenuList();
+  getUserLog();
+});
+
+const getColor = idx => {
+  const colorSet = ['#409eff', '#67c23a', '#13c2c2', '#e85f33', 'orange'];
+  return colorSet[idx % 5];
+};
+
+const icons = [
+  'community',
+  'shield-star',
+  'group',
+  'settings',
+  'star',
+  'train',
+  'send-plane',
+  'rocket',
+  'device',
+  'compass',
+  'map-pin',
+  'keynote',
+  'article',
+  'tv',
+  'database-2',
+  'calendar'
+];
+
+// 假期设置
+const holidays = [
+  {
+    2023: { 12: { 30: '班', 31: '班' } }
+  },
+  {
+    2024: {
+      1: { 1: '假' },
+      2: {
+        4: '班',
+        10: '假',
+        11: '假',
+        12: '假',
+        13: '假',
+        14: '假',
+        15: '假',
+        16: '假',
+        17: '假',
+        18: '班'
+      },
+      4: { 4: '假', 5: '假', 6: '假', 7: '班', 28: '班' },
+      5: { 1: '假', 2: '假', 3: '假', 4: '假', 5: '假', 11: '班' },
+      6: { 8: '假', 9: '假', 10: '假' },
+      9: { 15: '假', 16: '假', 17: '假', 14: '班', 29: '班' },
+      10: { 1: '假', 2: '假', 3: '假', 4: '假', 5: '假', 6: '假', 7: '假', 12: '班' }
+    }
+  }
+];
+// 法定假日;
+const statutoryHoliday = [
+  { name: '元旦', date: '2024-01-01' },
+  { name: '春节', date: '2024-02-10' },
+  { name: '清明节', date: '2024-04-04' },
+  { name: '劳动节', date: '2024-05-01' },
+  { name: '端午节', date: '2024-06-10' },
+  { name: '中秋节', date: '2024-09-17' },
+  { name: '国庆节', date: '2024-10-01' }
+];
+</script>
+
+<style lang="scss" scoped>
+.ut-home {
+  .el-avatar--large {
+    --el-avatar-size: 72px;
+  }
+
+  ::v-deep(.el-card__body) {
+    padding: 0 !important;
+  }
+}
+
+// .u-dashed-menu {
+// li {
+// box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset,
+//   0 1px 0 0 #e8e8e8 inset;
+// }
+
+//   li:hover {
+//     box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+//   }
+// }
+</style>