606 lines
24 KiB
Vue
606 lines
24 KiB
Vue
<template>
|
|
<div class="px-[30px] py-5 user-info min-h-full flex flex-col">
|
|
<div v-if="submission" class="border-b border-br pb-5">
|
|
<span class="text-2xl font-medium">注册状态</span>
|
|
</div>
|
|
<el-card
|
|
v-if="submission"
|
|
class="!border-none mb-4 flex-1"
|
|
shadow="never"
|
|
>
|
|
<div class="status-info mt-4">
|
|
<!-- 改为步骤条展示 -->
|
|
<div class="mb-6">
|
|
<div class="text-tx-secondary text-sm mb-4">状态进度</div>
|
|
<el-steps
|
|
:active="activeStep"
|
|
finish-status="success"
|
|
class="w-full"
|
|
>
|
|
<el-step
|
|
v-for="(step, index) in statusConfig.steps"
|
|
:key="index"
|
|
:title="stepTitles[index]"
|
|
:description="getStepDescription(index)"
|
|
:status="getStepStatus(index)"
|
|
/>
|
|
</el-steps>
|
|
</div>
|
|
<!-- 显示拒绝原因 -->
|
|
<div v-if="rejectionReason" class="text-danger mt-4">
|
|
<i class="el-icon-error mr-2"></i>
|
|
拒绝原因：{{ rejectionReason }}
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<div class="border-b border-br pb-5">
|
|
<span class="text-2xl font-medium">{{
|
|
submission ? '信息查看' : '新生报名'
|
|
}}</span>
|
|
</div>
|
|
<el-card class="!border-none mb-4" shadow="never">
|
|
<div class="lg:flex gap-6">
|
|
<!-- 基本信息表单 -->
|
|
<el-card class="!border-none flex-1" shadow="never">
|
|
<el-form
|
|
layout="vertical"
|
|
:model="studentData.baseInfo"
|
|
class="mt-4"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<el-form-item label="学生姓名">
|
|
<el-input
|
|
v-model="studentData.baseInfo.name"
|
|
placeholder="请输入姓名"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-radio-group
|
|
v-model="studentData.baseInfo.gender"
|
|
:disabled="submission"
|
|
>
|
|
<el-radio :label="0">男</el-radio>
|
|
<el-radio :label="1">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input
|
|
v-model="studentData.baseInfo.idCard"
|
|
placeholder="请输入18位身份证号"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="出生日期">
|
|
<el-date-picker
|
|
v-model="studentData.baseInfo.birthday"
|
|
type="datetime"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="请输入出生日期"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="联系方式">
|
|
<el-input
|
|
v-model="studentData.baseInfo.phone"
|
|
placeholder="请输入手机号码"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="电子邮箱">
|
|
<el-input
|
|
v-model="studentData.baseInfo.email"
|
|
placeholder="请输入电子邮箱"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="籍贯">
|
|
<el-input
|
|
v-model="studentData.baseInfo.nativePlace"
|
|
placeholder="请输入籍贯"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="民族">
|
|
<el-input
|
|
v-model="studentData.baseInfo.nationality"
|
|
placeholder="请输入民族"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="政治面貌">
|
|
<el-select
|
|
v-model="
|
|
studentData.baseInfo.politicalStatus
|
|
"
|
|
clearable
|
|
:disabled="submission"
|
|
>
|
|
<el-option label="群众" :value="0" />
|
|
<el-option label="团员" :value="1" />
|
|
<el-option label="党员" :value="2" />
|
|
<el-option label="其他" :value="3" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="毕业年份">
|
|
<el-input-number
|
|
v-model="
|
|
studentData.baseInfo.graduationYear
|
|
"
|
|
placeholder="请输入毕业年份"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="毕业院校">
|
|
<el-input
|
|
v-model="
|
|
studentData.baseInfo.previousSchool
|
|
"
|
|
placeholder="请输入毕业院校"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="学校类型">
|
|
<el-select
|
|
v-model="studentData.baseInfo.schoolType"
|
|
clearable
|
|
:disabled="submission"
|
|
>
|
|
<el-option label="普通高中" :value="1" />
|
|
<el-option label="职业高中" :value="2" />
|
|
<el-option label="中专" :value="3" />
|
|
<el-option label="大专" :value="4" />
|
|
<el-option label="本科" :value="5" />
|
|
<el-option label="其他" :value="6" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="学历">
|
|
<el-select
|
|
v-model="
|
|
studentData.baseInfo
|
|
.academicQualification
|
|
"
|
|
clearable
|
|
:disabled="submission"
|
|
>
|
|
<el-option label="初中" :value="1" />
|
|
<el-option label="高中" :value="2" />
|
|
<el-option label="中专" :value="3" />
|
|
<el-option label="大专" :value="4" />
|
|
<el-option label="本科" :value="5" />
|
|
<el-option label="硕士" :value="6" />
|
|
<el-option label="博士" :value="7" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="邮政编码">
|
|
<el-input
|
|
v-model="studentData.baseInfo.postalCode"
|
|
placeholder="请输入邮政编码"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="家庭住址"
|
|
class="md:col-span-2"
|
|
>
|
|
<el-input
|
|
v-model="studentData.baseInfo.homeAddress"
|
|
placeholder="请输入详细家庭住址"
|
|
type="textarea"
|
|
rows="3"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="紧急联系人">
|
|
<el-input
|
|
v-model="
|
|
studentData.baseInfo.emergencyContact
|
|
"
|
|
placeholder="请输入紧急联系人姓名"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="紧急联系电话">
|
|
<el-input
|
|
v-model="
|
|
studentData.baseInfo.emergencyPhone
|
|
"
|
|
placeholder="请输入紧急联系人电话"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="与紧急联系人关系">
|
|
<el-input
|
|
v-model="studentData.baseInfo.relationship"
|
|
placeholder="请输入与紧急联系人的关系"
|
|
:disabled="submission"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</el-card>
|
|
<!-- 注册状态信息 -->
|
|
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
|
<div v-if="!submission" class="mt-6">
|
|
<el-button type="primary" block @click="handleSave">
|
|
保存信息
|
|
</el-button>
|
|
<el-button
|
|
class="ml-4"
|
|
type="success"
|
|
block
|
|
@click="handleShowConfirmDialog"
|
|
:disabled="statusConfig.steps[0].completed"
|
|
>
|
|
提交报名
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
<!-- 确认弹窗 -->
|
|
<el-dialog
|
|
title="确认提交"
|
|
v-model="showConfirmDialog"
|
|
width="600px"
|
|
:before-close="handleCloseDialog"
|
|
>
|
|
<div class="mb-4 text-warning">
|
|
<i class="el-icon-warning mr-2"></i>
|
|
提交信息后不可修改，请检查后确认
|
|
</div>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="学生姓名">{{
|
|
confirmInfo.name
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="性别">{{
|
|
confirmInfo.gender === 0 ? '男' : '女'
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="身份证号">{{
|
|
confirmInfo.idCard
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="出生日期">{{
|
|
confirmInfo.birthday
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="民族">{{
|
|
confirmInfo.nationality
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="联系方式"
|
|
>电话：{{ confirmInfo.phone }} 邮箱：{{
|
|
confirmInfo.email
|
|
}}</el-descriptions-item
|
|
>
|
|
<el-descriptions-item label="籍贯">{{
|
|
confirmInfo.nativePlace
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="政治面貌">
|
|
{{
|
|
confirmInfo.politicalStatus === 0
|
|
? '群众'
|
|
: confirmInfo.politicalStatus === 1
|
|
? '团员'
|
|
: confirmInfo.politicalStatus === 2
|
|
? '党员'
|
|
: '其他'
|
|
}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="家庭住址">{{
|
|
confirmInfo.homeAddress
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="毕业年份">{{
|
|
confirmInfo.graduationYear
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="毕业院校">{{
|
|
confirmInfo.previousSchool
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="学校类型">
|
|
{{
|
|
confirmInfo.schoolType === 1
|
|
? '普通高中'
|
|
: confirmInfo.schoolType === 2
|
|
? '职业高中'
|
|
: confirmInfo.schoolType === 3
|
|
? '中专'
|
|
: confirmInfo.schoolType === 4
|
|
? '大专'
|
|
: confirmInfo.schoolType === 5
|
|
? '本科'
|
|
: '其他'
|
|
}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="学历">
|
|
{{
|
|
confirmInfo.academicQualification === 1
|
|
? '初中'
|
|
: confirmInfo.academicQualification === 2
|
|
? '高中'
|
|
: confirmInfo.academicQualification === 3
|
|
? '中专'
|
|
: confirmInfo.academicQualification === 4
|
|
? '大专'
|
|
: confirmInfo.academicQualification === 5
|
|
? '本科'
|
|
: confirmInfo.academicQualification === 6
|
|
? '硕士'
|
|
: '博士'
|
|
}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="邮政编码">{{
|
|
confirmInfo.postalCode
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="紧急联系人">{{
|
|
confirmInfo.emergencyContact
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="紧急联系电话">{{
|
|
confirmInfo.emergencyPhone
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="与紧急联系人关系">{{
|
|
confirmInfo.relationship
|
|
}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<template #footer>
|
|
<el-button @click="handleCloseDialog">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirmSubmit">
|
|
确认提交
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, computed, onMounted, ref } from 'vue'
|
|
import { ElButton, ElMessage } from 'element-plus'
|
|
import {
|
|
getStudentBaseInfo,
|
|
updateStudentBaseInfo,
|
|
getEnrollmentProcessStatus,
|
|
submitEnrollmentInfo
|
|
} from '@/api/enrollment'
|
|
|
|
definePageMeta({
|
|
module: 'personal',
|
|
auth: true
|
|
})
|
|
|
|
// 步骤标题与后端状态对应
|
|
const stepTitles = ['报名', '材料审核', '录取', '缴费']
|
|
const showConfirmDialog = ref(false)
|
|
const submission = ref(false) // 提交状态
|
|
const rejectionReason = ref('') // 拒绝原因
|
|
const confirmInfo = ref({
|
|
name: '',
|
|
gender: 0,
|
|
idCard: '',
|
|
birthday: '',
|
|
nationality: '',
|
|
phone: '',
|
|
email: '',
|
|
homeAddress: '',
|
|
nativePlace: '',
|
|
politicalStatus: 0,
|
|
previousSchool: '',
|
|
schoolType: null,
|
|
academicQualification: null,
|
|
postalCode: '',
|
|
graduationYear: 2025,
|
|
emergencyContact: '',
|
|
emergencyPhone: '',
|
|
relationship: ''
|
|
})
|
|
|
|
// 学生信息数据
|
|
const studentData = reactive({
|
|
baseInfo: {
|
|
id: '',
|
|
name: '',
|
|
gender: 0,
|
|
idCard: '',
|
|
birthday: '',
|
|
nationality: '',
|
|
phone: '',
|
|
email: '',
|
|
homeAddress: '',
|
|
nativePlace: '',
|
|
politicalStatus: 0,
|
|
previousSchool: '',
|
|
schoolType: '',
|
|
academicQualification: '',
|
|
postalCode: '',
|
|
graduationYear: 2025,
|
|
emergencyContact: '',
|
|
emergencyPhone: '',
|
|
relationship: ''
|
|
},
|
|
additionalInfo: {
|
|
enrollYear: '',
|
|
major: '',
|
|
education: ''
|
|
}
|
|
})
|
|
|
|
// 状态配置 - 与后端返回字段对应
|
|
const statusConfig = reactive({
|
|
steps: [
|
|
{ completed: false, time: 0, status: 0 }, // 报名
|
|
{ completed: false, time: 0, status: 0 }, // 材料审核
|
|
{ completed: false, time: 0, status: 0 }, // 录取
|
|
{ completed: false, time: 0, status: 0 } // 缴费
|
|
],
|
|
applicationNumber: '' // 报名编号
|
|
})
|
|
|
|
// 格式化时间戳为日期
|
|
const formatTime = (timestamp: number) => {
|
|
if (!timestamp) return ''
|
|
const date = new Date(timestamp)
|
|
return date.toLocaleDateString()
|
|
}
|
|
|
|
// 获取步骤描述
|
|
const getStepDescription = (index: number) => {
|
|
const step = statusConfig.steps[index]
|
|
const timeStr = formatTime(step.time)
|
|
if (index === 0) {
|
|
return step.completed ? `已完成${timeStr}` : '状态异常'
|
|
} else if (index === 1) {
|
|
if (step.status === 0) return '待审核'
|
|
if (step.status === 1) return `审核通过 ${timeStr}`
|
|
if (step.status === 2) return `审核不通过 ${timeStr}`
|
|
} else if (index === 2) {
|
|
if (step.status === 0) return '待审核'
|
|
if (step.status === 1) return `已录取 ${timeStr}`
|
|
if (step.status === 2) return `未录取 ${timeStr}`
|
|
} else if (index === 3) {
|
|
if (step.status === 0) return '未缴费'
|
|
if (step.status === 1) return `已缴费 ${timeStr}`
|
|
}
|
|
return ''
|
|
}
|
|
|
|
// 显示确认弹窗并加载信息
|
|
const handleShowConfirmDialog = async () => {
|
|
try {
|
|
const info = await getStudentBaseInfo()
|
|
confirmInfo.value = info
|
|
showConfirmDialog.value = true
|
|
} catch (error) {
|
|
ElMessage.error('获取信息失败，请稍后重试')
|
|
console.error('获取确认信息失败：', error)
|
|
}
|
|
}
|
|
|
|
// 关闭弹窗
|
|
const handleCloseDialog = () => {
|
|
showConfirmDialog.value = false
|
|
}
|
|
|
|
// 确认提交
|
|
const handleConfirmSubmit = async () => {
|
|
try {
|
|
await submitEnrollmentInfo()
|
|
showConfirmDialog.value = false
|
|
// 刷新状态
|
|
await loadProcessStatus()
|
|
submission.value = true
|
|
ElMessage.success('报名提交成功')
|
|
} catch (error) {
|
|
ElMessage.error('报名提交失败，请稍后重试')
|
|
console.error('提交报名信息失败：', error)
|
|
}
|
|
}
|
|
|
|
// 加载流程状态
|
|
const loadProcessStatus = async () => {
|
|
try {
|
|
const statusRes = await getEnrollmentProcessStatus()
|
|
if (statusRes) {
|
|
submission.value = true
|
|
// 保存报名编号
|
|
statusConfig.applicationNumber = statusRes.applicationNumber || ''
|
|
// 处理拒绝原因
|
|
rejectionReason.value = statusRes.rejectionReason || ''
|
|
// 映射状态到步骤
|
|
// 步骤1: 报名
|
|
statusConfig.steps[0] = {
|
|
completed: statusRes.applicationNumber,
|
|
time: statusRes.applicationTime,
|
|
status: statusRes.applicationTime > 0 ? 1 : 0
|
|
}
|
|
// 步骤2: 材料审核
|
|
statusConfig.steps[1] = {
|
|
completed: statusRes.approvalStatus === 1,
|
|
time: statusRes.applicationTime,
|
|
status: statusRes.approvalStatus
|
|
}
|
|
// 步骤3: 录取
|
|
statusConfig.steps[2] = {
|
|
completed: statusRes.admissionStatus === 1,
|
|
time: statusRes.admissionTime,
|
|
status: statusRes.admissionStatus
|
|
}
|
|
// 步骤4: 缴费入学
|
|
statusConfig.steps[3] = {
|
|
completed: statusRes.paymentStatus === 1,
|
|
time: statusRes.paymentTime,
|
|
status: statusRes.paymentStatus
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('刷新状态失败：', error)
|
|
}
|
|
}
|
|
|
|
// 动态推导当前激活的步骤
|
|
const activeStep = computed(() => {
|
|
// 检查是否有步骤被拒绝
|
|
if (
|
|
statusConfig.steps[1].status === 2 ||
|
|
statusConfig.steps[2].status === 2
|
|
) {
|
|
return statusConfig.steps[1].status === 2 ? 1 : 2
|
|
}
|
|
|
|
const count = completedStepCount.value
|
|
// 如果所有步骤都完成，激活最后一步；否则激活下一个待完成的步骤
|
|
return count >= statusConfig.steps.length
|
|
? statusConfig.steps.length - 1
|
|
: count
|
|
})
|
|
|
|
// 获取步骤状态
|
|
const getStepStatus = (index: number) => {
|
|
// 已完成步骤
|
|
if (statusConfig.steps[index].completed) {
|
|
return 'finish'
|
|
}
|
|
|
|
// 被拒绝的步骤
|
|
if (
|
|
(index === 1 && statusConfig.steps[index].status === 2) ||
|
|
(index === 2 && statusConfig.steps[index].status === 2)
|
|
) {
|
|
return 'error'
|
|
}
|
|
|
|
// 当前激活步骤
|
|
return index === activeStep.value ? 'process' : 'wait'
|
|
}
|
|
|
|
// 计算已完成的步骤数量
|
|
const completedStepCount = computed(() => {
|
|
return statusConfig.steps.filter((step) => step.completed).length
|
|
})
|
|
|
|
// 保存信息
|
|
const handleSave = async () => {
|
|
try {
|
|
await updateStudentBaseInfo(studentData.baseInfo)
|
|
ElMessage.success('信息保存成功')
|
|
} catch (error) {
|
|
ElMessage.error('保存失败，请稍后重试')
|
|
console.error('更新信息失败：', error)
|
|
}
|
|
}
|
|
|
|
// 页面挂载时加载数据
|
|
onMounted(async () => {
|
|
try {
|
|
// 1. 加载学生基本信息
|
|
const studentInfoRes = await getStudentBaseInfo()
|
|
Object.assign(studentData.baseInfo, studentInfoRes)
|
|
if (studentInfoRes.id) {
|
|
studentData.baseInfo.id = studentInfoRes.id
|
|
}
|
|
|
|
// 2. 加载报名流程状态
|
|
await loadProcessStatus()
|
|
} catch (error) {
|
|
ElMessage.error('数据加载失败，请稍后重试')
|
|
console.error('获取初始数据失败：', error)
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped></style>
|