aa

src/views/flow/srmTodoMoblie.vue

@@ -9,7 +9,8 @@
             icon="mynaui:arrow-up-down"
             class="icon pr-1 h-8 w-8"
             color="#014099"
-          />SRM待办任务列表
+          />
+          SRM待办任务列表
         </p>
 
         <el-button
@@ -18,13 +19,15 @@
           size="small"
           color="#02409b"
           @click="router.back()"
-          ><Icon
+        >
+          <Icon
             icon="mynaui:corner-up-left"
             class="icon pr-1"
             width="20"
             height="20"
-          />&#36820;&#22238;</el-button
-        >
+          />
+          返回
+        </el-button>
       </div>
 
       <div v-loading="loading && oaTasks.length === 0" class="table-wrapper">
@@ -40,9 +43,7 @@
           >
             <div class="task-card__header">
               <span class="task-card__index">{{ index + 1 }}</span>
-              <span class="task-card__status">{{
-                item.status || "待处理"
-              }}</span>
+              <span class="task-card__status">{{ item.status || "待处理" }}</span>
             </div>
 
             <div class="task-card__title">
@@ -53,42 +54,30 @@
               <div class="task-card__row task-card__row--two">
                 <div class="task-card__field">
                   <span class="task-card__label">创建人</span>
-                  <span class="task-card__value">{{
-                    item.creatorName || "--"
-                  }}</span>
+                  <span class="task-card__value">{{ item.creatorName || "--" }}</span>
                 </div>
 
                 <div class="task-card__field">
                   <span class="task-card__label">创建日期</span>
                   <span class="task-card__value">{{
-                    item.createdDate.substring(0, 10)
+                    item.createdDate ? item.createdDate.substring(0, 10) : "--"
                   }}</span>
                 </div>
               </div>
             </div>
 
             <div class="task-card__footer">
-              <span class="task-card__action" @click="goBackPage(item)"
-                >处理</span
-              >
+              <span class="task-card__action" @click="goBackPage(item)">处理</span>
             </div>
           </div>
 
-          <InfiniteLoading
-            :identifier="infiniteId"
-            spinner="spiral"
-            @infinite="loadMore"
-          >
-            <template #no-more>
-              <div class="infinite-status">没有更多数据了</div>
-            </template>
-            <template #no-results>
-              <div class="infinite-status">没有更多数据了</div>
-            </template>
-            <template #error>
-              <div class="infinite-status">加载失败，请稍后重试</div>
-            </template>
-          </InfiniteLoading>
+          <div v-if="isFetchingMore" class="infinite-status">加载中...</div>
+          <div v-else-if="!hasMore && oaTasks.length > 0" class="infinite-status">
+            没有更多数据了
+          </div>
+          <div v-else-if="!loading && oaTasks.length === 0" class="infinite-status">
+            暂无数据
+          </div>
         </div>
       </div>
     </div>
@@ -100,20 +89,18 @@
 <script setup>
 import Header from "@components/home/header.vue";
 import * as dd from "dingtalk-jsapi";
-import { onMounted, ref } from "vue";
-// import { getOATasks, ssoLogin } from "@/api/user";
+import { onMounted, onUnmounted, ref } from "vue";
 import { getSRMTasks, srmLogin } from "@/api/user";
 import { useUserStore } from "@/stores/useUserStore";
 import { Icon } from "@iconify/vue";
 import router from "@/router";
-import { ElLoading } from "element-plus";
-import InfiniteLoading from "vue-infinite-loading";
 
 const userStore = useUserStore();
 
 const oaTasks = ref([]);
 const loading = ref(false);
-const infiniteId = ref(Date.now());
+const isFetchingMore = ref(false);
+const hasMore = ref(true);
 
 const pagination = ref({
   pageNum: 1,
@@ -125,32 +112,28 @@ const goBackPage = async (row) => {
   const res = await srmLogin({
     username: userStore.getUser.username,
   });
-  if (JSON.parse(res).msg === "账号未授权") {
-    dialogVisible.value = true;
-    return;
-  }
+
   if (res) {
+    const token = JSON.parse(res).msg;
     const ua = window.navigator.userAgent.toLowerCase();
+
     if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
       dd.biz.util.openLink({
-        url: `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${JSON.parse(res).msg}`,
+        url: `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${token}`,
         onSuccess: () => {
           setTimeout(() => {
             dd.biz.util.openLink({
               url: `https://srm.deepoil.cc/#/workflow-process/request-${row.requestId}`,
             });
-          }, SRM_LOGIN_DELAY);
+          }, 300);
         },
       });
     } else {
       const newTab = window.open("", "_blank");
-      newTab.location.href = `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${JSON.parse(res).msg}`;
-      setTimeout(function () {
-        setTimeout(() => {
-          // loading.close();
-        }, 500);
+      newTab.location.href = `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${token}`;
+      setTimeout(() => {
         newTab.location.href = `https://srm.deepoil.cc/#/workflow-process/request-${row.requestId}`;
-      }, SRM_LOGIN_DELAY);
+      }, 300);
     }
   }
 };
@@ -170,48 +153,79 @@ const resetList = () => {
   oaTasks.value = [];
   pagination.value.pageNum = 1;
   pagination.value.total = 0;
-  infiniteId.value = Date.now();
+  hasMore.value = true;
+  isFetchingMore.value = false;
 };
 
-const loadMore = async ($state) => {
-  if (!userStore.getUser.username) {
-    $state.complete();
+const loadMore = async () => {
+  if (
+    !userStore.getUser.username ||
+    loading.value ||
+    isFetchingMore.value ||
+    !hasMore.value
+  ) {
     return;
   }
 
-  loading.value = pagination.value.pageNum === 1;
+  const isFirstPage = pagination.value.pageNum === 1;
+  loading.value = isFirstPage;
+  isFetchingMore.value = !isFirstPage;
 
   try {
     const list = await loadTaskPage();
 
-    if (pagination.value.pageNum === 1) {
+    if (isFirstPage) {
       oaTasks.value = list;
     } else {
       oaTasks.value = [...oaTasks.value, ...list];
     }
 
     const loadedCount = oaTasks.value.length;
-    const hasMore =
+    const moreAvailable =
       list.length === pagination.value.pageSize &&
       loadedCount < pagination.value.total;
 
-    if (hasMore) {
+    if (moreAvailable) {
       pagination.value.pageNum += 1;
-      $state.loaded();
     } else {
-      $state.complete();
+      hasMore.value = false;
     }
   } catch (error) {
-    $state.error();
+    hasMore.value = false;
   } finally {
     loading.value = false;
+    isFetchingMore.value = false;
+  }
+};
+
+const handleWindowScroll = () => {
+  if (loading.value || isFetchingMore.value || !hasMore.value) return;
+
+  const scrollTop =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop ||
+    0;
+  const viewportHeight =
+    window.innerHeight || document.documentElement.clientHeight || 0;
+  const fullHeight =
+    document.documentElement.scrollHeight || document.body.scrollHeight || 0;
+
+  if (scrollTop + viewportHeight >= fullHeight - 80) {
+    loadMore();
   }
 };
 
 onMounted(() => {
   if (userStore.getUser.username) {
     resetList();
+    loadMore();
   }
+  window.addEventListener("scroll", handleWindowScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleWindowScroll);
 });
 </script>
 

src/views/flow/todoListMobile.vue

@@ -252,8 +252,8 @@ const loadTaskPage = async () => {
     pageSize: pagination.value.pageSize,
   });
 
-  pagination.value.total = Number(res?.todoCount || 0);
-  return Array.isArray(res?.todoList) ? res.todoList : [];
+  pagination.value.total = Number(res?.doneCount || 0);
+  return Array.isArray(res?.doneList) ? res.doneList : [];
 };
 
 const resetList = () => {
@@ -312,16 +312,26 @@ onMounted(() => {
   --portal-text-muted: #5f6f83;
   --portal-text-soft: #7f8fa6;
   --portal-title: #163867;
+  --portal-subtitle: rgba(61, 92, 135, 0.86);
   --portal-line: rgba(126, 156, 201, 0.24);
+  --portal-card: rgba(255, 255, 255, 0.82);
   --portal-card-2: rgba(248, 251, 255, 0.94);
+  --portal-card-3: rgba(240, 246, 255, 0.88);
+  --portal-card-4: rgba(231, 239, 251, 0.92);
+  --portal-nav-bg: rgba(255, 255, 255, 0.72);
+  --portal-nav-hover: rgba(219, 232, 252, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.7);
+  --portal-input-hover: rgba(255, 255, 255, 0.92);
   --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
+  --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
   --portal-accent: #245edb;
+  --portal-accent-2: #4e8cff;
   --portal-accent-soft: rgba(36, 94, 219, 0.14);
-  --bg-table: #091126;
+  --portal-todo-bg: rgba(242, 247, 255, 0.94);
+  --portal-todo-hover: rgba(228, 238, 252, 0.95);
+  --portal-number-todo: #e15a5a;
+  --portal-number-done: #2da04d;
   color: var(--portal-text);
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   background:
     radial-gradient(
       circle at 18% 12%,
@@ -346,12 +356,28 @@ onMounted(() => {
   --portal-text-muted: rgba(234, 241, 255, 0.95);
   --portal-text-soft: #8a9ab0;
   --portal-title: #f4f7ff;
+  --portal-subtitle: rgba(188, 205, 255, 0.82);
   --portal-line: rgba(97, 129, 206, 0.28);
+  --portal-card: rgba(10, 19, 43, 0.8);
   --portal-card-2: rgba(12, 24, 52, 0.92);
+  --portal-card-3: rgba(17, 25, 48, 0.8);
+  --portal-card-4: rgba(15, 24, 45, 0.82);
+  --portal-nav-bg: rgba(10, 19, 43, 0.8);
+  --portal-nav-hover: rgba(28, 40, 72, 0.8);
+  --portal-input-bg: rgba(255, 255, 255, 0.08);
+  --portal-input-hover: rgba(255, 255, 255, 0.12);
   --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
+  --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
   --portal-accent: #6e7dff;
+  --portal-accent-2: #8d4dff;
   --portal-accent-soft: rgba(110, 125, 255, 0.16);
+  --portal-todo-bg: #070e20;
+  --portal-todo-hover: rgba(28, 40, 72, 0.8);
+  --portal-number-todo: #f56c6c;
+  --portal-number-done: #ffffff;
   --bg-table: #091126;
+  color: var(--portal-text);
+
   background:
     radial-gradient(
       circle at 18% 12%,
@@ -370,7 +396,11 @@ onMounted(() => {
 .nav {
   background-color: var(--bg-table);
 }
-
+.todo-list {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 .content-wrapper {
   flex: 1;
   max-width: 1200px;
@@ -393,6 +423,8 @@ onMounted(() => {
 .task-scroll-list {
   padding-right: 4px;
   background-color: transparent;
+  height: calc(100vh - 100px);
+  /* overflow-y: auto; */
 }
 
 .task-card {