cxc-szcx-uniapp/component/leaveApplication.vue

<template>
	<view class="">
		<view class="f-col aic">
			<view class="info_box">
				<view class="title">
					申请信息
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						请假职工：
					</view>
					<text>{{info.qjname}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						请假类型：
					</view>
					<text>{{info.qjlx}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						假期开始日期：
					</view>
					<text>{{info.starttime}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						假期结束日期：
					</view>
					<text>{{info.endtime}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						请假天数：
					</view>
					<text>{{info.qjdays}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						审批人：
					</view>
					<text>{{info.leadername}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						事由：
					</view>
					<text>{{info.sy}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						联系方式：
					</view>
					<text>{{info.lxdh}}</text>
				</view>
				<view class="info f-row aic jcb">
					<view class="">
						休假地点：
					</view>
					<text>{{info.xjdd}}</text>
				</view>
			</view>
		</view>
		<view class="f-col aic">
			<view class="progress">
				<view class="title">
					审批流程
				</view>
				<view class="progress_box">
					<view class="box" v-for="(item,index) in step" :key="index">
						<view class="topic f-row aic">
							<view class="">
								{{item.name}}
							</view>
							<view
								:class="['status',{'complete':item.deleteReason=='已完成'},{'refuse':item.deleteReason=='已拒绝'}]">
								{{item.deleteReason}}
							</view>
						</view>
						<view class="name_time">
							{{item.assigneeName}} | {{item.endTime}}
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		qjQueryByIdApi,
		extActFlowDataApi,
		processHistoryListApi
	} from '@/network/api.js';
	import {
		ref,
		onBeforeMount,
		watch,
		onMounted
	} from 'vue'
	const props = defineProps({
		dataId: {
			type: String,
			default: ''
		}
	})

	const info = ref({})
	// 申请信息
	const qjQueryById = (id) => {
		qjQueryByIdApi({
			id: props.dataId
		}).then((res) => {
			console.log('申请信息', res);
			if (res.success) {
				info.value = res.result
			}
		})
	}
	const extActFlowData = (dataId) => {
		extActFlowDataApi({
			flowCode: "dev_cxc_qxj_zg_001",
			dataId: props.dataId
		}).then((res) => {
			console.log('流程审核', res);
			if (res.success) {
				processHistoryList(res.result.processInstanceId)
				
			}
		})
	}
	const step = ref([])
	/**审批步骤*/
	const processHistoryList = (processInstanceId) => {
		console.log('000', processInstanceId);
		processHistoryListApi({
			processInstanceId
		}).then((res) => {
			console.log('0088800', res);
			if (res.success) {
				step.value = res.result.records
			}
		})
	}
	// watch(() => props.dataId, (nval, oval) => {
	// 	if (nval) {
	// 		qjQueryById()
	// 		extActFlowData()
	// 	}
	// })
	onMounted(()=>{
		qjQueryById()
		extActFlowData()
	})
</script>

<style lang="scss" scoped>
	.info_box {
		padding: 40rpx 30rpx 16rpx 30rpx;
		width: 630rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		margin-top: 30rpx;


		.title {
			font-size: 28rpx;
			color: #333333;
			background-image: url(../../static/index/line.png);
			background-size: 44rpx 12rpx;
			background-repeat: no-repeat;
			background-position: left bottom;
			margin-bottom: 30rpx;
		}

		.info {
			font-size: 28rpx;
			margin-bottom: 24rpx;

			view {
				color: #666666;
			}

			text {
				color: #333333;
			}
		}
	}

	.progress {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		width: 630rpx;
		padding: 40rpx 30rpx 16rpx 30rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.status {
			padding: 4rpx 8rpx;
			display: inline-block;

			color: #FFFFFF;
			font-size: 20rpx;
			margin-left: 8rpx;
			border-radius: 8rpx;

		}

		.complete {
			background-color: #7AC756;
		}

		.refuse {
			background-color: #FE4600;
		}

		.title {
			font-size: 28rpx;
			color: #333333;
			background-image: url(../../static/index/line.png);
			background-size: 44rpx 12rpx;
			background-repeat: no-repeat;
			background-position: left bottom;
			margin-bottom: 40rpx;

		}

		// .box:not(:first-child) {
		// 	padding-top: 60rpx;
		// }
		.box:not(:last-child) {
			position: relative;
			padding-bottom: 60rpx;

			&::before {
				position: absolute;
				content: ' ';
				width: 1px;
				height: 100%;
				background: #efefef;
				left: -42rpx;
				top: 10rpx;
			}
		}

		.box {
			margin-left: 50rpx;


			.topic {
				position: relative;
				font-size: 28rpx;
				color: #333333;

				&::before {
					position: absolute;
					content: ' ';
					width: 18rpx;
					height: 18rpx;
					background: #01508B;
					border-radius: 14rpx;
					left: -50rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.name_time {
				font-size: 24rpx;
				color: #888888;
				margin-top: 12rpx;
			}
		}
	}
</style>