jeecgBootUniapp/src/pages-bpm/leaveApplication/index.vue

<template>
	<wd-cell-group border>
		<wd-cell title="职工姓名" :value="info.username_dictText" />
		<wd-cell title="所属单位" :value="info.sysOrgCode_dictText" />
		<wd-cell title="联系方式" :value="info.phone" />
		<wd-cell title="请假类型" :value="info.type" />
		<wd-cell title="请假开始时间" :value="info.begintime" />
		<wd-cell title="请假结束时间" :value="info.endtime" />
		<wd-cell title="请假天数" :value="info.days + '天'" />
		<wd-cell title="出发地" :value="info.departure" />
		<wd-cell title="目的地" :value="info.destination" />
		<wd-cell title="请假原因" :value="info.reason" />
		<wd-cell title="附件" v-if="info.path&&info.path.length>0">
			<template v-for="(img, index) in info.path" :key="index">
				<wd-img :width="100" :height="100" :src="img" :enable-preview="true" />
			</template>
		</wd-cell>
	</wd-cell-group>
</template>

<script setup lang="ts">	
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		queryByIdApi
	}  from '@/api/humanResource/absence'
	import {
		getEnvBaseUrl,
		imgUrl
	} from '@/utils/index'
	import {
		useUserStore
	} from '@/store/user'

	defineOptions({
	  name: 'index',
	  options: {
	    styleIsolation: 'shared',
	  },
	})
	const userStore = useUserStore();
	const examineleader = ref('')
	const imageValue = ref([])
	const ifShowFj = ref(false)
	const imageStyles = {
		width: 64,
		height: 64,
		border: {
			color: "#dce7e1",
			width: 2,
			style: 'dashed',
			radius: '2px'
		}
	}
	const uploadUrl = getEnvBaseUrl() + '/sys/common/upload?appPath=职工请假/' + userStore.userInfo.department + '/' +
		userStore.userInfo.realname
	
	const props = defineProps({
		history: {
			type: String,
			default: ""
		},
		activeKey: {
			type: String,
			default: ""
		},
		formData: {
			type: Object,
			default: () => { },
		}
	
	})
	const info = ref({})
	// 申请信息
	const qjQueryById = () => {
		console.log(props.formData)
		queryByIdApi(props.formData.dataId).then((res) => {
			if (res.success) {
				if (res.result.records[0].zwmc == '单位专家' || res.result.records[0].zwmc == '基层正职' ||
					res.result.records[0].zwmc == '高级主管') {
					examineleader.value = '分管领导';
				} else {
					examineleader.value = '审批领导';
				}
				info.value = res.result.records[0]
				// 构造 imageValue 数组
				info.value.path = info.value.path.split(',').map(path => imgUrl(path))
				console.log(info)
			}
		})
	}
	
	onMounted(() => {
		qjQueryById()
	})
	
</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;
			display: flex;
			justify-content: space-between;
		}
	
		.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>