You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/views/userManage/register.vue

874 lines
34 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div style="overflow: auto; height: 100%; margin: 0 auto">
<el-card
class="el-card"
style="
width: 60%;
margin-top: 35px;
margin-left:20%;
margin-bottom: 35px;
text-align: center;
"
>
<div slot="header" style="font-weight: bold">
<div style="text-align: center">
<img
alt="element-logo"
style="width: 10%"
src="../../assets/glxplogo.png"
/>
</div>
<h3 class="title">医院供应商自助平台用户注册</h3>
</div>
<el-form
:model="inputQuery"
:rules="rules"
ref="inputQuery"
style="margin-left: 20%;"
>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>用户名称:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="nickName">
<el-input
size="small"
placeholder="请输入用户名称"
v-model="inputQuery.nickName"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>用户密码:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="password">
<el-input
size="small"
placeholder="请输入密码"
type="password"
v-model="inputQuery.password"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>确认密码:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="confirmPassword">
<el-input
size="small"
type="password"
placeholder="请确认密码"
v-model="inputQuery.confirmPassword"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>负责人:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="realName">
<el-input
size="small"
placeholder="请输入负责人姓名"
v-model="inputQuery.realName"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>联系电话:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="tel">
<el-input
size="small"
placeholder="请输入联系电话"
v-model="inputQuery.tel"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>邮箱:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="email">
<el-input
size="small"
placeholder="请输入邮箱"
v-model="inputQuery.email"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="registerConfigMap.companyCheckStatus">
<el-col :span="4">
<div class="register-text">
<span>企业名称:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="fromCorp">
<el-select
v-model="inputQuery.companyName"
filterable
remote
clearable="true"
reserve-keyword
placeholder="请输入企业名称"
:remote-method="findMethod"
size="small"
style="width: 100%"
@change="selectOne"
:loading="loading"
>
<el-option
v-for="item in fromOptions"
:key="item.name"
:label="item.name"
:value="item"
>
<span style="float: left">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<!--<el-button-->
<!--type="primary"-->
<!--size="small"-->
<!--icon="search"-->
<!--style="margin-top: 0.5px"-->
<!--@click="checkCompanyName"-->
<!--&gt;-->
<!--校验企业名称-->
<!--</el-button>-->
</el-col>
</el-row>
<el-row :gutter="20" v-if="registerConfigMap.companyCheckStatus">
<el-col :span="4">
<div class="register-text">
<span>阳光采购平台企业名称:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="fromCorp">
<el-select
v-model="inputQuery.udplatCompanyName"
filterable
remote
clearable="true"
reserve-keyword
placeholder="请输入阳光采购企业名称"
:remote-method="findUdplatMethod"
size="small"
style="width: 100%"
@change="selectUdlpatOne"
:loading="loading"
>
<el-option
v-for="item in fromUdplatOptions"
:key="item.name"
:label="item.name"
:value="item"
>
<span style="float: left">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="3">
<!--<el-button-->
<!--type="primary"-->
<!--size="small"-->
<!--icon="search"-->
<!--style="margin-top: 0.5px"-->
<!--@click="checkCompanyName"-->
<!--&gt;-->
<!--校验企业名称-->
<!--</el-button>-->
</el-col>
</el-row>
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="4">-->
<!-- <div class="register-text">-->
<!-- <span>企业名称:&nbsp;</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="10">-->
<!-- <el-form-item prop="area">-->
<!-- <el-cascader-->
<!-- size="small"-->
<!-- :options="options"-->
<!-- v-model="selectedOptions"-->
<!-- placeholder="请选择所属企业"-->
<!-- style="width: 100%"-->
<!-- @change="handleChange"-->
<!-- >-->
<!-- </el-cascader>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>统一社会信用号:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="creditNum">
<el-input
size="small"
placeholder="请输入统一社会信用号"
v-model="inputQuery.creditNum"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>企业类型:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="bussinessStatus">
<el-select :disabled="true"
size="small"
style="width: 100%"
v-model="inputQuery.bussinessStatus"
placeholder="企业类型"
>
<!-- <el-option label="医院" value="1"></el-option>-->
<el-option label="经营企业" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>所属地区:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="area">
<el-cascader
size="small"
:options="options"
v-model="selectedOptions"
placeholder="请选择所属地区"
style="width: 100%"
@change="handleChange"
>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>详细地址:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="detailAddr">
<el-input
size="small"
placeholder="请输入详细地址"
v-model="inputQuery.detailAddr"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>手机号:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="mobile">
<el-input
size="small"
placeholder="请输入手机号"
v-model="inputQuery.mobile"
@input="change()"
></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<el-button
type="primary"
size="small"
icon="search"
:disabled="isTimer"
style="margin-top: 0.5px"
@click="getCheckCode"
>
<span>{{ btnTitle }}</span>
</el-button>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="register-text">
<span>手机验证码:&nbsp;</span>
</div>
</el-col>
<el-col :span="10">
<el-form-item prop="checkCode">
<el-input
size="small"
placeholder="请输入手机验证码"
v-model="inputQuery.checkCode"
@input="change()"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="18">
<el-form-item label="营业执照电子档案:" label-width="150px">
<el-upload
class="upload-demo"
ref="upload"
:action="this.uploadUrl"
:on-preview="uploadHandlePreview"
:on-remove="uploadHandleRemove"
:headers="headers"
:limit="1"
:on-exceed="uploadHandleExceed"
accept=".jpg,.png"
:on-change="uploadOnchange"
:on-success="uploadHandleSuccess"
:on-error="uploadHandleError"
:file-list="fileList"
:data="{type:'image1'}"
:auto-upload="true"
:show-file-list="true"
>
<div>
<el-button slot="trigger" size="small" type="primary"
:disabled="companyEditDisabled">
</el-button>
<el-button
:disabled="inputQuery.licenseUrl === null || inputQuery.licenseUrl === ''"
@click.native="openFile(inputQuery.licenseUrl)"
size="small" type="primary">查看文件
</el-button>
</div>
<!-- <div slot="tip" class="el-upload__tip">只能上传 .jpg,.png 文件且不超过 2 MB</div>-->
</el-upload>
</el-form-item>
</el-col>
</el-row>
<div style="width: 100%; margin-left: -100px">
<el-form-item>
<el-button
type="primary"
size="small"
icon="search"
style="margin-top: 20px; width: 200px"
@click="onSubmit('inputQuery')"
>提交
</el-button
>
</el-form-item>
</div>
</el-form>
</el-card>
<div style="color: #2d3a4b; text-align: center">
<a href="http://www.xmglxp.com" style="color: #000000; font-size: 12px"
>厦门高立新鹏软件科技有限公司 &nbsp;13459286066</a
>
</div>
<div style="color: #2d3a4b; text-align: center">
<a
href="http://www.beian.gov.cn/portal/registerSystemInfo"
style="color: #000000; font-size: 12px"
>
闽公网安备35020302034269号&nbsp;&nbsp;
</a>
<a
href="http://beian.miit.gov.cn"
style="color: #000000; font-size: 12px"
>
备案号:闽ICP备17019234号
</a>
</div>
<el-dialog
title="注册成功"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="formVisible"
:before-close="formDefine"
width="50%"
top="5vh"
>
<el-form :model="formData" ref="dataForm">
<el-row :gutter="20" class="el-row" type="flex">
<el-col :span="20" class="el-col" type="flex">
<div class="text item">
<span>您的注册信息已提交等待审核请牢记您的账号密码方便登录系统</span>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="el-row" type="flex" style="margin-top: 20px">
<el-col :span="10" class="el-col" type="flex">
<div class="text item">
<span>{{ this.acoountInfo }}</span>
</div>
</el-col>
<el-col :span="10" class="el-col" type="flex">
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<!--<el-button-->
<!--type="primary"-->
<!--@click.native="formDefine()"-->
<!--&gt;确定-->
<!--</el-button-->
<!--&gt;-->
<!-- <el-button class="tag-read" type="primary" size="mini" :data-clipboard-text="acoountInfo" @click="copy">-->
<!-- 确定-->
<!-- </el-button>-->
<el-button class="tag-read" type="primary" size="mini"
v-clipboard:copy="acoountInfo"
>复制
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getCompany,
modifyCompany,
getRefid, checkCompany, getRegisterConfig,
} from "../../api/warehouse/company";
import {getCheckcode, register} from "../../api/auth/register";
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode,
} from "element-china-area-data";
import Clipboard from 'clipboard';
import {BASE_URL} from "../../config/app";
import {getBasicUnitMaintains} from "../../api/basic/basicUnitMaintain"
import {getCorps} from "@/api/thrsys/thrCorps";
export default {
data() {
let validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.inputQuery.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
inputQuery: {
nickName: null,
password: "",
realName: "",
tel: "",
mobile: "",
userId: "",
confirmPassword: "",
checkCode: "",
email: "",
companyId: "",
companyName: "",
udplatCompanyName: "",
udplatCompanyId: null,
creditNum: "",
area: "",
areaCode: "",
detailAddr: "",
bussinessStatus: "2",
checkCompanyNameStatus: false,
licenseUrl: null,
},
headers: {},
uploadUrl: null,
fileUrl: null,
isTimer: false,
btnTitle: "获取验证码",
options: regionDataPlus,
selectedOptions: [],
fromOptions: [],
fromUdplatOptions: [],
acoountInfo: "账号:" + "------" + "\n密码" + "-----",
rules: {
nickName: [
{required: true, message: "请输入用户名称", trigger: "blur"},
],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
realName: [
{required: true, message: "请输入负责人姓名", trigger: "blur"},
],
tel: [{required: true, message: "请输入联系电话", trigger: "blur"},
// { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入正确的电话号码", trigger: "blur" }
],
mobile: [{required: true, message: "请输入手机号码", trigger: "blur"},
// { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入正确的手机号", trigger: "blur" }
],
confirmPassword: [
{required: true, message: "请确认密码", trigger: "blur"},
{validator: validatePass2, trigger: "blur"},
],
checkCode: [
{required: true, message: "请输入手机验证码", trigger: "blur"},
],
email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
companyName: [
{required: true, message: "请输入企业名称", trigger: "blur"},
],
udplatCompanyName: [
{required: true, message: "请输入阳光采购平台企业名称", trigger: "blur"},
],
creditNum: [
{required: true, message: "请输入统一社会信用号", trigger: "blur"},
],
area: [{required: true, message: "请选择所属地区", trigger: "blur"}],
detailAddr: [
{required: true, message: "请输入详细地址", trigger: "blur"},
],
bussinessStatus: [
{required: true, message: "请选择企业类型", trigger: "blur"},
],
},
registerConfigMap: {
companyCheckStatus: true
},
formVisible: false,
formData: {
account: "",
password: "",
}
};
},
created() {
this.registerConfig();
this.uploadUrl = BASE_URL + "/udiwms/upload/register/file";
this.fileUrl = BASE_URL + "/udiwms/image/register/file/getImage?type=image1&name=";
// this.getData();
this.headers = {
ADMIN_ID: store.getters.adminId,
ADMIN_TOKEN: store.getters.token,
};
},
methods: {
onSubmit(formName) {
// this.formVisible = true;
this.$refs[formName].validate((valid) => {
if (valid) {
// if (!this.checkCompanyNameStatus && this.registerConfigMap.companyCheckStatus) {
// return this.$message.error('企业名称校验失败');
// }
this.loading = true;
register(this.inputQuery).then((response) => {
if (response.code === 20000) {
this.loading = false;
this.formData = {
account: response.data,
password: this.inputQuery.password,
}
this.formVisible = true;
this.acoountInfo = "账号:" + this.formData.account + "\n密码" + this.formData.password;
} else {
this.$message.error(response.message);
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
formDefine() {
this.formVisible = false;
this.$router.push({path: "../login"});
},
getData() {
this.loading = true;
getCompany().then((response) => {
this.loading = false;
this.inputQuery = response.data;
this.inputQuery.bussinessStatus = "2";
console.log(this.inputQuery)
this.selectedOptions = this.inputQuery.areaCode.split(",");
});
},
getCheckCode(mobile) {
let tquery = {
phoneNum: this.inputQuery.mobile,
};
getCheckcode(tquery).then((response) => {
if (response.code === 20000) {
this.validateBtn();
} else {
this.$message.error(response.message);
}
});
},
checkCompanyName() {
if (this.$isBlank(this.inputQuery.companyName)) {
this.$message.error('企业名称不能为空');
return;
}
let tQuery = {
companyName: this.inputQuery.companyName,
};
checkCompany(tQuery).then((response) => {
if (response.code === 20000) {
this.checkCompanyNameStatus = true;
this.$message.success("校验成功!");
} else {
this.$message.error(response.message);
}
});
},
registerConfig() {
getRegisterConfig().then((response) => {
if (response.code === 20000) {
this.registerConfigMap = response.data;
}
});
},
validateBtn() {
//倒计时
let time = 60;
let timer = setInterval(() => {
if (time === 0) {
clearInterval(timer);
this.isTimer = false;
this.btnTitle = "获取验证码";
} else {
this.btnTitle = time + "秒后重试";
this.isTimer = true;
time--;
}
}, 1000);
},
handleChange(value) {
this.inputQuery.area =
CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
console.log(value + "\n" + this.inputQuery.area);
this.inputQuery.areaCode = value.toString();
},
copy() {
let sel = this;
let clipboard = new Clipboard('.tag-read');
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持复制')
// 释放内存
clipboard.destroy()
});
this.$confirm("账号已复制,请牢记自己的账号密码!是否跳转登录", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
// this.formVisible = false;
// this.$router.push({path: "../login"});
sel.formDefine();
}).catch(() => {
});
},
selectOne(event) {
this.inputQuery.companyName = event.name;
this.inputQuery.companyId = event.erpId;
},
selectUdlpatOne(event) {
this.inputQuery.udplatCompanyName = event.name;
this.inputQuery.udplatCompanyId = event.erpId;
},
findMethod(query) {
console.log(query);
this.fromOptions = [];
let cQuery = {
key: query,
};
getBasicUnitMaintains(cQuery)
.then((response) => {
this.loading = false;
this.fromOptions = response.data.page.list || [];
})
.catch(() => {
this.loading = false;
});
},
findUdplatMethod(query) {
console.log(query);
this.fromUdplatOptions = [];
let cQuery = {
name: query,
thirdSysFk: null,
};
getCorps(cQuery)
.then((response) => {
this.loading = false;
this.fromUdplatOptions = response.data.list || [];
})
.catch(() => {
this.loading = false;
});
},
uploadHandleRemove(file, fileList) {
console.log(file, fileList);
},
uploadHandlePreview(file) {
console.log(file);
console.log(this.fileList);
},
uploadHandleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
uploadOnchange(file, fileList) {
let fileName = file.name;
let uid = file.uid
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
if (lastName.toLowerCase() !== ".jpg" && lastName.toLowerCase() !== ".png") {
this.$message.error("上传文件只能是 .jpg,.png 格式");
for (let i = 0; i < fileList.length; i++) {//从list删除
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
return;
}
// 限制上传文件的大小
const isLt = file.size / 1024 / 1024 / 2 <= 1;
if (!isLt) {
this.$message.error("上传文件大小不能超过 2MB");
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid === uid) {
fileList.splice(i, 1)
}
}
}
return isLt;
},
uploadHandleSuccess(response, file, fileList) {
console.log(response)
if (response.code === 20000) {
this.inputQuery.licenseUrl = response.data.name;
} else {
this.$message.error("文件上传失败:" + response.message);
}
},
uploadHandleError() {
},
openFile(path) {
window.open(this.fileUrl + path);
},
},
};
</script>
<style>
.register-text {
width: 100%;
font-size: 13px;
font-family: "Microsoft YaHei";
float: right;
text-align: right;
margin-top: 10px;
}
.el-card {
margin-right: 20px;
margin-top: 15px;
/*transition: all .5s;*/
}
.el-row {
display: flex;
flex-wrap: wrap;
}
.el-col {
border-radius: 4px;
flex-wrap: wrap;
}
</style>