login.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <div class="login">
  3. <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
  4. <h3 class="title">RuoYi-Vue-Plus后台管理系统</h3>
  5. <el-form-item prop="tenantId">
  6. <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
  7. <el-option
  8. v-for="item in tenantList"
  9. :key="item.tenantId"
  10. :label="item.companyName"
  11. :value="item.tenantId">
  12. </el-option>
  13. <svg-icon slot="prefix" icon-class="company" class="el-input__icon input-icon" />
  14. </el-select>
  15. </el-form-item>
  16. <el-form-item prop="username">
  17. <el-input
  18. v-model="loginForm.username"
  19. type="text"
  20. auto-complete="off"
  21. placeholder="账号"
  22. >
  23. <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
  24. </el-input>
  25. </el-form-item>
  26. <el-form-item prop="password">
  27. <el-input
  28. v-model="loginForm.password"
  29. type="password"
  30. auto-complete="off"
  31. placeholder="密码"
  32. @keyup.enter.native="handleLogin"
  33. >
  34. <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
  35. </el-input>
  36. </el-form-item>
  37. <el-form-item prop="code" v-if="captchaEnabled">
  38. <el-input
  39. v-model="loginForm.code"
  40. auto-complete="off"
  41. placeholder="验证码"
  42. style="width: 63%"
  43. @keyup.enter.native="handleLogin"
  44. >
  45. <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
  46. </el-input>
  47. <div class="login-code">
  48. <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  49. </div>
  50. </el-form-item>
  51. <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
  52. <el-form-item style="width:100%;">
  53. <el-button
  54. :loading="loading"
  55. size="medium"
  56. type="primary"
  57. style="width:100%;"
  58. @click.native.prevent="handleLogin"
  59. >
  60. <span v-if="!loading">登 录</span>
  61. <span v-else>登 录 中...</span>
  62. </el-button>
  63. <div style="float: right;" v-if="register">
  64. <router-link class="link-type" :to="'/register'">立即注册</router-link>
  65. </div>
  66. </el-form-item>
  67. </el-form>
  68. <!-- 底部 -->
  69. <div class="el-login-footer">
  70. <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
  71. </div>
  72. </div>
  73. </template>
  74. <script>
  75. import { getCodeImg, tenantList } from "@/api/login";
  76. import Cookies from "js-cookie";
  77. import { encrypt, decrypt } from '@/utils/jsencrypt'
  78. export default {
  79. name: "Login",
  80. data() {
  81. return {
  82. codeUrl: "",
  83. loginForm: {
  84. tenantId: "000000",
  85. username: "admin",
  86. password: "admin123",
  87. rememberMe: false,
  88. code: "",
  89. uuid: ""
  90. },
  91. loginRules: {
  92. tenantId: [
  93. { required: true, trigger: "blur", message: "请输入您的租户编号" }
  94. ],
  95. username: [
  96. { required: true, trigger: "blur", message: "请输入您的账号" }
  97. ],
  98. password: [
  99. { required: true, trigger: "blur", message: "请输入您的密码" }
  100. ],
  101. code: [{ required: true, trigger: "change", message: "请输入验证码" }]
  102. },
  103. loading: false,
  104. // 验证码开关
  105. captchaEnabled: true,
  106. // 注册开关
  107. register: false,
  108. redirect: undefined,
  109. // 租户列表
  110. tenantList:[]
  111. };
  112. },
  113. watch: {
  114. $route: {
  115. handler: function(route) {
  116. this.redirect = route.query && route.query.redirect;
  117. },
  118. immediate: true
  119. }
  120. },
  121. created() {
  122. this.getCode();
  123. this.getTenantList();
  124. this.getCookie();
  125. },
  126. methods: {
  127. getCode() {
  128. getCodeImg().then(res => {
  129. this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
  130. if (this.captchaEnabled) {
  131. this.codeUrl = "data:image/gif;base64," + res.data.img;
  132. this.loginForm.uuid = res.data.uuid;
  133. }
  134. });
  135. },
  136. getTenantList() {
  137. tenantList().then(res => {
  138. this.tenantList = res.data;
  139. if (this.tenantList != null && this.tenantList.length !== 0) {
  140. this.loginForm.tenantId = this.tenantList[0].tenantId;
  141. }
  142. });
  143. },
  144. getCookie() {
  145. const tenantId = Cookies.get("tenantId");
  146. const username = Cookies.get("username");
  147. const password = Cookies.get("password");
  148. const rememberMe = Cookies.get('rememberMe')
  149. this.loginForm = {
  150. tenantId: tenantId === undefined ? this.loginForm.tenantId : tenantId,
  151. username: username === undefined ? this.loginForm.username : username,
  152. password: password === undefined ? this.loginForm.password : decrypt(password),
  153. rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  154. };
  155. },
  156. handleLogin() {
  157. this.$refs.loginForm.validate(valid => {
  158. if (valid) {
  159. this.loading = true;
  160. if (this.loginForm.rememberMe) {
  161. Cookies.set("tenantId", this.loginForm.tenantId, { expires: 30 });
  162. Cookies.set("username", this.loginForm.username, { expires: 30 });
  163. Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
  164. Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
  165. } else {
  166. Cookies.remove("tenantId");
  167. Cookies.remove("username");
  168. Cookies.remove("password");
  169. Cookies.remove('rememberMe');
  170. }
  171. this.$store.dispatch("Login", this.loginForm).then(() => {
  172. this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
  173. }).catch(() => {
  174. this.loading = false;
  175. if (this.captchaEnabled) {
  176. this.getCode();
  177. }
  178. });
  179. }
  180. });
  181. }
  182. }
  183. };
  184. </script>
  185. <style rel="stylesheet/scss" lang="scss">
  186. .login {
  187. display: flex;
  188. justify-content: center;
  189. align-items: center;
  190. height: 100%;
  191. background-image: url("../assets/images/login-background.jpg");
  192. background-size: cover;
  193. }
  194. .title {
  195. margin: 0px auto 30px auto;
  196. text-align: center;
  197. color: #707070;
  198. }
  199. .login-form {
  200. border-radius: 6px;
  201. background: #ffffff;
  202. width: 400px;
  203. padding: 25px 25px 5px 25px;
  204. .el-input {
  205. height: 38px;
  206. input {
  207. height: 38px;
  208. }
  209. }
  210. .input-icon {
  211. height: 39px;
  212. width: 14px;
  213. margin-left: 2px;
  214. }
  215. }
  216. .login-tip {
  217. font-size: 13px;
  218. text-align: center;
  219. color: #bfbfbf;
  220. }
  221. .login-code {
  222. width: 33%;
  223. height: 38px;
  224. float: right;
  225. img {
  226. cursor: pointer;
  227. vertical-align: middle;
  228. }
  229. }
  230. .el-login-footer {
  231. height: 40px;
  232. line-height: 40px;
  233. position: fixed;
  234. bottom: 0;
  235. width: 100%;
  236. text-align: center;
  237. color: #fff;
  238. font-family: Arial;
  239. font-size: 12px;
  240. letter-spacing: 1px;
  241. }
  242. .login-code-img {
  243. height: 38px;
  244. }
  245. </style>