aizuda-web-vue3/src/views/approve/pendingClaim/detail.vue

<template>
	<el-drawer v-model="visibleDialog" class="custom-adrawer" :direction="direction" size="900" @close="handleCancel">
		<template #title>
			<div class="flow-header-box">
				<div class="flow-no">编号：1719564992673533954</div>
			</div>
		</template>
		<div class="flow-detail-container">
			<div class="flow-status-stamp">
				<div class="flow-stamp-container">
					<img src="@/assets/images/flw03.svg" alt="" style="width: 120px; height: 120px" />
				</div>
			</div>

			<div class="flow-detail-box">
				<!--头部-->
				<div class="header-box">
					<div class="summary-info">
						<div class="title">名片申请</div>
						<div class="status">
							<el-tag type="success">已通过</el-tag>
						</div>
					</div>
					<div class="initiator-info">
						<el-avatar size="16"> 艾斯 </el-avatar>
						<div class="begin-time">2023-11-01 12:00:17 提交</div>
					</div>
				</div>
				<div class="area-divider"></div>

				<!-- 表单 -->
				<el-descriptions :column="1" :size="'default'">
					<el-descriptions-item label="申请人">kooriookami</el-descriptions-item>
					<el-descriptions-item label="日期">18100000000</el-descriptions-item>
					<el-descriptions-item label="员工">Suzhou</el-descriptions-item>
				</el-descriptions>

				<div class="area-divider"></div>

				<!--审批流-->
				<el-timeline>
					<el-timeline-item timestamp="提交" placement="top" type="success" :icon="Check">
						<!-- 审批完成 -->
						<div class="timeline-box flex-1">
							<div class="flex flex-align-center">
								<div class="timeline-box-user flex-1">
									<span class="name">爱丽丝</span>
									<div v-if="false" class="comment">
										<div class="comment-content">同意</div>
									</div>
								</div>
								<span class="timeline-box-date">2018/4/12 20:46</span>
							</div>
						</div>
					</el-timeline-item>

					<el-timeline-item timestamp="审批" placement="top" type="success" :icon="Check">
						<div class="timeline-box flex-1">
							<div class="flex flex-align-center">
								<div class="timeline-box-user flex-1">
									<span class="name">罗小胖</span>
									<div class="comment">
										<div class="comment-content">同意</div>
									</div>
								</div>
								<span class="timeline-box-date">2018/4/12 20:46</span>
							</div>
						</div>
					</el-timeline-item>

					<el-timeline-item timestamp="抄送" placement="top" type="success" :icon="Check">
						<div class="timeline-box flex-1">
							<div class="flex flex-align-center">
								<div v-if="false" class="timeline-box-user flex-1">
									<span class="name">罗小胖</span>
									<div class="comment">
										<div class="comment-content">同意</div>
									</div>
								</div>
								<el-space wrap>
									<el-avatar> 路飞 </el-avatar>
									<el-avatar> 红发 </el-avatar>
									<el-avatar> 娜美 </el-avatar>
								</el-space>

								<span class="timeline-box-date">2018/4/12 20:46</span>
							</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>
			<div class="flow-actions">
				<el-button :icon="ChatLineSquare" @click="openComment">评论</el-button>
			</div>
		</div>
	</el-drawer>
	<review-dialog v-if="reviewVisible" v-model="reviewVisible"></review-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ChatLineSquare, Check } from '@element-plus/icons-vue'
import ReviewDialog from '../components/reviewDialog'

const direction = ref('rtl')
const myProps = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	userIds: {
		type: Array,
		default: () => []
	}
})

const reviewVisible = ref(true)

// 同步值
const $myEmit = defineEmits(['update:modelValue', 'successFn'])

// 关闭按钮
const closeDrawer = () => {
	$myEmit('successFn')
	$myEmit('update:modelValue', false)
}

const handleCancel = () => {
	closeDrawer()
}

const visibleDialog = computed({
	get() {
		return myProps.modelValue
	},
	set(val) {
		$myEmit('update:modelValue', val)
	}
})

const openComment = () => {
	debugger
	reviewVisible.value = !reviewVisible.value
	debugger
}
</script>

<style scoped lang="scss">
.custom-adrawer {
	:deep(.el-drawer__header) {
		padding: 0px;
	}
}

.flow-detail-container {
	height: 100%;
}

.flow-status-stamp {
	position: absolute;
	right: 50px;
	top: 30px;
	.flow-stamp-container {
		img {
			overflow: hidden;
			background-color: transparent;
			z-index: 999;
		}
	}
}

.flow-header-box {
	font-weight: 400;
	font-size: 13px;
	border-bottom: 1px solid #e5e6ec;
	padding: 0 20px;
	height: 39px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #86909c;
}
.flow-detail-box {
	height: calc(100% - 92px);
	overflow: hidden;
	overflow-y: auto;
	padding: 0 30px;
	.header-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 20px;
		.summary-info {
			display: flex;
			align-items: center;
			.title {
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				color: #1d2129;
			}
			.status {
				margin-left: 20px;
			}
		}
		.initiator-info {
			display: flex;
			align-items: center;
			margin-top: 16px;
			.begin-time {
				margin-left: 20px;
				font-weight: 350;
				color: #86909c;
				font-size: 13px;
				-webkit-user-select: none;
				user-select: none;
			}
		}
	}
	.area-divider {
		border-bottom: 1px solid rgba(229, 230, 235, 1);
		margin: 20px 0;
		position: relative;
	}
}

.flow-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 52px;
	border-top: 1px solid rgba(229, 230, 235, 1);
	padding: 0 20px;
}

// 时间线样式
.timeline-box {
	&-user {
		.name {
			color: #1d2129;
			font-weight: 400;
		}
		.comment {
			width: 100%;
			-webkit-user-select: none;
			user-select: none;
			margin: 4px 0 16px;
			padding: 8px 16px;
			border-radius: 4px;
			background-color: #f8f8fa;
			.comment-content {
				font-weight: 500;
				color: #1d2129;
			}
		}
	}
	&-date {
		margin-left: 10px;
		left: 0;
		padding-right: 16px;
		text-align: right;
		transform: translate(-100%);
		position: absolute;
		top: 0;
		box-sizing: border-box;
		max-width: 100px;
		color: #86909c;
		font-size: 12px;
		line-height: 1.667;
	}
}
</style>