分页

src/views/flow/crmDoneList.vue

@@ -9,7 +9,7 @@
             icon="mynaui:arrow-up-down"
             class="icon pr-1 h-6 w-6"
             color="#014099"
-          />CRM待办任务列表
+          />CRM已办任务列表
         </p>
 
         <el-button
@@ -30,6 +30,7 @@
         <el-table
           :data="oaTasks"
           style="width: 100%"
+          height="70vh"
           :empty-text="loading ? '加载中...' : '暂无数据'"
           :header-cell-style="{
             backgroundColor: '#e9f7ff',
@@ -262,6 +263,19 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <div class="pagination-wrap">
+          <el-pagination
+            v-model:current-page="pagination.pageNum"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next"
+            background
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
       </div>
     </div>
 
@@ -281,6 +295,12 @@ const userStore = useUserStore();
 const oaTasks = ref([]);
 const loading = ref(false);
 
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+});
+
 const goBackPage = async (row) => {
   // const res = await ssoLogin({
   //   username: userStore.getUser.username,
@@ -298,6 +318,41 @@ const goBackPage = async (row) => {
   // }
 };
 
+const handleCurrentChange = async (page) => {
+  pagination.value.pageNum = page;
+  loading.value = true;
+  try {
+    const res = await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "approved",
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = res.todoCount;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSizeChange = async (size) => {
+  pagination.value.pageSize = size;
+  pagination.value.pageNum = 1;
+  loading.value = true;
+  try {
+    const res = await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "approved",
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = res.todoCount;
+  } finally {
+    loading.value = false;
+  }
+};
+
 function timestampToDateTime(timestamp) {
   // 兼容 10位(秒) / 13位(毫秒)
   const len = String(timestamp).length;
@@ -325,10 +380,11 @@ onMounted(async () => {
       const res = await getCRMTasks({
         id: userStore.getUser.username,
         type: "approved",
-        pageNum: 1,
-        pageSize: 10,
+        pageNum: pagination.value.pageNum,
+        pageSize: pagination.value.pageSize,
       });
       oaTasks.value = res.todoList;
+      pagination.value.total = res.todoCount;
     } finally {
       loading.value = false;
     }
@@ -347,4 +403,10 @@ onMounted(async () => {
   padding: 16px 20px;
   margin-top: 100px;
 }
+
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
 </style>

src/views/flow/crmTodoList.vue

@@ -30,6 +30,7 @@
         <el-table
           :data="oaTasks"
           style="width: 100%"
+          height="70vh"
           :empty-text="loading ? '加载中...' : '暂无数据'"
           :header-cell-style="{
             backgroundColor: '#e9f7ff',
@@ -262,6 +263,19 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <div class="pagination-wrap">
+          <el-pagination
+            v-model:current-page="pagination.pageNum"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next"
+            background
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
       </div>
     </div>
 
@@ -281,6 +295,47 @@ const userStore = useUserStore();
 const oaTasks = ref([]);
 const loading = ref(false);
 
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const handleCurrentChange = async (page) => {
+  pagination.value.pageNum = page;
+  loading.value = true;
+  try {
+    const res = await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "pending",
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = res.todoCount;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSizeChange = async (size) => {
+  pagination.value.pageSize = size;
+  pagination.value.pageNum = 1;
+  loading.value = true;
+  try {
+    const res = await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "pending",
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = res.todoCount;
+  } finally {
+    loading.value = false;
+  }
+};
+
 const goBackPage = async (row) => {
   // const res = await ssoLogin({
   //   username: userStore.getUser.username,
@@ -324,11 +379,12 @@ onMounted(async () => {
     try {
       const res = await getCRMTasks({
         id: userStore.getUser.username,
-        type: "approved",
-        pageNum: 1,
-        pageSize: 10,
+        type: "pending",
+        pageNum: pagination.value.pageNum,
+        pageSize: pagination.value.pageSize,
       });
       oaTasks.value = res.todoList;
+      pagination.value.total = res.todoCount;
     } finally {
       loading.value = false;
     }
@@ -347,4 +403,10 @@ onMounted(async () => {
   padding: 16px 20px;
   margin-top: 100px;
 }
+
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
 </style>

src/views/flow/oaDoneList.vue

@@ -26,10 +26,11 @@
           />&#36820;&#22238;</el-button
         >
       </div>
-      <div class="h-[80vh]">
+      <div class="h-[90vh]">
         <el-table
           :data="oaTasks"
           style="width: 100%"
+          height="80vh"
           :empty-text="
             loading
               ? '&#21152;&#36733;&#20013;...'

src/views/flow/todoList.vue

@@ -31,6 +31,7 @@
           :data="oaTasks"
           style="width: 100%"
           :empty-text="loading ? '加载中...' : '暂无数据'"
+          height="70vh"
           :header-cell-style="{
             backgroundColor: '#e9f7ff',
             color: 'black',
@@ -140,6 +141,19 @@
             </template>
           </el-table-column>
         </el-table>
+
+        <div class="pagination-wrap">
+          <el-pagination
+            v-model:current-page="pagination.pageNum"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next"
+            background
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+          />
+        </div>
       </div>
     </div>
 
@@ -159,6 +173,12 @@ const userStore = useUserStore();
 const oaTasks = ref([]);
 const loading = ref(false);
 
+const pagination = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+});
+
 const goBackPage = async (row) => {
   const res = await ssoLogin({
     username: userStore.getUser.username,
@@ -178,16 +198,50 @@ const goBackPage = async (row) => {
     }, 100);
   }
 };
+
+const handleCurrentChange = async (page) => {
+  pagination.value.pageNum = page;
+  try {
+    const res = await getOATasks({
+      id: userStore.getUser.username,
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = Number(res.todoCount);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSizeChange = async (size) => {
+  pagination.value.pageSize = size;
+  pagination.value.pageNum = 1;
+
+  try {
+    const res = await getOATasks({
+      id: userStore.getUser.username,
+      pageNum: pagination.value.pageNum,
+      pageSize: pagination.value.pageSize,
+    });
+    oaTasks.value = res.todoList;
+    pagination.value.total = Number(res.todoCount);
+  } finally {
+    loading.value = false;
+  }
+};
+
 onMounted(async () => {
   if (userStore.getUser.username) {
     loading.value = true;
     try {
       const res = await getOATasks({
         id: userStore.getUser.username,
-        pageNum: 1,
-        pageSize: 10,
+        pageNum: pagination.value.pageNum,
+        pageSize: pagination.value.pageSize,
       });
       oaTasks.value = res.todoList;
+      pagination.value.total = Number(res.todoCount);
     } finally {
       loading.value = false;
     }
@@ -206,4 +260,10 @@ onMounted(async () => {
   padding: 16px 20px;
   margin-top: 100px;
 }
+
+.pagination-wrap {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
 </style>