cxc-szcx-uniapp/pages/views/renliziyuan/qingjiaxinxi/detail.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.departure}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					目的地：
				</view>
				<text>{{info.destination}}</text>
			</view>
			<view class="info f-row aic jcb">
				<view>
					请假原因：
				</view>
				<text>{{info.reason}}</text>
			</view>
			<view class="info f-row aic jcb" v-if="ifShowFj">
				<view>
					附件：
				</view>
				<uni-file-picker v-model="imageValue" :image-styles="imageStyles" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		processHistoryListApi
	} from '@/api/api.js';
	import {
		qjQueryByIdApi
	} from '@/api/leaveApi.js';
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		imgUrl
	} from '@/utils/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const imageValue = ref([])
	const ifShowFj = ref(false)
	const imageStyles = {
		width: 64,
		height: 64,
		border: {
			color: "#dce7e1",
			width: 2,
			style: 'dashed',
			radius: '2px'
		}
	}
	const info = ref({})
	// 申请信息
	const qjQueryById = (e) => {
		qjQueryByIdApi({
			id: e
		}).then((res) => {
			if (res.success) {
				info.value = res.result.records[0]
				// 构造 imageValue 数组
				if (info.value.path) {
					ifShowFj.value = true;
					imageValue.value = info.value.path.split(',').map(path => {
						const name = path.split('/').pop(); // 获取文件名
						const extname = name.split('.').pop(); // 获取文件扩展名并转换为大写
						return {
							name,
							extname,
							url: imgUrl(path)
						};
					});
				}
			}
		})
	}
	onLoad((options) => {
		qjQueryById(options.id)
	})
</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;
			}
		}
	}
</style>