系统界面翻新，回车登录，综合展示菜单重复

Surpriseplus

2023-02-06 4e3d77dcbe421a4d6611ebcdd1ac3165cb36ad4b

 src/components/login.vue

@@ -1,10 +1,16 @@
<template>
  <div class="container">
    <div class="title_img">
      <img src="../assets/img/loginLogo.png" alt="" />
      <img
        src="../assets/img/loginLogo.png"
        alt=""
      />
    </div>
    <div class="main_img">
      <img src="../assets/img/loginMain.png" alt="" />
      <img
        src="../assets/img/loginMain.png"
        alt=""
      />
    </div>
    <div class="login">
      <div class="login_title">
@@ -86,8 +92,11 @@
            size="meddle"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-user"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="pwd">
@@ -98,8 +107,11 @@
            class="nobr"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-lock"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item required>
@@ -113,7 +125,10 @@
            </el-form-item>
          </el-col>

          <el-col :span="6" align="right">
          <el-col
            :span="6"
            align="right"
          >
            <validCode
              v-model="validCode"
              ref="refresh"
@@ -122,14 +137,16 @@
          </el-col>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/zhengshu.png" alt="" /><span
            >证书安装与添加信任站点</span
          >
          <img
            src="../assets/img/zhengshu.png"
            alt=""
          /><span>证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/document.png" alt="" /><span
            >使用帮助文档</span
          >
          <img
            src="../assets/img/document.png"
            alt=""
          /><span>使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
@@ -143,8 +160,7 @@
            "
            :loading="loading"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -152,9 +168,10 @@
</template>

<script>
// import { login } from '../utils/api'
import { getPerms } from '../api/api';
import validCode from './verificationCode.vue';
import { mapActions } from 'vuex';
import moment from 'moment';

export default {
  components: { validCode },
@@ -176,6 +193,7 @@
    };

    const checkValidCode = (rule, value, callback) => {

      if (!value) {
        callback(new Error('请输入验证码'));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
@@ -190,7 +208,7 @@
      loading: false,
      loginForm: {
        uid: 'admin',
        pwd: 'Admin@123',
        pwd: 'Admin@1234_lf',
      },
      rules: {
        uid: [{ validator: validUserName, trigger: 'blur' }],
@@ -206,15 +224,40 @@
    //   获取vuex中Actions里的方法
    ...mapActions(['login', 'getpublickey']),
    getCode(data) {

      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              this.$router.push('/mochaitmo');
              if (response.code != 200) {
                this.loading = false
                Message({
                  message: response.msg,
                  type: 'error',
                  duration: 5 * 1000,
                });
                return
              }
              this.setCookies(response);

              getPerms().then((res) => {
                if (res.code == 200) {
                  this.$store.commit('getPermsEntity', res.result);

                  if (res.result.length != 0) {
                    this.$router.push('/');
                  }
                  this.loading = false
                } else {
                  this.loading = false
                  console.log('error submit!!');
                }
              });

              this.loading = false;
              //调用录接口
@@ -226,13 +269,43 @@
          this.$refs.refresh.createdCode();
          this.validCode = ''; //清空验证码输入框的内容
        } else {
          this.loading = false
          console.log('error submit!!');
          return false;
        }
      });
    },
    setCookies(res) {

      var timeData = moment(res.result.expire).format('YYYY-MM-DD HH:mm:ss');
      var LfPrems = {
        token: res.result.token,
        uname: res.result.uname,
        time: timeData,
        userid: res.result.createUser,
       expire: res.result.expire
      };
      LfPrems = JSON.stringify(LfPrems);
      localStorage.setItem('LFToken', LfPrems);
    },
    enterLogin() {
      document.onkeydown = (e) => {
        e = window.event || e;


        if (this.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter' || e.code == 'NumpadEnter')) {
  
          //最重要最后调用1.登录校验方法
          //this.login();
          this.submitForm('loginForm')
        }
      };

    }
  },
  created() {},
  created() {
    this.enterLogin();
  },
};
</script>