login.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <template>
  2. <div class="login">
  3. <h1>SANFAN MES制造执行系统</h1>
  4. <div class="warp-bg">
  5. <div class="left-bg">
  6. <img src="../assets/images/img_kejifg.png" alt="" class="bk-img" />
  7. <div class="left-logo">
  8. <img src="../assets/images/logosanfan.png" alt="" />
  9. </div>
  10. <!-- <div class="swiper-text">
  11. <el-carousel height="100px" direction="vertical" indicator-position="none" :autoplay="true">
  12. <el-carousel-item>
  13. <h3>{{ $t("login.li1H3") }}</h3>
  14. <p>{{ $t("login.li1P") }}</p>
  15. </el-carousel-item>
  16. <el-carousel-item>
  17. <h3>{{ $t("login.li2H3") }}</h3>
  18. <p>{{ $t("login.li2P") }}</p>
  19. </el-carousel-item>
  20. <el-carousel-item>
  21. <h3>{{ $t("login.li3H3") }}</h3>
  22. <p>{{ $t("login.li3P") }}</p>
  23. </el-carousel-item>
  24. </el-carousel>
  25. </div> -->
  26. </div>
  27. <div class="right-bg">
  28. <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
  29. <div class="form" style="margin-top: 300px">
  30. <div class="">{{ $t("login.welcomeToLogin") }}~</div>
  31. <h2>SANFAN MES制造执行系统
  32. <!-- {{ $t("login.managementSystem") }} -->
  33. </h2>
  34. <!-- <el-form-item prop="tenantId" style="margin-top: 30px"> -->
  35. <!-- <el-input :placeholder="$t('login.pleaseEnterTheTenantId')" prefix-icon="user" @keyup.enter="handleLogin" autocomplete="email"
  36. v-model="loginForm.tenantId">
  37. </el-input> -->
  38. <!-- <div style="display:flex;width:100%;align-items:center">
  39. <div style="width:23px;text-align:right;margin-top:2px">
  40. <el-icon color="#a8abb2">
  41. <User />
  42. </el-icon>
  43. </div>
  44. <el-select v-model="loginForm.tenantId" placeholder="请选择公司" style="width:calc(100% - 23px)" filterable>
  45. <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.enterpriseName" :value="item.tenantId" />
  46. </el-select>
  47. </div>
  48. </el-form-item> -->
  49. <el-form-item prop="username" style="margin-top: 30px">
  50. <el-input :placeholder="$t('login.pleaseEnterYourAccountNumber')" prefix-icon="UserFilled" @keyup.enter="handleLogin"
  51. autocomplete="username" v-model="loginForm.username">
  52. </el-input>
  53. </el-form-item>
  54. <el-form-item prop="password" style="margin-top: 30px">
  55. <el-input :placeholder="$t('login.pleaseEnterYourPassword')" prefix-icon="View" type="password" v-model="loginForm.password"
  56. autocomplete="current-password" @keyup.enter="handleLogin">
  57. </el-input>
  58. </el-form-item>
  59. <!-- <el-form-item prop="code" class="code" style="margin-top:30px">
  60. <el-input
  61. placeholder="请输入验证码"
  62. prefix-icon="ChatSquare"
  63. v-model="loginForm.code"
  64. @keyup.enter="handleLogin">
  65. </el-input>
  66. <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  67. </el-form-item> -->
  68. <div style="margin-top: 30px">
  69. <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">{{ $t("login.rememberPassword") }}</el-checkbox>
  70. </div>
  71. <el-button type="primary" @click="handleLogin" style="width: 100%; margin-top: 30px">{{ $t("login.login") }}</el-button>
  72. </div>
  73. </el-form>
  74. </div>
  75. </div>
  76. </div>
  77. </template>
  78. <script setup>
  79. import { getCodeImg, getTenantList } from "@/api/login";
  80. import Cookies from "js-cookie";
  81. import { encrypt, decrypt } from "@/utils/jsencrypt";
  82. import useUserStore from "@/store/modules/user";
  83. const userStore = useUserStore();
  84. const router = useRouter();
  85. const { proxy } = getCurrentInstance();
  86. const loginForm = ref({
  87. username: "",
  88. password: "",
  89. rememberMe: false,
  90. tenantId: "000000",
  91. code: "",
  92. uuid: "",
  93. });
  94. const tenantList = ref([]);
  95. const loginRules = {
  96. username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  97. password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  98. code: [{ required: true, trigger: "change", message: "请输入验证码" }],
  99. };
  100. const codeUrl = ref("");
  101. const loading = ref(false);
  102. // 验证码开关
  103. const captchaEnabled = ref(true);
  104. // 注册开关
  105. const register = ref(false);
  106. const redirect = ref(undefined);
  107. function handleLogin() {
  108. proxy.$refs.loginRef.validate((valid) => {
  109. if (valid) {
  110. loading.value = true;
  111. // Cookies.set("tenantId", loginForm.value.tenantId, {
  112. // expires: 30,
  113. // });
  114. // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
  115. if (loginForm.value.rememberMe) {
  116. Cookies.set("username", loginForm.value.username, {
  117. expires: 30,
  118. });
  119. Cookies.set("password", encrypt(loginForm.value.password), {
  120. expires: 30,
  121. });
  122. Cookies.set("rememberMe", loginForm.value.rememberMe, {
  123. expires: 30,
  124. });
  125. } else {
  126. // 否则移除
  127. Cookies.remove("username");
  128. Cookies.remove("password");
  129. Cookies.remove("rememberMe");
  130. }
  131. // 调用action的登录方法
  132. userStore
  133. .login(loginForm.value)
  134. .then(() => {
  135. router.push({ path: redirect.value || "/" });
  136. // 登录刷新
  137. // setTimeout(() => {
  138. // location.reload();
  139. // }, 1000);
  140. })
  141. .catch(() => {
  142. loading.value = false;
  143. // 重新获取验证码
  144. if (captchaEnabled.value) {
  145. getCode();
  146. }
  147. });
  148. }
  149. });
  150. }
  151. function getCode() {
  152. getCodeImg().then((res) => {
  153. captchaEnabled.value =
  154. res.captchaEnabled === undefined ? true : res.captchaEnabled;
  155. if (captchaEnabled.value) {
  156. codeUrl.value = "data:image/gif;base64," + res.img;
  157. loginForm.value.uuid = res.uuid;
  158. }
  159. });
  160. }
  161. const getTenantData = () => {
  162. getTenantList().then((res) => {
  163. if (res && res.data) {
  164. tenantList.value = res.data;
  165. }
  166. });
  167. };
  168. getTenantData();
  169. function getCookie() {
  170. const username = Cookies.get("username");
  171. const password = Cookies.get("password");
  172. const rememberMe = Cookies.get("rememberMe");
  173. // const tenantId = Cookies.get("tenantId");
  174. const tenantId = "000000";
  175. loginForm.value = {
  176. username: username === undefined ? loginForm.value.username : username,
  177. password:
  178. password === undefined ? loginForm.value.password : decrypt(password),
  179. rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  180. tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId,
  181. };
  182. }
  183. getCode();
  184. getCookie();
  185. </script>
  186. <style lang="scss">
  187. .login {
  188. min-width: 1200px;
  189. overflow: auto;
  190. .warp-bg {
  191. background: #fff;
  192. min-height: 100vh;
  193. width: 100%;
  194. overflow: hidden;
  195. .left-bg {
  196. width: calc(50% + 150px);
  197. background: #1b374c;
  198. min-height: 100vh;
  199. float: left;
  200. overflow: hidden;
  201. position: relative;
  202. .bk-img {
  203. float: right;
  204. margin-right: 5vw;
  205. margin-top: 15vh;
  206. }
  207. .left-logo {
  208. position: absolute;
  209. top: 10px;
  210. left: 20px;
  211. img {
  212. width: 100px;
  213. object-fit: contain;
  214. height: auto;
  215. vertical-align: middle;
  216. }
  217. }
  218. .swiper-text {
  219. position: absolute;
  220. right: 5vw;
  221. top: 10vh;
  222. color: #fff;
  223. overflow: hidden;
  224. height: 200px;
  225. width: 500px;
  226. .el-carousel {
  227. width: 100%;
  228. height: 100%;
  229. }
  230. h3 {
  231. font-size: 40px;
  232. font-weight: 400;
  233. margin-bottom: 20px;
  234. margin-top: 0;
  235. }
  236. p {
  237. font-size: 26px;
  238. margin: 0;
  239. }
  240. p::before {
  241. content: " ";
  242. border-bottom: 4px solid #fff;
  243. display: inline-block;
  244. width: 60px;
  245. margin-right: 20px;
  246. position: relative;
  247. top: -5px;
  248. }
  249. }
  250. }
  251. .right-bg {
  252. width: calc(50% - 150px);
  253. background: url(../assets/images/login-right-bg.png) no-repeat;
  254. background-size: cover;
  255. min-height: 100vh;
  256. float: right;
  257. overflow: hidden;
  258. .form {
  259. width: 500px;
  260. padding: 0 75px;
  261. box-sizing: border-box;
  262. .el-input {
  263. input {
  264. border: none;
  265. border-bottom: 1px solid #dddddd;
  266. }
  267. }
  268. .el-input__wrapper {
  269. box-shadow: 0 0 0 0 !important;
  270. }
  271. .code {
  272. position: relative;
  273. img {
  274. position: absolute;
  275. right: 0;
  276. bottom: 0;
  277. }
  278. }
  279. }
  280. }
  281. }
  282. h1 {
  283. position: fixed;
  284. left: 40px;
  285. top: 0;
  286. height: 96px;
  287. line-height: 96px;
  288. font-size: 26px;
  289. color: #fff;
  290. }
  291. }
  292. </style>