jeecgBootUniapp/src/pages/process/taskHandle.vue

<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '任务处理',
	},
	}
</route>
<template>
	<PageLayout nav-title="流程办理">
		<wd-tabs v-model="tab" color="#39b54a" autoLineWidth>
		    <wd-tab  title="单据">
		    </wd-tab>
			<wd-tab title="任务处理">
			  <view class="content">内容2</view>
			</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}}<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';
	
	const formData = 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)=>{
		console.log(data)
	  // this.$refs.nodeInfoModel.close();
	  // this.$refs.nodeInfoModel.showInfo(data,taskId);
	}

	onLoad((options) => {
		let useData = JSON.parse(options.data);
		console.log(123)
		getProcessNodeInfo({taskId:useData.id}).then(res=>{
			console.log(res)
			if(res.success){
				let data = {
				  dataId:res.result.dataId,
				  taskId:useData.id,
				  taskDefKey:useData.taskId,
				  procInsId:useData.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路径
			}
		})
		console.log(useData)
		getNodePositionInfo({processInstanceId:useData.processInstanceId}).then((res)=>{
			console.log(res)
			if (res.success) {
			  nodePositionInfo.value = res.result
			  console.log(res)
			}
		})
		
		getHisInfo({processInstanceId:useData.processInstanceId}).then((res)=>{
			console.log(res)
			if (res.success) {
			  console.log(res)
			  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}`;
		console.log(url)
		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>