<template>
<div class="registerpage">
<div class="register-header">
<div class="logo">
<div class="img">
<img src="../assets/logo.png" />
<label>注册用户登录验证</label>
</div>
</div>
</div>
<div class="register-bg">
<div>
<el-form label-position="left" :inline="true" :model="ruleForm2" :rules="rules2" ref="ruleForm2"
label-width="100px" class="demo-ruleForm register-container" >
<h3 class="title" ref="title">欢迎申请</h3>
<el-form-item prop="nickname" label="姓名:" >
<el-input type="text" v-model="ruleForm2.nickname" auto-complete="off" placeholder="用户名" maxlength="10" ></el-input>
</el-form-item>
<el-form-item prop="gender" label="姓别:" >
<el-select v-model="ruleForm2.gender" >
<el-option label="男" value="1" ></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="companyname" label="单位名称:" >
<el-select v-model="ruleForm2.companyname" placeholder="请选择单位名称" >
<el-option :label="item.name" :value="item.id" v-for="item in ruleForm2.jobnamelist" :key="item.id" ></el-option>
</el-select>
</el-form-item>
<el-form-item prop="telnumber" label="手机号码:" >
<el-input type="text" v-model="ruleForm2.telnumber" auto-complete="off" placeholder="手机号码" ></el-input>
</el-form-item>
<el-form-item prop="companyemail" label="公司邮箱:" >
<el-input type="text" v-model="ruleForm2.companyemail" auto-complete="off" placeholder="公司邮箱" ></el-input>
</el-form-item>
<el-form-item prop="IDnumber" label="身份证号:" >
<el-input type="text" v-model="ruleForm2.IDnumber" auto-complete="off" placeholder="身份证号" ></el-input>
</el-form-item>
<el-form-item prop="userip" label="设备IP:" >
<el-input type="text" v-model="ruleForm2.userip" auto-complete="off" placeholder="设备IP" ></el-input>
</el-form-item>
<el-form-item prop="usermac" label="设备MAC:" >
<el-input type="text" v-model="ruleForm2.usermac" auto-complete="off" placeholder="设备MAC" ></el-input>
</el-form-item>
<el-form-item prop="ctype" label="账号类型:" >
<el-select v-model="ruleForm2.ctype" placeholder="请选择账号类型" >
<el-option label="长期账号" value="1" ></el-option>
<el-option label="临时账号" value="0"></el-option>
</el-select>
</el-form-item>
<div class="demarcationline">
<strong>资料上传</strong>
<i></i>
</div>
<el-form-item class="fileupload" >
<div>
<el-button type="primary" plain class="btnUpload" @click="clickupload()">上传身份证信息</el-button>
<input type="file" name="" class="btnUploadID" multiple="multiple" @change="changeuploaID($event)" style="display:none" id="input-file-ID" v-if="clearShow" accept="image/gif, image/jpeg,image/png">
<label>{
{fileName}}</label>
</div>
</el-form-item>
<el-alert
title='申请审批结果会发送至邮箱,请注意查收'
type="warning" :closable="false" style="margin-bottom:10px;"
show-icon >
</el-alert>
<el-form-item style="width:100%; text-align: center;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">申请</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
var checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error('姓名不能为空'));
} else {
//[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]
const reg1 = /[`~!@#$%^&*()_\- +=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]+/g;
const reg2 = /^[\u4e00-\u9fa5]{2,10}$/;
if (reg1.test(value)) {
return callback(new Error('姓名不能包含特殊符号'));
} else {
// callback();
if (reg2.test(value)) {
callback();
} else {
return callback(new Error('请输入2-10个汉字'));
}
}
}
};
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('手机号格式不正确'));
}
}
};
var checkCardID = (rule, value, callback) => {
if (!value) {
return callback(new Error('身份证号不能为空'));
} else {
// const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
const reg = /(^[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}$)/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('身份证号格式不正确'));
}
}
};
var checkIP = (rule, value, callback) => {
if (value) {
const reg = /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('IP格式不正确'));
}
}
};
var checkmac = (rule, value, callback) => {
if (value) {
const reg = /^([0-9a-fA-F]{2})(([/\s:-][0-9a-fA-F]{2}){5})$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error('MAC地址格式不正确'));
}
}
};
return {
logining: false,
ruleForm2: {
nickname: '',
gender: '1',
political:'',
telnumber:'',
companytel:'',
companyemail:'',
userrole:'',
IDnumber:'',
companyname:'',
fileName:'',
IDlist:[],
jobnamelist:[],
userip:'',
usermac:'',
ctype:''
},
rules2: {
nickname: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 2, max: 10, message: '请输入2-10个汉字', trigger: 'blur' } ,
{ validator: checkName, trigger: ['blur' ] }
],
gender:[
{ required: true, message: '请选择性别', trigger: 'blur' },
],
ctype:[
{ required: true, message: '请选择账号类型', trigger: 'blur' },
],
companyname:[
{ required: true, message: '请选择单位名称', trigger: 'blur' },
],
telnumber:[
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkPhone, trigger: ['blur' ] }
],
companyemail:[
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur' ] }
],
IDnumber:[
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{ validator: checkCardID, trigger: ['blur' ] }
],
userip:[
{ required: true, message: '请输入设备IP', trigger: 'blur' },
{ validator: checkIP, trigger: ['blur' ] }
],
usermac:[
{ required: true, message: '请输入设备MAC地址', trigger: 'blur' },
{ validator: checkmac, trigger: ['blur' ] }
],
},
checked: true,
clearShow:true,
file:null,
fileName:'',
fileNamelist:[],
};
},
mounted:function(){
var that = this;
this.$ajax({
method:'post',
url:'/myuser/getcompanys',
})
.then(data => {
var dt = data.data;
if(dt.success ){
that.ruleForm2.jobnamelist = dt.infolist;
}else{
}
})
.catch(data=>{
});
},
methods: {
clickupload(){
document.querySelector('.btnUploadID').click();
},
changeuploaID(e){
this.deviceArray = [];
let deviceFile = e.target.files;
let formData = new FormData();
for(let i=0;i<deviceFile.length;i++){
this.fileNamelist.push(deviceFile[i].name);
this.fileName = deviceFile[i].name;
this.file = deviceFile[i];
formData.append('IDFile', deviceFile[i]);
}
},
handleSubmit(ev) { //提交申请
var _this = this;
let formData = new FormData();
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
formData.append('nickname',this.ruleForm2.nickname);
formData.append('gender',this.ruleForm2.gender);
formData.append('companyname',this.ruleForm2.companyname);
formData.append('telnumber',this.ruleForm2.telnumber);
formData.append('companyemail',this.ruleForm2.companyemail);
formData.append('IDnumber',this.ruleForm2.IDnumber);
formData.append('userip',this.ruleForm2.userip);
formData.append('usermac',this.ruleForm2.usermac);
formData.append('ctype',this.ruleForm2.ctype);
if(!_this.file){
_this.$message({
message:'请上传的身份证信息',
type: 'error'
});
return ;
}else{
formData.append('IDFile',this.file);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$ajax.post('/myuser/register',
formData, config
).
then((res)=>{
if(res.data.success){
_this.$message({
message:res.data.msg,
type: 'success'
});
_this.$router.push('/login');
}
// this.clearShow = true;
},()=>{
// this.clearShow = true;
});
} else {
return false;
}
});
}
}
}
</script>
<style >
*{
padding: 0;margin: 0;
}
html,body{
height: 100%;
}
.registerpage{
width: 100%;
height: 100%;
}
.register-header{
height: 90px;
}
.register-header .logo {
height: 100%;
}
.register-header .logo .img {
padding-left: 30px;
height: 70px;
padding-top: 10px;
background: #5ab4b5
}
.register-header .logo .img img{
float: left;
width: 40px;
height: 40px;
margin-right: 10px;
margin-top: 10px;
}
.register-header .logo .img label{
float: left;
display: inline-block;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 22px;
font-weight: bold;
}
.register-container {
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 10px auto;
width: 1000px;
padding: 35px 35px 15px 35px;
background: #fff;
box-sizing: border-box;
border: 1px solid #eaeaea;
/*box-shadow: 0 0 25px #cac6c6;*/
}
.title {
margin: 0px auto 20px auto;
text-align: center;
color: #434847;
font-size: 30px;
}
.register-container .el-form-item >div{
width: 190px;
}
.demarcationline {
overflow:hidden;
height: 50px;
}
.demarcationline strong{
float: left;
display: inline-block;
}
.demarcationline i{
float: right;
display: inline-block;
width: 840px;
height:1px ;
border-top:1px dashed #e7e9f1;
margin-top: 11px;
}
.fileupload > div{
width: 100% !important;
}
.fileupload > div button{
display: inline-block;
}
</style>