<template>
|
<div class="register_main">
|
<div class="register_main_body">
|
<span class="register_main_body_span">用户注册</span>
|
</div>
|
<div class="register_main_form">
|
<el-form :model="registerForm" :rules="rules" ref="ruleForm" label-width="150px">
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="姓名" prop="realname">
|
<el-input v-model="registerForm.realname"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="registerForm.password"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="手机号（账户）" prop="username">
|
<el-input v-model="registerForm.username" ref="tel"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="身份证" prop="idcard">
|
<el-input v-model="registerForm.idcard" ref="idcard"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="单位:" prop="company">
|
<el-select v-model.trim="registerForm.company" value-key="item" auto-complete="on" style="width:100%;" @change="companyChange">
|
<el-option
|
v-for="item in companyList"
|
:key="item.id"
|
:value="item"
|
:label="item.company"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="9">
|
<el-form-item label="部门:" prop="department" v-if="isMain">
|
<el-select v-model.trim="registerForm.department" auto-complete="on" style="width:100%;">
|
<el-option
|
v-for="item in departmentList"
|
:key="item.id"
|
:value="item.id"
|
:label="item.department"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="职位" prop="job">
|
<el-input v-model="registerForm.job"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div align="center" style="padding-bottom: 30px">
|
<el-button type="primary" :disabled="submitting" @click="submit()">同意协议并注册</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {isNameExist, isNumberExist, register} from "../../api/login";
|
import {parseError} from "../../utils/messageDialog";
|
import { getAllCompany } from '@/api/unitManage'
|
import { getAllDepartment } from '@/api/departmentManage'
|
|
export default {
|
name: "register",
|
data(){
|
return{
|
companyList:[],
|
departmentList:[],
|
submitting: false,
|
isMain:false,
|
registerForm:{
|
username:'',
|
realname:'',
|
password:'',
|
idcard:'',
|
company:'',
|
companyid:'',
|
department:'',
|
job:''
|
},
|
rules:{
|
realname:[
|
{ required: true, message: '请填写姓名', trigger: 'blur' },
|
],
|
username:[
|
{ required: true, message: '请填写手机号', trigger: 'blur' },
|
],
|
password:[
|
{ required: true, message: '请填写密码', trigger: 'blur' },
|
],
|
idcard:[
|
{ required: true, message: '请填写身份证', trigger: 'blur' },
|
],
|
company:[
|
{ required: true, message: '请填写单位', trigger: 'blur' },
|
],
|
},
|
}
|
},
|
watch:{
|
},
|
created(){
|
//初始化 单位和 部门
|
this.getDepartmentData()
|
this.getCompanyData()
|
},
|
methods:{
|
async submit(){
|
this.$refs["ruleForm"].validate((valid) =>{
|
if(valid){
|
this.register()
|
}else{
|
this.$message({
|
type:'warning',
|
message:'请填写基本信息'
|
})
|
}
|
})
|
|
},
|
getDepartmentData(){
|
getAllDepartment().then(res=>{
|
if(res.data.code === '200'){
|
this.departmentList = res.data.result
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
}).catch(error =>{
|
parseError({error:error,vm:this})
|
})
|
},
|
getCompanyData(){
|
getAllCompany().then(res=>{
|
if(res.data.code === '200'){
|
this.companyList = res.data.result
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
}).catch(error =>{
|
parseError({error:error,vm:this})
|
})
|
},
|
companyChange(val){
|
this.registerForm.company = val.company
|
this.registerForm.companyid = val.id
|
if (val.ismain === 1) {
|
this.isMain = true;
|
}else{
|
this.isMain = false;
|
this.registerForm.department = ''
|
}
|
},
|
|
register(){
|
this.submitting = true
|
register(this.registerForm)
|
.then(res=>{
|
if (res.data.code === '200') {
|
this.$message({
|
type:'success',
|
message:'注册成功'
|
})
|
setTimeout(()=>{
|
this.$router.push({path:'/login'})
|
},1000)
|
}else{
|
this.$message({
|
type:'warning',
|
message:res.data.message
|
})
|
}
|
})
|
.catch(err=>{
|
console.log(err)
|
this.$message({
|
type:'warning',
|
message:'请求超时'
|
})
|
})
|
.finally(()=>{
|
this.submitting = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss">
|
$dark_gray:#889aa4;
|
.register_main{
|
display: block;
|
width: 100%;
|
max-width: 1200px;
|
padding: 0 20px;
|
margin: 30px auto
|
}
|
.register_main_body{
|
font-size: 24px;
|
}
|
.register_main_form{
|
padding-top: 70px;
|
margin: 30px auto;
|
max-width: 800px;
|
display: block;
|
width: 100%;
|
}
|
.register_main_body_span{
|
padding: 6px 5px 6px 15px;
|
color: $dark_gray;
|
vertical-align: middle;
|
width: 30px;
|
display: inline-block;
|
}
|
</style>
|
