|
@@ -0,0 +1,193 @@
|
|
|
+<template>
|
|
|
+ <div class="job-hunting-form">
|
|
|
+ <el-form :model="form" ref="form" :rules="rules" label-width="120px">
|
|
|
+ <!-- 个人信息 -->
|
|
|
+ <el-form-item label="头像">
|
|
|
+ <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="form.avatar" :src="form.avatar" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" prop="gender">
|
|
|
+ <el-radio-group v-model="form.gender">
|
|
|
+ <el-radio label="男">男</el-radio>
|
|
|
+ <el-radio label="女">女</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="出生日期" prop="birthDate">
|
|
|
+ <el-date-picker v-model="form.birthDate" type="date" placeholder="选择日期"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 求职意向 -->
|
|
|
+ <el-form-item label="期望职位" prop="expectedPosition">
|
|
|
+ <el-input v-model="form.expectedPosition"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="期望行业" prop="expectedIndustry">
|
|
|
+ <el-input v-model="form.expectedIndustry"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="期望薪资" prop="expectedSalary">
|
|
|
+ <el-input v-model="form.expectedSalary"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 教育背景 -->
|
|
|
+ <el-form-item label="学校名称" prop="schoolName">
|
|
|
+ <el-input v-model="form.schoolName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="专业" prop="major">
|
|
|
+ <el-input v-model="form.major"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学历" prop="education">
|
|
|
+ <el-select v-model="form.education" placeholder="请选择">
|
|
|
+ <el-option label="本科" value="本科"></el-option>
|
|
|
+ <el-option label="硕士" value="硕士"></el-option>
|
|
|
+ <el-option label="博士" value="博士"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 工作经历 -->
|
|
|
+ <el-form-item label="公司名称" prop="companyName">
|
|
|
+ <el-input v-model="form.companyName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="职位" prop="position">
|
|
|
+ <el-input v-model="form.position"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工作时间" prop="workTime">
|
|
|
+ <el-date-picker v-model="form.workTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 项目经验 -->
|
|
|
+ <el-form-item label="项目名称" prop="projectName">
|
|
|
+ <el-input v-model="form.projectName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="项目描述" prop="projectDescription">
|
|
|
+ <el-input v-model="form.projectDescription" type="textarea" :rows="4"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 技能证书 -->
|
|
|
+ <el-form-item label="技能" prop="skills">
|
|
|
+ <el-input v-model="form.skills" type="textarea" :rows="4"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证书" prop="certificates">
|
|
|
+ <el-input v-model="form.certificates" type="textarea" :rows="4"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
|
+ <el-button @click="resetForm('form')">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ avatar: '',
|
|
|
+ name: '',
|
|
|
+ gender: '',
|
|
|
+ birthDate: '',
|
|
|
+ expectedPosition: '',
|
|
|
+ expectedIndustry: '',
|
|
|
+ expectedSalary: '',
|
|
|
+ schoolName: '',
|
|
|
+ major: '',
|
|
|
+ education: '',
|
|
|
+ companyName: '',
|
|
|
+ position: '',
|
|
|
+ workTime: '',
|
|
|
+ projectName: '',
|
|
|
+ projectDescription: '',
|
|
|
+ skills: '',
|
|
|
+ certificates: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入姓名', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ gender: [
|
|
|
+ { required: true, message: '请选择性别', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ birthDate: [
|
|
|
+ { required: true, message: '请选择出生日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ expectedPosition: [
|
|
|
+ { required: true, message: '请输入期望职位', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ expectedIndustry: [
|
|
|
+ { required: true, message: '请输入期望行业', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ expectedSalary: [
|
|
|
+ { required: true, message: '请输入期望薪资', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ schoolName: [
|
|
|
+ { required: true, message: '请输入学校名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ major: [
|
|
|
+ { required: true, message: '请输入专业', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ education: [
|
|
|
+ { required: true, message: '请选择学历', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ companyName: [
|
|
|
+ { required: true, message: '请输入公司名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ position: [
|
|
|
+ { required: true, message: '请输入职位', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ workTime: [
|
|
|
+ { required: true, message: '请选择工作时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ projectName: [
|
|
|
+ { required: true, message: '请输入项目名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ projectDescription: [
|
|
|
+ { required: true, message: '请输入项目描述', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ skills: [
|
|
|
+ { required: true, message: '请输入技能', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ certificates: [
|
|
|
+ { required: true, message: '请输入证书', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ alert('提交成功!');
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.form.avatar = URL.createObjectURL(file.raw);
|
|
|
+ },
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|