| | |
| | | <div class="login"> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3> |
| | | <el-form-item prop="tenantId" v-if="tenantEnabled"> |
| | | <el-form-item v-if="tenantEnabled" prop="tenantId"> |
| | | <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%"> |
| | | <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option> |
| | | <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> |
| | |
| | | <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="code" v-if="captchaEnabled"> |
| | | <el-form-item v-if="captchaEnabled" prop="code"> |
| | | <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin"> |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img" /> |
| | | <img :src="codeUrl" class="login-code-img" @click="getCode" /> |
| | | </div> |
| | | </el-form-item> |
| | | <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> |
| | | <el-form-item style="float: right;"> |
| | | <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox> |
| | | <el-form-item style="float: right"> |
| | | <el-button circle title="微信登录" @click="doSocialLogin('wechat')"> |
| | | <svg-icon icon-class="wechat" /> |
| | | </el-button> |
| | |
| | | <svg-icon icon-class="github" /> |
| | | </el-button> |
| | | </el-form-item> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin"> |
| | | <el-form-item style="width: 100%"> |
| | | <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin"> |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | <div style="float: right;" v-if="register"> |
| | | <div v-if="register" style="float: right"> |
| | | <router-link class="link-type" :to="'/register'">立即注册</router-link> |
| | | </div> |
| | | </el-form-item> |
| | |
| | | import { useUserStore } from '@/store/modules/user'; |
| | | import { LoginData, TenantVO } from '@/api/types'; |
| | | import { to } from 'await-to-js'; |
| | | import { HttpStatus } from "@/enums/RespEnum"; |
| | | import { HttpStatus } from '@/enums/RespEnum'; |
| | | |
| | | const userStore = useUserStore(); |
| | | const router = useRouter(); |
| | |
| | | } as LoginData); |
| | | |
| | | const loginRules: ElFormRules = { |
| | | tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }], |
| | | tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }], |
| | | username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }], |
| | | password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }], |
| | | code: [{ required: true, trigger: 'change', message: '请输入验证码' }] |
| | |
| | | // 租户开关 |
| | | const tenantEnabled = ref(true); |
| | | |
| | | |
| | | // 注册开关 |
| | | const register = ref(false); |
| | | const redirect = ref(undefined); |
| | |
| | | // 租户列表 |
| | | const tenantList = ref<TenantVO[]>([]); |
| | | |
| | | watch(() => router.currentRoute.value, (newRoute: any) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | watch( |
| | | () => router.currentRoute.value, |
| | | (newRoute: any) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | |
| | | const handleLogin = () => { |
| | | loginRef.value?.validate(async (valid: boolean, fields: any) => { |
| | |
| | | loading.value = true; |
| | | // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码 |
| | | if (loginForm.value.rememberMe) { |
| | | localStorage.setItem("tenantId", String(loginForm.value.tenantId)); |
| | | localStorage.setItem('tenantId', String(loginForm.value.tenantId)); |
| | | localStorage.setItem('username', String(loginForm.value.username)); |
| | | localStorage.setItem('password', String(loginForm.value.password)); |
| | | localStorage.setItem('rememberMe', String(loginForm.value.rememberMe)); |
| | | } else { |
| | | // 否则移除 |
| | | localStorage.removeItem("tenantId"); |
| | | localStorage.removeItem('tenantId'); |
| | | localStorage.removeItem('username'); |
| | | localStorage.removeItem('password'); |
| | | localStorage.removeItem('rememberMe'); |
| | |
| | | }; |
| | | |
| | | const getLoginData = () => { |
| | | const tenantId = localStorage.getItem("tenantId"); |
| | | const tenantId = localStorage.getItem('tenantId'); |
| | | const username = localStorage.getItem('username'); |
| | | const password = localStorage.getItem('password'); |
| | | const rememberMe = localStorage.getItem('rememberMe'); |
| | |
| | | password: password === null ? String(loginForm.value.password) : String(password), |
| | | rememberMe: rememberMe === null ? false : Boolean(rememberMe) |
| | | } as LoginData; |
| | | } |
| | | |
| | | }; |
| | | |
| | | /** |
| | | * 获取租户列表 |
| | |
| | | loginForm.value.tenantId = tenantList.value[0].tenantId; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | |
| | | //检测租户选择框的变化 |
| | | watch(() => loginForm.value.tenantId, () => { |
| | | localStorage.setItem("tenantId", String(loginForm.value.tenantId)) |
| | | }); |
| | | watch( |
| | | () => loginForm.value.tenantId, |
| | | () => { |
| | | localStorage.setItem('tenantId', String(loginForm.value.tenantId)); |
| | | } |
| | | ); |
| | | |
| | | /** |
| | | * 第三方登录 |
| | |
| | | }); |
| | | }; |
| | | |
| | | |
| | | |
| | | onMounted(() => { |
| | | getCode(); |
| | | initTenantList(); |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; |
| | | background-image: url("../assets/images/login-background.jpg"); |
| | | background-image: url('../assets/images/login-background.jpg'); |
| | | background-size: cover; |
| | | } |
| | | |