Index.vue

<template>
  <div class="app_content">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <a-form-model ref="form" :model="formData" :rules="formRules" class="from-table">
        <a-row>
          <a-col :span="6" class="bg-gray">
            <div class="required">原密码</div>
          </a-col>
          <a-col :span="18">
            <a-form-model-item prop="oldPassword">
              <a-input type="password" placeholder="请输入原密码" v-model="formData.oldPassword" :readOnly="readOnly" @click="() => {this.readOnly=false }" @check="() => { this.readOnly=false }" @blur="() => { this.readOnly=false }" style="width: 300px" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="bg-gray">
            <div class="required">新密码</div>
          </a-col>
          <a-col :span="18">
            <a-form-model-item prop="newPassword">
              <a-input type="password" placeholder="请输入新密码" v-model="formData.newPassword" @change="PassworcChanged" style="width: 300px" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <table border="1" cellpadding="1" cellspacing="1" style="background-color:#e0f0ff; line-height: 20px; margin-top: 10px;">
              <tr>
                <td id="strength_L" style="width: 150px; height: 10px;" align="center">弱</td>
                <td id="strength_M" style="width: 150px; height: 10px;" align="center">中</td>
                <td id="strength_H" style="width: 150px; height: 10px;" align="center">强</td>
              </tr>
            </table>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6" class="bg-gray">
            <div class="required">确认新密码</div>
          </a-col>
          <a-col :span="18">
            <a-form-model-item prop="checkPwd">
              <a-input type="password" placeholder="请确认新密码" v-model="formData.checkPwd" style="width: 300px" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: center;">
            <a-button @click="closeWindow">取消</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="submit">保存</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>
<script>
import { removeToken } from '@/views/utils/auth'
import { isEmptyParams } from "@/views/utils/common"
export default {
  name: "updatePwd",
  data () {
    return {
      loading: false,
      readOnly: true,
      // form表单
      formData: {
        userId: undefined,
        oldPassword: undefined,
        newPassword: undefined,
        checkPwd: undefined,
      },
      formRules: {
        oldPassword: [
          { required: true, message: '请输入原密码' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              let ckPwd = /^(?=.*\d)(?=.*[a-zA-Z]).{6,12}$/;
              if (ckPwd.test(value)) {
                callback()
              } else {
                callback(new Error('密码只能由数字和字母混合组成，长度为6-12位~'));
              }
            }
          },
        ],
        checkPwd: [
          { required: true, message: '请确认新密码' },
          {
            validator: (rule, value, callback) => {
              if (value == '' || value == undefined) {
                callback()
              }
              if (value == this.formData.newPassword) {
                callback()
              } else {
                callback(new Error('与新密码不一致！'));
              }
            },
          },
        ],
      },
    }
  },
  created () {
    
  },
  methods: {
    PassworcChanged() {
      this.pwStrength();
    },
    //CharMode函数 
    //测试某个字符是属于哪一类. 
    CharMode(iN) {
      if (iN >= 48 && iN <= 57) //数字 
        return 1;
      if (iN >= 65 && iN <= 90) //大写字母 
        return 2;
      if (iN >= 97 && iN <= 122) //小写 
        return 4;
      else
        return 8; //特殊字符
    },
    //bitTotal函数 
    //计算出当前密码当中一共有多少种模式 
    bitTotal(num) {
      let modes = 0;
      for (var i = 0; i < 4; i++) {
        if (num & 1) modes++;
          num >>>= 1;
      }
      return modes;
    },
    //checkStrong函数 
    //返回密码的强度级别
    checkStrong(sPW) {
      if (sPW.length < 6)
        return 0; //密码太短
      let Modes = 0;
      for (var i = 0; i < sPW.length; i++) {
        //测试每一个字符的类别并统计一共有多少种模式. 
        Modes |= this.CharMode(sPW.charCodeAt(i));
      }
      return this.bitTotal(Modes);
    },
    //pwStrength函数 
    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
    pwStrength() {
      var pwd = this.formData.newPassword;
      let Lcolor = "";
      let Mcolor = "";
      let Hcolor = "";
      if (pwd == "") {
        Lcolor = Mcolor = Hcolor = "#e0f0ff";
        return;
      }
      var O_color = "#e0f0ff";
      var L_color = "#FF0000";
      var M_color = "#FF9900";
      var H_color = "#33CC00";

      if (pwd == null || pwd == '') {
        Lcolor = Mcolor = Hcolor = O_color;
        return;
      }

      var S_level = this.checkStrong(pwd);
      switch (S_level) {
        case 0:
          Lcolor = Mcolor = Hcolor = O_color;
          break;
        case 1:
          Lcolor = L_color;
          Mcolor = Hcolor = O_color;
          break;
        case 2:
          Lcolor = Mcolor = M_color;
          Hcolor = O_color;
          break;
        default:
          Lcolor = Mcolor = Hcolor = H_color;
          break;
      }

      document.getElementById("strength_L").style.background = Lcolor;
      document.getElementById("strength_M").style.background = Mcolor;
      document.getElementById("strength_H").style.background = Hcolor;
    },
    CheckPasswordStrong() {
      var pwdOld = this.formData.oldPassword;
      var pwd1 = this.formData.newPassword;
      var pwd2 = this.formData.checkPwd;
      if (pwdOld == "") {
        alert("请填写原密码！");
        return false;
      }
      if (pwd1 == "") {
        alert("请填写新密码！");
        return false;
      }
      if (pwd2 == "") {
        alert("请填写确认密码！");
        return false;
      }
      var S_level = this.checkStrong(pwd1);
      if (S_level >= 2)
        return true;
      else {
        alert("密码安全等级不够，请重新填写！");
        return false;
      }
    },
    submit () {
      let vm = this
      this.$refs.form.validate(valid => {
        if (valid) {
          let pars = isEmptyParams(vm.formData)
          let par = { ...pars }
          vm.$api.base.updatePwd(par).then(data => {
            if (data) {
              alert("修改成功，请重新登录！")
              window.sessionStorage.clear();
              removeToken()
              window.location.href = "/"
            }
          })
        }
      });
    },
    closeWindow () {
      this.$emit('close', 'close')
    }
  }
}
</script>
<style scoped lang="less">
.tab_input_r {
  .ant-form-item {
    margin: 0px 0px !important;
  }

  .ant-input {
    margin-top: 20px;
    width: 180px;
  }

  .ant-form-item-control {
    width: 180px !important;
  }

  .ant-row {
    height: 80px;
  }
}
</style>