factory_mp_old/components/applyInfoItem/applyInfoItem.vue

<template>
	<view>
		<view class="item" @click="goIntoDetail(approvalObj)">
			<view v-if="approvalObj !== undefined && approvalObj !== null && approvalObj !== ''" class="item-content">
				<!-- <view class="hander-img">
					<image src="../../assets/common/avatar.png" mode="" class="img"></image>
				</view> -->
				<view class="apply-info">
					<view v-if="approvalObj.itemName !== undefined && approvalObj.itemName !== null && approvalObj.itemName !== ''" class="apply-title">
						<text class="apply-title-text">{{approvalObj.itemName}}</text>
					<!-- 	<text class="apply-date">{{approvalObj.submissionTime}}</text> -->
					</view>
					<view v-if="approvalObj.applicationDeptName !== undefined && approvalObj.applicationDeptName !== null && approvalObj.applicationDeptName !== ''" class="">
						<text>所属模块：{{approvalObj.menuName}} </text>
					</view>
					<view v-if="approvalObj.submissionTime !== undefined && approvalObj.submissionTime !== null && approvalObj.submissionTime !== ''" class="">
						<text>提交时间：{{approvalObj.submissionTime}}</text>
					</view>
					
					<view v-if="approvalObj.applicantName !== undefined && approvalObj.applicantName !== null && approvalObj.applicantName !== ''" class="">
						<text>申请人：{{approvalObj.applicantName}}</text>
					</view>
					<view v-if="approvalObj.applicationDeptName !== undefined && approvalObj.applicationDeptName !== null && approvalObj.applicationDeptName !== ''" class="">
						<text>所属部门：{{approvalObj.applicationDeptName}} </text>
					</view>
				<!-- 	<view class="">
						<text>审核状态：{{approvalObj.eventStatusValue}}</text>
					</view> -->
				</view>
			</view>
			<view class="line"></view>
			<view v-if="approvalObj !== undefined && approvalObj !== null && approvalObj !== ''" class="btns" >
				<template v-if="approvalObj.eventStatus==3">
					<view class="left">
						<text>退回</text>
					</view>	
					<view class="right">
						<text>审批</text>
					</view>
				</template>
				<view style="display: flex;justify-content: center;align-items: center;" class="shenhe-status tongyi" v-if="approvalObj.eventStatus==1">
					<image class="" src="../../static/profile/my_apply/tongguo.png" mode=""></image>
					<text>审核通过</text>
				</view>	
				<view style="display: flex;justify-content: center;align-items: center;" class="shenhe-status tuihui" v-if="approvalObj.eventStatus==0">
					<image class="" src="../../static/profile/my_apply/return.png" mode=""></image>
					<text>已退回</text>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;" class="shenhe-status zuofei" v-if="approvalObj.eventStatus==2">
					<image class="" src="../../static/profile/my_apply/zuofei.png" mode=""></image>
					<text>已作废</text>
				</view>
			</view>
		
			</view>
		</view>
	</view>
</template>

<script>
	import { routeArray } from '../../utils/correspondingRoute.js';
	export default {
		data() {
			return {
				
			}
		},
		props:{
			approvalObj: {
				type: Object,
				default: null
			},
		},
		methods: {
			goIntoDetail(val){
				const routeObj = routeArray.find(item=>{
					return item.pcRoute == val.menuID;
				})
				if (routeObj !== undefined && routeObj !== null && routeObj !== "") {
					// if(val.eventStatus != 0 && val.eventStatus != 2){
						
						let eventStatus = val.eventStatus;
						if(val.newEventStatus){
							eventStatus = val.newEventStatus;
						}
						const params = `?eventStatus=${eventStatus}&execId=${val.execId}&pkId=${val.pkId}&itemId=${val.itemId}`;
						uni.navigateTo({
							url: routeObj.appDetail + params,
						})
					// }
					
				}else {
					uni.showToast({
						title: "路由异常, 无法跳转, 请检查correspondingRoute.js中是否配置该详情路由",
						icon: "none"
					})
				}
				
				// this.$emit('goIntoDetail')
			}
		}
	}
</script>

<style scoped>
	.line {
		width: 660rpx;
		height: 1rpx;
		background-color: #eeeeee;
		margin: 0 auto;
	}
	.item {
		background-color: #ffffff;
	
	}
  .item .item-content {
		display: flex;
		padding: 23rpx 20rpx;
  }
  .item .hander-img {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.item .hander-img image{
		width: 100%;
		height: 100%;
	}
  	.item .apply-info {
		margin-left: 15rpx;
		font-family: PingFang-SC-Medium;
		font-size: 28rpx;
		line-height: 50rpx;
		letter-spacing: -2rpx;
		color: #5b5b5b;
		flex-grow: 1
	}
	.apply-title{
		display: flex;
		justify-content: space-between;
	}
	.item .apply-info .apply-title-text {
		font-size: 30rpx;
		letter-spacing: -2rpx;
		color: #3d3d3d;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
			
	}
	.item .apply-info .apply-date{
		font-family: PingFang-SC-Regular;
		font-size: 24rpx;
		letter-spacing: 0rpx;
		color: #ababab;
	}
	.btns {
		height: 83rpx;
		display: flex;
		text-align: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		overflow: hidden;
	}
	.btns view {
		flex-grow: 1;
	}
	.btns .left {
		color: #ea4871;
		position: relative;
		
	}
	.btns .left::after {
		content: "";
		width: 1rpx;
		height: 83rpx;
		background-color: #eeeeee;
		position: absolute;
		top: -18rpx;
		right: 0rpx;
	}
	.btns .right {
		color: #34af27;
	}
	.btns .tongyi {
		color: #34af27!important;
	}
	.btns .tuihui {
		color: #ea4871!important;
	}
	.btns .zuofei {
		color: #565656;
	}
	.shenhe-status image{
		width: 26rpx;
		height: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}
</style>