gj-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>