323 lines
10 KiB
Vue
323 lines
10 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="70" 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="70" label="身份证号" prop="userInfo.idCard" borderBottom required>
|
|
<u--input v-model="ruleFormData.userInfo.idCard" 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"
|
|
@change="groupChange">
|
|
<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.education" borderBottom required
|
|
@click="handleEducationClick">
|
|
<u--input v-model="ruleFormData.userInfo.education" readonly placeholder="请选择学历..." border="none"></u--input>
|
|
<u-action-sheet :show="showEducationPopper" :actions="educationActions" title="请选择学历"
|
|
@close="showEducationPopper = false" @select="handleSelectEducation">
|
|
</u-action-sheet>
|
|
</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="true" @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="date" :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>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
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: '女'
|
|
}
|
|
],
|
|
showEducationPopper: false,
|
|
showCertificateGetTimePopper: false,
|
|
signVisible: false,
|
|
educationActions: [
|
|
{
|
|
id: '0',
|
|
name: '小学',
|
|
},
|
|
{
|
|
id: '1',
|
|
name: '初中',
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '高中',
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '大学专科',
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '大学本科',
|
|
},
|
|
{
|
|
id: '5',
|
|
name: '研究生',
|
|
},
|
|
{
|
|
id: '6',
|
|
name: '博士',
|
|
},
|
|
{
|
|
id: '7',
|
|
name: '其他',
|
|
}
|
|
],
|
|
ruleFormData: {
|
|
userInfo: {
|
|
name: '', // 姓名
|
|
phone: '', // 联系电话
|
|
idCard: '', // 身份证号
|
|
sex: '男', // 性别
|
|
education: '', // 学历
|
|
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.idCard': [
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写身份证号',
|
|
trigger: ['blur', 'change']
|
|
},
|
|
{
|
|
validator: validateFieldIdCard,
|
|
trigger: ['change', 'blur'],
|
|
}
|
|
],
|
|
'userInfo.sex': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择性别',
|
|
trigger: ['change']
|
|
},
|
|
'userInfo.education': {
|
|
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;
|
|
},
|
|
|
|
methods: {
|
|
groupChange(n) {
|
|
console.log('groupChange', n);
|
|
},
|
|
radioChange(n) {
|
|
console.log('radioChange', n);
|
|
},
|
|
handleEducationClick() {
|
|
this.showEducationPopper = true;
|
|
},
|
|
handleSelectEducation(event) {
|
|
this.ruleFormData.userInfo.education = event.name;
|
|
},
|
|
async afterRead(event) {
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file);
|
|
let fileListLen = this.ruleFormData.userInfo.gradeCertificate.length;
|
|
lists.map((item) => {
|
|
this.ruleFormData.userInfo.gradeCertificate.push({
|
|
...item,
|
|
status: "uploading",
|
|
message: "上传中",
|
|
});
|
|
});
|
|
// console.log('this.ruleFormData.userInfo.gradeCertificate :>> ', this.ruleFormData.userInfo.gradeCertificate);
|
|
// for (let i = 0; i < lists.length; i++) {
|
|
// const result = await this.uploadFilePromise(lists[i].url);
|
|
// let item = this.ruleFormData.userInfo.gradeCertificate[fileListLen];
|
|
// this.ruleFormData.userInfo.gradeCertificate.splice(
|
|
// fileListLen,
|
|
// 1,
|
|
// Object.assign(item, {
|
|
// status: "success",
|
|
// message: "",
|
|
// url: result,
|
|
// })
|
|
// );
|
|
// fileListLen++;
|
|
// }
|
|
},
|
|
deletePic(event) {
|
|
this.gradeCertificateList.splice(event.index, 1);
|
|
},
|
|
showCertificateGetTime() {
|
|
this.showCertificateGetTimePopper = true;
|
|
},
|
|
handleCertificateGetTimeConfirm(event) {
|
|
this.ruleFormData.userInfo.certificateAcquisitionTime = uni.$u.timeFormat(event.value, 'yyyy-mm-dd')
|
|
this.handleCertificateGetTimeCancel()
|
|
},
|
|
handleCertificateGetTimeCancel() {
|
|
this.showCertificateGetTimePopper = false;
|
|
},
|
|
handleSign(event) {
|
|
this.ruleFormData.userInfo.writeSign = event.filePath;
|
|
},
|
|
async fnSubmit() {
|
|
try {
|
|
await this.$refs.uFormRef.validate()
|
|
try {
|
|
console.log("this.ruleFormData.userInfo : >>", this.ruleFormData.userInfo);
|
|
|
|
// await setSubmitForm({
|
|
// form: this.form,
|
|
// formItems: this.formItems,
|
|
// TYPE: this.type,
|
|
// CORP_ID: this.form.CORP_ID,
|
|
// EW_RU_TASK_ID: this.taskId
|
|
// })
|
|
// pages/train_management/face_authentication
|
|
uni.$u.route({
|
|
url: '/pages/train_management/face_authentication',
|
|
params: { ...this.routeQuery }
|
|
})
|
|
} catch {
|
|
}
|
|
} catch {
|
|
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>
|