aizuda-web-vue3/src/views/approve/components/approvedItem.vue

<template>
	<!-- 左侧列表 -->
	<div class="flow-content">
		<!-- 搜索条件 -->
		<div class="search-box">
			<div class="search-segment" style="flex: 1 1 0%">
				<el-input v-model="input3" placeholder="流程名称">
					<template #append>
						<el-button :icon="Search" />
					</template>
				</el-input>
			</div>
			<div class="search-segment">
				<el-tooltip effect="dark" content="重置" placement="top">
					<el-button :icon="Refresh" />
				</el-tooltip>
			</div>
			<div class="search-segment">
				<el-button :icon="Filter" />
			</div>
		</div>
		<!-- 内容值 -->
		<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.taskId === taskProcessInfo.currentTaskRow.taskId ? 'item-box-choosed' : '']"
				@click="getTaskDetail(i)"
			>
				<div class="flow-card-box flow-card-box-hoverable">
					<!--头部-->
					<div class="header">
						<el-text tag="b">{{ i.processName }}</el-text>
						<el-tag type="primary">待审核</el-tag>
					</div>
					<!--操作类容-->
					<div class="summary-list"></div>
					<!--底部-->
					<div class="footer">
						<!-- 头像 -->
						<div class="initiator">
							<FlowNodeAvatar id="1" />
						</div>
						<!-- 时间 -->
						<div class="begin-time">提交于 {{ i.createTime }}</div>
					</div>
				</div>
			</div>
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</div>
	</div>
</template>

<script setup>
import useTaskProcessStore from '@/store/modules/taskProcess'
import FlowNodeAvatar from '@/components/Flow/FlowNodeAvatar.vue'
import { Search, Filter, Refresh } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { processTaskPagePendingApprovalApi } from '@/api/flow/processTask'

// store值
const taskProcessInfo = useTaskProcessStore()

const input3 = ref('')
// 下拉滚动属性值 start
const loading = ref(false) // loading
const totalNumber = ref(0) // 总条数
const totalPages = ref(0) // 总页数
// 当前页码数和每页条数
const condition = reactive({
	page: 1,
	pageSize: 10
})
const satelliteList = ref([]) // 列表数据
// 下拉滚动属性值 end

// 初始化
const init = () => {
	loading.value = false
	condition.page = 1
	satelliteList.value = []
	totalNumber.value = 0
	totalPages.value = 0
	taskProcessInfo.refresh = false
	taskProcessInfo.setCurrentTaskRow({})
}

// 分页获取数据
const load = () => {
	loading.value = true
	getPagedSatellites()
}

// 获取分页数据
const getPagedSatellites = async () => {
	try {
		const { records, total, pages } = await processTaskPagePendingApprovalApi(condition)
		records.forEach(item => {
			satelliteList.value.push(item)
		})
		totalNumber.value = total
		totalPages.value = pages
		loading.value = false
		if (condition.page > totalPages.value) {
			console.log('没有更多数据了')
			return
		}
		condition.page++
	} catch (e) {
		console.log(e)
	}
}

// 点击当前实例的具体
const getTaskDetail = item => {
	taskProcessInfo.setCurrentTaskRow(item)
}

onMounted(() => {
	init()
})

/**
 * 监听同级子组件通知
 * 1、监听refresh的值变化，进行刷新
 */
watch(
	() => taskProcessInfo.refresh,
	(nValue, oValue) => {
		if (nValue) {
			init()
		}
	},
	{ immediate: true }
)

const noMore = computed(() => satelliteList.value.length > totalNumber.value)

const disabledInfinite = computed(() => noMore.value)
</script>

<style scoped lang="scss">
.flow-content {
	width: 330px;
	min-width: 330px;
	height: 100%;
	overflow: hidden;
	background: var(--el-bg-color);
	border-radius: 6px;

	// 搜搜条件
	.search-box {
		display: flex;
		align-items: center;
		height: 56px;
		padding: 0 12px;

		.search-segment + .search-segment {
			margin-left: 4px;
		}
		//> .el-button {
		//	padding: 0;
		//	width: 32px;
		//	background-color: var(--el-fill-color-light);
		//}
	}

	.flow-list-box {
		background-color: #fff;
		padding: 0 12px;
		height: calc(100vh - 161px);
		overflow: hidden auto;
		scroll-snap-type: y mandatory;
		will-change: scroll-position;
		.item-box {
			margin-bottom: 12px;
			&.item-box-choosed {
				.flow-card-box {
					border-color: var(--el-color-primary);
				}
			}
		}
		.flow-card-box {
			-webkit-user-select: none;
			user-select: none;
			border-radius: 6px;
			overflow: hidden;
			border: 1px solid #e9ebef;
			padding: 10px 12px;
			cursor: pointer;
			transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);

			&.flow-card-box-hoverable {
				&:hover {
					box-shadow: 4px 4px 12px rgb(229, 230, 235);
				}
			}

			// 头部
			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			// 操作类容
			.summary-list {
				margin-top: 10px;
			}

			// 底部
			.footer {
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;
				.begin-time {
					color: var(--el-text-color-regular);
				}
			}
		}
	}
}
</style>