411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
title="流程详情"
|
||
width="900px"
|
||
class="process-detail-dialog"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="process-detail-container">
|
||
<!-- 基本信息 -->
|
||
<el-card class="detail-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="section-title">基本信息</span>
|
||
</div>
|
||
</template>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="学生姓名">
|
||
<span class="detail-value">{{ processData.studentName }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="身份证号">
|
||
<span class="detail-value">{{ processData.idCard }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="当前状态">
|
||
<dict-tag :options="zsjy_enrollment_status" :value="processData.currentStatus" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="当前处理人">
|
||
<span class="detail-value">{{ processData.currentHandlerName || '-' }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="完成状态">
|
||
<el-tag type="success" v-if="processData.isCompleted === 1 || processData.isCompleted === '1'">已完成</el-tag>
|
||
<el-tag type="info" v-else>未完成</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">
|
||
<span class="detail-value">{{ parseTime(processData.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 流程状态 -->
|
||
<el-card class="detail-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="section-title">流程状态</span>
|
||
</div>
|
||
</template>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<div class="status-item">
|
||
<div class="status-header">
|
||
<el-icon class="status-icon"><User /></el-icon>
|
||
<span class="status-title">信息审核</span>
|
||
</div>
|
||
<div class="status-content">
|
||
<div class="status-badge">
|
||
<dict-tag :options="zsjy_audit_status" :value="processData.infoAuditStatus" />
|
||
</div>
|
||
<div class="status-detail" v-if="processData.infoAuditStatus !== '0'">
|
||
<p><strong>审核人：</strong>{{ processData.infoAuditUserName || '-' }}</p>
|
||
<p><strong>审核时间：</strong>{{ parseTime(processData.infoAuditTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</p>
|
||
<p><strong>审核意见：</strong>{{ processData.infoAuditOpinion || '-' }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="status-item">
|
||
<div class="status-header">
|
||
<el-icon class="status-icon"><Document /></el-icon>
|
||
<span class="status-title">录取处理</span>
|
||
</div>
|
||
<div class="status-content">
|
||
<div class="status-badge">
|
||
<dict-tag :options="zsjy_process_status" :value="processData.admissionStatus" />
|
||
</div>
|
||
<div class="status-detail" v-if="processData.admissionStatus !== '0'">
|
||
<p><strong>处理人：</strong>{{ processData.admissionUserName || '-' }}</p>
|
||
<p><strong>处理时间：</strong>{{ parseTime(processData.admissionTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</p>
|
||
<p><strong>通知书号：</strong>{{ processData.noticeNumber || '-' }}</p>
|
||
<p><strong>处理意见：</strong>{{ processData.admissionOpinion || '-' }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="status-item">
|
||
<div class="status-header">
|
||
<el-icon class="status-icon"><Finished /></el-icon>
|
||
<span class="status-title">最终审核</span>
|
||
</div>
|
||
<div class="status-content">
|
||
<div class="status-badge">
|
||
<dict-tag :options="zsjy_audit_status" :value="processData.finalAuditStatus" />
|
||
</div>
|
||
<div class="status-detail" v-if="processData.finalAuditStatus !== '0'">
|
||
<p><strong>审核人：</strong>{{ processData.finalAuditUserName || '-' }}</p>
|
||
<p><strong>审核时间：</strong>{{ parseTime(processData.finalAuditTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</p>
|
||
<p><strong>审核意见：</strong>{{ processData.finalAuditOpinion || '-' }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<!-- 缴费信息 -->
|
||
<el-card class="detail-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="section-title">缴费信息</span>
|
||
</div>
|
||
</template>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="缴费状态">
|
||
<el-tag :type="processData.paymentStatus == 1 ? 'success' : 'info'">
|
||
{{ processData.paymentStatus == 1 ? '已缴费' : '未缴费' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="缴费确认时间">
|
||
<span class="detail-value">{{ parseTime(processData.paymentConfirmTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 完成信息 -->
|
||
<el-card class="detail-card" shadow="never" v-if="processData.isCompleted === 1">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="section-title">完成信息</span>
|
||
</div>
|
||
</template>
|
||
<el-descriptions :column="1" border>
|
||
<el-descriptions-item label="完成时间">
|
||
<span class="detail-value">{{ parseTime(processData.completionTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<!-- 备注信息 -->
|
||
<el-card class="detail-card" shadow="never" v-if="processData.remark">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="section-title">备注信息</span>
|
||
</div>
|
||
</template>
|
||
<div class="remark-content">
|
||
{{ processData.remark }}
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleClose">关闭</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, toRefs } from 'vue'
|
||
import type { EnrollmentProcessVO } from '@/api/zsjy/enrollmentProcess'
|
||
|
||
interface Props {
|
||
visible: boolean
|
||
processData: Partial<EnrollmentProcessVO>
|
||
}
|
||
|
||
interface Emits {
|
||
(e: 'update:visible', value: boolean): void
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
visible: false,
|
||
processData: () => ({})
|
||
})
|
||
|
||
const emit = defineEmits<Emits>()
|
||
|
||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||
const { zsjy_enrollment_status, zsjy_audit_status, zsjy_process_status, zsjy_payment_status, sys_yes_no } = toRefs<any>(
|
||
proxy?.useDict('zsjy_enrollment_status', 'zsjy_audit_status', 'zsjy_process_status', 'zsjy_payment_status', 'sys_yes_no')
|
||
)
|
||
|
||
// 对话框可见性
|
||
const dialogVisible = computed({
|
||
get: () => props.visible,
|
||
set: (value: boolean) => {
|
||
emit('update:visible', value)
|
||
}
|
||
})
|
||
|
||
/** 关闭对话框 */
|
||
const handleClose = () => {
|
||
dialogVisible.value = false
|
||
}
|
||
|
||
const isCompletedTag = computed(() => {
|
||
return String(processData.value.isCompleted) === '1' ? 'success' : 'info'
|
||
})
|
||
|
||
const isCompletedText = computed(() => {
|
||
return String(processData.value.isCompleted) === '1' ? '已完成' : '未完成'
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.process-detail-dialog :deep(.el-dialog) {
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.process-detail-dialog :deep(.el-dialog__header) {
|
||
background: linear-gradient(135deg, rgb(93, 135, 255) 0%, rgb(73, 190, 255) 100%);
|
||
color: white;
|
||
padding: 20px 24px;
|
||
margin: 0;
|
||
}
|
||
|
||
.process-detail-dialog :deep(.el-dialog__title) {
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.process-detail-dialog :deep(.el-dialog__headerbtn) {
|
||
.el-dialog__close {
|
||
color: white;
|
||
font-size: 20px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.process-detail-dialog :deep(.el-dialog__body) {
|
||
padding: 20px 24px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.process-detail-dialog :deep(.el-dialog__footer) {
|
||
padding: 16px 24px 20px;
|
||
background: #ffffff;
|
||
border-top: 1px solid rgba(93, 135, 255, 0.1);
|
||
}
|
||
|
||
.process-detail-container {
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.detail-card {
|
||
margin-bottom: 16px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e4e7ed;
|
||
}
|
||
|
||
.detail-card:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-card :deep(.el-card__header) {
|
||
background: #f8f9fa;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
position: relative;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: '';
|
||
width: 3px;
|
||
height: 16px;
|
||
background: linear-gradient(135deg, rgb(93, 135, 255), rgb(73, 190, 255));
|
||
border-radius: 2px;
|
||
margin-right: 8px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 流程状态样式 */
|
||
.status-item {
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
height: 100%;
|
||
background: #fff;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.status-item:hover {
|
||
border-color: #409eff;
|
||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
|
||
}
|
||
|
||
.status-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f2f5;
|
||
}
|
||
|
||
.status-icon {
|
||
font-size: 18px;
|
||
color: #409eff;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.status-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
|
||
.status-content {
|
||
min-height: 120px;
|
||
}
|
||
|
||
.status-badge {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.status-detail {
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.status-detail p {
|
||
margin: 6px 0;
|
||
color: #606266;
|
||
}
|
||
|
||
.status-detail strong {
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 备注内容样式 */
|
||
.remark-content {
|
||
background: #f8f9fa;
|
||
padding: 12px 16px;
|
||
border-radius: 6px;
|
||
border-left: 4px solid #409eff;
|
||
color: #606266;
|
||
line-height: 1.6;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
/* 对话框底部样式 */
|
||
.dialog-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.process-detail-container::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.process-detail-container::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.process-detail-container::-webkit-scrollbar-thumb {
|
||
background: #c1c1c1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.process-detail-container::-webkit-scrollbar-thumb:hover {
|
||
background: #a8a8a8;
|
||
}
|
||
|
||
/* 描述列表样式优化 */
|
||
:deep(.el-descriptions__body) {
|
||
background: #fff;
|
||
}
|
||
|
||
:deep(.el-descriptions__label) {
|
||
background: #f8f9fa !important;
|
||
color: #606266 !important;
|
||
font-weight: 500 !important;
|
||
width: 120px;
|
||
}
|
||
|
||
:deep(.el-descriptions__content) {
|
||
background: #fff !important;
|
||
color: #303133 !important;
|
||
}
|
||
</style>
|