userlogin.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  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-input size="small"
  10. @keyup.enter.native="handleLogin"
  11. v-model="loginForm.tenantId"
  12. auto-complete="off"
  13. :placeholder="$t('login.tenantId')">
  14. <i slot="prefix" class="icon-quanxian"/>
  15. </el-input>
  16. </el-form-item>
  17. <el-form-item prop="username">
  18. <el-input size="small"
  19. @keyup.enter.native="handleLogin"
  20. v-model="loginForm.username"
  21. auto-complete="off"
  22. :placeholder="$t('login.username')">
  23. <i slot="prefix" class="icon-yonghu"/>
  24. </el-input>
  25. </el-form-item>
  26. <el-form-item prop="password">
  27. <el-input size="small"
  28. @keyup.enter.native="handleLogin"
  29. :type="passwordType"
  30. v-model="loginForm.password"
  31. auto-complete="off"
  32. :placeholder="$t('login.password')">
  33. <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
  34. <i slot="prefix" class="icon-mima"/>
  35. </el-input>
  36. </el-form-item>
  37. <el-form-item v-if="this.website.captchaMode" prop="code">
  38. <el-row :span="24">
  39. <el-col :span="16">
  40. <el-input size="small"
  41. @keyup.enter.native="handleLogin"
  42. v-model="loginForm.code"
  43. auto-complete="off"
  44. :placeholder="$t('login.code')">
  45. <i slot="prefix" class="icon-yanzhengma"/>
  46. </el-input>
  47. </el-col>
  48. <el-col :span="8">
  49. <div class="login-code">
  50. <img :src="loginForm.image" class="login-code-img" @click="refreshCode"
  51. />
  52. </div>
  53. </el-col>
  54. </el-row>
  55. </el-form-item>
  56. <el-form-item>
  57. <el-button type="primary"
  58. size="small"
  59. @click.native.prevent="handleLogin"
  60. :class="this.registerMode ? 'login-submit' : 'btn-submit'">{{$t('login.submit')}}
  61. </el-button>
  62. <!-- <el-button type="danger"
  63. size="small"
  64. v-if="this.registerMode"
  65. @click.native.prevent="handleRegister"
  66. class="register-submit">{{ $t('login.register') }}
  67. </el-button> -->
  68. </el-form-item>
  69. <el-dialog title="用户信息选择"
  70. append-to-body
  71. :visible.sync="userBox"
  72. width="350px">
  73. <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
  74. </el-dialog>
  75. <el-dialog title="用户信息注册" append-to-body :visible.sync="registerBox" width="350px">
  76. <avue-form :option="registerOption" v-model="registerForm" @submit="submitRegister" />
  77. </el-dialog>
  78. </el-form>
  79. </template>
  80. <script>
  81. import {mapGetters} from "vuex";
  82. import {info} from "@/api/system/tenant";
  83. import {getCaptcha} from "@/api/user";
  84. import {getTopUrl} from "@/util/util";
  85. export default {
  86. name: "userlogin",
  87. data() {
  88. return {
  89. tenantMode: this.website.tenantMode,
  90. registerMode: this.website.oauth2.registerMode,
  91. loginForm: {
  92. //租户ID
  93. tenantId: "",
  94. //部门ID
  95. deptId: "",
  96. //角色ID
  97. roleId: "",
  98. //用户名
  99. username: "",
  100. //密码
  101. password: "",
  102. //账号类型
  103. type: "account",
  104. //验证码的值
  105. code: "",
  106. //验证码的索引
  107. key: "",
  108. //预加载白色背景
  109. image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
  110. },
  111. loginRules: {
  112. tenantId: [
  113. {required: false, message: "请输入租户ID", trigger: "blur"}
  114. ],
  115. username: [
  116. {required: true, message: "请输入用户名", trigger: "blur"}
  117. ],
  118. password: [
  119. {required: true, message: "请输入密码", trigger: "blur"},
  120. {min: 1, message: "密码长度最少为6位", trigger: "blur"}
  121. ]
  122. },
  123. passwordType: "password",
  124. userBox: false,
  125. userForm: {
  126. deptId: '',
  127. roleId: ''
  128. },
  129. userOption: {
  130. labelWidth: 70,
  131. submitBtn: true,
  132. emptyBtn: false,
  133. submitText: '登录',
  134. column: [
  135. {
  136. label: '部门',
  137. prop: 'deptId',
  138. type: 'select',
  139. props: {
  140. label: 'deptName',
  141. value: 'id'
  142. },
  143. dicUrl: '/api/kd-system/dept/select',
  144. span: 24,
  145. display: false,
  146. rules: [{
  147. required: true,
  148. message: "请选择部门",
  149. trigger: "blur"
  150. }],
  151. },
  152. {
  153. label: '角色',
  154. prop: 'roleId',
  155. type: 'select',
  156. props: {
  157. label: 'roleName',
  158. value: 'id'
  159. },
  160. dicUrl: '/api/kd-system/role/select',
  161. span: 24,
  162. display: false,
  163. rules: [{
  164. required: true,
  165. message: "请选择角色",
  166. trigger: "blur"
  167. }],
  168. },
  169. ]
  170. },
  171. registerBox: false,
  172. registerForm: {},
  173. registerOption: {
  174. labelWidth: 90,
  175. submitBtn: true,
  176. emptyBtn: false,
  177. submitText: '注册',
  178. column: [
  179. {
  180. label: '租户编号',
  181. prop: 'tenantId',
  182. span: 24,
  183. rules: [
  184. {
  185. required: true,
  186. message: '请填写租户编号',
  187. trigger: 'blur',
  188. },
  189. ],
  190. },
  191. {
  192. label: '用户姓名',
  193. prop: 'name',
  194. span: 24,
  195. rules: [
  196. {
  197. required: true,
  198. message: '请输入用户姓名',
  199. trigger: 'blur',
  200. },
  201. ],
  202. },
  203. {
  204. label: '用户账号',
  205. prop: 'account',
  206. span: 24,
  207. rules: [
  208. {
  209. required: true,
  210. message: '请填写用户账号',
  211. trigger: 'blur',
  212. },
  213. ],
  214. },
  215. {
  216. label: '手机',
  217. prop: 'phone',
  218. span: 24,
  219. rules: [
  220. {
  221. required: true,
  222. message: '请填写手机',
  223. trigger: 'blur',
  224. },
  225. ],
  226. },
  227. {
  228. label: '邮箱',
  229. prop: 'email',
  230. span: 24,
  231. rules: [
  232. {
  233. required: true,
  234. message: '请填写邮箱',
  235. trigger: 'blur',
  236. },
  237. ],
  238. },
  239. {
  240. label: '密码',
  241. prop: 'password',
  242. span: 24,
  243. rules: [
  244. {
  245. required: true,
  246. message: '请填写密码',
  247. trigger: 'blur',
  248. },
  249. ],
  250. },
  251. {
  252. label: '确认密码',
  253. prop: 'password2',
  254. span: 24,
  255. rules: [
  256. {
  257. required: true,
  258. message: '请填写确认密码',
  259. trigger: 'blur',
  260. },
  261. ],
  262. },
  263. ],
  264. },
  265. };
  266. },
  267. created() {
  268. this.getTenant();
  269. this.refreshCode();
  270. },
  271. mounted() {
  272. this.$nextTick(() => {});
  273. },
  274. watch: {
  275. 'loginForm.deptId'() {
  276. const column = this.findObject(this.userOption.column, "deptId");
  277. if (this.loginForm.deptId.includes(",")) {
  278. column.dicUrl = `/api/kd-system/dept/select?deptId=${this.loginForm.deptId}`;
  279. column.display = true;
  280. } else {
  281. column.dicUrl = '';
  282. }
  283. },
  284. 'loginForm.roleId'() {
  285. const column = this.findObject(this.userOption.column, "roleId");
  286. if (this.loginForm.roleId.includes(",")) {
  287. column.dicUrl = `/api/kd-system/role/select?roleId=${this.loginForm.roleId}`;
  288. column.display = true;
  289. } else {
  290. column.dicUrl = '';
  291. }
  292. }
  293. },
  294. computed: {
  295. ...mapGetters(["tagWel", "userInfo"])
  296. },
  297. props: [],
  298. methods: {
  299. refreshCode() {
  300. if (this.website.captchaMode) {
  301. getCaptcha().then(res => {
  302. const data = res.data;
  303. this.loginForm.key = data.key;
  304. this.loginForm.image = data.image;
  305. })
  306. }
  307. },
  308. showPassword() {
  309. this.passwordType === ""
  310. ? (this.passwordType = "password")
  311. : (this.passwordType = "");
  312. },
  313. submitLogin (form, done) {
  314. if (form.deptId !== '') {
  315. this.loginForm.deptId = form.deptId;
  316. }
  317. if (form.roleId !== '') {
  318. this.loginForm.roleId = form.roleId;
  319. }
  320. this.handleLogin();
  321. done();
  322. },
  323. handleLogin() {
  324. this.$refs.loginForm.validate(valid => {
  325. if (valid) {
  326. const loading = this.$loading({
  327. lock: true,
  328. text: '登录中,请稍后。。。',
  329. spinner: "el-icon-loading"
  330. });
  331. console.log(this.loginForm)
  332. this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
  333. if (this.website.switchMode) {
  334. const deptId = this.userInfo.dept_id;
  335. const roleId = this.userInfo.role_id;
  336. if (deptId.includes(",") || roleId.includes(",")) {
  337. this.loginForm.deptId = deptId;
  338. this.loginForm.roleId = roleId;
  339. this.userBox = true;
  340. this.$store.dispatch("LogOut").then(() => {
  341. loading.close();
  342. });
  343. return false;
  344. }
  345. }
  346. this.$router.push({path: this.tagWel.value});
  347. loading.close();
  348. }).catch(() => {
  349. loading.close();
  350. this.refreshCode();
  351. });
  352. }
  353. });
  354. },
  355. handleRegister() {
  356. this.registerBox = true;
  357. },
  358. submitRegister(form, done) {
  359. if (form.password !== form.password2) {
  360. this.$message.warning('两次密码输入不一致');
  361. done();
  362. return;
  363. }
  364. const loading = this.$loading({
  365. lock: true,
  366. text: '注册中,请稍后',
  367. background: 'rgba(0, 0, 0, 0.7)',
  368. });
  369. this.$store
  370. .dispatch('RegisterUser', form)
  371. .then(() => {
  372. this.$alert('注册成功,请耐心等待管理员审核后分配权限', '注册成功', {
  373. confirmButtonText: '确定',
  374. callback: () => {
  375. //this.$router.push(this.tagWel);
  376. },
  377. });
  378. this.registerBox = false;
  379. })
  380. .catch(err => {
  381. console.log(err);
  382. });
  383. loading.close();
  384. done();
  385. },
  386. getTenant() {
  387. let domain = getTopUrl();
  388. // 临时指定域名,方便测试
  389. //domain = "https://bladex.cn";
  390. info(domain).then(res => {
  391. const data = res.data;
  392. if (data.success && data.data.tenantId) {
  393. this.tenantMode = false;
  394. this.loginForm.tenantId = data.data.tenantId;
  395. this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
  396. }
  397. })
  398. }
  399. }
  400. };
  401. </script>
  402. <style>
  403. </style>