cxc-szcx-uniapp/bpm/tasklistCom.vue

<template>
	<view class="list_box">
		<view class="list" v-for="item,i in taskArr" :key="i"
			@click="tojump(`/pages/task/handle?info=${JSON.stringify(item)}&type=${currentIndex}`)">
			<view class="title f-row aic jcb">
				<view>
					<view>
						{{item.bpmBizTitle}}
					</view>
				</view>
				<text>{{item.durationStr}}</text>
			</view>
			<view class="info">
				<view>
					申请理由：{{item.bpmBizTitle}}
				</view>
				<view v-if="currentIndex != 2">
					当前环节：{{item.taskName}}
				</view>
				<view>
					流程名称：{{item.processDefinitionName}}
				</view>
				<view>
					发起人：{{item.processApplyUserName}}
				</view>
				<view>
					开始时间：{{item.taskBeginTime}}
				</view>
				<view v-if="item.taskEndTime">
					结束时间：{{item.taskEndTime}}
				</view>
			</view>
			<view class="btn f-row aic jcb" v-if="currentIndex == 0 && item.taskAssigneeName">
				<view class="entrust" @click.stop="tojump(`/pages/userlist/index?isradio=1&id=${item.id}`)">
					委托
				</view>
				<view class="handle" @click="tojump(`/pages/task/handle?info=${JSON.stringify(item)}&type=${currentIndex}`)">
					办理
				</view>
			</view>
			<view class="btn f-row aic jcb" v-if="currentIndex == 0 && !item.taskAssigneeName">
				<view>
				</view>
				<view class="handle" @click.stop="handleClaim(item.id)">
					签收
				</view>
			</view>
			<view class="btn f-row aic jcb" v-if="currentIndex == 2 && !item.endTime">
				<view class="entrust" @click.stop="invalidProcess(item.processInstanceId)">
					作废流程
				</view>
				<view class="handle" @click.stop="callBackProcess(item.processInstanceId)">
					取回流程
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		claimApi,
		callBackProcessApi,
		invalidProcessApi
	} from '@/api/api.js';
	import {
		getCurrentInstance,
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance()

	const props = defineProps({
		taskArr: {
			type: Array,
			default: () => []
		},
		currentIndex: {
			type: Number,
			default: 0
		},
	})
	const emit = defineEmits(['jump'])
	const tojump = (url) => {
		emit('jump', url)
	}

	/**流程签收*/
	const handleClaim = (id) => {
		claimApi({
			taskId: id
		}).then((res) => {
			if (res.success) {
				uni.redirectTo({
					url: './index?id=0'
				});
				proxy.$toast(res.message)
			}
		})
	}
	
	/**流程取回*/
	const callBackProcess = (id) => {
		callBackProcessApi({
			processInstanceId: id
		}).then((res) => {
			if (res.success) {
				uni.redirectTo({
					url: './self'
				});
				proxy.$toast(res.message)
			}
		})
	}
	
	/**流程作废*/
	const invalidProcess = (id) => {
		invalidProcessApi({
			processInstanceId: id
		}).then((res) => {
			if (res.success) {
				uni.redirectTo({
					url: './self'
				});
				proxy.$toast(res.message)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.list_box {
		padding: 0 30rpx 0 30rpx;
		margin-top: 24rpx;

		.list {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.title {
				border-bottom: 1px solid #efefef;
				padding-bottom: 24rpx;
				margin-bottom: 8rpx;

				view {
					font-size: 28rpx;
					color: #333333;
				}

				text {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.info {
				font-size: 28rpx;
				color: #666666;

				view {
					padding-top: 16rpx;
				}
			}

			.btn {
				margin-top: 30rpx;

				view {
					width: 300rpx;
					height: 64rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 64rpx;
				}

				.entrust {
					background: #FFFFFF;
					border: 2rpx solid #01508B;
					box-sizing: border-box;
					color: #01508B;
				}

				.handle {
					background: #01508B;
					color: #FFFFFF;
				}
			}
		}
	}
</style>