123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298 |
- <script lang="ts">
- import { computed, defineComponent, onMounted, reactive, ref, toRefs, onUnmounted } from 'vue'
- import { useRoute, useRouter } from 'vue-router'
- import { ElMessage, FormRules } from 'element-plus'
- import { useI18n } from 'vue-i18n'
- import Cookies from 'js-cookie'
- import { storeToRefs } from 'pinia'
- import { useThemeConfig } from '/@/stores/themeConfig'
- import { initFrontEndControlRoutes } from '/@/router/frontEnd'
- import { initBackEndControlRoutes } from '/@/router/backEnd'
- import { Session } from '/@/utils/storage'
- import { formatAxis } from '/@/utils/formatTime'
- import { NextLoading } from '/@/utils/loading'
- import * as loginApi from '/@/views/system/login/api'
- import { useUserInfo } from '/@/stores/userInfo'
- import { DictionaryStore } from '/@/stores/dictionary'
- import { SystemConfigStore } from '/@/stores/systemConfig'
- import { Md5 } from 'ts-md5'
- import { errorMessage } from '/@/utils/message'
- import emitter from '/@/utils/emitter'
- export default defineComponent({
- name: 'loginAccount',
- setup() {
- const { t } = useI18n()
- const storesThemeConfig = useThemeConfig()
- const { themeConfig } = storeToRefs(storesThemeConfig)
- const { userInfos } = storeToRefs(useUserInfo())
- const route = useRoute()
- const router = useRouter()
- const state = reactive({
- isShowPassword: false,
- ruleForm: {
- username: '',
- password: '',
- captcha: '',
- captchaKey: '',
- captchaImgBase: '',
- },
- loading: {
- signIn: false,
- },
- })
- const rules = reactive<FormRules>({
- username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
- password: [
- {
- required: true,
- message: '请填写密码',
- trigger: 'blur',
- },
- ],
- captcha: [
- {
- required: true,
- message: '请填写验证码',
- trigger: 'blur',
- },
- ],
- })
- const formRef = ref()
- // 时间获取
- const currentTime = computed(() => {
- return formatAxis(new Date())
- })
- // 是否关闭验证码
- const isShowCaptcha = computed(() => {
- return SystemConfigStore().systemConfig['base.captcha_state']
- })
- const getCaptcha = async () => {
- loginApi.getCaptcha().then((ret: any) => {
- state.ruleForm.captchaImgBase = ret.data.image_base
- state.ruleForm.captchaKey = ret.data.key
- })
- }
- const refreshCaptcha = async () => {
- loginApi.getCaptcha().then((ret: any) => {
- state.ruleForm.captchaImgBase = ret.data.image_base
- state.ruleForm.captchaKey = ret.data.key
- })
- }
- const loginClick = async () => {
- if (!formRef.value) return
- await formRef.value.validate((valid: any) => {
- if (valid) {
- loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((res: any) => {
- if (res.code === 2000) {
- Session.set('token', res.data.access)
- Cookies.set('username', res.data.name)
- if (!themeConfig.value.isRequestRoutes) {
- // 前端控制路由,2、请注意执行顺序
- initFrontEndControlRoutes()
- loginSuccess()
- } else {
- // 模拟后端控制路由,isRequestRoutes 为 true,则开启后端控制路由
- // 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
- initBackEndControlRoutes()
- // 执行完 initBackEndControlRoutes,再执行 signInSuccess
- loginSuccess()
- }
- } else if (res.code === 4000) {
- // 登录错误之后,刷新验证码
- refreshCaptcha()
- }
- })
- } else {
- errorMessage('请填写登录信息')
- }
- })
- }
- const getUserInfo = () => {
- useUserInfo().setUserInfos()
- }
- emitter.on('scan-wecomLogin', (userInfo: any) => {
- if (userInfo.loginInfo.code == 2000) {
- Session.set('token', userInfo.loginInfo.data.access)
- Cookies.set('username', userInfo.loginInfo.data.name)
- if (!themeConfig.value.isRequestRoutes) {
- // 前端控制路由,2、请注意执行顺序
- // console.log('成功获取token,开始初始化前端路由')
- initFrontEndControlRoutes()
- loginSuccess()
- } else {
- initBackEndControlRoutes()
- loginSuccess()
- }
- emitter.off('scan-wecomLogin')
- }
- })
- // 登录成功后的跳转
- const loginSuccess = () => {
- //登录成功获取用户信息,获取系统字典数据
- getUserInfo()
- //获取所有字典
- DictionaryStore().getSystemDictionarys()
- // 初始化登录成功时间问候语
- let currentTimeInfo = currentTime.value
- // 登录成功,跳到转首页
- // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push({
- path: <string>route.query?.redirect,
- query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- })
- } else {
- router.push('/')
- }
- // 登录成功提示
- // 关闭 loading
- state.loading.signIn = true
- const signInText = t('message.signInText')
- ElMessage.success(`${currentTimeInfo},${signInText}`)
- // 添加 loading,防止第一次进入界面时出现短暂空白
- NextLoading.start()
- }
- onMounted(() => {
- getCaptcha()
- //获取系统配置
- SystemConfigStore().getSystemConfigs()
- })
- // onUnmounted(() => {
- // console.log('卸载了')
- // })
- return {
- refreshCaptcha,
- loginClick,
- loginSuccess,
- isShowCaptcha,
- state,
- formRef,
- rules,
- ...toRefs(state),
- }
- },
- })
- </script>
- <template>
- <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules">
- <el-form-item class="login-animation1" prop="username">
- <el-input
- @keydown.enter="loginClick"
- type="text"
- :placeholder="$t('message.account.accountPlaceholder1')"
- v-model="ruleForm.username"
- clearable
- autocomplete="off">
- <template #prefix>
- <el-icon class="el-input__icon">
- <ele-User />
- </el-icon>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item class="login-animation2" prop="password">
- <el-input
- @keydown.enter="loginClick"
- :type="isShowPassword ? 'text' : 'password'"
- :placeholder="$t('message.account.accountPlaceholder2')"
- v-model="ruleForm.password">
- <template #prefix>
- <el-icon class="el-input__icon">
- <ele-Unlock />
- </el-icon>
- </template>
- <template #suffix>
- <i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword">
- </i>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
- <el-col :span="15">
- <el-input
- type="text"
- maxlength="4"
- :placeholder="$t('message.account.accountPlaceholder3')"
- v-model="ruleForm.captcha"
- clearable
- autocomplete="off">
- <template #prefix>
- <el-icon class="el-input__icon">
- <ele-Position />
- </el-icon>
- </template>
- </el-input>
- </el-col>
- <el-col :span="1"></el-col>
- <el-col :span="8">
- <el-button class="login-content-captcha">
- <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
- </el-button>
- </el-col>
- </el-form-item>
- <el-form-item class="login-animation4">
- <el-button
- type="primary"
- class="login-content-submit"
- round
- @keydown.enter="loginClick"
- @click="loginClick"
- :loading="loading.signIn">
- <span class="font-medium">{{ $t('message.account.accountBtnText') }}</span>
- </el-button>
- <!--<el-button type="primary" class="login-content-submit" round @click="qrLoginClick"> 企业微信扫码登录</el-button>-->
- </el-form-item>
- </el-form>
- </template>
- <style scoped lang="scss">
- .login-content-form {
- margin-top: 20px;
- @for $i from 1 through 4 {
- .login-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
- }
- }
- .login-content-password {
- display: inline-block;
- width: 20px;
- cursor: pointer;
- &:hover {
- color: #909399;
- }
- }
- .login-content-captcha {
- width: 100%;
- padding: 0;
- font-weight: bold;
- letter-spacing: 5px;
- }
- .login-content-submit {
- width: 100%;
- letter-spacing: 2px;
- font-weight: 300;
- margin-top: 15px;
- }
- }
- </style>
|