pqs-9100_client/frontend/src/views/login/components/LoginForm.vue

<template>
  <el-form
      ref='loginFormRef'
      :model='loginForm'
      :rules='loginRules'
      size='large'
  >
    <el-form-item prop='username'>
      <el-input v-model='loginForm.username' placeholder='用户名' disabled>
        <template #prefix>
          <el-icon class='el-input__icon'>
            <user />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop='password'>
      <el-input
          v-model='loginForm.password'
          type='password'
          placeholder='密码'
          show-password
          autocomplete='new-password'
          disabled
      >
        <template #prefix>
          <el-icon class='el-input__icon'>
            <lock />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
  </el-form>
  <div class='login-btn'>
    <el-button
        :icon='UserFilled'
        round
        size='large'
        type='primary'
        :loading='loading'
        @click='login(loginFormRef)'
    >
      登录
    </el-button>
    <el-button
        :icon='CircleClose'
        round
        size='large'
        @click='resetForm(loginFormRef)'
    >
      重置
    </el-button>
  </div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'
import { HOME_URL } from '@/config'
import { getTimeState } from '@/utils'
import { type Dict } from '@/api/interface'
import { type Login } from '@/api/user/interface/user'
import { ElNotification } from 'element-plus'
import { getDictList, loginApi } from '@/api/user/login'
import { useUserStore } from '@/stores/modules/user'
import { useTabsStore } from '@/stores/modules/tabs'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
import { CircleClose, UserFilled } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/modules/auth'
import type { ElForm } from 'element-plus'
import {useDictStore} from "@/stores/modules/dict";

const authStore = useAuthStore()
const router = useRouter()
const userStore = useUserStore()
const tabsStore = useTabsStore()
const keepAliveStore = useKeepAliveStore()

const dictStore = useDictStore()


type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>()
const loginRules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const loading = ref(false)
const loginForm = reactive<Login.ReqLoginForm>({
  username: 'user',
  password: 'user12345.',
})

// login
const login = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      // 1.执行登录接口
      const { data } = await loginApi({
        ...loginForm,
        password: loginForm.password,
      })
      userStore.setAccessToken(data.accessToken)
      userStore.setRefreshToken(data.refreshToken)
      userStore.setUserInfo(data.userInfo)
      const response = await getDictList()
      const dictData = response.data as unknown as Dict[]
      await dictStore.initDictData(dictData)
      // 2.添加动态路由
      await initDynamicRouter()

      // 3.清空 tabs、keepAlive 数据
      tabsStore.setTabs([])
      keepAliveStore.setKeepAliveName([])

      // 4.跳转到首页
      router.push(HOME_URL)
      // 5.登录默认不显示菜单和导航栏
      authStore.resetAuthStore()
      ElNotification({
        title: getTimeState(),
        message: '登录成功',
        type: 'success',
        duration: 3000,
      })
    } finally {
      loading.value = false
    }
  })
}

// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  // 监听 enter 事件（调用登录）
  document.onkeydown = (e: KeyboardEvent) => {
    e = (window.event as KeyboardEvent) || e
    if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
      if (loading.value) return
      login(loginFormRef.value)
    }
  }
})
</script>

<style scoped lang='scss'>
@import "../index.scss";
</style>