jeecgBootUniapp/src/pages-process/taskHandle.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '任务处理',
	},
	}
</route>
<template>
	<PageLayout :nav-title="type=='history'?'历史任务':'流程办理'">
		<wd-tabs v-model="tab" color="#39b54a" autoLineWidth>
			<wd-tab title="单据">
				<DynamicLink ref="linkRef" :path="path" :formData="formData"></DynamicLink>
			</wd-tab>
			<wd-tab title="任务处理" v-if="type!='history'">
				<taskDeal :formData="formData" :useData="useData"></taskDeal>
			</wd-tab>
			<wd-tab title="流程图">
				<view class="container">
					<view
						style="margin-bottom: 20px;height: 400px;overflow: hidden;overflow-y: auto;overflow-x: auto;background-color: #fff;">
						<img :src="imgPath" style="border:2px;cursor:hand;" alt="流程图" usemap="#planetmap">
						<!-- 			<map name="planetmap">
						  <template v-for="(item, key, index) in nodePositionInfo.positionList">
						   <area shape="rect" :coords="item.coords" title="Venus" @touchstart="showNodeInfo(nodePositionInfo.hisTasks,item.id)">
						  </template>
						</map> -->
					</view>
					<wd-card title="流程历史追踪" type="rectangle">
						<wd-steps :active="completedNum" vertical>
							<wd-step v-for="item in dataSource">
								<template #title>
									<view
										:class="{'content':true, 'shadow-blur':true, 'text-sm':true,'bg-green':item.endTime,'bg-gray':!item.endTime}">
										<text>流程节点：{{item.name=='start'?'开始':item.name=='end'?'结束':item.name}}<br></text>
										<text>负责人：{{item.assigneeName}}<br></text>
										<text>开始时间：{{item.startTime}}<br></text>
										<text v-if="item.endTime">结束时间：{{item.endTime}}<br></text>
										<text>{{item.deleteReason}}</text>
									</view>
								</template>
							</wd-step>
						</wd-steps>
					</wd-card>
				</view>
			</wd-tab>
		</wd-tabs>
	</PageLayout>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import { useToast, useMessage } from 'wot-design-uni'
	import {
		useAppStore
	} from '@/store'
	import {
		getProcessNodeInfo,
		getHisProcessNodeInfo,
		getNodePositionInfo,
		getHisInfo
	} from '@/api/process'
	import {
		getEnvBaseUrl
	} from '@/utils/index'
	import { json } from 'stream/consumers';
	import qs from 'qs';
	import { getCurrentInstance } from 'vue'
	import DynamicLink from './components/DynamicLink.vue'
	import taskDeal from './components/taskDeal.vue'

	const { proxy } = getCurrentInstance()
	const type = ref('');

	const formData = ref({})
	const useData = ref({})
	const nodePositionInfo = ref({})
	const dataSource = ref([])
	const path = ref('') //url路径
	const appStore = useAppStore();
	const tab = ref(0)
	const completedNum = ref(0);

	const handleClickLeft = () => {
		uni.navigateBack()
	}

	const showNodeInfo = (data, taskId) => {
		// this.$refs.nodeInfoModel.close();
		// this.$refs.nodeInfoModel.showInfo(data,taskId);
	}

	onLoad((options) => {
		type.value = '';
		if (options.data) {
			type.value = options.data
		}
		const eventChannel = proxy.getOpenerEventChannel();
		eventChannel.on('taskData', (params) => {
			useData.value = JSON.parse(params);
			if (type.value != 'history') {
				getProcessNodeInfo({ taskId: useData.value.id }).then(res => {
					if (res.success) {
						let data = {
							dataId: res.result.dataId,
							taskId: useData.value.id,
							taskDefKey: useData.value.taskId,
							procInsId: useData.value.processInstanceId,
							tableName: res.result.tableName,
							permissionList: res.result.permissionList,
							vars: res.result.records,
						}
						formData.value = data;//流程信息
						let tempFormUrl = res.result.formUrlMobile;
						path.value = tempFormUrl; //url路径
					}
				})
			} else {
				getHisProcessNodeInfo({ procInstId: useData.value.processInstanceId }).then(res => {
					if (res.success) {
						let data = {
							dataId: res.result.dataId,
							taskId: useData.value.id,
							taskDefKey: useData.value.taskId,
							procInsId: useData.value.processInstanceId,
							tableName: res.result.tableName,
							vars: res.result.records
						}
						formData.value = data;//流程信息
						console.log(res)
						let tempFormUrl = res.result.formUrlMobile;
						path.value = tempFormUrl; //url路径
					}

				})
			}

			// getNodePositionInfo({processInstanceId:useData.value.processInstanceId}).then((res)=>{
			// 	if (res.success) {
			// 	  nodePositionInfo.value = res.result
			// 	}
			// })

			getHisInfo({ processInstanceId: useData.value.processInstanceId }).then((res) => {
				if (res.success) {
					dataSource.value = res.result.records
					//查找最后一个，结束时间
					completedNum.value = res.result.records.length
					res.result.records.forEach((item, index) => {
						if (item.endTime) completedNum.value = index + 1
					})
				}
			})
		})

	})

	const imgPath = computed(() => {
		var params = qs.stringify({
			'processInstanceId': formData.value.procInsId
		})
		let url = `${getEnvBaseUrl()}/act/task/traceImage?${params}`;
		return url;
	})
</script>

<style lang="scss" scoped>
	::v-deep .wd-tabs__line {
		background: #39b54a;
	}

	::v-deep .wd-step.is-finished .wd-step__icon-outer {
		border-color: #39b54a;
		color: #fff;
		background-color: #39b54a;
	}

	::v-deep .wd-step.is-process .wd-step__icon-outer {
		border-color: #f0f0f0;
		color: #fff;
		background-color: #f0f0f0;
	}


	.container {
		padding: 5px 0 5px;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.bg-green {
		background-color: #39b54a;
		color: #fff;
	}

	.bg-green {
		background-color: #39b54a;
		color: #fff;
	}

	.bg-gray {
		background-color: #f0f0f0;
		color: #333;
	}

	.content {
		padding: 5px 25px 5px 15px;
	}

	.shadow-blur {
		position: relative;
	}

	.shadow-blur::before {
		content: "";
		display: block;
		background: inherit;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 5px;
		left: 5px;
		z-index: -1;
		opacity: .4;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		border-radius: inherit;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.text-sm {
		font-size: 12px;
	}
</style>