<template>
<div>
<pl-content-box>
<pl-page-nav :show-previous=true></pl-page-nav>
<pl-content-box-block>
<pl-content-box-card>
<el-form :model="baseForm" ref="baseForm" label-width="150px">
<el-row>
<el-col :span="20">
<el-form-item label="报名编号" prop="memName">
<pl-content-item-text>{{baseForm.applyCode}}</pl-content-item-text>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="申贷金额（元）" prop="applyAmt"
:rules="[
{ required: true, message: '融资金额必填'},
{ type: 'number', message: '融资金额必须为数字'}]">
<pl-input-number v-model="baseForm.applyAmt" placeholder="￥" :min="0" :valueEmpty="false" :numeric-precision="2">
</pl-input-number>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="授信机构" prop="creditFin"
:rules="[{required: true, message: '授信机构必选'}]">
<pl-dictionary-select type="bank_brand" v-model="baseForm.creditFin"
style="width: 100px;" :showEmpty="false"></pl-dictionary-select>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="申请人姓名" prop="applicantName"
:rules="[{required: true, message: '请填写申请人姓名'}]">
<el-input v-model="baseForm.applicantName" placeholder="请填写申请人姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="手机号码" prop="applicantPhone"
:rules="[
{required: true, message: '请输入手机号码', trigger: 'change'},
{validator: checkPhone, trigger: 'change'}]">
<el-input v-model="baseForm.applicantPhone" placeholder="请填写申请人手机号码"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="固定电话" prop="applicantTel"
:rules="[{required: true, message: '请输入固定电话', trigger: 'change'},
{validator: checkTel, trigger: 'change'}]">
<el-input v-model="baseForm.applicantTel" placeholder="请填写申请人固定电话"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="申请日期" prop="applyDate" >
<pl-content-item-text>{{baseForm.applyDate}}</pl-content-item-text>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="备注" prop="remark">
<el-input v-model="baseForm.remark" placeholder="请填写备注"></el-input>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="证件类型" prop="certType" :rules="[
{required: true, message: '请输入证件类型', trigger: 'change'}
]">
<pl-dictionary-select type="id_type" v-model="form.certType" :showEmpty="false"></pl-dictionary-select>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="证件号码" prop="certNo" :rules="[
{required: true, message: '请填写证件号码', trigger: 'blur' },
{pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/, message: '证件号码格式有误！', trigger: 'blur'}
]">
<el-input v-model="form.certNo" placeholder="输入证件号码"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</pl-content-box-card>
</pl-content-box-block>
</pl-content-box>
<pl-affix :offset-bottom="0">
<pl-content-box-toolbar class="text-center" :border="false">
<el-button icon=" anticon icon-arrowleft" @click="callback">返回</el-button>
<el-button type="primary" icon=" anticon icon-clockcircleo" @click="submitAgain">提交</el-button>
</pl-content-box-toolbar>
</pl-affix>
</div>
</template>
<script>
import {MsgType} from 'core/constants';
export default {
data () {
return {
nextLoading: false,
type: 'add',
baseForm: {
applyId: '',
applyCode: '',
applyAmt: '',
applyDate: '',
applyState: '',
creditFin: '',
applicantName: '',
applicantPhone: '',
applicantTel: '',
remark: ''
}
};
},
methods: {
callback () {
this.$router.push({name: 'cfin.biz.my-registration'});
},
checkTel (rule, value, callback) {
if (!(/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,4}))?$/.test(value))) {
callback(new Error('请输入正确的电话号码!'));
} else {
} callback();
},
checkPhone (rule, value, callback) {
if (!(/^1[34578]\d{9}$/.test(value))) {
callback(new Error('请输入正确的手机号码!'));
}
// else {
// this.$api.bsp.member.checkPhoneNo(this.form.userPhone, this.form.memId).then(ret => {
// if (ret) {
// callback(new Error('该手机号码已存在，请修改手机号码。'));
// } else {
// callback();
// }
// });
// }
},
submitAgain () {
console.log('提交');
this.$refs['baseForm'].validate((valid) => {
if (valid) {
console.log('通过');
if (this.type === 'add') {
this.$api.cfin.quota.saveApply(this.baseForm).then(ret => {
if (ret.type === MsgType.SUCCESS) {
this.$confirm(ret.msg, '提示', {
confirmButtonText: '确定',
type: ret.type
});
this.callback();
} else {
this.$confirm(ret.msg, '提示', {
confirmButtonText: '确定',
type: ret.type
});
}
});
} else {
this.$api.cfin.quota.againApply(this.baseForm).then(ret => {
if (ret.type === MsgType.SUCCESS) {
this.$confirm(ret.msg, '提示', {
confirmButtonText: '确定',
type: ret.type
});
this.callback();
} else {
this.$confirm(ret.msg, '提示', {
confirmButtonText: '确定',
type: ret.type
});
}
});
}
}
});
}
},
created () {
console.log(this.$route.params);
if (this.$route.params.applyId === undefined) {
this.type = 'add';
console.log('add');
this.$api.cfin.quota.getApplySequence().then(ret => {
this.baseForm.applyCode = ret.code;
});
} else {
this.type = 'edit';
let params = this.$route.params;
this.baseForm.applyId = params.applyId;
this.$api.cfin.quota.getCreditApply(params).then(ret => {
this.baseForm = ret;
this.baseForm.applicantPhone = Number(ret.applicantPhone);
});
}
this.$api.cfin.quota.getSystemDate().then(ret => {
this.baseForm.applyDate = ret;
});
}
}
;
</script>
点击保存按钮时，如果form里面的表单验证通过这进入下面代码中的 if(valid) 里面，否者进入else.
//点击保存按钮
save () {
this.$refs['form'].validate((valid) => {
if (valid) {
console.log('验证通过') ;
this.resetFrom();
});
} else {
console.log('验证不通过') ;
return false;
}
});
},
PS：表单输入长度控制验证
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],