236 lines
9.0 KiB
Vue
236 lines
9.0 KiB
Vue
<template>
|
||
<div class="px-[30px] py-5 user-info min-h-full flex flex-col">
|
||
<div class="border-b border-br pb-5">
|
||
<span class="text-2xl font-medium">新生报名</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="请输入姓名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="性别">
|
||
<el-radio-group
|
||
v-model="studentData.baseInfo.gender"
|
||
>
|
||
<el-radio label="male">男</el-radio>
|
||
<el-radio label="female">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="身份证号">
|
||
<el-input
|
||
v-model="studentData.baseInfo.idCard"
|
||
placeholder="请输入18位身份证号"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="联系方式">
|
||
<el-input
|
||
v-model="studentData.baseInfo.phone"
|
||
placeholder="请输入手机号码"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label="家庭住址"
|
||
class="md:col-span-2"
|
||
>
|
||
<el-input
|
||
v-model="studentData.baseInfo.address"
|
||
placeholder="请输入详细家庭住址"
|
||
type="textarea"
|
||
rows="3"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="紧急联系人">
|
||
<el-input
|
||
v-model="
|
||
studentData.baseInfo.emergencyContact
|
||
"
|
||
placeholder="请输入紧急联系人姓名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="紧急联系电话">
|
||
<el-input
|
||
v-model="
|
||
studentData.baseInfo.emergencyPhone
|
||
"
|
||
placeholder="请输入紧急联系人电话"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</el-card>
|
||
</div>
|
||
</el-card>
|
||
<!-- 注册状态信息 -->
|
||
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
||
<template #header>
|
||
<span>注册状态</span>
|
||
</template>
|
||
<div class="status-info mt-4">
|
||
<div class="mb-6">
|
||
<div class="text-tx-secondary text-sm mb-2">当前状态</div>
|
||
<el-tag :type="statusConfig.type">{{
|
||
statusConfig.label
|
||
}}</el-tag>
|
||
</div>
|
||
<div class="mb-6">
|
||
<div class="text-tx-secondary text-sm mb-2">状态进度</div>
|
||
<el-progress
|
||
:percentage="statusConfig.progress"
|
||
:stroke-width="6"
|
||
/>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center">
|
||
<el-checkbox
|
||
v-model="statusConfig.steps[0].completed"
|
||
disabled
|
||
>
|
||
已报名
|
||
</el-checkbox>
|
||
<span> {{ statusConfig.steps[0].time }} </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<el-checkbox
|
||
v-model="statusConfig.steps[1].completed"
|
||
disabled
|
||
>
|
||
材料审核
|
||
</el-checkbox>
|
||
<span>
|
||
{{ statusConfig.steps[1].time || '待完成' }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<el-checkbox
|
||
v-model="statusConfig.steps[2].completed"
|
||
disabled
|
||
>
|
||
已录取
|
||
</el-checkbox>
|
||
<span>
|
||
{{ statusConfig.steps[2].time || '待完成' }}
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<el-checkbox
|
||
v-model="statusConfig.steps[3].completed"
|
||
disabled
|
||
>
|
||
已入学
|
||
</el-checkbox>
|
||
<span>
|
||
{{ statusConfig.steps[3].time || '待完成' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-6">
|
||
<el-button type="primary" block @click="handleSave"
|
||
>保存信息</el-button
|
||
>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { reactive } from 'vue'
|
||
import { ElButton } from 'element-plus'
|
||
import {
|
||
getStudentBaseInfo,
|
||
updateStudentBaseInfo,
|
||
getEnrollmentProcessStatus
|
||
} from '@/api/enrollment'
|
||
|
||
definePageMeta({
|
||
module: 'personal',
|
||
auth: true
|
||
})
|
||
|
||
// 学生信息数据
|
||
const studentData = reactive({
|
||
baseInfo: {
|
||
name: '',
|
||
gender: 'male',
|
||
idCard: '',
|
||
phone: '',
|
||
address: '',
|
||
emergencyContact: '',
|
||
emergencyPhone: ''
|
||
},
|
||
additionalInfo: {
|
||
enrollYear: '',
|
||
major: '',
|
||
education: ''
|
||
}
|
||
})
|
||
|
||
// 状态配置
|
||
type TagType = '' | 'info' | 'success' | 'warning' | 'danger'
|
||
const statusConfig = reactive<{
|
||
label: string
|
||
type: TagType
|
||
progress: number
|
||
steps: { completed: boolean; time: string }[]
|
||
}>({
|
||
label: '未报名',
|
||
type: 'info',
|
||
get progress() {
|
||
const completedCount = this.steps.filter(
|
||
(step: { completed: any }) => step.completed
|
||
).length
|
||
return (completedCount / this.steps.length) * 100
|
||
},
|
||
steps: [
|
||
{ completed: false, time: '' },
|
||
{ completed: false, time: '' },
|
||
{ completed: false, time: '' },
|
||
{ completed: false, time: '' }
|
||
]
|
||
})
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
// 调用更新API，传入表单数据（studentData.baseInfo）
|
||
const res = await updateStudentBaseInfo(studentData.baseInfo)
|
||
// 接口返回成功时提示
|
||
if (res.data.success) {
|
||
ElMessage.success(res.data.message || '信息保存成功')
|
||
} else {
|
||
ElMessage.warning(res.data.message || '保存失败，请检查数据')
|
||
}
|
||
} catch (error) {
|
||
// 处理提交失败（如网络错误）
|
||
ElMessage.error('保存失败，请稍后重试')
|
||
console.error('更新信息失败：', error)
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
// 1. 获取学生基本信息并赋值
|
||
const studentInfoRes = await getStudentBaseInfo()
|
||
Object.assign(studentData.baseInfo, studentInfoRes.data)
|
||
// 2. 获取报名流程状态并赋值
|
||
const statusRes = await getEnrollmentProcessStatus()
|
||
// 将接口返回的状态合并到statusConfig
|
||
Object.assign(statusConfig, statusRes.data)
|
||
} catch (error) {
|
||
// 处理接口调用失败（如网络错误、后端异常）
|
||
ElMessage.error('数据加载失败，请稍后重试')
|
||
console.error('获取初始数据失败：', error)
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped></style>
|