十、Vue开发个人信息、修改密码页面

<template>
  <div class="card" style="width: 50%; padding: 40px 20px">
    <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80 px" style="padding-right: 20px; padding-left: 20px; padding-top: 50px">
      <el-form-item label="账号" prop="username">
        <el-input v-model="data.form.username" autocomplete="off" placeholder="请输入账号" disabled/>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称"/>
      </el-form-item>
      <div v-if="data.user.role === 'EMP'">
        <el-form-item label="性别">
          <el-radio-group v-model="data.form.sex">
            <el-radio label="男" value="男"></el-radio>
            <el-radio label="女" value="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工号" prop="no">
          <el-input v-model="data.form.no" autocomplete="off" placeholder="请输入工号" disabled/>
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input rows="3" type="textarea" v-model="data.form.description" autocomplete="off" placeholder="请输入个人介绍"/>
        </el-form-item>
      </div>
      <div style="text-align: center">
        <el-button type="primary" style="padding: 20px 30px" @click="updateUser">更新个人信息</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const formRef = ref()

const data = reactive({
  form: {
  },
  rules: {
    username : [
      {required : true, message : '请输入账号', trigger : 'blur'}
    ],
    name : [
      {required : true, message : '请输入名称', trigger : 'blur'}
    ],
    no : [
      {required : true, message : '请输入工号', trigger : 'blur'}
    ]
  },
  user : JSON.parse(localStorage.getItem("user"))
})

const emit = defineEmits(['updateUser'])

const updateUser = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (data.user.role === 'EMP') {
        request.put("/employee/update", data.form).then( res => {
          if (res.code === '200') {
            ElMessage.success('更新成功')
            // 更新缓存数据
            localStorage.setItem("user", JSON.stringify(data.form))
            // 触发父组件更新
            emit('updateUser')
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        request.put("/admin/update", data.form).then( res => {
          if (res.code === '200') {
            ElMessage.success('更新成功')
            // 更新缓存数据
            localStorage.setItem("user", JSON.stringify(data.form))
            // 触发父组件更新
            emit('updateUser')
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    } else {
      ElMessage.error('请填写完整信息')
    }
  })
}

if (data.user.role === 'EMP') {
  request.get("/employee/selectById/" + data.user.id).then(res => {
    data.form = res.data
  })
} else {
  request("/admin/selectById/" + data.user.id).then(res => {
    data.form = res.data
  })
}

</script>

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次确认密码'))
  } else if (value !== data.form.password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

@PutMapping("/updatePassword")
public Result updatePassword(@RequestBody Account account) {
    String role = account.getRole();
    if ("EMP".equals(role)) {
        employeeService.updatePassword(account);
    } else if ("ADMIN".equals(role)) {
        adminService.updatePassword(account);
    } else {
        return Result.error("400", "角色不存在");
    }
    return Result.success();
}

    public void updatePassword(Account account) {
        Employee employee = employeeMapper.selectById(account.getId());
        if (!employee.getPassword().equals(account.getPassword())) {
            throw new CustomException("500", "对不起，原密码错误");
        }
        employee.setPassword(account.getNewPassword()); //设置新密码
        employeeMapper.update(employee);
    }

    public void updatePassword(Account account) {
        Admin admin = adminMapper.selectById(account.getId());
        if (!admin.getPassword().equals(account.getPassword())) {
            throw new CustomException("500", "对不起，原密码错误");
        }
        admin.setPassword(account.getNewPassword()); //设置新密码
        adminMapper.update(admin);
    }

<template>
  <div class="card" style="width: 50%; padding: 40px 20px">
    <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80 px" style="padding-right: 20px; padding-left: 20px; padding-top: 50px">
      <el-form-item label="原密码" prop="password">
        <el-input v-model="data.form.password" autocomplete="off" placeholder="请输入原密码" show-password/>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="data.form.newPassword" autocomplete="off" placeholder="请输入新密码" show-password/>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input v-model="data.form.confirmPassword" autocomplete="off" placeholder="请确认新密码" show-password/>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" style="padding: 20px 30px" @click="updatePassword">立即修改</el-button>
    </div>
  </div>
</template>

<script setup>
  import {reactive, ref} from "vue"
  import {ElMessage} from 'element-plus'
  import request from "@/utils/request.js";

  const formRef = ref()


  const validatePass = (rule, value, callback) => {
    if (!value) {
      callback(new Error('请再次确认密码'))
    } else if (value !== data.form.newPassword) {
      callback(new Error("两次输入的密码不一致"))
    } else {
      callback()
    }
  }

  const data = reactive({
    form: {
    },
    rules: {
      password : [
        {required : true, message : '请输入原密码', trigger : 'blur'}
      ],
      newPassword : [
        {required : true, message : '请输入新密码', trigger : 'blur'}
      ],
      confirmPassword : [
        {validator : validatePass, trigger : 'blur'}
      ],
    },
    user : JSON.parse(localStorage.getItem("user"))
  })

  const updatePassword = () => {
    data.form.id = data.user.id
    data.form.role = data.user.role
    formRef.value.validate(valid => {
      if (valid) {
        request.put('/updatePassword', data.form).then(res => {
          if (res.code === '200') {
            ElMessage.success('修改成功')
            localStorage.removeItem('user')
            setTimeout(() => {
              location.href = '/login'
            }, 500)
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    })
  }
</script>