|
|
@@ -107,261 +107,266 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import I18nIcon from '@/layout/components/i18n-icon.vue';
|
|
|
-import { getToken } from '@/utils/token-util';
|
|
|
-import { login, getCaptcha, sub } from '@/api/login';
|
|
|
-import { SYSTEM_NAME } from '@/config/setting';
|
|
|
-export default {
|
|
|
- // eslint-disable-next-line vue/multi-word-component-names
|
|
|
- name: 'Login',
|
|
|
- components: { I18nIcon },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 登录框方向, 0居中, 1居右, 2居左
|
|
|
- direction: 0,
|
|
|
- // 加载状态
|
|
|
- loading: false,
|
|
|
- // 表单数据
|
|
|
- form: {
|
|
|
- loginName: 'mes111',
|
|
|
- loginPwd: '123456',
|
|
|
- remember: true
|
|
|
- },
|
|
|
- // 验证码base64数据
|
|
|
- captcha: '',
|
|
|
- // 验证码内容, 实际项目去掉
|
|
|
- text: ''
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 表单验证规则
|
|
|
- rules() {
|
|
|
+ import I18nIcon from '@/layout/components/i18n-icon.vue';
|
|
|
+ import { getToken } from '@/utils/token-util';
|
|
|
+ import { login, getCaptcha, sub } from '@/api/login';
|
|
|
+ import { SYSTEM_NAME } from '@/config/setting';
|
|
|
+ import { setCurrentUser } from '@/utils/token-util';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ // eslint-disable-next-line vue/multi-word-component-names
|
|
|
+ name: 'Login',
|
|
|
+ components: { I18nIcon },
|
|
|
+ data() {
|
|
|
return {
|
|
|
- loginName: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: this.$t('login.loginName'),
|
|
|
- type: 'string',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ],
|
|
|
- loginPwd: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: this.$t('login.loginPwd'),
|
|
|
- type: 'string',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ // 登录框方向, 0居中, 1居右, 2居左
|
|
|
+ direction: 0,
|
|
|
+ // 加载状态
|
|
|
+ loading: false,
|
|
|
+ // 表单数据
|
|
|
+ form: {
|
|
|
+ loginName: 'mes111',
|
|
|
+ loginPwd: '123456',
|
|
|
+ remember: true
|
|
|
+ },
|
|
|
+ // 验证码base64数据
|
|
|
+ captcha: '',
|
|
|
+ // 验证码内容, 实际项目去掉
|
|
|
+ text: ''
|
|
|
};
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (getToken()) {
|
|
|
- this.goHome();
|
|
|
- } else {
|
|
|
- // 重置菜单权限
|
|
|
- this.$store.commit('user/setMenus', null);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /* 提交 */
|
|
|
- submit() {
|
|
|
- this.$refs.form.validate((valid) => {
|
|
|
- if (!valid) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.loading = true;
|
|
|
- login(this.form)
|
|
|
- .then((res) => {
|
|
|
- localStorage.setItem(`userId-${SYSTEM_NAME}`, res.data.userId);
|
|
|
- // 当前登录信息
|
|
|
- if (res.data?.loginChangeGroupVOList.length > 0) {
|
|
|
- sessionStorage['currentUser'] = JSON.stringify({
|
|
|
- currentGroupId: res.data.loginChangeGroupVOList[0].groupId,
|
|
|
- currentRoleId:
|
|
|
- res.data.loginChangeGroupVOList[0].loginChangeRoleVOList[0]
|
|
|
- .roleId
|
|
|
- });
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 表单验证规则
|
|
|
+ rules() {
|
|
|
+ return {
|
|
|
+ loginName: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t('login.loginName'),
|
|
|
+ type: 'string',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ loginPwd: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t('login.loginPwd'),
|
|
|
+ type: 'string',
|
|
|
+ trigger: 'blur'
|
|
|
}
|
|
|
- this.$store.commit('user/setUserInfo', res.data);
|
|
|
- this.loading = false;
|
|
|
- this.$message.success(res.message);
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (getToken()) {
|
|
|
+ this.goHome();
|
|
|
+ } else {
|
|
|
+ // 重置菜单权限
|
|
|
+ this.$store.commit('user/setMenus', null);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 提交 */
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate((valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ login(this.form)
|
|
|
+ .then((res) => {
|
|
|
+ localStorage.setItem(`userId-${SYSTEM_NAME}`, res.data.userId);
|
|
|
+ // 当前登录信息
|
|
|
+ if (res.data?.loginChangeGroupVOList.length > 0) {
|
|
|
+ setCurrentUser(
|
|
|
+ {
|
|
|
+ currentGroupId: res.data.loginChangeGroupVOList[0].groupId,
|
|
|
+ currentRoleId:
|
|
|
+ res.data.loginChangeGroupVOList[0]
|
|
|
+ .loginChangeRoleVOList[0].roleId
|
|
|
+ },
|
|
|
+ this.form.remember
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.$store.commit('user/setUserInfo', res.data);
|
|
|
+ this.loading = false;
|
|
|
+ this.$message.success(res.message);
|
|
|
|
|
|
- this.$store.dispatch('user/getCurrentUserAuthorityDept');
|
|
|
- this.$store.dispatch('paramsSetData/setParamsDataInfo');
|
|
|
- this.goHome();
|
|
|
+ this.$store.dispatch('user/getCurrentUserAuthorityDept');
|
|
|
+ this.$store.dispatch('paramsSetData/setParamsDataInfo');
|
|
|
+ this.goHome();
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.loading = false;
|
|
|
+ // this.$message.error(e.message);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 跳转到首页 */
|
|
|
+ goHome() {
|
|
|
+ this.$router
|
|
|
+ .push(this.$route?.query?.from ?? '/home/index')
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ /* 更换图形验证码 */
|
|
|
+ changeCaptcha() {
|
|
|
+ // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
|
|
+ getCaptcha()
|
|
|
+ .then((data) => {
|
|
|
+ this.captcha = data.base64;
|
|
|
+ // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
|
|
|
+ this.text = data.text;
|
|
|
+ // 自动回填验证码, 实际项目去掉这个
|
|
|
+ this.form.code = this.text;
|
|
|
+ this.$refs?.form?.clearValidate();
|
|
|
})
|
|
|
.catch((e) => {
|
|
|
- this.loading = false;
|
|
|
// this.$message.error(e.message);
|
|
|
});
|
|
|
- });
|
|
|
- },
|
|
|
- /* 跳转到首页 */
|
|
|
- goHome() {
|
|
|
- this.$router
|
|
|
- .push(this.$route?.query?.from ?? '/home/index')
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
- /* 更换图形验证码 */
|
|
|
- changeCaptcha() {
|
|
|
- // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
|
|
- getCaptcha()
|
|
|
- .then((data) => {
|
|
|
- this.captcha = data.base64;
|
|
|
- // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 可以根据自己后端接口修改
|
|
|
- this.text = data.text;
|
|
|
- // 自动回填验证码, 实际项目去掉这个
|
|
|
- this.form.code = this.text;
|
|
|
- this.$refs?.form?.clearValidate();
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- // this.$message.error(e.message);
|
|
|
- });
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-/* 背景 */
|
|
|
-.login-wrapper {
|
|
|
- padding: 50px 20px;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- background-image: url('@/assets/bg-login.jpg');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- min-height: 100vh;
|
|
|
+ /* 背景 */
|
|
|
+ .login-wrapper {
|
|
|
+ padding: 50px 20px;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: url('@/assets/bg-login.jpg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ min-height: 100vh;
|
|
|
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-/* 卡片 */
|
|
|
-.login-form {
|
|
|
- margin: 0 auto;
|
|
|
- width: 360px;
|
|
|
- max-width: 100%;
|
|
|
- padding: 25px 30px;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- z-index: 2;
|
|
|
+ /* 卡片 */
|
|
|
+ .login-form {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 360px;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 25px 30px;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ z-index: 2;
|
|
|
|
|
|
- h4 {
|
|
|
- text-align: center;
|
|
|
- margin: 0 0 25px 0;
|
|
|
- }
|
|
|
+ h4 {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 0 25px 0;
|
|
|
+ }
|
|
|
|
|
|
- & > .el-form-item {
|
|
|
- margin-bottom: 25px;
|
|
|
+ & > .el-form-item {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.login-form-right .login-form {
|
|
|
- margin: 0 15% 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form-left .login-form {
|
|
|
- margin: 0 auto 0 15%;
|
|
|
-}
|
|
|
-
|
|
|
-/* 验证码 */
|
|
|
-.login-input-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- :deep(.el-input) {
|
|
|
- flex: 1;
|
|
|
+ .login-form-right .login-form {
|
|
|
+ margin: 0 15% 0 auto;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.login-captcha {
|
|
|
- height: 38px;
|
|
|
- width: 102px;
|
|
|
- margin-left: 10px;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- opacity: 0.75;
|
|
|
+ .login-form-left .login-form {
|
|
|
+ margin: 0 auto 0 15%;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.login-btn {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
+ /* 验证码 */
|
|
|
+ .login-input-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
-/* 第三方登录图标 */
|
|
|
-.login-oauth-icon {
|
|
|
- color: #fff;
|
|
|
- padding: 5px;
|
|
|
- margin: 0 10px;
|
|
|
- font-size: 18px;
|
|
|
- border-radius: 50%;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
+ :deep(.el-input) {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-/* 底部版权 */
|
|
|
-.login-copyright {
|
|
|
- color: #eee;
|
|
|
- padding-top: 20px;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
+ .login-captcha {
|
|
|
+ height: 38px;
|
|
|
+ width: 102px;
|
|
|
+ margin-left: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
-/* 响应式 */
|
|
|
-@media screen and (min-height: 550px) {
|
|
|
- .login-form {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- margin-top: -220px;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.75;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .login-form-right .login-form,
|
|
|
- .login-form-left .login-form {
|
|
|
- left: auto;
|
|
|
- right: 15%;
|
|
|
- transform: translateX(0);
|
|
|
- margin: -220px auto auto auto;
|
|
|
+ .login-btn {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
- .login-form-left .login-form {
|
|
|
- right: auto;
|
|
|
- left: 15%;
|
|
|
+ /* 第三方登录图标 */
|
|
|
+ .login-oauth-icon {
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+ /* 底部版权 */
|
|
|
.login-copyright {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
+ color: #eee;
|
|
|
+ padding-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@media screen and (max-width: 768px) {
|
|
|
- .login-form-right .login-form,
|
|
|
- .login-form-left .login-form {
|
|
|
- left: 50%;
|
|
|
- right: auto;
|
|
|
- transform: translateX(-50%);
|
|
|
- margin-right: auto;
|
|
|
+ /* 响应式 */
|
|
|
+ @media screen and (min-height: 550px) {
|
|
|
+ .login-form {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ margin-top: -220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form-right .login-form,
|
|
|
+ .login-form-left .login-form {
|
|
|
+ left: auto;
|
|
|
+ right: 15%;
|
|
|
+ transform: translateX(0);
|
|
|
+ margin: -220px auto auto auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form-left .login-form {
|
|
|
+ right: auto;
|
|
|
+ left: 15%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-copyright {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 768px) {
|
|
|
+ .login-form-right .login-form,
|
|
|
+ .login-form-left .login-form {
|
|
|
+ left: 50%;
|
|
|
+ right: auto;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|