userlogin.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <el-form class="login-form"
  3. status-icon
  4. :rules="loginRules"
  5. ref="loginForm"
  6. :model="loginForm"
  7. label-width="0">
  8. <!-- <el-form-item v-if="tenantMode" prop="tenantId">-->
  9. <el-form-item v-if="saveTenantId == ''" prop="tenantId">
  10. <el-input size="small"
  11. @keyup.enter.native="handleLogin"
  12. v-model="loginForm.tenantId"
  13. auto-complete="off"
  14. :placeholder="$t('login.tenantId')">
  15. <i slot="prefix" class="icon-quanxian"/>
  16. </el-input>
  17. </el-form-item>
  18. <el-form-item prop="username">
  19. <el-input size="small"
  20. @keyup.enter.native="handleLogin"
  21. v-model="loginForm.username"
  22. auto-complete="off"
  23. :placeholder="$t('login.username')">
  24. <i slot="prefix" class="icon-yonghu"/>
  25. </el-input>
  26. </el-form-item>
  27. <el-form-item prop="password">
  28. <el-input size="small"
  29. @keyup.enter.native="handleLogin"
  30. :type="passwordType"
  31. v-model="loginForm.password"
  32. auto-complete="off"
  33. :placeholder="$t('login.password')">
  34. <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
  35. <i slot="prefix" class="icon-mima"/>
  36. </el-input>
  37. </el-form-item>
  38. <el-form-item v-if="this.website.captchaMode" prop="code">
  39. <el-row :span="24">
  40. <el-col :span="16">
  41. <el-input size="small"
  42. @keyup.enter.native="handleLogin"
  43. v-model="loginForm.code"
  44. auto-complete="off"
  45. :placeholder="$t('login.code')">
  46. <i slot="prefix" class="icon-yanzhengma"/>
  47. </el-input>
  48. </el-col>
  49. <el-col :span="8">
  50. <div class="login-code">
  51. <img :src="loginForm.image" class="login-code-img" @click="refreshCode"
  52. />
  53. </div>
  54. </el-col>
  55. </el-row>
  56. </el-form-item>
  57. <el-form-item>
  58. <el-checkbox v-model="rememberMe" style="color:#9c9c9c;">记住密码</el-checkbox>
  59. <el-button
  60. type="primary"
  61. size="small"
  62. style="margin-top: 10px"
  63. @click.native.prevent="handleLogin"
  64. class="login-submit">{{$t('login.submit')}}
  65. </el-button>
  66. </el-form-item>
  67. <el-dialog
  68. title="用户信息选择"
  69. append-to-body
  70. :visible.sync="userBox"
  71. :close-on-click-modal="false"
  72. width="350px">
  73. <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
  74. </el-dialog>
  75. </el-form>
  76. </template>
  77. <script>
  78. import {mapGetters} from "vuex";
  79. import {info} from "@/api/system/tenant";
  80. import {getCaptcha} from "@/api/user";
  81. import {getTopUrl} from "@/util/util";
  82. import CryptoJS from '@/util/crypto'
  83. import {getDomainName} from '@/api/login';
  84. export default {
  85. name: "userlogin",
  86. data() {
  87. return {
  88. tenantMode: this.website.tenantMode,
  89. rememberMe:false,
  90. loginForm: {
  91. //租户ID
  92. tenantId: '',
  93. //部门ID
  94. deptId: "",
  95. //角色ID
  96. roleId: "",
  97. //用户名
  98. username: '',
  99. //密码
  100. password: "",
  101. //账号类型
  102. type: "account",
  103. //验证码的值
  104. code: "",
  105. //验证码的索引
  106. key: "",
  107. //预加载白色背景
  108. image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
  109. },
  110. loginRules: {
  111. tenantId: [
  112. {required: false, message: "请输入租户ID", trigger: "blur"}
  113. ],
  114. username: [
  115. {required: true, message: "请输入用户名", trigger: "blur"}
  116. ],
  117. password: [
  118. {required: true, message: "请输入密码", trigger: "blur"},
  119. {min: 1, message: "密码长度最少为6位", trigger: "blur"}
  120. ]
  121. },
  122. passwordType: "password",
  123. userBox: false,
  124. userForm: {
  125. deptId: '',
  126. roleId: ''
  127. },
  128. userOption: {
  129. labelWidth: 70,
  130. submitBtn: true,
  131. emptyBtn: false,
  132. submitText: '登录',
  133. column: [
  134. {
  135. label: '部门',
  136. prop: 'deptId',
  137. type: 'select',
  138. props: {
  139. label: 'deptName',
  140. value: 'id'
  141. },
  142. dicUrl: '/api/blade-system/dept/select',
  143. span: 24,
  144. display: false,
  145. rules: [{
  146. required: true,
  147. message: "请选择部门",
  148. trigger: "blur"
  149. }],
  150. },
  151. {
  152. label: '角色',
  153. prop: 'roleId',
  154. type: 'select',
  155. props: {
  156. label: 'roleName',
  157. value: 'id'
  158. },
  159. dicUrl: '/api/blade-system/role/select',
  160. span: 24,
  161. display: false,
  162. rules: [{
  163. required: true,
  164. message: "请选择角色",
  165. trigger: "blur"
  166. }],
  167. },
  168. ]
  169. },
  170. saveTenantId: '',
  171. };
  172. },
  173. async created() {
  174. this.getTenant();
  175. this.refreshCode();
  176. await getDomainName(window.location.hostname).then(res => {
  177. this.saveTenantId = res.data.data.tenantId? res.data.data.tenantId: '';
  178. this.loginForm.tenantId = res.data.data.tenantId? res.data.data.tenantId: '';
  179. })
  180. if (this.saveTenantId == '') {
  181. if(localStorage.getItem("tenantId")) this.loginForm.tenantId = CryptoJS.decrypt(localStorage.getItem("tenantId")) //租户ID
  182. }
  183. if(localStorage.getItem("username")) this.loginForm.username = CryptoJS.decrypt(localStorage.getItem("username")) //用户名
  184. if(localStorage.getItem("password")) this.loginForm.password = CryptoJS.decrypt(localStorage.getItem("password")) //密码
  185. if(localStorage.getItem("rememberMe")) this.rememberMe = JSON.parse(localStorage.getItem("rememberMe"))
  186. },
  187. mounted() {
  188. },
  189. watch: {
  190. 'loginForm.deptId'() {
  191. const column = this.findObject(this.userOption.column, "deptId");
  192. if (this.loginForm.deptId.includes(",")) {
  193. column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
  194. column.display = true;
  195. } else {
  196. column.dicUrl = '';
  197. }
  198. },
  199. 'loginForm.roleId'() {
  200. const column = this.findObject(this.userOption.column, "roleId");
  201. if (this.loginForm.roleId.includes(",")) {
  202. column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
  203. column.display = true;
  204. } else {
  205. column.dicUrl = '';
  206. }
  207. }
  208. },
  209. computed: {
  210. ...mapGetters(["tagWel", "userInfo"])
  211. },
  212. props: {
  213. },
  214. methods: {
  215. refreshCode() {
  216. if (this.website.captchaMode) {
  217. getCaptcha().then(res => {
  218. const data = res.data;
  219. this.loginForm.key = data.key;
  220. this.loginForm.image = data.image;
  221. })
  222. }
  223. },
  224. showPassword() {
  225. this.passwordType === ""
  226. ? (this.passwordType = "password")
  227. : (this.passwordType = "");
  228. },
  229. submitLogin (form, done) {
  230. if (form.deptId !== '') {
  231. this.loginForm.deptId = form.deptId;
  232. }
  233. if (form.roleId !== '') {
  234. this.loginForm.roleId = form.roleId;
  235. }
  236. this.handleLogin();
  237. done();
  238. },
  239. handleLogin() {
  240. this.$refs.loginForm.validate(valid => {
  241. if (valid) {
  242. const loading = this.$loading({
  243. lock: true,
  244. text: '登录中,请稍后。。。',
  245. spinner: "el-icon-loading"
  246. });
  247. if (this.rememberMe == true){
  248. localStorage.setItem('tenantId', CryptoJS.encrypt(this.loginForm.tenantId))
  249. localStorage.setItem('username', CryptoJS.encrypt(this.loginForm.username))
  250. localStorage.setItem('password', CryptoJS.encrypt(this.loginForm.password))
  251. localStorage.setItem('rememberMe', this.rememberMe)
  252. }else {
  253. localStorage.removeItem("tenantId");
  254. localStorage.removeItem("username");
  255. localStorage.removeItem("password");
  256. localStorage.removeItem("rememberMe");
  257. }
  258. this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
  259. if (this.website.switchMode) {
  260. const deptId = this.userInfo.dept_id;
  261. const roleId = this.userInfo.role_id;
  262. if (deptId.includes(",") || roleId.includes(",")) {
  263. this.loginForm.deptId = deptId;
  264. this.loginForm.roleId = roleId;
  265. this.userBox = true;
  266. loading.close();
  267. return false;
  268. }
  269. }
  270. this.$router.push({path: this.tagWel.value});
  271. loading.close();
  272. }).catch(() => {
  273. loading.close();
  274. this.refreshCode();
  275. });
  276. }
  277. });
  278. },
  279. getTenant() {
  280. let domain = getTopUrl();
  281. // 临时指定域名,方便测试
  282. //domain = "https://bladex.vip";
  283. info(domain).then(res => {
  284. const data = res.data;
  285. if (data.success && data.data.tenantId) {
  286. this.tenantMode = false;
  287. this.loginForm.tenantId = data.data.tenantId;
  288. this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
  289. }
  290. })
  291. }
  292. }
  293. };
  294. </script>
  295. <style>
  296. </style>