feat: 待审批UI调整

src/views/approve/components/approvedContent.vue

@@ -2,12 +2,12 @@
 	<div class="flow-detail-content">
 		<div class="flow-detail-container">
 			<!-- 值为空 -->
-			<div v-if="false" class="flow-empty-detail-box">
+			<div v-if="!visibleDialog" class="flow-empty-detail-box">
 				<el-empty description="暂无数据" />
 			</div>
 
 			<!-- 值不为空 -->
-			<template v-if="true">
+			<template v-if="visibleDialog">
 				<!-- 1、头部信息 -->
 				<div class="flow-status-stamp">
 					<div class="flow-stamp-container">
@@ -237,6 +237,7 @@ const openComment = (type, item) => {
 }
 
 nextTick(() => {
+	if(!visibleDialog.value) return
 	const cur = props.taskObj || {}
 	processApprovalInfoApi(cur.taskId).then(data => {
 		// console.log(JSON.stringify(data))
@@ -386,9 +387,10 @@ nextTick(() => {
 	.flow-actions {
 		display: flex;
 		align-items: center;
-		justify-content: end;
+		justify-content: flex-end;
 		height: 52px;
-		border-top: 1px solid var(--color-neutral-3);
+		//border-top: 1px solid var(--color-neutral-3);
+		border-top: 1px solid black;
 		padding: 0 20px;
 	}
 }

src/views/approve/components/approvedItem.vue

@@ -20,12 +20,12 @@
 			</div>
 		</div>
 		<!-- 内容值 -->
-		<div v-infinite-scroll="load" class="flow-list-box">
-			<div v-for="i in count" :key="i" class="item-box" :class="[i === 2 ? 'item-box-choosed' : '']">
+		<div v-infinite-scroll="load" :infinite-scroll-disabled="disabledInfinite" class="flow-list-box">
+			<div v-for="i in satelliteList" :key="i.taskId" class="item-box" :class="[i === 2 ? 'item-box-choosed' : '']">
 				<div class="flow-card-box flow-card-box-hoverable">
 					<!--头部-->
 					<div class="header">
-						<el-text tag="b">我是Bold {{ i }}</el-text>
+						<el-text tag="b">{{ i.processName }}</el-text>
 						<el-tag type="primary">待审核</el-tag>
 					</div>
 					<!--操作类容-->
@@ -37,10 +37,12 @@
 							<FlowNodeAvatar id="1" />
 						</div>
 						<!-- 时间 -->
-						<div class="begin-time">提交于 2024-02-29 15:30:23</div>
+						<div class="begin-time">提交于 {{ i.createTime }}</div>
 					</div>
 				</div>
 			</div>
+			<p v-if="loading">加载中...</p>
+			<p v-if="noMore">没有更多了</p>
 		</div>
 	</div>
 </template>
@@ -48,12 +50,58 @@
 <script setup>
 import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
 import { Search, Filter, Refresh } from '@element-plus/icons-vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { processTaskPagePendingApprovalApi } from '@/api/flow/processTask'
 
-import { ref } from 'vue'
-const count = ref(0)
+const satelliteList = ref([])
+const input3 = ref('')
+const loading = ref(false)
+const totalNumber = ref(0)
+const totalPages = ref(0)
+const condition = reactive({
+	page: 1,
+	pageSize: 10
+})
+
+// 初始化
+const init = () => {
+	loading.value = false
+	condition.page = 1
+	satelliteList.value = []
+	totalNumber.value = 0
+	totalPages.value = 0
+}
+
+// 分页获取数据
 const load = () => {
-	count.value += 2
+	loading.value = true
+	getPagedSatellites()
+}
+
+// 获取分页数据
+const getPagedSatellites = async () => {
+	try {
+		const { records, total, current } = await processTaskPagePendingApprovalApi(condition)
+		satelliteList.value = satelliteList.value.concat(records)
+		totalNumber.value = total
+		totalPages.value = current
+		loading.value = false
+		if (condition.page > totalPages.value) {
+			return
+		}
+		condition.page++
+	} catch (e) {
+		console.log(e)
+	}
 }
+
+onMounted(() => {
+	init()
+})
+
+const noMore = computed(() => satelliteList.value.length > totalNumber.value)
+
+const disabledInfinite = computed(() => loading.value || noMore.value)
 </script>
 
 <style scoped lang="scss">