wdt_erp_process_h5/pages/workbench/task/TaskFormDetail.vue

<template>
	<view>
		<u-subsection
			:list="procInsId?['表单信息', '流转记录']:['表单信息']"
			mode="button"
			:fontSize="16"
			:current="tabIndex"
			@change="tabSelect"
		></u-subsection>
		<view v-show="0 === tabIndex">
			<scroll-view scroll-y>
				<component :formReadOnly="formReadOnly" :class="formReadOnly?'readonly':''"  ref="form" :businessId="businessId" :is="form"></component>
				<PreviewForm :formData="formData"  v-if="formType !== '2'"  :processDefinitionId="procDefId" :edit="false" ref="form"></PreviewForm>
				<u-gap height="40" bgColor="#fff"></u-gap>
			</scroll-view>
		</view>
		<view v-show="1 === tabIndex">
			<view class="padding">
	
				<view class="cu-timeline" :key="index" v-for="(act, index) in historicTaskList">
					<view class="cu-time">{{act.histIns.startTime |formatDate('MM-DD')}}</view>
					<view class="cu-item text-blue">
						<view class="content">
							<view class="cu-capsule radius">
								<view class="cu-tag bg-cyan">{{act.histIns.activityName}}</view>
								<!-- <view class="cu-tag line-cyan">{{act.histIns.activityName}}</view> -->
							</view>
							
							<view class="margin-top">
								审批人 ： {{act.assigneeName}}
							</view>
							<view class="margin-top">
								办理状态 ：<view class="cu-tag bg-blue">{{act.comment.status}}</view>  
							</view>
							<view class="margin-top">
								审批意见 ： {{act.comment.message}}
							</view>
							<view class="margin-top">
								开始时间 : {{act.histIns.startTime |formatDate}}
							</view>
							<view class="margin-top">
								结束时间 : {{act.histIns.endTime |formatDate}}
							</view>
							<view class="margin-top">
								用时 : {{act.durationTime || '0秒'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userSelect from '@/components/user-select/user-select.vue'
	import PreviewForm from '../form/GenerateFlowableForm'
	import TestActivitiLeaveForm from '@/pages/test/activiti/TestActivitiLeaveForm.vue'
	import DisposeRubbishForm from '@/pages/edt/DisposeRubbishFormDetail.vue'
	import PatrolWorkOrderForm from '@/pages/edt/PatrolWorkOrderForm.vue'
	import PatrolWorkOrderAuditForm from '@/pages/edt/PatrolWorkOrderAuditForm.vue'
	import taskService from "@/api/flowable/taskService"
	import formService from "@/api/flowable/formService"
	export default {
		onLoad: function (option) {
		    this.flow = JSON.parse(decodeURIComponent(option.flow));
			this.procDefId = this.flow.procDefId
			this.procDefKey = this.flow.procDefKey
			this.formType = this.flow.formType
			this.formUrl = this.flow.formUrl
			this.taskId = this.flow.taskId
			this.taskDefKey = this.flow.taskDefKey
			this.status = this.flow.status
			this.title = this.flow.formTitle
			this.businessId = this.flow.businessId
			this.procInsId = this.flow.procInsId
			this.formReadOnly = true
			uni.setNavigationBarTitle({
			    title: this.title
			});
		},
		async mounted () {
			  if (this.formType === '2') { //外置表单
				if (this.formUrl === '/404') {
				  this.form = null
				  uni.showToast({ title: '没有关联流程表单!', icon: "none" });
				} else {
					// uniapp 不支持动态组件，所以通过名称匹配决定调用的表单组件
					if(this.formUrl.endsWith('TestActivitiLeaveForm')) {
						this.form = TestActivitiLeaveForm
					}else if(this.formUrl.endsWith('DisposeRubbishForm')){
						this.form = DisposeRubbishForm
					}else if(this.formUrl.endsWith('PatrolWorkOrderForm')){
						this.form = PatrolWorkOrderForm
					}else if(this.formUrl.endsWith('PatrolWorkOrderAuditForm')){
						this.form = PatrolWorkOrderAuditForm
					}else{
						uni.showToast({ title: '没有关联流程表单!', icon: "none" });
					}
				}
			  } else { // 动态表单
			  // 读取流程表单
				if (this.formUrl === '/404') {
				   uni.showToast({ title: '没有关联流程表单!', icon: "none" });
				} else {
				  let data = await formService.getMobileForm(this.formUrl);
				 // 初始化动态表单
				  data.forEach((item)=>{
					  item.writable = true //挂载 writable，readable,value 属性，是为了触发对这三个属性的监听
					  item.readable = true
					  if(this.isObjectValue(item)){
						  item.value = null
					  }else{
						  item.value =  ''
					  }
					  let input = JSON.parse(JSON.stringify(item))
					  this.formData.push(input)
				  })
			
				    // 读取任务表单配置
				let res = await formService.getHistoryTaskFormData({ processInstanceId: this.procInsId, procDefId: this.procDefId, taskDefKey: this.taskDefKey })
				this.setData(res, 'audit')
				  
				}
			  }
			// 读取历史任务列表
			  taskService.historicTaskList(this.procInsId).then((data) => {
				this.historicTaskList = data.reverse()
			  })
		},
		components:{
		  userSelect,
		  TestActivitiLeaveForm,
		  DisposeRubbishForm,
		  PatrolWorkOrderForm,
		  PatrolWorkOrderAuditForm,
		  PreviewForm
		},
		data() {
			return {
				flow: null,
				tabIndex: 0,
				form: null,
				formType: '',
				formUrl: '',
				taskSelectedTab: 'frist',
				historicTaskList: [],
				procDefId: '',
				procInsId: '',
				formReadOnly: false,
				procDefKey: '',
				taskId: '',
				formData: [],
				taskDefKey: '',
				status: '',
				title: '',
				businessId: ''
			}
		},
		methods:{
			tabSelect (index) {
				this.tabIndex = index;
			},
			// 为任务表单赋值
			setData (taskFormData, status) {
				this.formData.forEach((input)=>{
					let item = taskFormData.filter((item)=>{
						if(input.model === item.id){
							return true
						}else{
							return false
						}
					})[0]
					if(item){
						if(this.isObjectValue(input)){
							  if(item.value && typeof item.value=== 'string'){
								   input.value =  JSON.parse(item.value)
							   }else {
								   input.value = item.value
							   }
						   }else{
							   input.value = item.value
						  }
						input.readable = item.readable
						input.writable = false
					}else{
						input.readable = false
					}
				})
			},
			// 判断数据类型是否是非String类型
			isObjectValue (input) {
				if(input.type === 'checkbox' ||
				   input.type === 'slider' ||
				   input.type === 'switch' ||
				   input.type === 'rate' ||
				   input.type === 'imgupload' ||
				   input.type === 'select' && input.options.multiple ||
				   input.type === 'fileupload'){
					   return true
				  }
				  return false
			}
		}
	}
</script>