cxc-szcx-uniapp/bpm/leaveApplication/index.vue

<template>
	<view class="f-col aic">
		<view class="info_box">
			<view class="title">
				申请信息
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假职工：
				</view>
				<text>{{info.username_dictText}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					所属单位：
				</view>
				<text>{{info.sysOrgCode_dictText}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					联系方式：
				</view>
				<text>{{info.phone}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假类型：
				</view>
				<text>{{info.type}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假开始时间：
				</view>
				<text>{{info.begintime}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假结束时间：
				</view>
				<text>{{info.endtime}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假天数：
				</view>
				<text>{{info.days}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					审批人：
				</view>
				<text>{{info.examineleader_dictText}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假地点：
				</view>
				<text>{{info.address}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假原因：
				</view>
				<text>{{info.reason}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					附件：
				</view>
				<uni-file-picker v-model="imageValue" :image-styles="imageStyles" />
			</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>
							{{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>
</template>

<script setup>
	import {
		extActFlowDataApi,
		processHistoryListApi
	} from '@/api/api.js';
	import {
		qjQueryByIdApi
	} from '@/api/pages.js';
	import {
		ref,
		onBeforeMount,
		watch,
		onMounted
	} from 'vue'
	import {
		imgUrl
	} from '@/utils/index.js';
	const props = defineProps({
		dataId: {
			type: String,
			default: ''
		},
	})
	const imageValue = ref([])
	const imageStyles = {
		width: 64,
		height: 64,
		border: {
			color: "#dce7e1",
			width: 2,
			style: 'dashed',
			radius: '2px'
		}
	}
	const info = ref({})
	// 申请信息
	const qjQueryById = () => {
		qjQueryByIdApi({
			id: props.dataId
		}).then((res) => {
			if (res.success) {
				info.value = res.result.records[0]
				
				// 构造 imageValue 数组
				imageValue.value = info.value.path.split(',').map(path => {
					const name = path.split('/').pop(); // 获取文件名
					const extname = name.split('.').pop(); // 获取文件扩展名并转换为大写
					return {
						name,
						extname,
						url: imgUrl(path)
					};
				});
			}
		})

	}
	
	/**审批步骤*/
	const extActFlowData = () => {
		extActFlowDataApi({
			flowCode: "dev_cxc_qxj",
			dataId: props.dataId
		}).then((res) => {
			if (res.success) {
				processHistoryList(res.result.processInstanceId)
			}
		})
	}
	const step = ref([])
	const processHistoryList = (processInstanceId) => {
		processHistoryListApi({
			processInstanceId
		}).then((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>