|
@@ -14,27 +14,23 @@
|
|
|
<h2>注册</h2>
|
|
|
<el-form :model="registerForm" :rules="rulesRegister" ref="registerForm" label-width="100px" class="registerForm">
|
|
|
<el-divider content-position="left">基本信息</el-divider>
|
|
|
- <el-form-item label="头像" prop="avatar">
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload">
|
|
|
- <el-image v-if="registerForm.avatar" :src="registerForm.avatar" fit="contain"></el-image>
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon">Upload</i>
|
|
|
- </el-upload>
|
|
|
+ <el-form-item label="头像" prop="cover_image_url">
|
|
|
+ <upload :datafileList="registerForm.cover_image_list" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" :filleNumber="1" pageName="register" v-if="!registerForm.cover_image_url" />
|
|
|
+ <div class="cover-box" v-else @mouseover="Imagemouseover('coverFlag',true)" @mouseout="Imagemouseover('coverFlag',false)">
|
|
|
+ <el-image :src="registerForm.cover_image_url" fit="contain" style="max-width:200px;max-height:200px;"></el-image>
|
|
|
+ <p v-show="coverFlag" @click="handleDeleteFile('cover',0)"><i class="el-icon-delete"></i></p>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="用户名" prop="name">
|
|
|
- <el-input v-model="registerForm.name" placeholder="请输入用户名"></el-input>
|
|
|
+ <el-input v-model="registerForm.name" placeholder="请输入用户名" @blur="handleTrim('registerForm','name')"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="真实姓名" prop="realName">
|
|
|
- <el-input v-model="registerForm.realName" placeholder="请输入真实姓名"></el-input>
|
|
|
+ <el-input v-model="registerForm.realName" placeholder="请输入真实姓名" @blur="handleTrim('registerForm','realName')"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="性别" prop="sex">
|
|
|
<el-radio-group v-model="registerForm.sex">
|
|
|
- <el-radio label="0">男</el-radio>
|
|
|
- <el-radio label="1">女</el-radio>
|
|
|
+ <el-radio :label="1">男</el-radio>
|
|
|
+ <el-radio :label="0">女</el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="所在省市" prop="selectedOptions">
|
|
@@ -46,32 +42,32 @@
|
|
|
</el-cascader>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="备注" prop="desc">
|
|
|
- <el-input type="textarea" v-model="registerForm.desc" placeholder="请输入备注" maxlength="100" :rows="4" show-word-limit></el-input>
|
|
|
+ <el-input type="textarea" v-model="registerForm.desc" placeholder="请输入备注" maxlength="100" :rows="4" show-word-limit @blur="handleTrim('registerForm','desc')"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-divider content-position="left">加入机构</el-divider>
|
|
|
<el-form-item label="选择机构" prop="region">
|
|
|
- <el-select v-model="registerForm.region" filterable placeholder="请选择机构">
|
|
|
+ <el-select v-model="registerForm.region" filterable remote placeholder="请选择机构" :remote-method="remoteMethod" :loading="searchOrgLoading">
|
|
|
<el-option
|
|
|
v-for="item in orgList"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<p class="tips">输入机构代码或手动选择</p>
|
|
|
</el-form-item>
|
|
|
<el-divider content-position="left">安全信息</el-divider>
|
|
|
<el-form-item label="手机号" prop="phone">
|
|
|
- <el-input v-model="registerForm.phone" autocomplete="off" placeholder="请输入完整手机号" >
|
|
|
+ <el-input v-model="registerForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('registerForm','phone')" >
|
|
|
<template slot="prepend">+86</template>
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="邮箱" prop="email">
|
|
|
- <el-input v-model="registerForm.email" autocomplete="off" placeholder="请输入邮箱地址" >
|
|
|
+ <el-input v-model="registerForm.email" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('registerForm','email')" >
|
|
|
</el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="账号密码" prop="newPwd">
|
|
|
- <el-input v-model="registerForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
|
|
|
+ <el-input v-model="registerForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('registerForm','newPwd')" >
|
|
|
<i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
|
|
|
<i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
|
|
|
<svg-icon icon-class="eye-invisible"></svg-icon>
|
|
@@ -80,7 +76,7 @@
|
|
|
<p class="tips">不少于6位,且必须同时包含数字和大小写字母</p>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="再次输入" prop="confirmPwd">
|
|
|
- <el-input v-model="registerForm.confirmPwd" :type="comfirmPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" >
|
|
|
+ <el-input v-model="registerForm.confirmPwd" :type="comfirmPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('registerForm','confirmPwd')" >
|
|
|
<i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('comfirmPwdFlag')" v-if="comfirmPwdFlag"></i>
|
|
|
<i slot="suffix" class="show-icon" @click="changeIcon('comfirmPwdFlag')" v-else>
|
|
|
<svg-icon icon-class="eye-invisible"></svg-icon>
|
|
@@ -94,7 +90,7 @@
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmitPassword('registerForm')" size="small">保存</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmitPassword('registerForm')" size="small" :loading="loading">保存</el-button>
|
|
|
<el-button @click="onCancel('registerForm')" size="small">取消</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -106,12 +102,15 @@
|
|
|
//这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
//例如:import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "@/components/Header.vue";
|
|
|
+import Upload from "@/components/Upload.vue"
|
|
|
import {
|
|
|
provinceAndCityData
|
|
|
} from "element-china-area-data";
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
+import Cookies from 'js-cookie'
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header },
|
|
|
+ components: { Header, Upload },
|
|
|
props: [],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
@@ -137,7 +136,7 @@ export default {
|
|
|
if (result) {
|
|
|
callback();
|
|
|
} else {
|
|
|
- callback(new Error('密码只能包含数字和字母'));
|
|
|
+ callback(new Error('密码必须同时包含数字和大小写字母'));
|
|
|
}
|
|
|
|
|
|
}
|
|
@@ -151,6 +150,19 @@ export default {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
+ const validateEmail = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('请输入正确的邮箱地址'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
return {
|
|
|
provinceAndCityData,
|
|
|
config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
|
|
@@ -158,11 +170,13 @@ export default {
|
|
|
headerBorder: '#5C5C5C',
|
|
|
headerBg: '#1F1F1F',
|
|
|
registerForm:{
|
|
|
- avatar: '',
|
|
|
+ cover_image_url: '',
|
|
|
+ cover_image_list: [],
|
|
|
+ cover_image_id: null,
|
|
|
name:'',
|
|
|
realName:'',
|
|
|
- sex:'0',
|
|
|
- selectedOptions:[],
|
|
|
+ sex:1,
|
|
|
+ selectedOptions:'0204',
|
|
|
desc:'',
|
|
|
phone:'',
|
|
|
email:'',
|
|
@@ -182,8 +196,11 @@ export default {
|
|
|
sex:[
|
|
|
{ required: true, message: '请选择性别', trigger: 'change' },
|
|
|
],
|
|
|
+ // selectedOptions: [
|
|
|
+ // { type: 'array', required: true, message: '请选择所在省市', trigger: 'change' }
|
|
|
+ // ],
|
|
|
selectedOptions: [
|
|
|
- { type: 'array', required: true, message: '请选择所在省市', trigger: 'change' }
|
|
|
+ { required: true, message: '请选择所在省市', trigger: 'change' }
|
|
|
],
|
|
|
phone:[
|
|
|
{ required: true, validator: validatePhone, trigger: 'blur' }
|
|
@@ -201,19 +218,17 @@ export default {
|
|
|
region: [
|
|
|
{ required: true, message: '请选择机构', trigger: 'change' }
|
|
|
],
|
|
|
+ email:[
|
|
|
+ { validator: validateEmail, trigger: 'blur' },
|
|
|
+ ]
|
|
|
},
|
|
|
- orgList:[
|
|
|
- {
|
|
|
- label:'上海商学院',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- label:'青岛科技大学',
|
|
|
- value: 1
|
|
|
- }
|
|
|
- ],
|
|
|
+ orgList:[], // 筛选之后 机构列表
|
|
|
+ searchOrgList:[],// 总的机构列表
|
|
|
newPwdFlag: false, // 查看新密码
|
|
|
comfirmPwdFlag: false, // 查看确认密码
|
|
|
+ searchOrgLoading: false, // 搜索机构loading
|
|
|
+ coverFlag: false,
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
@@ -222,8 +237,10 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.registerForm.avatar = URL.createObjectURL(file.raw);
|
|
|
+ handleAvatarSuccess(fileList) {
|
|
|
+ this.registerForm.cover_image_list = fileList
|
|
|
+ this.registerForm.cover_image_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
|
|
|
+ this.registerForm.cover_image_url = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_url:''
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
@@ -241,16 +258,94 @@ export default {
|
|
|
},
|
|
|
// 提交表单
|
|
|
onSubmitPassword(formName){
|
|
|
- console.log(this.loginPwdForm)
|
|
|
+ let MethodName = "/OrgServer/Client/PersonManager/RegisterToOrgPerson";
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- alert('submit!');
|
|
|
+ let form = this.registerForm
|
|
|
+ let data = {
|
|
|
+ user_name: form.name,
|
|
|
+ real_name: form.realName,
|
|
|
+ sex: form.sex,
|
|
|
+ image_id: form.cover_image_id,
|
|
|
+ org_id: form.region,
|
|
|
+ email: form.email,
|
|
|
+ phone: form.phone,
|
|
|
+ city_id: form.selectedOptions,
|
|
|
+ memo: form.desc,
|
|
|
+ password: form.newPwd
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.$message.success('注册成功,请等待审核');
|
|
|
+ this.$router.push({ path: "/EnterSys" });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
} else {
|
|
|
- console.log('error submit!!');
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel(formName){
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // 查询列表
|
|
|
+ getOrgList(){
|
|
|
+ let MethodName = "/OrgServer/Client/OrgManager/GetOrgIndexList";
|
|
|
+ let data = {
|
|
|
+ name: '',
|
|
|
+ status: 1,
|
|
|
+ sn: ''
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.searchOrgList = JSON.parse(JSON.stringify(res.org_index_list))
|
|
|
+ this.orgList = res.org_index_list
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 搜索查询机构
|
|
|
+ remoteMethod(query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.searchOrgLoading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.searchOrgLoading = false;
|
|
|
+ this.orgList = this.searchOrgList.filter(item => {
|
|
|
+ return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1||item.sn.toLowerCase().indexOf(query.toLowerCase()) > -1;
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ } else {
|
|
|
+ this.orgList = JSON.parse(JSON.stringify(this.searchOrgList));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Imagemouseover(item,flag) {
|
|
|
+ this[item] = flag
|
|
|
+ },
|
|
|
+ handleDeleteFile(item,i) {
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ if(item==='cover'){
|
|
|
+ this.registerForm.cover_image_list.splice(i, 1);
|
|
|
+ this.registerForm.cover_image_url = ''
|
|
|
+ this.registerForm.cover_image_id = null
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form,fild){
|
|
|
+ this[form][fild] = this[form][fild].trim()
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {
|
|
@@ -260,6 +355,14 @@ export default {
|
|
|
this.headerBorder = arr[2] ? arr[2] : '#5C5C5C'
|
|
|
this.headerBg = arr[3] ? arr[3] : '#1F1F1F'
|
|
|
}
|
|
|
+ this.getOrgList()
|
|
|
+ let MethodName = '/OrgServer/LoginControl/GetInnerAccessToken'
|
|
|
+ getLogin(MethodName, {})
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ Cookies.set('registerToken', res.access_token)
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {
|
|
@@ -305,6 +408,25 @@ export default {
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
+.cover-box{
|
|
|
+ position: relative;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ line-height: 200px;
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ color: #F2F3F5;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.registerForm{
|