hr-admin/src/views/companyManage/passwordSettings.vue

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-28 17:34:44
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-07-31 16:09:08
-->
<template>
<div class="passwordSettings">
    <el-card class="box-card">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="输入旧密码" prop="oldPassword">
                <el-input v-model.trim="form.oldPassword" show-password maxlength="64" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="输入新密码" prop="newPassword">
                <el-input v-model.trim="form.newPassword" show-password maxlength="64" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model.trim="form.confirmPassword" show-password maxlength="64" show-word-limit></el-input>
            </el-form-item>
            <el-form-item class="button-grounp">
                <el-button type="primary" @click="update">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
export default {
  data () {
    let update = () => {
      let a
      this.$refs['form'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let reqdata = {
        companyName: localStorage.getItem('companyName'),
        oldPassword: this.form.oldPassword,
        newPassword: this.form.newPassword
      }
      this.$api
        .post('/companyInfo/changePassword', {
          reqdata
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
        })
    }
    let validator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else {
        if (value !== this.form.newPassword) {
          callback(new Error('密码输入不一致，请重新输入'))
        }
        callback()
      }
    }
    return {
      form: {},
      rules: {
        oldPassword: [{
          required: true,
          message: '请输入旧密码',
          trigger: 'blur'
        }],
        newPassword: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }],
        confirmPassword: [{
          required: true,
          validator,
          trigger: 'blur'
        }]
      },
      update
    }
  }
}
</script>

<style lang="scss" scoped>
.passwordSettings {
    display: flex;
    justify-content: center;
    align-content: center;
}

.box-card {
    width: 800rpx;
    padding: 18px 0;
}

.button-grounp {
    display: flex;
    justify-content: flex-end;
}
</style><style lang="scss">
.passwordSettings {
    .el-input__inner {
        width: 400px !important;
    }
}
</style>