supply-front/src/views/setting/personal.vue

<template>
  <div class="app-container">
    <div class="setting_title">个人信息</div>
    <el-divider></el-divider>
    <div class="userInfo">
      <el-form label-position="left" label-width="50px">
        <el-form-item label="账号">
          <div>{{userInfo.userName}}</div>
        </el-form-item>
        <el-form-item label="姓名">
          <div>{{userInfo.nickName}}</div>
        </el-form-item>
        <el-form-item label="角色">
          <div>{{userInfo.roleName}}</div>
        </el-form-item>
        <el-form-item label="密码">
          <div>{{userInfo.password | passwordFilter}} <el-button type="text" @click="dialogFormVisible = true">修改密码</el-button></div>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-position="left" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="dialogForm.oldPassword" ref="password1" autocomplete="off" placeholder="请输入原密码" :type="passwordType1"></el-input>
          <span class="show-pwd" @click="showPwd(1)">
            <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="dialogForm.newPassword" ref="password2" autocomplete="off" placeholder="请输入新密码" :type="passwordType2"></el-input>
          <span class="show-pwd" @click="showPwd(2)">
            <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="dialogForm.confirmPassword" ref="password3" autocomplete="off" placeholder="请再次输入新密码" :type="passwordType3"></el-input>
          <span class="show-pwd" @click="showPwd(3)">
            <svg-icon :icon-class="passwordType3 === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogForm">取 消</el-button>
        <el-button type="primary" @click="submitDialogForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserInfo, changePassword } from '@/api/setting'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value === this.dialogForm.oldPassword) {
        callback(new Error('该密码与原密码一致'));
      } else {
        if (this.dialogForm.confirmPassword !== '') {
          this.$refs.dialogForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.dialogForm.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      userInfo: {},
      dialogFormVisible: false,
      dialogForm: {
        oldPassword: '', // 原密码
        newPassword: '', // 新密码
        confirmPassword: '', // 确认密码
      },
      dialogFormRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
      },

      passwordType1: 'password',
      passwordType2: 'password',
      passwordType3: 'password',
    }
  },
  computed: {
    ...mapGetters([
      'userid'
    ])
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      getUserInfo({adminUserId: this.userid}).then(res => {
        this.userInfo = res.data;
      })
    },

    // 取消修改密码
    cancelDialogForm(){
      this.dialogFormVisible = false;
      this.passwordType1 = 'password';
      this.passwordType2 = 'password';
      this.passwordType3 = 'password';
      this.$refs.dialogForm.resetFields();
    },

    // 提交修改密码
    submitDialogForm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          let params = {
            password: this.dialogForm.oldPassword,
            newPassword: this.dialogForm.newPassword,
            userName: this.userInfo.userName
          }
          changePassword(params).then(res => {
            this.cancelDialogForm();
            this.getUserInfo();
            this.$successMsg();
          })
        }
      })
    },

    // 显示隐藏密码
    showPwd(num) {
      if(num == 1) {
        if (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if(num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
      if(num == 3) {
        if (this.passwordType3 === 'password') {
          this.passwordType3 = ''
        } else {
          this.passwordType3 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password3.focus()
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
  .el-form {
    padding-left: 15px;
  }
  .userInfo .el-form-item {
    margin-bottom: 10px;
  }
  .show-pwd {
    position: absolute;
    right: 15px;
    top: 0;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
</style>