314 lines
9.7 KiB
Vue
314 lines
9.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="top-title">学员信息</view>
|
|
|
|
<u-gap height="20" bgColor="#f2f2f2" />
|
|
|
|
<view class="content_body">
|
|
<u--form labelPosition="left" :model="ruleFormData" :rules="rules" ref="uFormRef">
|
|
<u-form-item labelWidth="70" label="姓名" prop="userInfo.name" borderBottom required>
|
|
<u--input v-model="ruleFormData.userInfo.name" placeholder="请输入姓名..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="80" label="联系电话" prop="userInfo.phone" borderBottom required>
|
|
<u--input v-model="ruleFormData.userInfo.phone" type="number" placeholder="请输入联系电话..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="80" label="身份证号" prop="userInfo.userIdCard" borderBottom required>
|
|
<u--input v-model="ruleFormData.userInfo.userIdCard" placeholder="请输入身份证号..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="70" label="性别" prop="userInfo.sex" borderBottom required>
|
|
<u-radio-group v-model="ruleFormData.userInfo.sex" placement="row" class="radio-group__style">
|
|
<u-radio v-for="(item, index) in sexsList" :key="index" :label="item.name" :name="item.name"> </u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="70" label="学历" prop="userInfo.degreeOfEducation" borderBottom required @click="handleEducationClick">
|
|
<u--input v-model="ruleFormData.userInfo.degreeOfEducation" readonly placeholder="请选择学历..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="70" label="职业" prop="userInfo.job" borderBottom required>
|
|
<u--input v-model="ruleFormData.userInfo.job" placeholder="请输入职业..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="125" label="职业资格等级证书" prop="userInfo.gradeCertificate" borderBottom required>
|
|
<u-upload :fileList="ruleFormData.userInfo.gradeCertificate" previewFullImage @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
|
|
</u-form-item>
|
|
<u-form-item labelWidth="120" label="获得证书时间" prop="userInfo.certificateAcquisitionTime" borderBottom required @click="showCertificateGetTime">
|
|
<u--input v-model="ruleFormData.userInfo.certificateAcquisitionTime" readonly placeholder="请选择获得证书时间..." border="none"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="手写签字" prop="userInfo.writeSign" borderBottom required labelPosition="top" labelWidth="auto">
|
|
<view style="flex: 1">
|
|
<u-button type="primary" size="mini" text="签字" :customStyle="{ position: 'absolute', top: '-46upx', right: '20upx', width: '100upx' }" @click="signVisible = true" />
|
|
<view v-if="ruleFormData.userInfo.writeSign">
|
|
<u-image width="400rpx" height="200rpx" :src="ruleFormData.userInfo.writeSign" />
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
</u--form>
|
|
|
|
<view class="mt-10">
|
|
<u-button type="primary" text="下一步" @click="$u.debounce(fnSubmit, 1000, true)" />
|
|
</view>
|
|
</view>
|
|
|
|
<sign :signShow.sync="signVisible" @confirm="handleSign" />
|
|
<u-datetime-picker
|
|
:show="showCertificateGetTimePopper"
|
|
mode="datetime"
|
|
v-model="defaultDatetimePicker"
|
|
:round="12"
|
|
:custom-style="{
|
|
borderRadius: '24rpx',
|
|
overflow: 'hidden',
|
|
'--picker-header-radius': '24rpx 24rpx 0 0',
|
|
'--picker-confirm-radius': '12rpx'
|
|
}"
|
|
@confirm="handleCertificateGetTimeConfirm"
|
|
@cancel="handleCertificateGetTimeCancel"
|
|
></u-datetime-picker>
|
|
|
|
<u-picker ref="uPicker" :show="singleChoice" :columns="singleChoiceColumns" keyName="NAME" @confirm="fnSingleChoiceConfirm" @cancel="fnSingleChoiceCancel"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDataDictionary, joinClass } from '../../api'
|
|
import Sign from '@/components/sign/sign.vue'
|
|
import { validateFieldPhone, validateFieldIdCard } from '@/utils/formValidateField.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
routeQuery: {}, // 上一个页面带过来的路由参数
|
|
sexsList: [
|
|
{
|
|
label: '1',
|
|
name: '男'
|
|
},
|
|
{
|
|
label: '0',
|
|
name: '女'
|
|
}
|
|
],
|
|
singleChoice: false,
|
|
showCertificateGetTimePopper: false,
|
|
signVisible: false,
|
|
defaultDatetimePicker: Number(new Date()),
|
|
singleChoiceColumns: [],
|
|
ruleFormData: {
|
|
userInfo: {
|
|
name: '', // 姓名
|
|
phone: '', // 联系电话
|
|
userIdCard: '', // 身份证号
|
|
sex: '男', // 性别
|
|
degreeOfEducation: '', // 学历
|
|
job: '', // 职业
|
|
gradeCertificate: [], // 等级证书
|
|
certificateAcquisitionTime: '', // 获取证书时间
|
|
writeSign: '' // 手写签字
|
|
}
|
|
},
|
|
rules: {
|
|
'userInfo.name': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写姓名',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
'userInfo.phone': [
|
|
{
|
|
required: true,
|
|
message: '请输入手机号',
|
|
trigger: ['change', 'blur']
|
|
},
|
|
{
|
|
validator: validateFieldPhone,
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'userInfo.userIdCard': [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写身份证号',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
validator: validateFieldIdCard,
|
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
|
'userInfo.sex': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择性别',
|
|
trigger: ['change']
|
|
},
|
|
'userInfo.degreeOfEducation': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择学历',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
'userInfo.job': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入职业',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
'userInfo.gradeCertificate': [
|
|
{
|
|
type: 'array',
|
|
required: true,
|
|
message: '请上传等级证书',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
'userInfo.certificateAcquisitionTime': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择获取证书时间',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
'userInfo.writeSign': [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写手写签字',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad(query) {
|
|
this.routeQuery = query // 接收上一个页面传递过来的路由参数1
|
|
},
|
|
|
|
methods: {
|
|
handleEducationClick() {
|
|
this.$refs.uPicker.setIndexs([0])
|
|
this.fnGetDataDictionary('d7d80f08d73a4accbccf4fd3d8d1d867')
|
|
this.singleChoice = true
|
|
},
|
|
fnSingleChoiceConfirm(event) {
|
|
this.$set(this.ruleFormData.userInfo, 'degreeOfEducation', event.value[0].NAME)
|
|
this.$set(this.ruleFormData.userInfo, 'degreeOfEducation' + '_BIANMA', event.value[0].BIANMA)
|
|
this.singleChoice = false
|
|
},
|
|
|
|
methods: {
|
|
handleEducationClick() {
|
|
this.$refs.uPicker.setIndexs([0])
|
|
this.fnGetDataDictionary('d7d80f08d73a4accbccf4fd3d8d1d867')
|
|
this.singleChoice = true
|
|
},
|
|
fnSingleChoiceConfirm(event) {
|
|
this.$set(this.ruleFormData.userInfo, 'degreeOfEducation', event.value[0].NAME)
|
|
this.$set(this.ruleFormData.userInfo, 'degreeOfEducation' + '_BIANMA', event.value[0].BIANMA)
|
|
this.fnSingleChoiceCancel()
|
|
},
|
|
fnSingleChoiceCancel() {
|
|
this.singleChoice = false
|
|
},
|
|
async fnGetDataDictionary(DICTIONARIES_ID) {
|
|
let resData = await getDataDictionary({
|
|
DICTIONARIES_ID
|
|
})
|
|
this.singleChoiceColumns = [resData.list]
|
|
},
|
|
handleSelectEducation(event) {
|
|
this.ruleFormData.userInfo.degreeOfEducation = event.name
|
|
},
|
|
async afterRead(event) {
|
|
let lists = [].concat(event.file)
|
|
lists.map((item) => {
|
|
this.ruleFormData.userInfo.gradeCertificate.push({
|
|
...item,
|
|
status: 'success',
|
|
message: ''
|
|
})
|
|
})
|
|
},
|
|
deletePic(event) {
|
|
this.ruleFormData.userInfo.gradeCertificate.splice(event.index, 1)
|
|
},
|
|
showCertificateGetTime() {
|
|
this.showCertificateGetTimePopper = true
|
|
},
|
|
handleCertificateGetTimeConfirm(event) {
|
|
this.ruleFormData.userInfo.certificateAcquisitionTime = uni.$u.timeFormat(event.value, 'yyyy-mm-dd hh:MM')
|
|
this.handleCertificateGetTimeCancel()
|
|
},
|
|
handleCertificateGetTimeCancel() {
|
|
this.showCertificateGetTimePopper = false
|
|
},
|
|
handleSign(event) {
|
|
this.ruleFormData.userInfo.writeSign = event.filePath
|
|
},
|
|
async fnSubmit() {
|
|
const classId = this.routeQuery.classId
|
|
await this.$refs.uFormRef
|
|
.validate()
|
|
.then(async () => {
|
|
let files = []
|
|
if (this.ruleFormData.userInfo.gradeCertificate[0]) {
|
|
files.push({
|
|
name: 'certificatefile',
|
|
file: this.ruleFormData.userInfo.gradeCertificate[0],
|
|
uri: this.ruleFormData.userInfo.gradeCertificate[0].url
|
|
})
|
|
}
|
|
if (this.ruleFormData.userInfo.writeSign) {
|
|
files.push({
|
|
name: 'signfile',
|
|
uri: this.ruleFormData.userInfo.writeSign
|
|
})
|
|
}
|
|
// const certificatefileLists = this.ruleFormData.userInfo.gradeCertificate.map(so => so.url); // 接入组合多个证书的上传, 返回数组
|
|
const params = { ...this.ruleFormData.userInfo }
|
|
delete params.gradeCertificate
|
|
delete params.writeSign
|
|
await joinClass({
|
|
files,
|
|
formData: { ...params, classId }
|
|
})
|
|
.then(() => {
|
|
uni.$u.toast('保存成功')
|
|
setTimeout(() => {
|
|
uni.$u.route({
|
|
url: '/pages/train_management/face_authentication',
|
|
params: { ...this.routeQuery, type: 'scan_face' }
|
|
})
|
|
}, 1500)
|
|
})
|
|
.catch((err) => {
|
|
if (err) uni.$u.toast(err.msg)
|
|
})
|
|
})
|
|
.catch((e) => {
|
|
uni.$u.toast('请补全必填项')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
.top-title {
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
font-size: 54rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content_body {
|
|
padding: 20rpx 30rpx;
|
|
|
|
.radio-group__style {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|