cmc-oa/oa-ui-app/pages/message/apply/apply.vue

<!--
 * @Author: ysh
 * @Date: 2025-01-21 10:01:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-04-11 15:36:40
-->
<template>
	<view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption" :top="20">

			<view class="tag-view text-center margin-top-xs margin-bottom-xs" style="padding: 10rpx;">
				<uni-tag :text="'您还有' + total + '个任务待审'" />
			</view>

			<view v-if="todoList.length > 0">
				<view v-for="(item, index) in todoList" :key="index">
					<view @click="goToDetail(item)" class="box">
						<!-- 当前节点标签 -->
						<view class="node-tag">
							<uni-tag :text="'流程名称：' + item.procDefName" inverted="true" type="primary" size="small" />
						</view>

						<!-- 时间与标题区域 -->
						<view class="header-area">
							<text class="time-text">{{ item.createTime }}</text>
							<uni-title type="h4" :title="item.title || '暂无标题'" class="title-text" />
						</view>

						<!-- 流程信息 -->
						<view class="process-info">
							<view class="info-item">
								<text class="info-label">当前节点：</text>
								<text class="info-value">{{ item.taskName }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">发起人：</text>
								<text class="info-value">{{ item.startUserName }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<u-empty v-else mode="list"></u-empty>
		</mescroll-uni>
	</view>
</template>

<script>
import { todoList } from "@/api/flowable/todo";
import MescrollMixin from '@/uni_modules/mescroll/components/mescroll-uni/mescroll-mixins.js'
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			todoList: [],
			total: 0,
			mescroll: null,
			downOption: {
				auto: false, // 手动初始化后需要关闭自动加载
				textOutOffset: '下拉刷新',
				textLoading: '加载中...'
			},
			upOption: {
				auto: true, // 自动加载初始页
				page: { num: 0, size: 10 }, // 初始页码和每页数量
				noMoreSize: 5, // 数据不足时显示"没有更多"
				empty: { tip: '暂无待审任务' },
				textNoMore: '~ 没有更多任务了 ~'
			}
		};
	},
	created() {
		this.getTodoList();
	},
	onLoad: function (options) {
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		this.getTodoList();
	},
	methods: {
		// 初始化mescroll实例
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新回调
		downCallback() {
			this.mescroll.resetUpScroll(true);
		},
		async upCallback(page) {
			try {
				const res = await todoList({
					pageNum: page.num,
					pageSize: page.size,
					name: null
				});

				const curPageLen = res.data.records.length;
				this.total = res.data.total;

				// 处理分页数据
				if (page.num == 1) this.todoList = []; // 第一页清空数据
				this.todoList = this.todoList.concat(res.data.records);

				// 结束加载状态
				this.mescroll.endSuccess(curPageLen, res.data.total <= this.todoList.length);
			} catch (e) {
				this.mescroll.endErr();
			}
		},
		getTodoList() {
			todoList({
				pageNum: 1,
				pageSize: 999,
				name: null
			}).then(response => {
				this.total = response.data.total;
				this.todoList = response.data.records;
				uni.stopPullDownRefresh();
			});
		},
		goToDetail(item) {
			// 跳转到详情页，并传递项目ID
			const query = {
				procInsId: item.procInsId,
				executionId: item.executionId,
				deployId: item.deployId,
				taskId: item.taskId,
				taskName: item.taskName,
				startUserName: item.startUserName,
				procDefName: item.procDefName
			}
			const encodedParams = encodeURIComponent(JSON.stringify(query));
			uni.navigateTo({
				url: `/pages/message/apply/detail?params=${encodedParams}`
			})
		}
	}
}
</script>

<style lang="scss">
/* 新增mescroll布局样式 */
mescroll-body {
	height: calc(100vh - 100rpx);
	box-sizing: border-box;
}

.box {
	position: relative;
	background: #fff;
	border-radius: 12rpx;
	padding: 32rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

	.node-tag {
		position: absolute;
		left: 20rpx;
		top: 40rpx;
		z-index: 2;
	}

	.header-area {
		margin-top: 16rpx;
		border-bottom: 1rpx solid #eee;

		.time-text {
			float: right;
			font-size: 24rpx;
			color: #999;
		}

		.title-text {
			clear: both;
			font-weight: 600;
			color: #333;
			margin: 16rpx 0;
		}
	}

	.process-info {
		margin-top: 24rpx;

		.info-item {
			margin-bottom: 12rpx;
			font-size: 28rpx;

			.info-label {
				color: #666;
				margin-right: 16rpx;
			}

			.info-value {
				color: #333;
				font-weight: 500;
			}
		}
	}
}
</style>