aiot-app/pages/home/wt/components/salesContract/processTask.vue

<template>
	<view class="havedone-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="uniNavBarTitle" background-color="#157A2C"
			color="#fff" @clickLeft="back"></uni-nav-bar>
		<!-- <iframe src="http://aiot.zoomwin.com.cn:51001/test/a.html" style="width: 200px;height: 600px" frameborder="0"></iframe> -->
		<view v-if="processInstance.processDefinition">
			<taskForm id='async-biz-form-component' :taskId="listData.taskId" :businessId="listData.businessId"
				:id="listData.id" :taskDefinitionKey="listData.taskDefinitionKey" ref="bziRef"></taskForm>

		</view>
		<view v-for="(item, index) in runningTasks" :key="index">
			<div v-if="processInstance.processDefinition">
				<taskSubmit id='async-sub-form-component' :taskId="listData.taskId" :businessId="listData.businessId"
					:id="listData.id" :taskDefinitionKey="listData.taskDefinitionKey" @handleAudit="handleAudit"
					@getTableValue="getTableValue" @handleUpdateAssignee="handleUpdateAssignee(item)"
					@handleBackList="handleBackList(item)" ref="subForm">
				</taskSubmit>
			</div>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getProcessInstance,
		getTaskListByProcessInstanceId
	} from '@/api/wt/index.js'
	import Vue from 'vue'
	import taskForm from './taskForm.vue'
	import taskSubmit from './taskSubmit.vue'
	export default {
		name: 'processTask',
		components: {
			taskForm,
			taskSubmit
		},
		data() {
			return {
				uniNavBarTitle: '',
				processInstanceLoading: false,
				listData: {},
				processInstance: {},
				runningTasks: [],
				auditForms: [],
				activeComp: null,
			}
		},

		onLoad(option) {
			this.listData = option
			this.getDetail()
			this.activeComp = 'tab1'
		},
		methods: {
			/** 获得流程实例 */
			async getDetail() {
				// 获得流程实例相关
				this.processInstanceLoading = true;
				getProcessInstance({
					id: this.listData.id
				}).then(async (response) => {
					if (!response) {
						this.$message.error('查询不到流程信息！');
						return;
					}
					// 设置流程信息 
					this.processInstance = response;
					this.uniNavBarTitle = `${ response.name } 【${ response.startUser?.nickname}】`


					// //将业务表单，注册为动态组件
					// Vue.component('async-biz-form-component', (resolve) => {
					// 	require(['pages/home' + this.listData.miniHandleRouter], resolve);
					// });
					// Vue.component('async-sub-form-component', (resolve) => {
					// 	require(['pages/home' + this.listData.miniViewRouter], resolve);
					// });


					this.processInstanceLoading = false;
				});

				this.runningTasks = [];
				this.auditForms = [];
				getTaskListByProcessInstanceId({
					processInstanceId: this.listData.id
				}).then((response) => {
					console.log(response, 'response');
					// 审批记录
					this.tasks = [];
					// 移除已取消的审批
					response.forEach((task) => {
						if (task.result !== 4) {
							this.tasks.push(task);
						}
					});
					// 排序，将未完成的排在前面，已完成的排在后面；
					this.tasks.sort((a, b) => {
						// 有已完成的情况，按照完成时间倒序
						if (a.endTime && b.endTime) {
							return b.endTime - a.endTime;
						} else if (a.endTime) {
							return 1;
						} else if (b.endTime) {
							return -1;
							// 都是未完成，按照创建时间倒序
						} else {
							return b.createTime - a.createTime;
						}
					});

					// 需要审核的记录
					let userInfo = wx.getStorageSync("userInfo");
					this.tasks.forEach((task) => {
						if (task.result !== 1 && task.result !== 6) {
							// 只有待处理才需要
							return;
						}
						if (!task.assigneeUser || task.assigneeUser.id !== userInfo.userId) {
							// 自己不是处理人
							return;
						}
						if (task.taskDefinitionKey !== this.listData.taskDefinitionKey) {
							// 不是当前流程的
							return;
						}
						this.runningTasks.push({
							...task
						});
						console.log(this.runningTasks, ' this.runningTasks');
						this.auditForms.push({
							reason: ''
						});
					});
				});
			},


			/** 处理审批通过和不通过的操作 */
			handleAudit(data) {
				let text = data.status === 1 ? '通过' : '不通过';
				this.$refs.uToast.show({
					type: 'success',
					message: `审批${data.title || text}成功！`,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
				// 获得最新详情
				setTimeout(() => {

					uni.navigateBack()
				}, 1000)


				// const index = this.runningTasks.indexOf(task);
				// this.$refs['form' + index][0].validate((valid) => {
				//   if (!valid) {
				//     return;
				//   }
				//   const data = {
				//     id: task.id,
				//     reason: this.auditForms[index].reason
				//   };
				//   if (pass) {
				//     approveTask(data).then((response) => {
				//       this.$message.success('审批通过成功！');
				//       this.handleClose(); // 获得最新详情
				//     });
				//   } else {
				//     rejectTask(data).then((response) => {
				//       this.$message.success('审批不通过成功！');
				//       this.handleClose(); // 获得最新详情
				//     });
				//   }
				// });
			},
			getTableValue(fn) {
				fn(this.$refs.bziRef.getTableValue());
			}
		}

	}
</script>

<style>
</style>