forked from TALL/check-work
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
13 KiB
349 lines
13 KiB
<!--
|
|
Copyright (c) 2020.
|
|
author: song
|
|
email: 15235360226@163.com
|
|
-->
|
|
|
|
<template>
|
|
<div>
|
|
<a-button @click="showModal" type="primary">立即加入</a-button>
|
|
<a-modal :confirm-loading="confirmLoading" :visible="visible" @cancel="handleCancel" @ok="handleOk(type)" title="招聘信息" width="50%">
|
|
<a-form :form="form">
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="姓名" required>
|
|
<a-input placeholder="请输入姓名" v-model.trim="recruit.name" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="性别">
|
|
<!-- 单选 -->
|
|
<a-radio-group v-model="recruit.sex">
|
|
<a-radio :value="0">男</a-radio>
|
|
<a-radio :value="1">女</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="出生年月" required>
|
|
<!-- 时间选择器（时间点） -->
|
|
<a-date-picker @change="changeBirthday" class="fill-width" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="参加工作时间" required>
|
|
<!-- 时间选择器（时间点） -->
|
|
<a-date-picker @change="changeStartJob" class="fill-width" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="电话" required>
|
|
<a-input @change="changePhone" placeholder="请输入联系电话" type="tel" v-decorator="['tel', { rules: phoneRules }]" />
|
|
</a-form-item>
|
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
|
|
<div class="d-flex flex-nowrap">
|
|
<a-input placeholder="图片验证码" type="number" v-model="codeNum" />
|
|
<img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
|
|
<a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
|
|
<!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required>
|
|
<div class="d-flex flex-nowrap">
|
|
<a-input placeholder="请输入验证码" type="number" v-model="recruit.code" />
|
|
<a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
|
|
<a-button :disabled="recruit.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else>获取验证码</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="电子邮箱">
|
|
<!-- 电子邮箱 -->
|
|
<a-input @change="changeEamil" placeholder="请输入电子邮箱..." type="email" v-decorator="['email', { rules: emailRules }]" />
|
|
</a-form-item>
|
|
<!-- 是否在职 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="是否在职">
|
|
<!-- 单选 -->
|
|
<a-radio-group v-model="recruit.inWork">
|
|
<a-radio :value="1">是</a-radio>
|
|
<a-radio :value="2">否</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<!-- 现居住地 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="现居住地">
|
|
<a-input placeholder="请输入现居住地" v-model.trim="recruit.address" />
|
|
</a-form-item>
|
|
<!-- 户口所在地 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="户口所在地">
|
|
<a-input placeholder="请输入户口所在地" v-model.trim="recruit.birthdayPlace" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="求职意向" required>
|
|
<a-textarea placeholder="请输入求职意向..." v-model.trim="recruit.jobWilling" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="工作经历">
|
|
<a-textarea placeholder="请输入工作经历..." v-model.trim="recruit.jobExpirence" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="教育经历">
|
|
<a-textarea placeholder="请输入教育经历..." v-model.trim="recruit.educationExpirence" />
|
|
</a-form-item>
|
|
<!-- 语言能力 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="语言能力">
|
|
<a-textarea placeholder="请输入语言能力" v-model.trim="recruit.language" />
|
|
</a-form-item>
|
|
<!-- 专业技能 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="专业技能">
|
|
<a-textarea placeholder="请输入专业技能" v-model.trim="recruit.skill" />
|
|
</a-form-item>
|
|
<!-- 获得证书 -->
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="获得证书">
|
|
<a-textarea placeholder="请输入获得证书" v-model.trim="recruit.zhengShu" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="自我评价">
|
|
<a-textarea placeholder="请输入自我评价..." v-model.trim="recruit.personalDescription" />
|
|
</a-form-item>
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="上传附件">
|
|
<a-upload :action="action" :default-file-list="fileList" @change="fileChange" list-type="picture" name="files">
|
|
<a-button> <a-icon type="upload" />点击上传附件 </a-button>
|
|
</a-upload>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex';
|
|
import { JoinPlatform, upload, joinUs } from 'config/api';
|
|
|
|
const formItemLayout = {
|
|
labelCol: { span: 6 },
|
|
wrapperCol: { span: 16 },
|
|
};
|
|
|
|
const formTailLayout = { wrapperCol: { span: 16, offset: 6 } };
|
|
|
|
export default {
|
|
name: 'Model',
|
|
components: {},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
confirmLoading: false,
|
|
type: '',
|
|
formItemLayout,
|
|
formTailLayout,
|
|
form: this.$form.createForm(this, { name: 'submit' }),
|
|
value: 0,
|
|
inWorkValue: 1,
|
|
recruit: {
|
|
name: '', // 姓名
|
|
sex: 0, // 性别
|
|
birthday: '', // 出生年月
|
|
startJob: '', // 参加工作时间
|
|
tel: '', // 电话
|
|
code: '',
|
|
isTel: false, // 是否符合验证的电话号
|
|
email: '', // 电子邮箱
|
|
isEmail: false, // 是否符合验证的电子邮箱
|
|
inWork: 1, // 是否在职
|
|
address: '', // 现居住地
|
|
birthdayPlace: '', // 户口所在地
|
|
jobWilling: '', // 求职意向
|
|
jobExpirence: '', // 工作经历
|
|
educationExpirence: '', // 教育经历
|
|
personalDescription: '', // 自我评价
|
|
language: '', // 语言能力
|
|
skill: '', // 专业技能
|
|
zhengShu: '', // 获得证书
|
|
files: [], // 附件Id
|
|
},
|
|
action: upload,
|
|
fileList: [],
|
|
phoneRules: [
|
|
{ required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' },
|
|
],
|
|
emailRules: [
|
|
{
|
|
pattern: new RegExp(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/),
|
|
whitespace: true,
|
|
message: '请输入正确的邮箱格式',
|
|
},
|
|
],
|
|
codeRules: [
|
|
{ required: true, message: '请输入验证码' },
|
|
{ min: 4, max: 4, message: '请输入4位短信验证码' },
|
|
],
|
|
codeNum: '',
|
|
showInterval: false,
|
|
codeTimer: null,
|
|
interval: 120, // 验证码有效时间倒计时
|
|
};
|
|
},
|
|
|
|
computed: mapState('user', ['picCode']),
|
|
created() {
|
|
this.sendPicCode();
|
|
},
|
|
|
|
methods: {
|
|
...mapActions('user', ['sendCode', 'sendPicCode']),
|
|
showModal() {
|
|
this.visible = true;
|
|
},
|
|
|
|
// 验证电话
|
|
changePhone(e) {
|
|
this.recruit.tel = e.target.value;
|
|
this.recruit.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.recruit.tel);
|
|
},
|
|
|
|
// 验证电子邮箱
|
|
changeEamil(e) {
|
|
this.recruit.email = e.target.value;
|
|
this.recruit.isEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(this.recruit.email);
|
|
},
|
|
|
|
handleOk(type) {
|
|
if (!this.recruit.name) {
|
|
this.$message.error('姓名为必填项');
|
|
} else if (!this.recruit.tel) {
|
|
this.$message.error('电话为必填项');
|
|
} else if (!this.recruit.jobWilling) {
|
|
this.$message.error('求职意向为必填项');
|
|
} else if (!this.recruit.birthday) {
|
|
this.$message.error('出生日期为必填项');
|
|
} else if (!this.recruit.startJob) {
|
|
this.$message.error('参加工作时间必填项');
|
|
} else if (this.recruit.email && this.recruit.isEmail === false) {
|
|
this.$message.error('请输入正确的邮箱格式');
|
|
} else {
|
|
if (this.recruit.isTel) {
|
|
for (var i = 0; i < this.fileList.length; i++) {
|
|
this.recruit.files = this.recruit.files.concat(this.fileList[i].response.data[0].id);
|
|
}
|
|
this.subMitAdd();
|
|
} else {
|
|
this.$message.error('请输入正确的联系电话');
|
|
}
|
|
}
|
|
},
|
|
|
|
// 加入提交
|
|
async subMitAdd() {
|
|
this.confirmLoading = true;
|
|
try {
|
|
const {
|
|
name,
|
|
sex,
|
|
birthday,
|
|
startJob,
|
|
tel,
|
|
email,
|
|
inWork,
|
|
address,
|
|
birthdayPlace,
|
|
jobWilling,
|
|
jobExpirence,
|
|
educationExpirence,
|
|
language,
|
|
skill,
|
|
zhengShu,
|
|
personalDescription,
|
|
files,
|
|
} = this.recruit;
|
|
let params = {};
|
|
let res = {};
|
|
params = {
|
|
param: {
|
|
name, // 姓名
|
|
gender: sex, // 性别
|
|
birthday, // 出生年月
|
|
startJob, // 参加工作时间
|
|
phone: tel, // 电话
|
|
code: this.recruit.code, // 验证码
|
|
email, // 电子邮箱
|
|
inWork, // 是否在职
|
|
address, // 现居住地
|
|
birthdayPlace, // 户口所在地
|
|
jobWilling, // 求职意向
|
|
jobExpirence, // 工作经历
|
|
educationExpirence, // 教育经历
|
|
language, // 语言能力
|
|
skill, // 专业技能
|
|
zhengShu, // 获得证书
|
|
personalDescription, // 自我评价
|
|
files, // 附件Id
|
|
},
|
|
};
|
|
res = await joinUs(params);
|
|
const { data, msg, code } = res.data;
|
|
if (code === 200) {
|
|
this.$message.success('申请成功');
|
|
this.visible = false;
|
|
this.confirmLoading = false;
|
|
for (let key in this.recruit) {
|
|
this.recruit[key] = '';
|
|
}
|
|
} else {
|
|
throw msg;
|
|
this.confirmLoading = false;
|
|
}
|
|
} catch (error) {
|
|
this.$message.error(error);
|
|
this.confirmLoading = false;
|
|
}
|
|
},
|
|
handleCancel(e) {
|
|
this.visible = false;
|
|
},
|
|
fileChange(info) {
|
|
this.fileList = info.fileList;
|
|
},
|
|
changeBirthday(date, dateString) {
|
|
this.recruit.birthday = this.$moment(date).unix();
|
|
// console.log(this.$moment(date).unix(), dateString);
|
|
},
|
|
changeStartJob(date, dateString) {
|
|
this.recruit.startJob = this.$moment(date).unix();
|
|
// console.log(this.$moment(date).unix(), dateString);
|
|
},
|
|
|
|
// 获取验证码
|
|
async getCode() {
|
|
try {
|
|
const params = {
|
|
phone: this.recruit.tel,
|
|
verificationCodeId: this.picCode.verificationCodeId,
|
|
verificationCodeValue: this.codeNum,
|
|
};
|
|
await this.sendCode(params);
|
|
this.getCodeInterval();
|
|
} catch (error) {
|
|
throw new Error(`SignIn.vue method getCode: ${error}`);
|
|
}
|
|
},
|
|
|
|
// 验证码倒计时
|
|
getCodeInterval() {
|
|
this.showInterval = true;
|
|
this.codeTimer = setInterval(() => {
|
|
if (this.interval === 0) {
|
|
clearInterval(this.codeTimer);
|
|
this.codeTimer = null;
|
|
this.showInterval = false;
|
|
this.interval = 120;
|
|
return;
|
|
}
|
|
this.interval = this.interval - 1;
|
|
}, 1000);
|
|
},
|
|
|
|
// 刷新验证码
|
|
changePicCode() {
|
|
this.sendPicCode();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.must-color {
|
|
color: red;
|
|
}
|
|
|
|
.code_img {
|
|
height: 32px;
|
|
width: 120px;
|
|
}
|
|
</style>
|
|
|