mobile-workflow/components/form/sub/ProcessSelect.vue

<template>
	<view class="content">
		<view class="nav-type">
			<uni-segmented-control :current="current" :values="tabs" @clickItem="switchItem" styleType="text"
				activeColor="#4C87F3"></uni-segmented-control>
		</view>
		<view class="datas">
			<scroll-view v-if="datas.records.length > 0" class="scrool-more" 
			:refresher-threshold="0" @scrolltolower="toNextPage" :scroll-top="scrollTo.current" @scroll="scroll"
				enablePullDownRefresh @scrolltoupper="() => {}" :show-scrollbar="true"
				:style="{height: contentHeight + 'px'}" scroll-y="true" scroll-with-animation="true">
				<view class="process-item" v-for="(item, i) in datas.records" :key="item.instanceId + i"
					@click="showInstance(item)">
					<view>
						<text>{{(item.owner || item.staterUser).name}}提交的 {{item.processDefName}}</text>
						<uni-tag class="process-item-status" circle="true" :text="getStatus(item).text"
							:type="getStatus(item).type" inverted></uni-tag>
					</view>
					<view class="form-content">
						<view v-for="fd in item.formAbstracts || []" :key="fd.id">
							<text style="color: #b5b5b5;">{{fd.name}}: </text>
							<text class="over-tip">{{getFormValText(fd)}}</text>
						</view>
					</view>
					<view class="process-item-footer">
						<avatar :name="(item.owner || item.staterUser).name"
							:src="getRes((item.owner || item.staterUser).avatar)" :size="30"></avatar>
						<text>在 {{(item.createTime || item.startTime).substring(0, 16)}} 提交 </text>
						<view @click.stop="selectProcess(item)">
							<uni-icons color="#5976EF" type="checkbox" size="18"></uni-icons>
							<text>选择</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="status" mode="scaleToFill" :showIcon="false"></uni-load-more>
			</scroll-view>
			<image v-else class="nodata" src="/static/image/noData.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script setup>
	import Avatar from '@/components/Avatar.vue'
	import { computed, nextTick, ref } from 'vue';
	import taskApi from '@/api/task'
	import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { getTaskResult, getProcTag } from '@/utils/ProcessUtil.js'
	import { getFormValText, getRes } from '@/utils/tool.js'
	const tabs = computed(() => {
		const navs = ["待我处理", "已处理的", "我发起的", "抄送我的"]
		navs[current.value] += `-${datas.value.total}`
		return navs
	})

	const contentHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight - 40
	})

	const scrollTo = ref({
		current: 0,
		old: 0
	})
	const current = ref(0)
	const status = ref('more')
	const params = ref({
		pageSize: 10,
		pageNo: 1,
		code: ''
	})

	const datas = ref({
		pages: 1,
		size: 10,
		total: 0,
		records: []
	})

	function getStatus(item) {
		switch (current.value) {
			case 0:
				return {
					text: '待处理', type: 'warning'
				};
			case 1:
				return getTaskResult(item);
			case 2:
			case 3:
				return getProcTag(item.result);
		}
	}

	function switchItem(v) {
		current.value = v.currentIndex;
		params.value.pageNo = 1;
		getDataList();
		scrollToTop()
	}
	
	function scroll(e){
		scrollTo.value.old = e.detail.scrollTop
	}
	function scrollToTop(){
		scrollTo.value.current = scrollTo.value.old
		nextTick(() => {
			scrollTo.value.current = 0
		})
	}
	
	function selectProcess(item){
		uni.$emit('selectProcess', {
			id: item.instanceId,
			name: item.processDefName,
			startUser: item.owner || item.staterUser,
			createTime: item.createTime || item.startTime
		})
		setTimeout(() => uni.navigateBack(), 100)
	}

	function getDataRequest() {
		switch (current.value) {
			case 0:
				return taskApi.getUserTodoList(params.value);
			case 1:
				return taskApi.getIdoList(params.value);
			case 2:
				return taskApi.getUserSubmittedList(params.value);
			case 3:
				return taskApi.getCcMeList(params.value);
		}
	}

	function getDataList() {
		status.value = 'loading'
		getDataRequest().then(rsp => {
			uni.stopPullDownRefresh()
			datas.value.total = rsp.data.total
			if (params.value.pageNo === 1) {
				datas.value.records.length = 0
			}
			datas.value.records.push(...rsp.data.records)
			status.value = params.value.pageNo * params.value.pageSize < datas.value.total ? 'more' : 'noMore'
		}).catch(err => {
			uni.stopPullDownRefresh()
		})
	}

	function showInstance(item) {
		uni.navigateTo({
			url: `/pages/instance/instancePreview?instanceId=${item.instanceId}&nodeId=${item.nodeId}`
		})
	}
	
	onLoad((v) => {
		params.value.code = v.processCode;
		getDataList()
	})
	
	onPullDownRefresh(() => {
		getDataList()
	})

	function toNextPage() {
		params.value.pageNo++
		getDataList()
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F4F5F7;
	}

	.nav-type {
		// position: fixed;
		// top: 0;
		// width: 100%;
		// z-index: 999;
		background-color: white;
	}

	.datas {
		.nodata {
			width: 100%;
		}

		.process-item {
			margin: 32rpx;
			border-radius: 13rpx;
			background-color: white;
			padding: 26rpx 32rpx;
			position: relative;
			
			.uni-tag {
				font-weight: 400;
			}

			.process-item-status {
				position: absolute;
				right: 32rpx;
			}

			.form-content {
				font-size: 26rpx;
				color: #8B8B8B;
				margin: 16rpx 16rpx;
				.form-content-it {
					overflow-x: hidden;
					display: flex;
					flex-wrap: wrap;
					.over-tip {
						margin-left: 5px;
					}
				}
			}

			.process-item-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>text {
					font-size: 22rpx;
					color: #8B8B8B;
				}
				&>view:last-child {
					color: #5976EF;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					background-color: #5976ef26;
					padding: 3px 5px;
					border-radius: 5px;
				}
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>