parent
10044f1688
commit
ccdd74a0c9
|
After Width: | Height: | Size: 701 B |
|
After Width: | Height: | Size: 899 B |
|
After Width: | Height: | Size: 489 B |
|
After Width: | Height: | Size: 604 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 722 B |
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 685 B |
|
After Width: | Height: | Size: 656 B |
|
After Width: | Height: | Size: 880 B |
|
After Width: | Height: | Size: 618 B |
|
After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 528 B |
|
After Width: | Height: | Size: 656 B |
|
After Width: | Height: | Size: 738 B |
|
After Width: | Height: | Size: 488 KiB |
|
After Width: | Height: | Size: 858 B |
|
After Width: | Height: | Size: 382 B |
|
After Width: | Height: | Size: 9.6 KiB |
@ -0,0 +1,213 @@ |
||||
<template> |
||||
<div class="component-upload-image"> |
||||
<el-upload |
||||
:action="uploadImgUrl" |
||||
list-type="picture-card" |
||||
:on-success="handleUploadSuccess" |
||||
:before-upload="handleBeforeUpload" |
||||
:limit="limit" |
||||
:on-error="handleUploadError" |
||||
:on-exceed="handleExceed" |
||||
name="file" |
||||
:on-remove="handleRemove" |
||||
:show-file-list="true" |
||||
:headers="headers" |
||||
:file-list="fileList" |
||||
:on-preview="handlePictureCardPreview" |
||||
:class="{ hide: this.fileList.length >= this.limit }" |
||||
> |
||||
<i class="el-icon-plus"></i> |
||||
</el-upload> |
||||
|
||||
<!-- 上传提示 --> |
||||
<!-- <div class="el-upload__tip" slot="tip" v-if="showTip"> |
||||
请上传 |
||||
<template v-if="fileSize"> |
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> |
||||
</template> |
||||
<template v-if="fileType"> |
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> |
||||
</template> |
||||
的文件 |
||||
</div> --> |
||||
|
||||
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body> |
||||
<img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" /> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
value: [String, Object, Array], |
||||
// 图片数量限制 |
||||
limit: { |
||||
type: Number, |
||||
default: 1, |
||||
}, |
||||
// 大小限制(MB) |
||||
fileSize: { |
||||
type: Number, |
||||
default: 1024, |
||||
}, |
||||
// 文件类型, 例如['png', 'jpg', 'jpeg'] |
||||
fileType: { |
||||
type: Array, |
||||
default: () => ['png', 'jpg', 'jpeg'], |
||||
}, |
||||
// 是否显示提示 |
||||
isShowTip: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
dialogImageUrl: '', |
||||
dialogVisible: false, |
||||
hideUpload: false, |
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + '/upload', // 上传的图片服务器地址 |
||||
headers: { |
||||
Authorization: this.$store.getters.token, |
||||
}, |
||||
fileList: [], |
||||
} |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler(val) { |
||||
if (val) { |
||||
// 首先将值转为数组 |
||||
const list = Array.isArray(val) ? val : this.value.split(',') |
||||
// 然后将数组转为对象数组 |
||||
this.fileList = list.map((item) => { |
||||
if (typeof item === 'string') { |
||||
item = { name: item, url: item } |
||||
} |
||||
return item |
||||
}) |
||||
} else { |
||||
this.fileList = [] |
||||
return [] |
||||
} |
||||
}, |
||||
deep: true, |
||||
immediate: true, |
||||
}, |
||||
}, |
||||
computed: { |
||||
// 是否显示提示 |
||||
showTip() { |
||||
return this.isShowTip && (this.fileType || this.fileSize) |
||||
}, |
||||
}, |
||||
created() {}, |
||||
methods: { |
||||
// 删除图片 |
||||
handleRemove(file, fileList) { |
||||
const findex = this.fileList.map((f) => f.name).indexOf(file.name) |
||||
if (findex > -1) { |
||||
this.fileList.splice(findex, 1) |
||||
this.$emit('input', this.listToString(this.fileList)) |
||||
} |
||||
}, |
||||
// 上传成功回调 |
||||
handleUploadSuccess(res) { |
||||
if (res.code == 200) { |
||||
console.log(res) |
||||
this.fileList.push({ name: '证书', url: process.env.VUE_APP_BASE_API + res.filePath }) |
||||
this.$emit('input', this.listToString(this.fileList)) |
||||
this.loading.close() |
||||
} else { |
||||
this.$message.error(res.message) |
||||
this.loading.close() |
||||
} |
||||
}, |
||||
// 上传前loading加载 |
||||
handleBeforeUpload(file) { |
||||
let isImg = false |
||||
if (this.fileType.length) { |
||||
let fileExtension = '' |
||||
if (file.name.lastIndexOf('.') > -1) { |
||||
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1) |
||||
} |
||||
isImg = this.fileType.some((type) => { |
||||
if (file.type.indexOf(type) > -1) return true |
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true |
||||
return false |
||||
}) |
||||
} else { |
||||
isImg = file.type.indexOf('image') > -1 |
||||
} |
||||
|
||||
if (!isImg) { |
||||
this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}图片格式文件!`) |
||||
return false |
||||
} |
||||
if (this.fileSize) { |
||||
const isLt = file.size / 1024 / 1024 < this.fileSize |
||||
if (!isLt) { |
||||
this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`) |
||||
return false |
||||
} |
||||
} |
||||
this.loading = this.$loading({ |
||||
lock: true, |
||||
text: '上传中', |
||||
background: 'rgba(0, 0, 0, 0.7)', |
||||
}) |
||||
}, |
||||
// 文件个数超出 |
||||
handleExceed() { |
||||
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`) |
||||
}, |
||||
// 上传失败 |
||||
handleUploadError(res) { |
||||
this.$message({ |
||||
type: 'error', |
||||
message: '上传失败', |
||||
}) |
||||
this.loading.close() |
||||
}, |
||||
// 预览 |
||||
handlePictureCardPreview(file) { |
||||
this.dialogImageUrl = file.url |
||||
this.dialogVisible = true |
||||
}, |
||||
// 对象转成指定字符串分隔 |
||||
listToString(list, separator) { |
||||
let strs = '' |
||||
separator = separator || ',' |
||||
for (let i in list) { |
||||
strs += list[i].url + separator |
||||
} |
||||
return strs != '' ? strs.substr(0, strs.length - 1) : '' |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
<style scoped > |
||||
.component-upload-image >>> .hide .el-upload--picture-card { |
||||
display: none; |
||||
} |
||||
.component-upload-image >>> .el-list-enter-active, |
||||
.component-upload-image >>> .el-list-leave-active { |
||||
transition: all 0s; |
||||
} |
||||
|
||||
.component-upload-image >>> .el-list-enter, |
||||
.el-list-leave-active { |
||||
opacity: 0; |
||||
transform: translateY(0); |
||||
} |
||||
.component-upload-image >>> .el-upload-list--picture-card .el-upload-list__item { |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
.component-upload-image >>> .el-upload--picture-card { |
||||
width: 100px; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,788 @@ |
||||
<template> |
||||
<div class="userAbility"> |
||||
<div class="topTitle container"> |
||||
申请入驻 |
||||
<div class="colra">云员工</div> |
||||
</div> |
||||
<div class="contentBig container"> |
||||
<div class="stepBox"> |
||||
<el-steps :active="active" align-center> |
||||
<el-step title="第一步: 实名认证"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 0" |
||||
src="/assets/ability/1ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/1un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第二步: 工作经历"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 1" |
||||
src="/assets/ability/2ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/2un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第三步: 项目经历"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 2" |
||||
src="/assets/ability/3ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/3un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第四步: 个人简介"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 3" |
||||
src="/assets/ability/4ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/4un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第五步: 资格证书"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 4" |
||||
src="/assets/ability/5ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/5un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第六步: 教育经历"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 5" |
||||
src="/assets/ability/6ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/6un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
<el-step title="第七步: 提交检查"> |
||||
<template slot="icon"> |
||||
<img |
||||
v-if="active == 6" |
||||
src="/assets/ability/7ac.png" |
||||
style="width: 24px; height: 24px" |
||||
alt="" |
||||
/> |
||||
<img v-else src="/assets/ability/7un.png" style="width: 24px; height: 24px" alt="" /> |
||||
</template> |
||||
</el-step> |
||||
</el-steps> |
||||
<div class="stepBoxBtn"> |
||||
<div class="backBtn" @click="back">上一步</div> |
||||
<div class="nextBtn" v-if="active == 6" @click="saveInfo">提交审核</div> |
||||
<div class="nextBtn" v-else @click="next">下一步</div> |
||||
</div> |
||||
</div> |
||||
<div class="contentBox"> |
||||
<div class="active1" v-show="active == 0"> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
实名认证 |
||||
</div> |
||||
<div class="applytip">请放心认证，关键测试宝平台承诺保障你的个人信息安全</div> |
||||
<div class="workIt"> |
||||
<el-form ref="certifform" :model="certifform" :rules="certifRules"> |
||||
<el-form-item prop="name"> |
||||
<el-input |
||||
v-model="certifform.name" |
||||
:disabled="certifform.applyId && certifform.status == 1" |
||||
placeholder="请输入真实姓名" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item prop="idNumber"> |
||||
<el-input |
||||
v-model="certifform.idNumber" |
||||
:disabled="certifform.applyId && certifform.status == 1" |
||||
placeholder="请输入身份证号码" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div v-if="active == 0 && !certifform.applyId" class="addWork" @click="applyBegin">开始验证</div> |
||||
<div class="applySuccess" v-if="certifform.applyId && certifform.status == 1"> |
||||
<img src="/assets/ability/applysuccess.png" alt="" /> |
||||
验证通过 |
||||
</div> |
||||
</div> |
||||
<div class="active2" v-show="active == 1 || active == 6"> |
||||
<!-- 工作经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
工作经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in workList" :key="index"> |
||||
<el-form :rules="workRules" :model="it" label-width="90px"> |
||||
<el-form-item label="公司名称: " prop="name"> |
||||
<el-input v-model="it.name" placeholder="请输入公司名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="在职时间: " prop="startTime"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.startTime" |
||||
type="month" |
||||
placeholder="开始时间" |
||||
> |
||||
</el-date-picker> |
||||
<span style="color: #bfbfbf; margin: 0 15px">-</span> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.endTime" |
||||
type="month" |
||||
placeholder="结束时间" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="职位名称: " prop="title"> |
||||
<el-input v-model="it.title" placeholder="请输入职位名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="工作内容: " prop="intro"> |
||||
<el-input |
||||
type="textarea" |
||||
v-model="it.intro" |
||||
:rows="5" |
||||
placeholder="请输入工作内容" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="active == 1" class="delWork" > |
||||
<!-- <div class="saveWork" @click="saveWork(index)">保存</div> --> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
@click="delWork(index)" |
||||
/> |
||||
<span @click="delWork(index)">删除</span> |
||||
</div> |
||||
</div> |
||||
<div v-if="active == 1" class="addWork" @click="addWork">+ 新增经历</div> |
||||
</div> |
||||
<div class="active3" v-show="active == 2 || active == 6"> |
||||
<!-- 项目经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
项目经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in projectList" :key="index"> |
||||
<el-form :rules="projectRules" :model="it" label-width="80px"> |
||||
<el-form-item label="项目名称" prop="name"> |
||||
<el-input v-model="it.name" placeholder="请输入项目名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="项目时间" prop="startTime"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.startTime" |
||||
type="month" |
||||
placeholder="开始时间" |
||||
> |
||||
</el-date-picker> |
||||
<span style="color: #bfbfbf; margin: 0 15px">-</span> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.endTime" |
||||
type="month" |
||||
placeholder="结束时间" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="担任角色" prop="title"> |
||||
<el-input v-model="it.title" placeholder="请输入担任角色"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="应用技术" prop="applyTech"> |
||||
<el-input v-model="it.applyTech" placeholder="请输入应用技术"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="工作内容" prop="intro"> |
||||
<el-input |
||||
:rows="5" |
||||
type="textarea" |
||||
v-model="it.intro" |
||||
placeholder="请输入工作内容" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="active == 2" class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div v-if="active == 2" class="addWork" @click="addProject">+ 新增经历</div> |
||||
</div> |
||||
<div class="active4" v-show="active == 3 || active == 6"> |
||||
<!-- 个人简介 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
个人简介 |
||||
</div> |
||||
<div class="workIt"> |
||||
<el-form :rules="userRules" :model="userForm" label-width="80px"> |
||||
<el-form-item label="所在城市" prop="namep"> |
||||
<el-input v-model="userForm.area" v-show="false"></el-input> |
||||
<v-distpicker |
||||
@province="onChangeProvince" |
||||
@city="onChangeCity" |
||||
:placeholders="placeholders" |
||||
:province="province" |
||||
:city="city" |
||||
hide-area |
||||
></v-distpicker> |
||||
</el-form-item> |
||||
<el-form-item label="技能方向" prop="name1"> |
||||
<el-input v-model="userForm.name1" placeholder="请输入技能，如：测试工程师"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="个人优势" prop="workCon"> |
||||
<el-input |
||||
type="textarea" |
||||
:rows="5" |
||||
v-model="userForm.workCon" |
||||
placeholder="请输入优势" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
<div class="active5" v-show="active == 4 || active == 6"> |
||||
<!-- 资格证书 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
资格证书 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in certificateList" :key="index"> |
||||
<el-form :rules="certificateRules" :model="it" label-width="80px"> |
||||
<el-form-item label="证书名称" prop="namep"> |
||||
<el-input v-model="it.namep"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<imageUpload |
||||
v-model="it.attachment" |
||||
fileName="publicize" |
||||
:limit="1" |
||||
:ref="'myupload' + index" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="active == 4" class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div v-if="active == 4" class="addWork" @click="addCertificate">+ 新增证书</div> |
||||
</div> |
||||
<div class="active6" v-show="active == 5 || active == 6"> |
||||
<!-- 教育经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
教育经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in educationList" :key="index"> |
||||
<el-form :rules="educationRules" :model="it" label-width="80px"> |
||||
<el-form-item label="学校名称" prop="name"> |
||||
<el-input v-model="it.name"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="在校时间" prop="startTime"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.startTime" |
||||
type="month" |
||||
placeholder="选择月" |
||||
> |
||||
</el-date-picker> |
||||
- |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.endTime" |
||||
type="month" |
||||
placeholder="选择月" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="学历" prop="education"> |
||||
<el-select v-model="it.education" placeholder="请选择"> |
||||
<el-option label="专科" value="专科"> </el-option> |
||||
<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="major"> |
||||
<el-input v-model="it.major"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div v-if="active == 5" class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div v-if="active == 5" class="addWork" @click="addEducation">+ 新增经历</div> |
||||
</div> |
||||
<!-- <div class="active7" v-if="active == 6"> |
||||
</div> --> |
||||
<div class="applyIng">提交成功，等待审核</div> |
||||
<div class="applySuccessAll"> |
||||
<img src="/assets/ability/applysuccess.png" alt="" /> |
||||
审核通过 |
||||
</div> |
||||
<div class="applyFail"> |
||||
<img src="/assets/ability/applyFail.png" alt="" /> |
||||
审核不通过 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { mapGetters } from 'vuex' |
||||
import imageUpload from '@/page/common/imageUpload' |
||||
import { gettesterId, addtesterApply, updatetesterApply } from '@/api/tester/CompanyApply' |
||||
import { couldInfoAdd } from '@/api/tester/TesterApply' |
||||
|
||||
export default { |
||||
components: { imageUpload }, |
||||
data() { |
||||
return { |
||||
active: 0, |
||||
// 实名认证 |
||||
certifform: {}, |
||||
certifRules: { |
||||
name: [ |
||||
{ required: true, message: '真实姓名不能为空', trigger: 'blur' }, |
||||
{ max: 20, message: '最多输入20个中文', trigger: 'blur' }, |
||||
{ |
||||
pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, |
||||
message: '请输入中文', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
idNumber: [ |
||||
{ required: true, message: '身份证号码能为空', trigger: 'blur' }, |
||||
{ |
||||
pattern: |
||||
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, |
||||
message: '请输入正确的身份证号码', |
||||
trigger: 'blur', |
||||
}, |
||||
{ max: 18, message: '身份证长度为18', trigger: 'blur' }, |
||||
{ min: 18, message: '身份证长度为18', trigger: 'blur' }, |
||||
], |
||||
}, |
||||
// 工作经历 |
||||
workList: [{}], |
||||
workRules: { |
||||
name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }], |
||||
}, |
||||
// 项目经历 |
||||
projectList: [{}], |
||||
projectRules: { |
||||
namep: [{ required: true, message: '请输入公司名称', trigger: 'blur' }], |
||||
}, |
||||
// 个人简历 |
||||
userForm: {}, |
||||
userRules: {}, |
||||
province: '北京市', |
||||
city: '北京市', |
||||
placeholders: { |
||||
province: '--- 省 ----', |
||||
city: '--- 市 ---', |
||||
}, |
||||
// 资格证书 |
||||
materialServerAddr: '', |
||||
certificateList: [{}], |
||||
certificateRules: {}, |
||||
// 教育经历 |
||||
educationList: [{}], |
||||
educationRules: {}, |
||||
} |
||||
}, |
||||
mounted() {}, |
||||
watch: { |
||||
active: { |
||||
handler(newval, oldval) { |
||||
if (newval == 0) { |
||||
this.searchApply() |
||||
} |
||||
}, |
||||
immediate: true, |
||||
}, |
||||
}, |
||||
computed: { |
||||
...mapGetters(['userinform', 'token']), |
||||
}, |
||||
methods: { |
||||
// 查询用户认证信息 |
||||
searchApply() { |
||||
gettesterId(this.userinform.userId).then((res) => { |
||||
if (res.code == 200 && res.data.applyId) { |
||||
this.certifform = res.data |
||||
} |
||||
}) |
||||
}, |
||||
applyBegin() { |
||||
this.$refs['certifform'].validate((valid) => { |
||||
if (valid) { |
||||
let data = { |
||||
applyId: this.certifform.applyId, |
||||
userId: this.userinform.userId, |
||||
name: this.certifform.name, |
||||
idNumber: this.certifform.idNumber, |
||||
} |
||||
// return; |
||||
if (this.certifform.applyId) { |
||||
updatetesterApply(data) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$message.success('实名认证成功') |
||||
this.searchApply() |
||||
} else { |
||||
} |
||||
}) |
||||
.catch((error) => {}) |
||||
} else { |
||||
addtesterApply(data) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$message.success('实名认证成功') |
||||
this.searchApply() |
||||
} else { |
||||
} |
||||
}) |
||||
.catch((error) => {}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 返回上一步 |
||||
back() { |
||||
if (this.active == 0) return |
||||
this.active-- |
||||
}, |
||||
// 下一步 |
||||
next() { |
||||
if (this.active == 0) { |
||||
if (this.certifform.status != 1) { |
||||
return this.$message.warning('请先通过实名认证') |
||||
} |
||||
} |
||||
this.active++ |
||||
}, |
||||
// 工作经历添加 |
||||
addWork() { |
||||
this.workList.push({}) |
||||
}, |
||||
// 工作经历保存 |
||||
saveWork(i) { |
||||
const data = this.workList[i] |
||||
data.type = 1 |
||||
couldInfoAdd(data).then(res => { |
||||
console.log(res); |
||||
}) |
||||
}, |
||||
// 工作经历删除 |
||||
delWork(i) { |
||||
if (this.workList.length == 1) return this.$message.warning('最少有一项') |
||||
this.workList.splice(i, 1) |
||||
}, |
||||
// 项目经历添加 |
||||
addProject() { |
||||
this.projectList.push({}) |
||||
}, |
||||
// 项目经历删除 |
||||
delProject(i) { |
||||
if (this.projectList.length == 1) return this.$message.warning('最少有一项') |
||||
this.projectList.splice(i, 1) |
||||
}, |
||||
// 资格证书添加 |
||||
addCertificate() { |
||||
this.certificateList.push({}) |
||||
}, |
||||
// 资格证书删除 |
||||
delCertificate(i) { |
||||
if (this.certificateList.length == 1) return this.$message.warning('最少有一项') |
||||
this.certificateList.splice(i, 1) |
||||
}, |
||||
// 教育经历添加 |
||||
addEducation() { |
||||
this.educationList.push({}) |
||||
}, |
||||
// 教育经历删除 |
||||
delEducation(i) { |
||||
if (this.educationList.length == 1) return this.$message.warning('最少有一项') |
||||
this.educationList.splice(i, 1) |
||||
}, |
||||
// 省 |
||||
onChangeProvince(data) { |
||||
if (data.value.indexOf('---') == -1) { |
||||
this.province = data.value |
||||
this.city = '--- 市 ---' |
||||
this.userForm.area = this.province + '-' + this.city |
||||
} else { |
||||
this.province = '' |
||||
} |
||||
}, |
||||
// 市 |
||||
onChangeCity(data) { |
||||
if (data.value.indexOf('---') == -1) { |
||||
this.city = data.value |
||||
this.userForm.area = this.province + '-' + this.city |
||||
} else { |
||||
this.city = '' |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.userAbility { |
||||
background: #f2f3f7; |
||||
padding-bottom: 40px; |
||||
overflow: hidden; |
||||
} |
||||
.container { |
||||
width: 1200px; |
||||
margin: auto; |
||||
} |
||||
.topTitle { |
||||
font-weight: bold; |
||||
font-size: 32px; |
||||
color: #1a1a1a; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 40px auto; |
||||
} |
||||
.colra { |
||||
background: linear-gradient(-90deg, #fa2c3f 0%, #792bf9 100%); |
||||
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
||||
} |
||||
.stepBoxBtn { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 30px 0; |
||||
} |
||||
.backBtn { |
||||
width: 130px; |
||||
height: 40px; |
||||
border-radius: 4px; |
||||
border: 1px solid #0066eb; |
||||
margin-right: 16px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #0066eb; |
||||
cursor: pointer; |
||||
} |
||||
.nextBtn { |
||||
width: 130px; |
||||
height: 40px; |
||||
background: #0066eb; |
||||
border-radius: 4px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #ffffff; |
||||
cursor: pointer; |
||||
} |
||||
.contentBig { |
||||
background: #ffffff; |
||||
padding: 40px; |
||||
box-sizing: border-box; |
||||
} |
||||
.stepBox { |
||||
margin: 30px auto; |
||||
border-bottom: 2px dashed #ebebeb; |
||||
} |
||||
.stepBox >>> .el-steps { |
||||
flex: 1; |
||||
} |
||||
.stepBox >>> .el-step__icon { |
||||
width: 60px; |
||||
height: 60px; |
||||
background: #f2f3f7; |
||||
border: unset; |
||||
} |
||||
|
||||
.stepBox >>> .el-step__line { |
||||
top: 30px !important; |
||||
background: #f2f3f7; |
||||
height: 3px; |
||||
} |
||||
/* 已完成 */ |
||||
.stepBox >>> .el-step__head.is-finish { |
||||
color: #f2f3f7; |
||||
border-color: unset; |
||||
} |
||||
.stepBox >>> .el-step__title.is-finish { |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #666666; |
||||
} |
||||
.stepBox >>> .el-step__title.is-wait { |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #666666; |
||||
} |
||||
.stepBox >>> .el-step__title.is-process { |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #0066eb; |
||||
} |
||||
/* 当前 */ |
||||
.stepBox >>> .el-step__head.is-process .el-step__icon { |
||||
background: #0066eb !important; |
||||
} |
||||
.workIt >>> .distpicker-address-wrapper label select { |
||||
width: 247px !important; |
||||
} |
||||
.addWork { |
||||
width: 150px; |
||||
height: 40px; |
||||
background: linear-gradient(90deg, #0066eb, #2783fc); |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #ffffff; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
margin-bottom: 30px; |
||||
} |
||||
.delWork { |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 20px; |
||||
margin-left: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #fd4747; |
||||
} |
||||
.saveWork { |
||||
margin-right: 30px; |
||||
cursor: pointer; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #23ca7d; |
||||
} |
||||
.workIt { |
||||
border-radius: 4px; |
||||
border: 1px solid #f2f2f2; |
||||
margin-bottom: 20px; |
||||
padding: 26px; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
} |
||||
.workIt >>> .el-input { |
||||
width: 500px; |
||||
} |
||||
.workIt >>> .el-date-editor { |
||||
width: 231px; |
||||
} |
||||
.workIt >>> .el-textarea__inner { |
||||
width: 500px; |
||||
} |
||||
.activeTitle { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #000000; |
||||
margin-bottom: 30px; |
||||
} |
||||
.activeTitLine { |
||||
width: 5px; |
||||
height: 17px; |
||||
background: #0066eb; |
||||
margin-right: 10px; |
||||
} |
||||
.applytip { |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #808080; |
||||
margin-bottom: 30px; |
||||
margin-top: -10px; |
||||
} |
||||
.applySuccess { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #23ca7d; |
||||
} |
||||
.applySuccess img { |
||||
width: 27px; |
||||
height: 27px; |
||||
margin-right: 10px; |
||||
} |
||||
.applyIng { |
||||
width: 275px; |
||||
height: 50px; |
||||
background: #fbefe1; |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #fa912a; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 40px auto; |
||||
} |
||||
.applySuccessAll { |
||||
width: 275px; |
||||
height: 50px; |
||||
background: #e0f9ed; |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #23ca7d; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 40px auto; |
||||
} |
||||
.applyFail { |
||||
width: 275px; |
||||
height: 50px; |
||||
background: #fceded; |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #fc4444; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin: 40px auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,242 @@ |
||||
<template> |
||||
<div class="userAbility"> |
||||
<img class="banner" src="/assets/ability/applybanner.png" /> |
||||
<div class="searchBox container"> |
||||
<el-input v-model="searchVal" placeholder="请输入关键字，如：测试工程师"></el-input> |
||||
<div class="searchbtn">搜索</div> |
||||
</div> |
||||
<div class="contentBox container"> |
||||
<div class="jianliboxitem" v-for="it in peopleList" :key="it.url"> |
||||
<div class="jlboxtop"> |
||||
<img class="jlboxtopimg" :src="it.url" alt="" /> |
||||
<div class="jlboxtoptit">{{ it.name }}</div> |
||||
<div class="jlboxtopzc">{{ it.zhicheng }}</div> |
||||
<div class="jlboxtopcon">{{ it.zhicheng }}</div> |
||||
</div> |
||||
<div class="jlboxbottom"> |
||||
<div class="jlboxbottoml jlboxbottomlbor"> |
||||
<img class="jlboxbottomlimg" src="/assets/ability/daxue.png" alt="" /> |
||||
{{ it.school }} |
||||
</div> |
||||
<div class="jlboxbottoml"> |
||||
<img class="jlboxbottomlimg" src="/assets/ability/zhuanye.png" alt="" /> |
||||
{{ it.maj }} |
||||
</div> |
||||
</div> |
||||
<div class="addressBox"> |
||||
<img src="/assets/ability/posion.png" alt=""> |
||||
西安</div> |
||||
</div> |
||||
</div> |
||||
<div class="pavan container"> |
||||
<el-pagination |
||||
background |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange" |
||||
:current-page="queryParams.pageNum" |
||||
:page-sizes="[10, 20, 30, 50]" |
||||
:page-size="queryParams.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="total" |
||||
> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { mapGetters } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
searchVal: '', |
||||
peopleList: [ |
||||
{ |
||||
url: '/assets/ability/people1.png', |
||||
name: '杨**', |
||||
zhicheng: 'JAVA后端研发工程师', |
||||
school: '河南科技大学', |
||||
maj: '软件工程专业', |
||||
}, |
||||
{ |
||||
url: '/assets/ability/people2.png', |
||||
name: '赵**', |
||||
zhicheng: 'Web全栈开发工程师', |
||||
school: '西安科技大学', |
||||
maj: '软件工程专业', |
||||
}, |
||||
{ |
||||
url: '/assets/ability/people3.png', |
||||
name: '杨**', |
||||
zhicheng: 'JAVA研发工程师', |
||||
school: '阜阳师范大学', |
||||
maj: '软件工程专业', |
||||
}, |
||||
{ |
||||
url: '/assets/ability/people4.png', |
||||
name: '王**', |
||||
zhicheng: '嵌入式工程师', |
||||
school: '西安科技大学', |
||||
maj: '软件工程专业', |
||||
}, |
||||
], |
||||
total: 0, |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}, |
||||
} |
||||
}, |
||||
mounted() {}, |
||||
|
||||
computed: { |
||||
...mapGetters(['userinform', 'token']), |
||||
}, |
||||
methods: { |
||||
handleSizeChange(val) { |
||||
console.log(`每页 ${val} 条`) |
||||
}, |
||||
handleCurrentChange(val) { |
||||
console.log(`当前页: ${val}`) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.container { |
||||
width: 1200px; |
||||
margin: auto; |
||||
} |
||||
.searchBox { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-top: -28px; |
||||
margin-bottom: 50px; |
||||
} |
||||
.pavan { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-bottom: 60px; |
||||
margin-top: 35px; |
||||
} |
||||
.searchbtn { |
||||
width: 100px; |
||||
height: 45px; |
||||
background: #0066eb; |
||||
border-radius: 0px 4px 4px 0px; |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
color: #ffffff; |
||||
line-height: 45px; |
||||
text-align: center; |
||||
} |
||||
.el-input { |
||||
width: 648px; |
||||
height: 45px; |
||||
} |
||||
.searchBox >>> .el-input__inner { |
||||
height: 45px; |
||||
background: #ffffff; |
||||
border-radius: 4px 0px 0px 4px; |
||||
border: 1px solid #e6e7eb; |
||||
} |
||||
.contentBox { |
||||
display: grid; |
||||
grid-template-columns: 280px 280px 280px 280px; |
||||
justify-content: space-between; |
||||
} |
||||
.jianliboxitem { |
||||
width: 280px; |
||||
height: 300px; |
||||
background: #ffffff; |
||||
box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1); |
||||
border-radius: 6px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
cursor: pointer; |
||||
transition: all 0.1s linear; |
||||
margin-bottom: 25px; |
||||
position: relative; |
||||
} |
||||
.addressBox { |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 20px; |
||||
font-weight: 500; |
||||
font-size: 13px; |
||||
color: #999999; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.addressBox img { |
||||
width: 13px; |
||||
height: 13px; |
||||
margin-right: 5px; |
||||
} |
||||
.jianliboxitem:hover { |
||||
transform: translateY(-15px); |
||||
} |
||||
.jlboxtop { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
.jlboxtopimg { |
||||
width: 88px; |
||||
height: 88px; |
||||
border-radius: 50%; |
||||
} |
||||
.jlboxtoptit { |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #000000; |
||||
margin: 15px 0; |
||||
} |
||||
.jlboxtopzc { |
||||
font-weight: 500; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
} |
||||
.jlboxtopcon { |
||||
margin-top: 15px; |
||||
width: 85%; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #808080; |
||||
display: -webkit-box; |
||||
overflow: hidden; |
||||
-webkit-box-orient: vertical; |
||||
line-clamp: 2; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
.jlboxbottom { |
||||
width: 100%; |
||||
height: 47px; |
||||
border-top: 1px solid #ebebeb; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.jlboxbottoml { |
||||
height: 16px; |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #737373; |
||||
} |
||||
.jlboxbottomlbor { |
||||
box-sizing: border-box; |
||||
border-right: 1px solid #e6e6e6; |
||||
} |
||||
.jlboxbottomlimg { |
||||
width: 15px; |
||||
height: 15px; |
||||
margin-right: 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,568 @@ |
||||
<template> |
||||
<div class="allbox"> |
||||
<div class="userAbility"> |
||||
<div class="toptttt">云员工个人简历</div> |
||||
<div class="contentBig"> |
||||
<div class="contentBox"> |
||||
<div class="active4"> |
||||
<!-- 个人简介 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
个人简介 |
||||
</div> |
||||
<div class="workIt"> |
||||
<el-form :rules="userRules" :model="userForm" label-width="80px"> |
||||
<div class="flexbox"> |
||||
<el-form-item label="姓名: "> |
||||
<span>张三(已实名)</span> |
||||
</el-form-item> |
||||
<el-form-item label="性别: " style="margin-left: 40px"> |
||||
<span>男</span> |
||||
</el-form-item> |
||||
</div> |
||||
<el-form-item label="所在城市: " prop="namep"> |
||||
<el-input v-model="userForm.area" v-show="false"></el-input> |
||||
<v-distpicker |
||||
@province="onChangeProvince" |
||||
@city="onChangeCity" |
||||
:placeholders="placeholders" |
||||
:province="province" |
||||
:city="city" |
||||
hide-area |
||||
></v-distpicker> |
||||
</el-form-item> |
||||
<el-form-item label="技能方向: " prop="name1"> |
||||
<el-input |
||||
v-model="userForm.name1" |
||||
placeholder="请输入技能，如：测试工程师" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="个人优势: " prop="workCon"> |
||||
<el-input |
||||
type="textarea" |
||||
:rows="5" |
||||
v-model="userForm.workCon" |
||||
placeholder="请输入优势" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
<div class="active2"> |
||||
<!-- 工作经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
工作经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in workList" :key="index"> |
||||
<el-form :rules="workRules" :model="it" label-width="90px"> |
||||
<el-form-item label="公司名称: " prop="name"> |
||||
<el-input v-model="it.name" placeholder="请输入公司名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="在职时间: " prop="time"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time" |
||||
type="month" |
||||
placeholder="开始时间" |
||||
> |
||||
</el-date-picker> |
||||
<span style="color: #bfbfbf; margin: 0 15px">-</span> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time1" |
||||
type="month" |
||||
placeholder="结束时间" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="职位名称: " prop="name1"> |
||||
<el-input v-model="it.name1" placeholder="请输入职位名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="工作内容: " prop="workCon"> |
||||
<el-input |
||||
type="textarea" |
||||
v-model="it.workCon" |
||||
:rows="5" |
||||
placeholder="请输入工作内容" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div class="addWork" @click="addWork">+ 新增经历</div> |
||||
</div> |
||||
<div class="active3"> |
||||
<!-- 项目经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
项目经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in projectList" :key="index"> |
||||
<el-form :rules="projectRules" :model="it" label-width="80px"> |
||||
<el-form-item label="项目名称" prop="namep"> |
||||
<el-input v-model="it.namep" placeholder="请输入项目名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="项目时间" prop="time"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time" |
||||
type="month" |
||||
placeholder="开始时间" |
||||
> |
||||
</el-date-picker> |
||||
<span style="color: #bfbfbf; margin: 0 15px">-</span> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time1" |
||||
type="month" |
||||
placeholder="结束时间" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="担任角色" prop="name1"> |
||||
<el-input v-model="it.name1" placeholder="请输入担任角色"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="应用技术" prop="name2"> |
||||
<el-input v-model="it.name2" placeholder="请输入应用技术"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="工作内容" prop="workCon"> |
||||
<el-input |
||||
:rows="5" |
||||
type="textarea" |
||||
v-model="it.workCon" |
||||
placeholder="请输入工作内容" |
||||
></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div class="addWork" @click="addProject">+ 新增经历</div> |
||||
</div> |
||||
|
||||
<div class="active5"> |
||||
<!-- 资格证书 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
资格证书 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in certificateList" :key="index"> |
||||
<el-form :rules="certificateRules" :model="it" label-width="80px"> |
||||
<el-form-item label="证书名称" prop="namep"> |
||||
<el-input v-model="it.namep"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<imageUpload |
||||
v-model="it.attachment" |
||||
fileName="publicize" |
||||
:limit="1" |
||||
:ref="'myupload' + index" |
||||
/> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div class="addWork" @click="addCertificate">+ 新增证书</div> |
||||
</div> |
||||
<div class="active6"> |
||||
<!-- 教育经历 --> |
||||
<div class="activeTitle"> |
||||
<div class="activeTitLine"></div> |
||||
教育经历 |
||||
</div> |
||||
<div class="workIt" v-for="(it, index) in educationList" :key="index"> |
||||
<el-form :rules="educationRules" :model="it" label-width="80px"> |
||||
<el-form-item label="学校名称" prop="name"> |
||||
<el-input v-model="it.name"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="在校时间" prop="time"> |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time" |
||||
type="month" |
||||
placeholder="选择月" |
||||
> |
||||
</el-date-picker> |
||||
- |
||||
<el-date-picker |
||||
value-format="yyyy-MM" |
||||
v-model="it.time1" |
||||
type="month" |
||||
placeholder="选择月" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="学历" prop="name1"> |
||||
<el-select v-model="it.value" placeholder="请选择"> |
||||
<el-option label="专科" value="专科"> </el-option> |
||||
<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="workCon"> |
||||
<el-input v-model="it.workCon"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="delWork" @click="delWork(index)"> |
||||
<img |
||||
src="/assets/ability/delicon.png" |
||||
style="width: 14px; height: 16px; margin-right: 5px" |
||||
alt="" |
||||
/> |
||||
删除 |
||||
</div> |
||||
</div> |
||||
<div class="addWork" @click="addEducation">+ 新增经历</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottomBtn">保存并发布</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { mapGetters } from 'vuex' |
||||
import imageUpload from '@/page/common/imageUpload' |
||||
import { gettesterId, addtesterApply, updatetesterApply } from '@/api/tester/CompanyApply' |
||||
export default { |
||||
components: { imageUpload }, |
||||
data() { |
||||
return { |
||||
active: 0, |
||||
// 实名认证 |
||||
certifform: {}, |
||||
certifRules: { |
||||
name: [ |
||||
{ required: true, message: '真实姓名不能为空', trigger: 'blur' }, |
||||
{ max: 20, message: '最多输入20个中文', trigger: 'blur' }, |
||||
{ |
||||
pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, |
||||
message: '请输入中文', |
||||
trigger: 'blur', |
||||
}, |
||||
], |
||||
idNumber: [ |
||||
{ required: true, message: '身份证号码能为空', trigger: 'blur' }, |
||||
{ |
||||
pattern: |
||||
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, |
||||
message: '请输入正确的身份证号码', |
||||
trigger: 'blur', |
||||
}, |
||||
{ max: 18, message: '身份证长度为18', trigger: 'blur' }, |
||||
{ min: 18, message: '身份证长度为18', trigger: 'blur' }, |
||||
], |
||||
}, |
||||
// 工作经历 |
||||
workList: [{}], |
||||
workRules: { |
||||
name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }], |
||||
}, |
||||
// 项目经历 |
||||
projectList: [{}], |
||||
projectRules: { |
||||
namep: [{ required: true, message: '请输入公司名称', trigger: 'blur' }], |
||||
}, |
||||
// 个人简历 |
||||
userForm: {}, |
||||
userRules: {}, |
||||
province: '北京市', |
||||
city: '北京市', |
||||
placeholders: { |
||||
province: '--- 省 ----', |
||||
city: '--- 市 ---', |
||||
}, |
||||
// 资格证书 |
||||
materialServerAddr: '', |
||||
certificateList: [{}], |
||||
certificateRules: {}, |
||||
// 教育经历 |
||||
educationList: [{}], |
||||
educationRules: {}, |
||||
} |
||||
}, |
||||
mounted() {}, |
||||
watch: { |
||||
active: { |
||||
handler(newval, oldval) { |
||||
if (newval == 0) { |
||||
this.searchApply() |
||||
} |
||||
}, |
||||
immediate: true, |
||||
}, |
||||
}, |
||||
computed: { |
||||
...mapGetters(['userinform', 'token']), |
||||
}, |
||||
methods: { |
||||
// 查询用户认证信息 |
||||
searchApply() { |
||||
gettesterId(this.userinform.userId).then((res) => { |
||||
if (res.code == 200 && res.data.applyId) { |
||||
this.certifform = res.data |
||||
} |
||||
}) |
||||
}, |
||||
applyBegin() { |
||||
this.$refs['certifform'].validate((valid) => { |
||||
if (valid) { |
||||
let data = { |
||||
applyId: this.certifform.applyId, |
||||
userId: this.userinform.userId, |
||||
name: this.certifform.name, |
||||
idNumber: this.certifform.idNumber, |
||||
} |
||||
// return; |
||||
if (this.certifform.applyId) { |
||||
updatetesterApply(data) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$message.success('实名认证成功') |
||||
this.searchApply() |
||||
} else { |
||||
} |
||||
}) |
||||
.catch((error) => {}) |
||||
} else { |
||||
addtesterApply(data) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$message.success('实名认证成功') |
||||
this.searchApply() |
||||
} else { |
||||
} |
||||
}) |
||||
.catch((error) => {}) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 返回上一步 |
||||
back() { |
||||
if (this.active == 0) return |
||||
this.active-- |
||||
}, |
||||
// 下一步 |
||||
next() { |
||||
if (this.active == 0) { |
||||
if (this.certifform.status != 1) { |
||||
return this.$message.warning('请先通过实名认证') |
||||
} |
||||
} |
||||
this.active++ |
||||
}, |
||||
// 工作经历添加 |
||||
addWork() { |
||||
this.workList.push({}) |
||||
}, |
||||
// 工作经历删除 |
||||
delWork(i) { |
||||
if (this.workList.length == 1) return this.$message.warning('最少有一项') |
||||
this.workList.splice(i, 1) |
||||
}, |
||||
// 项目经历添加 |
||||
addProject() { |
||||
this.projectList.push({}) |
||||
}, |
||||
// 项目经历删除 |
||||
delProject(i) { |
||||
if (this.projectList.length == 1) return this.$message.warning('最少有一项') |
||||
this.projectList.splice(i, 1) |
||||
}, |
||||
// 资格证书添加 |
||||
addCertificate() { |
||||
this.certificateList.push({}) |
||||
}, |
||||
// 资格证书删除 |
||||
delCertificate(i) { |
||||
if (this.certificateList.length == 1) return this.$message.warning('最少有一项') |
||||
this.certificateList.splice(i, 1) |
||||
}, |
||||
// 教育经历添加 |
||||
addEducation() { |
||||
this.educationList.push({}) |
||||
}, |
||||
// 教育经历删除 |
||||
delEducation(i) { |
||||
if (this.educationList.length == 1) return this.$message.warning('最少有一项') |
||||
this.educationList.splice(i, 1) |
||||
}, |
||||
// 城市 |
||||
onChangeProvince(data) { |
||||
if (data.value.indexOf('---') == -1) { |
||||
this.province = data.value |
||||
this.city = '--- 市 ---' |
||||
this.userForm.area = this.province + '-' + this.city |
||||
} else { |
||||
this.province = '' |
||||
} |
||||
}, |
||||
onChangeCity(data) { |
||||
if (data.value.indexOf('---') == -1) { |
||||
this.city = data.value |
||||
this.userForm.area = this.province + '-' + this.city |
||||
} else { |
||||
this.city = '' |
||||
} |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.userAbility { |
||||
overflow: hidden; |
||||
background: #ffffff; |
||||
box-shadow: 0px 1px 12px 0px rgba(17, 19, 21, 0.06); |
||||
} |
||||
.contentBig { |
||||
background: #ffffff; |
||||
padding: 40px 123px; |
||||
box-sizing: border-box; |
||||
} |
||||
.toptttt { |
||||
height: 78px; |
||||
background: #f0f4fa; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-weight: bold; |
||||
font-size: 25px; |
||||
color: #000000; |
||||
} |
||||
|
||||
.workIt >>> .distpicker-address-wrapper label select { |
||||
width: 347px !important; |
||||
font-size: 14px; |
||||
} |
||||
.addWork { |
||||
width: 150px; |
||||
height: 40px; |
||||
background: linear-gradient(90deg, #0066eb, #2783fc); |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #ffffff; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
margin-bottom: 30px; |
||||
} |
||||
.delWork { |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 20px; |
||||
margin-left: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #fd4747; |
||||
} |
||||
.workIt { |
||||
border-radius: 4px; |
||||
border: 1px solid #f2f2f2; |
||||
margin-bottom: 20px; |
||||
padding: 26px; |
||||
box-sizing: border-box; |
||||
position: relative; |
||||
} |
||||
.workIt >>> .el-input { |
||||
width: 700px; |
||||
} |
||||
.workIt >>> .el-date-editor { |
||||
width: 330px; |
||||
} |
||||
.workIt >>> .el-textarea__inner { |
||||
width: 700px; |
||||
} |
||||
.activeTitle { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
color: #000000; |
||||
margin-bottom: 30px; |
||||
} |
||||
.activeTitLine { |
||||
width: 5px; |
||||
height: 17px; |
||||
background: #0066eb; |
||||
margin-right: 10px; |
||||
} |
||||
.applytip { |
||||
font-weight: 500; |
||||
font-size: 14px; |
||||
color: #808080; |
||||
margin-bottom: 30px; |
||||
margin-top: -10px; |
||||
} |
||||
.applySuccess { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #23ca7d; |
||||
} |
||||
.applySuccess img { |
||||
width: 27px; |
||||
height: 27px; |
||||
margin-right: 10px; |
||||
} |
||||
.userAbility >>> .el-upload--picture-card { |
||||
width: 700px; |
||||
height: 190px; |
||||
line-height: 190px; |
||||
} |
||||
.userAbility >>> .el-upload-list__item { |
||||
width: 700px !important; |
||||
height: 190px !important; |
||||
line-height: 190px !important; |
||||
} |
||||
.userAbility >>> .el-upload-list__item-status-label { |
||||
display: flex !important; |
||||
align-items: center !important; |
||||
justify-content: center !important; |
||||
} |
||||
.flexbox { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.bottomBtn { |
||||
overflow: hidden; |
||||
width: 250px; |
||||
height: 46px; |
||||
background: linear-gradient(90deg, #0066eb, #2783fc); |
||||
box-shadow: 0px 1px 8px 0px rgba(17, 60, 114, 0.4); |
||||
border-radius: 4px; |
||||
font-weight: 500; |
||||
font-size: 15px; |
||||
color: #ffffff; |
||||
line-height: 46px; |
||||
text-align: center; |
||||
margin: 40px auto; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue