mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2025-11-12 16:56:14 +08:00
commit 1ea62af1d6
1135 changed files with 109385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

418
src/views/login.vue Normal file
View File

@@ -0,0 +1,418 @@
<template xmlns="">
<div class="container">
<div class="logo"></div>
<!-- 登录区域 -->
<div class="content">
<!-- 配图 -->
<div class="pic">
<div class="welcome" style="
position: absolute;
top: 15%;
left: 20%;
user-select: none;
display: flex;
flex-direction: column;
align-items: flex-start;
">
<strong style="
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 500;
font-size: 88px;
">
<span style="color: #26b9de">Wel</span>
<span style="color: #fff">come</span>
</strong>
<p style="
margin: 0;
font-size: 26px;
letter-spacing: 1px;
color: #26b9de;
opacity: 75%;
">
<span style="
display: inline-block;
height: 20px;
width: 20px;
margin-left: 8px;
margin-right: 12px;
border-radius: 100%;
background: #26b9de;
"></span>
洛玻集团
</p>
</div>
<video src="/static/videos/login.webm" muted autoplay loop style="
user-select: none;
position: absolute;
top: 28%;
width: 100%;
height: 70%;
"></video>
</div>
<!-- 表单 -->
<div class="field">
<!-- [移动端]标题 -->
<h2 class="mobile-title">
<h3 class="title">洛玻集团</h3>
</h2>
<h2 class="pc-title" style="">
<h3 class="title" style="">
<img src="../assets/logo/cnbm.png" alt="cnbm_logo" style="" class="cnbm_logo" />
<span>洛玻集团</span>
</h3>
<h3 class="sub-title" style=""></h3>
</h2>
<!-- 表单 -->
<div class="form-cont">
<div style="">
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
<el-form-item prop="tenantName" v-if="tenantEnable">
<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder="租户">
<!-- <svg-icon
slot="prefix"
icon-class="tree"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<!-- 账号密码登录 -->
<div>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<!-- <svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
@keyup.enter.native="getCode">
<!-- <svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
记住密码
</el-checkbox>
</div>
<!-- 下方的登录按钮 -->
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
<el-button :loading="loading" size="medium" type="primary" style="
width: 100%;
height: calc(52 * 0.12vh);
font-size: calc(14 * 0.12vh);
" @click.native.prevent="getCode">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
<!-- 社交登录 -->
<!-- <el-form-item style="width:100%;">
<div class="oauth-login" style="display:flex">
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
<img :src="item.img" height="25px" width="25px" alt="登录" >
<span>{{item.title}}</span>
</div>
</div>
</el-form-item> -->
</el-form>
</div>
</div>
<!-- footer -->
<div class="footer">
Copyright © 2023 中建材智能自动化研究院有限公司 All Rights Reserved.
</div>
</div>
</div>
</div>
</template>
<script>
import { sendSmsCode, socialAuthRedirect } from '@/api/login';
import { getTenantIdByName } from '@/api/system/tenant';
import { SystemUserSocialTypeEnum } from '@/utils/constants';
import { getTenantEnable } from '@/utils/ruoyi';
import {
getPassword,
getRememberMe,
getTenantName,
getUsername,
removePassword,
removeRememberMe,
removeTenantName,
removeUsername,
setPassword,
setRememberMe,
setTenantId,
setTenantName,
setUsername,
} from '@/utils/auth';
import Verify from '@/components/Verifition/Verify';
import { resetUserPwd } from '@/api/system/user';
export default {
name: 'Login',
components: {
Verify,
},
data() {
return {
codeUrl: '',
captchaEnable: false,
tenantEnable: true,
mobileCodeTimer: 0,
loginForm: {
loginType: 'uname',
username: 'admin',
password: 'admin123',
captchaVerification: '',
mobile: '',
mobileCode: '',
rememberMe: false,
tenantName: '芋道源码',
},
scene: 21,
LoginRules: {
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' },
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' },
],
mobile: [
{ required: true, trigger: 'blur', message: '手机号不能为空' },
{
validator: function (rule, value, callback) {
if (
/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
value
) === false
) {
callback(new Error('手机号格式错误'));
} else {
callback();
}
},
trigger: 'blur',
},
],
tenantName: [
{ required: true, trigger: 'blur', message: '租户不能为空' },
{
validator: (rule, value, callback) => {
// debugger
getTenantIdByName(value).then((res) => {
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
// 设置租户
setTenantId(tenantId);
callback();
} else {
callback('租户不存在');
}
});
},
trigger: 'blur',
},
],
},
loading: false,
redirect: undefined,
// 枚举
SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
};
},
created() {
// document.body.style['min-height'] = '1024px';
// 租户开关
this.tenantEnable = getTenantEnable();
if (this.tenantEnable) {
getTenantIdByName(this.loginForm.tenantName).then((res) => {
// 设置租户
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
setTenantId(tenantId);
}
});
}
// 重定向地址
this.redirect = this.$route.query.redirect
? decodeURIComponent(this.$route.query.redirect)
: undefined;
this.getCookie();
},
destroyed() {
document.body.style['min-height'] = 'unset';
},
methods: {
getCode() {
this.handleLogin({});
},
getCookie() {
const username = getUsername();
const password = getPassword();
const rememberMe = getRememberMe();
const tenantName = getTenantName();
this.loginForm = {
...this.loginForm,
username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false,
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
};
},
handleLogin(captchaParams) {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
// 设置 Cookie
if (this.loginForm.rememberMe) {
setUsername(this.loginForm.username);
setPassword(this.loginForm.password);
setRememberMe(this.loginForm.rememberMe);
setTenantName(this.loginForm.tenantName);
} else {
removeUsername();
removePassword();
removeRememberMe();
removeTenantName();
}
this.loginForm.captchaVerification =
captchaParams.captchaVerification;
// 发起登陆
// console.log("发起登录", this.loginForm);
this.$store
.dispatch(
this.loginForm.loginType === 'sms' ? 'SmsLogin' : 'Login',
this.loginForm
)
.then(() => {
console.log(this.redirect, this.$route.query.redirect, 'this.redirect');
this.$router.push({ path: this.redirect || '/' }).catch(() => { });
})
.catch(() => {
this.loading = false;
});
}
});
},
async doSocialLogin(socialTypeEnum) {
// 设置登录中
this.loading = true;
let tenant = false;
if (this.tenantEnable) {
await this.$prompt('请输入租户名称', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(async ({ value }) => {
await getTenantIdByName(value).then((res) => {
const tenantId = res.data;
tenant = true;
if (tenantId && tenantId >= 0) {
setTenantId(tenantId);
}
});
})
.catch(() => {
// 取消登录按钮 loading状态
this.loading = false;
return false;
});
} else {
tenant = true;
}
if (tenant) {
// 计算 redirectUri
const redirectUri =
location.origin +
'/social-login?' +
encodeURIComponent(
'type=' +
socialTypeEnum.type +
'&redirect=' +
(this.redirect || '/')
); // 重定向不能丢
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
// 进行跳转
socialAuthRedirect(
socialTypeEnum.type,
encodeURIComponent(redirectUri)
).then((res) => {
// console.log(res.url);
window.location.href = res.data;
});
}
},
/** ========== 以下为升级短信登录 ========== */
getSmsCode() {
if (this.mobileCodeTimer > 0) return;
this.$refs.loginForm.validate((valid) => {
if (!valid) return;
sendSmsCode(
this.loginForm.mobile,
this.scene,
this.loginForm.uuid,
this.loginForm.code
).then((res) => {
this.$modal.msgSuccess('获取验证码成功');
this.mobileCodeTimer = 60;
let msgTimer = setInterval(() => {
this.mobileCodeTimer = this.mobileCodeTimer - 1;
if (this.mobileCodeTimer <= 0) {
clearInterval(msgTimer);
}
}, 1000);
});
});
},
},
};
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/login.scss';
.oauth-login {
display: flex;
align-items: center;
cursor: pointer;
}
.oauth-login-item {
display: flex;
align-items: center;
margin-right: 10px;
}
.oauth-login-item img {
height: 25px;
width: 25px;
}
.oauth-login-item span:hover {
text-decoration: underline red;
color: red;
}
.sms-login-mobile-code-prefix {
:deep(.el-input__prefix) {
top: 22%;
}
}
.form-cont {
padding-top: 40px;
}
</style>