tqApp-webView/workflow/eventRecord/module/item.vue

<template>
	<view class="box-container">
		<view class="box-head">
			<view class="box-head-title">单号： {{renderItem(item,'id','--')}} </view>
			<view class="box-head-action">
				<tq-tab
					:classType="{
						'blue': item.flowStatus == 1,
						'green': item.flowStatus == 2,
						'red': item.flowStatus == 3 || item.flowStatus == 4,
					}"
				> 
					{{renderItem(item,'flowStatusName','--')}}
				</tq-tab>
			</view>
			
		</view>
		<view class="box-body" @click="handleDetaisl(item)">
			<u-row>
				<u-col :span="12"> 
					
					<view class="item">
						<view class="label">事件区域：</view>
						<view class="value">{{renderItem(item,'areaCodeName','--')}}</view>
					</view>
					<view class="item">
						<view class="label">事件标题：</view>
						<view class="value">{{renderItem(item,'eventTitle','--')}}</view>
					</view>
					<view class="item">
						<view class="label">事件类型：</view>
						<view class="value">{{renderItem(item,'problemType','--')}}</view>
					</view>
					<view class="item">
						<view class="label">事件等级：</view>
						<view class="value">{{renderItem(item,'eventLevel','--')}}</view>
					</view>
			
					<view class="item">
						<view class="label">解决期限：</view>
						<view class="value">{{renderItem(item,'settleDate','--')}}</view>
					</view>
					
				</u-col>
				
			</u-row>
		</view>
		
		<view class="box-footer" v-if="queryType==1">
			<u-row style="justify-content: flex-end;">
				<u-col :span="4" style="padding: 20rpx 30rpx;" v-if="item.flowStatus === 1">
					<u-button type="error"  	
						:custom-style="{
							width: '100%',
							height: '28px',
						}"  
						plain
						shape="circle"
						@click="handleBack(item)">撤销上报
					</u-button>
				</u-col>	
				<u-col :span="4" style="padding: 20rpx 30rpx;" v-if="item.flowStatus === 3">
					<u-button type="primary"  	
						:custom-style="{
							width: '100%',
							height: '28px',
						}"  
						plain
						shape="circle"
						@click="handleReSubmit(item)">重新上报
					</u-button>
				</u-col>	
			</u-row>
		</view>
		
		
	</view>
</template>

<script>
import { renderItem } from '@/utils/gdtq'
import {recordtaskOperate} from '@/api/system/event.js'

export default {
	components: {
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		},
		queryType: {
			type: Number,
			default: ''
		}
	},
	data() {
		return {}
	},
	methods: {
		handleBack(item) {
			uni.showModal({
				title: '提示',
				content: `确认撤销？`,
				showCancel:true,
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						const {processInstanceId} = item
						let {code} = await recordtaskOperate({
							processInstanceId,
							taskOperate: 'cancel',
							validTask: false,
						})
						if(code == 0) {
							uni.showToast({
							    title: '撤销成功',
							    icon: 'none',
							})
							this.$emit('getList')
						}
					}
				}
			})	
		},
		handleReSubmit(item) {
			uni.navigateTo({
			    url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&id=${item.procDefId}&processInstanceId=${item.processInstanceId}&defaultTitle=${item.companyName}&name=${item.companyName}&restart=true`,
			})
		},
		
		handleDetaisl(item){
		  uni.navigateTo({
		      url: `/pages/flow/diboot?routes=/workflow/mobile/dealTask&Id=${item.procDefId}&processInstanceId=${item.processInstanceId}&defaultTitle=${item.companyName}&name=${item.companyName}&withDealTask=false&fromMobile=true`,
		  })
		}
		
	},
}
</script>

<style lang="scss" scoped>
	.box-container {
		background: #fff;
		margin: 20rpx 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		.box-head {
			border-bottom: 1px solid #ddd;
			padding: 20rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box-head-title {
				flex: 1;
			}
			.box-head-action {
				flex-basis: 120rpx;
			}
		}
		.box-body {
			padding: 20rpx;
			.item {
				margin: 4rpx;
				display: flex;
				.label {
					
				}
				.value {
					flex: 1;
				}
			}
		}
		.box-footer {
			border-top: 1px solid #ddd;
			// padding: 20rpx;
		}
	}
	
	.primary {
		color: $uni-color-primary;
	}
</style>