@utogether/udp-core 1.0.1-beta.9 → 1.0.2

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

@@ -1,339 +1,319 @@
-<!--
- * @Author: levi7754 levi7754@163.com
- * @Date: 2023-11-02 10:04:05
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-06 14:47:34
- * @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-flip-down :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 = '/upfm/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 = '/upfm/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>
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-11-02 10:04:05
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-12-02 18:28:17
+ * @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-flip-down :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: 'UdpWelcome' });
+
+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 = '/upfm/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 = '/upfm/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>