feat:创建新分支

charles

2024-04-29 b95cf940af8e01e4eca30b2599b029c2f645bd1e

 src/views/login/loginView.vue

@@ -4,7 +4,7 @@
      <div class="card-top">
        <img src="@/assets/images/logo.png" />
      </div>
      <p>智能报工系统</p>
      <p>智能质检系统</p>
      <div class="card_bottom">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="25%" class="demo-ruleForm">
          <el-form-item label="" prop="accountNumber">
@@ -20,8 +20,12 @@
            />
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-input v-model="ruleForm.code" autocomplete="off" style="width: 70%"> </el-input>
            <img class="login-code" :src="captcha" @click="getCaptchaData" />
            <el-input v-model="ruleForm.code" placeholder="验证码" autocomplete="off" style="width: 70%">
              <template #append>
                <img class="login-code" :src="captcha" @click="getCaptchaData" />
              </template>
            </el-input>
            <!-- <img class="login-code" :src="captcha" @click="getCaptchaData" /> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
@@ -35,7 +39,10 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getCaptcha } from '@/api'
import { getCaptcha, login } from '@/api'
import { setToken, getToken } from '@/common/utils/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const ruleFormRef = ref<FormInstance>()

@@ -72,23 +79,17 @@
})

const captcha = ref('')
const captchaId = ref('')

const getCaptchaData = () => {
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
    }
  getCaptcha().then((rsp: any) => {
    captcha.value = rsp?.data?.picPath
    captchaId.value = rsp?.data?.captchaId
  })
}
onMounted(() => {
  // 获取验证码
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
    }
  })
  getCaptchaData()
})

const rules = reactive<FormRules<typeof ruleForm>>({
@@ -97,11 +98,29 @@
  accountNumber: [{ validator: checkAge, trigger: 'blur' }]
})

const router = useRouter()

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      login({
        username: ruleForm.accountNumber,
        password: ruleForm.pass,
        captcha: ruleForm.code,
        captchaId: captchaId.value
      }).then((rsp: any) => {
        console.log(rsp)
        setToken(rsp?.data?.token)
        ElMessage({
          message: '登录成功！',
          type: 'success'
        })
        ruleForm.accountNumber = ''
        ruleForm.pass = ''
        ruleForm.code = ''
        router.push('/')
      })
    } else {
      console.log('error submit!')
      return false
@@ -166,7 +185,13 @@
    }
  }
}

.login-code {
  height: 40px - 2px;
  display: block;
  margin: 0px -20px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
::v-deep .el-form-item__content {
  display: flex;
  align-items: center;