213 lines
7.2 KiB
Vue
213 lines
7.2 KiB
Vue
|
<template>
|
||
|
|
<!-- 报名表单区域 -->
|
||
|
|
<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="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位身份证号"
|
||
|
|
/>
|
||
|
|
</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="请输入出生日期"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="联系方式">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.phone"
|
||
|
|
placeholder="请输入手机号码"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="电子邮箱">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.email"
|
||
|
|
placeholder="请输入电子邮箱"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="籍贯">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.nativePlace"
|
||
|
|
placeholder="请输入籍贯"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="民族">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.nationality"
|
||
|
|
placeholder="请输入民族"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="政治面貌">
|
||
|
|
<el-select
|
||
|
|
v-model="studentData.baseInfo.politicalStatus"
|
||
|
|
clearable
|
||
|
|
>
|
||
|
|
<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="请输入毕业年份"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="毕业院校">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.previousSchool"
|
||
|
|
placeholder="请输入毕业院校"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="学校类型">
|
||
|
|
<el-select
|
||
|
|
v-model="studentData.baseInfo.schoolType"
|
||
|
|
clearable
|
||
|
|
>
|
||
|
|
<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="家庭住址"
|
||
|
|
class="md:col-span-2"
|
||
|
|
>
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.homeAddress"
|
||
|
|
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>
|
||
|
|
<el-form-item label="与紧急联系人关系">
|
||
|
|
<el-input
|
||
|
|
v-model="studentData.baseInfo.relationship"
|
||
|
|
placeholder="请输入与紧急联系人的关系"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
<!-- 提交按钮 -->
|
||
|
|
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
||
|
|
<div class="mt-6">
|
||
|
|
<el-button
|
||
|
|
class="ml-4"
|
||
|
|
type="primary"
|
||
|
|
block
|
||
|
|
@click="handleConfirmSubmit"
|
||
|
|
>
|
||
|
|
提交报名
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
import { ElButton, ElMessage, ElForm, ElFormItem, ElInput } from 'element-plus'
|
||
|
|
import {
|
||
|
|
submitEnrollmentInfo
|
||
|
|
} from '@/api/enrollment'
|
||
|
|
|
||
|
|
// 学生信息数据
|
||
|
|
const studentData = reactive({
|
||
|
|
baseInfo: {
|
||
|
|
name: '',
|
||
|
|
gender: 0,
|
||
|
|
idCard: '',
|
||
|
|
birthday: '',
|
||
|
|
nationality: '',
|
||
|
|
phone: '',
|
||
|
|
email: '',
|
||
|
|
homeAddress: '',
|
||
|
|
nativePlace: '',
|
||
|
|
invitationCode: '',
|
||
|
|
politicalStatus: 0,
|
||
|
|
previousSchool: '',
|
||
|
|
schoolType: '',
|
||
|
|
graduationYear: 2025,
|
||
|
|
emergencyContact: '',
|
||
|
|
emergencyPhone: '',
|
||
|
|
relationship: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// 确认提交
|
||
|
|
const handleConfirmSubmit = async () => {
|
||
|
|
try {
|
||
|
|
// 提交前校验身份证号
|
||
|
|
if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(studentData.baseInfo.idCard)) {
|
||
|
|
ElMessage.warning('请输入有效的18位身份证号')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
await submitEnrollmentInfo(studentData.baseInfo)
|
||
|
|
ElMessage.success('报名提交成功')
|
||
|
|
} catch (error) {
|
||
|
|
ElMessage.error('报名提交失败，请稍后重试')
|
||
|
|
console.error('提交报名信息失败：', error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.el-dialog__body {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
.el-form-item {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.el-tabs {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
</style>
|