商享通oms管理后台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

888 lines
26 KiB

12 months ago
<template>
<div class="login">
<div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
<img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
</div>
<div class="main">
<img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />
<div class="main-right" v-show="register==0">
<span class="main-right-title">欢迎登录商享通OMS</span>
<div class="main-right-table">
11 months ago
<div style="cursor:pointer;" :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'"
@click="tableClick(1)">
12 months ago
密码登录</div>
11 months ago
<div style="cursor:pointer;" :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'"
@click="tableClick(2)">
12 months ago
验证码登录</div>
</div>
<div class="main-right-table-password" v-show="tableIndex==1">
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
<el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />
</div>
<div class="main-right-table-code" v-show="tableIndex==2">
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
<div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
v-model="loginForm.verifyCode" />
<span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" @click="sendCode">{{sendCodeText}}</span>
</div>
</div>
<el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="login">登录</el-button>
<div class="main-right-bom">
<el-checkbox class="main-right-bom-left" v-model="checkbox">7天内免登录</el-checkbox>
<div class="main-right-bom-right">
11 months ago
<span @click="forgetClick" style="cursor:pointer;">忘记密码</span>
12 months ago
<div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
11 months ago
<span @click="registerClick" style="cursor:pointer;">去注册</span>
12 months ago
</div>
</div>
</div>
<div class="main-right" v-show="register==1">
<div v-show="registerStep==1" class="registerStep1">
<span class="main-right-title2">欢迎注册商享通OMS</span>
<span style="width: 100%; margin-top: 15px;">手机号码</span>
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="11"
placeholder="请输入手机号码" v-model="registerInfo.mobile" />
<span style="width: 100%;margin-top: 15px;">密码</span>
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" placeholder="8至16位大小写字母和数字的组合"
12 months ago
v-model="registerInfo.password" show-password />
<span style="width: 100%;margin-top: 15px;">验证码</span>
<div
style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;margin-left: -10px;">
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
v-model="registerInfo.code" />
<span :class="sendCodeType2 ? 'sendCode1' : 'sendCode2'" style="cursor:pointer;"
@click="sendCode2">{{sendCodeText2}}</span>
12 months ago
</div>
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;"
@click="goLogin">
<span>已有账号</span>
<span style="color: #5084D2;cursor:pointer;">登录</span>
12 months ago
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep1()">注册</el-button>
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 10px;">
<el-checkbox style="margin-right: 5px;" v-model="check"></el-checkbox>
<span style="font-size: 12px;">我已阅读并同意</span>
<span style="font-size: 12px;">宇信通服务协议</span>
<span style="font-size: 12px;"></span>
<span style="font-size: 12px;">隐私协议</span>
</div>
</div>
<div v-show="registerStep==2" class="registerStep2">
<span class="main-right-title">请选择公司进入OMS</span>
<div style="height: 300px;width: 100%; margin-top: 15px;overflow: auto;
display: flex;flex-direction: column;">
<div v-for="(item,index) in companyList" :key="index" @click="itemClick(item)"
style="display: flex;flex-direction: column;width: 100%;">
<div style="display: flex;flex-direction: row;align-items: center;
background: #EDF1F7; border-radius: 8px;width: 100%;margin-bottom: 20px;
height: 50px;">
<img src="../../assets/images/company_icon.png" style="width: 25px; height: 25px;
margin-left: 10px;margin-right: 10px;" />
<span style="flex: 1;margin-right: 10px;">{{item.orgName}}</span>
<img v-show="item.type=='3'" src="../../assets/images/overdue.png" style=" height: 100%;" />
12 months ago
<img v-show="item.type=='2'" src="../../assets/images/experience.png" style=" height: 100%;" />
<img v-show="item.type=='1'" src="../../assets/images/formal.png" style=" height: 100%;" />
12 months ago
</div>
</div>
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep2()">新建企业信息</el-button>
</div>
<div v-show="registerStep==3" class="registerStep3">
<span class="main-right-title2">欢迎注册商享通OMS</span>
<span style="width: 100%; font-size: 16px;color: #000; margin-top: 40px;">请填写您的企业信息</span>
<div style="display: flex;flex-direction: row;align-items: center; margin-top: 15px;width: 100%; ">
<span>企业名称</span>
<el-input class="input" style="flex: 1; " placeholder="请输入公司名称" v-model="registerInfo.companyName" />
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
<span>联系人员</span>
<el-input class="input" style="flex: 1;" placeholder="请输入联系人" v-model="registerInfo.contacts" />
</div>
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
<span>所在区域</span>
<!-- <el-input class="input" style="flex: 1; margin-right: 10px;" placeholder="请输入公司名称"
v-model="registerInfo.company" /> -->
<el-cascader v-model="selectedOptions" :options="options" filterable clearable class="input"
style="flex: 1;" @change="handleChange" />
</div>
<el-button type="primary" size="small"
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
@click="registerStep3()">创建并进入</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
import {
doLogin,
registerSendMessageCode,
bindOrganization,
selOrganization,
getUserById,
registUser
} from '@/api/user.js'
// 导入省市区数据组件
import {
regionData,
codeToText,
TextToCode
} from 'element-china-area-data'
import {
setCookie,
getCookie,
removeCookie,
} from '@/utils/functions.js.js'
export default {
data() {
return {
checkbox: false,
register: 0,
registerStep: 1,
tableIndex: 1,
sendCodeText: "发送验证码",
sendCodeType: false,
totalTime: 10, //一般是60
timer: '', //定时器
sendCodeText2: "发送验证码",
sendCodeType2: false,
totalTime2: 10, //一般是60
timer2: '', //定时器
check: false,
registerInfo: {
mobile: '',
password: "",
11 months ago
userSid: "",
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44', // oms 资源sid
12 months ago
},
loginForm: {
userName: '',
password: '',
verifyCode: "",
type: "1"
},
loading: false,
loginCode: false,
showMsg: false,
forgetPwd: false,
nopassword: {
userPhone: '',
userName: '',
},
// 将省市区数据赋给级联选择器
options: regionData,
// 存放用户选择后省市区的信息
selectedOptions: [],
companyList: [
// {
// sid: "1",
// name: "撒打算打算1阿斯顿撒大撒打算打算大萨达",
// type: "1"
// }, {
// sid: "2",
// name: "撒打算打算2",
// type: "2"
// }, {
// sid: "3",
// name: "撒打算打算3",
// type: "3"
// }, {
// sid: "4",
// name: "撒打算打算4",
// type: "1"
// }, {
// sid: "5",
// name: "撒打算打算5",
// type: "1"
// }, {
// sid: "6",
// name: "撒打算打算6",
// type: "1"
// }, {
// sid: "7",
// name: "撒打算打算7",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// }, {
// sid: "1",
// name: "撒打算打算1",
// type: "1"
// },
]
}
},
created() {
if (getCookie("pas") && getCookie("name")) { //判断页面是否有对应Cookie
this.loginForm.userName = getCookie("name"); //有则写入
this.loginForm.password = getCookie("pas");
console.log(" created", this.loginForm)
this.checkbox = true
} else {
this.loginForm.userName = ""; //无则写空
this.loginForm.password = "";
}
},
methods: {
// 省市区级联选择器选择后更新用户前端
handleChange(value) {
console.log(" handleChange", value)
var province = ''
var city = ''
var country = ''
for (let i = 0; i < this.selectedOptions.length; i++) {
if (i === 0) {
var province = codeToText[this.selectedOptions[i]]
}
if (i === 1) {
var city = codeToText[this.selectedOptions[i]]
}
if (i === 2) {
var country = codeToText[this.selectedOptions[i]]
}
}
console.log(" handleChange", province + "/" + city + "/" + country)
this.registerInfo.region = province + "/" + city + "/" + country
},
tableClick(index) {
this.tableIndex = index
this.loginForm.type = index + ""
},
// 验证码倒计时
sendCode() {
if (this.sendCodeType) return
// this.getCode() // 获取验证码的接口
this.sendCodeType = true
this.sendCodeText = this.totalTime + 's'
this.timer = setInterval(() => {
this.totalTime--
this.sendCodeText = this.totalTime + 's'
if (this.totalTime < 0) {
clearInterval(this.timer)
this.sendCodeText = '发送验证码'
this.totalTime = 10
this.sendCodeType = false
}
}, 1000)
},
// 验证码倒计时
sendCode2() {
if (this.registerInfo.mobile == '') {
this.$message({
message: '请输入手机号码',
type: 'warning'
})
return
}
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
console.log(" reg", reg.test(this.registerInfo.mobile))
if (!reg.test(this.registerInfo.mobile)) {
this.$message({
message: '手机号码格式错误',
type: 'warning'
})
return
}
if (this.sendCodeType2) return
// this.getCode() // 获取验证码的接口
this.sendCodeType2 = true
this.sendCodeText2 = this.totalTime2 + 's'
this.timer2 = setInterval(() => {
this.totalTime2--
this.sendCodeText2 = this.totalTime2 + 's'
if (this.totalTime2 < 0) {
clearInterval(this.timer2)
this.sendCodeText2 = '发送验证码'
this.totalTime2 = 10
this.sendCodeType2 = false
}
}, 1000)
registerSendMessageCode(this.registerInfo.mobile).then((response) => {}).catch(() => {})
},
login() {
if (this.checkbox) { //判断多选框是否选中
setCookie("name", this.loginForm.userName, 7); //如选中则添加Cookie,添加内容为用户输入的密码和用户名
setCookie("pas", this.loginForm.password, 7);
} else {
removeCookie("name"); //如没选中,则删除掉对应的Cookie
removeCookie("pas");
}
// this.register = 1
// this.registerStep = 2
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
doLogin(this.loginForm).then((response) => {
if (response.code == 200) {
loading.close()
this.register = 1
this.companyList = response.data.sysOrganizationVos
this.registerInfo.userSid = response.data.sid
if (this.companyList.length == 0) {
// 1. 新用户 无关联企业
this.registerStep = 3
} else {
// 2. 注册过 选择企业登录
this.registerStep = 2
}
} else {
loading.close()
}
}).catch(() => {
loading.close()
})
},
forgetClick() {
},
registerClick() {
this.register = 1
this.registerStep = 1
},
goLogin() {
this.register = 0
this.registerStep = 0
},
registerStep1() {
var passwordreg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,16}$/
if (!passwordreg.test(this.registerInfo.password)) {
this.$message({
message: '密码格式错误,必须为8至16位大小写字母和数字的组合',
type: 'warning'
})
return
}
12 months ago
if (!this.check) {
this.$message({
message: '请阅读并同意《宇信通服务协议》与《隐私协议》',
type: 'warning'
})
return
}
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
registUser(this.registerInfo).then((response) => {
if (response.code == 200) {
loading.close()
this.companyList = response.data.sysOrganizationVos
this.registerInfo.userSid = response.data.sid
if (this.companyList.length == 0) {
// 1. 新用户 无关联企业
this.registerStep = 3
} else {
// 2. 注册过 选择企业登录
this.registerStep = 2
}
} else {
loading.close()
}
}).catch(() => {
loading.close()
})
},
registerStep2() {
this.registerStep = 3
},
registerStep3() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
bindOrganization(this.registerInfo).then((response) => {
if (response.code == 200) {
this.$router.push({
path: '/index'
})
loading.close()
11 months ago
window.sessionStorage.setItem('token', response.data.token)
window.sessionStorage.setItem('staffSid', response.data.staffSid)
window.sessionStorage.setItem('userSid', response.data.sid)
window.sessionStorage.setItem('name', response.data.name)
window.sessionStorage.setItem('userName', response.data.userName)
window.sessionStorage.setItem('mobile', response.data.mobile)
window.sessionStorage.setItem('orgName', response.data.orgName)
window.sessionStorage.setItem('orgSid', response.data.orgSid)
window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
.pNameAndDepartmentNameAndPostName)
} else {
loading.close()
12 months ago
}
}).catch(() => {
loading.close()
})
},
itemClick(item) {
console.log(" itemClick", item)
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
var params = {
userSid: this.registerInfo.userSid,
orgSid: item.orgSid,
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44', // oms 资源sid
12 months ago
}
selOrganization(params).then((response) => {
if (response.code == 200) {
this.$router.push({
path: '/index'
})
loading.close()
window.sessionStorage.setItem('token', response.data.token)
window.sessionStorage.setItem('staffSid', response.data.staffSid)
11 months ago
window.sessionStorage.setItem('userSid', response.data.sid)
window.sessionStorage.setItem('name', response.data.name)
12 months ago
window.sessionStorage.setItem('userName', response.data.userName)
window.sessionStorage.setItem('mobile', response.data.mobile)
11 months ago
window.sessionStorage.setItem('orgName', response.data.orgName)
12 months ago
window.sessionStorage.setItem('orgSid', response.data.orgSid)
11 months ago
window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
12 months ago
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
11 months ago
window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
12 months ago
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
.pNameAndDepartmentNameAndPostName)
} else {
loading.close()
12 months ago
}
}).catch(() => {
loading.close()
})
},
getUserInfo(id) {
getUserById(id).then((response) => {
if (response.code == 200) {
console.log(" response", response)
let user = response.data
// 结果存入缓存
window.sessionStorage.setItem('staffSid', user.staffSid)
window.sessionStorage.setItem('sid', user.sid)
window.sessionStorage.setItem('userName', user.userName)
}
}).catch(() => {})
},
codeShow() {
if (this.loginForm.password == '' || this.loginForm.userName == '') {
this.loginCode = false
this.showMsg = true
return
}
this.$refs.imgCodeRole.getCodeImage()
},
reGetPwd() {
user.reGetPwd(this.nopassword).then((res) => {})
},
},
}
</script>
<style lang="scss">
// .el-input__inner {
// border: none;
// color: #000;
// font-size: 16px;
// }
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #000;
}
.login {
position: relative;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url(../../assets/home/bj.png);
background-position: center;
overflow: hidden;
.logoTitle {
margin: 30px;
}
.main {
width: 60%;
height: 500px;
background: #ffffff;
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
opacity: 0.8;
border-radius: 5px;
position: absolute;
right: 20%;
top: 25%;
display: flex;
flex-direction: row;
.main-right {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
height: 100%;
.main-right-title {
margin-top: 40px;
font-size: 24px;
font-weight: 600;
}
.main-right-title2 {
margin-top: 40px;
font-size: 24px;
font-weight: 600;
color: #467CCF;
}
.main-right-table {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 30px;
width: 70%;
.main-right-table-text1 {
flex: 1;
font-size: 22px;
text-align: center;
color: #3E77CD;
}
.main-right-table-text1:after {
content: '';
display: block;
width: 60px;
border-bottom: 2px solid #3E77CD;
margin: 0 auto;
padding-bottom: 8px;
}
.main-right-table-text3 {
flex: 1;
font-size: 22px;
text-align: center;
color: #333;
border-bottom: none;
padding-bottom: 8px;
}
.main-right-table-text2 {
flex: 1;
font-size: 22px;
text-align: center;
color: #3E77CD;
}
.main-right-table-text2:after {
content: '';
display: block;
width: 80px;
border-bottom: 2px solid #3E77CD;
margin: 0 auto;
padding-bottom: 8px;
}
.main-right-table-text4 {
flex: 1;
font-size: 22px;
text-align: center;
color: #333;
border-bottom: none;
padding-bottom: 8px;
}
}
.main-right-table-password {
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: column;
align-items: center;
.input {
margin-top: 10px;
width: 100%;
height: 50px;
}
}
.main-right-table-code {
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: column;
align-items: center;
.input {
margin-top: 10px;
width: 100%;
height: 50px;
}
.sendCode1 {
font-size: 16px;
color: #c9c9c9;
}
.sendCode2 {
font-size: 16px;
color: #3E77CD;
}
}
.main-right-bom {
padding-left: 10px;
padding-right: 10px;
display: flex;
width: 65%;
margin-top: 10px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.main-right-bom-left {
color: #000;
align-items: center;
}
.main-right-bom-right {
display: flex;
flex-direction: row;
align-items: center;
span {
color: #666;
}
}
}
.registerStep1 {
display: flex;
flex-direction: column;
align-items: center;
width: 65%;
.input {
width: 100%;
height: 50px;
}
.main-right-title2 {
font-size: 24px;
font-weight: 600;
color: #467CCF;
}
.sendCode1 {
font-size: 16px;
color: #c9c9c9;
}
.sendCode2 {
font-size: 16px;
color: #3E77CD;
}
}
.registerStep2 {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
.input {
width: 100%;
height: 50px;
}
.main-right-title {
font-size: 24px;
font-weight: 600;
}
}
.registerStep3 {
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
.input {
width: 100%;
height: 50px;
}
}
}
}
}
</style>