userUpdate.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="hui-flex hui-dialog">
  3. <div class="hui-flex-box hui-dialog-content">
  4. <el-form ref="userForm" :model="userForm" label-position="top">
  5. <el-form-item label="姓名" prop="name">
  6. <el-input v-model="userForm.name"></el-input>
  7. </el-form-item>
  8. <el-form-item label="手机" prop="phone">
  9. <el-input v-model="userForm.phone" disabled></el-input>
  10. </el-form-item>
  11. <el-form-item label="性别" prop="sex">
  12. <el-select v-model="userForm.sex" placeholder="请选择性别">
  13. <el-option label="男" value="M"></el-option>
  14. <el-option label="女" value="W"></el-option>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="邮箱" prop="email">
  18. <el-input v-model="userForm.email" placeholder="请输入邮箱地址"></el-input>
  19. </el-form-item>
  20. </el-form>
  21. </div>
  22. <div class="hui-dialog-submit">
  23. <el-button size="medium" @click="$emit('callback')">取 消</el-button>
  24. <el-button size="medium" type="primary" @click="submit">保 存</el-button>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. import {
  30. updateUserDetails
  31. } from '@/httpApi/loginRegister'
  32. export default {
  33. props: ['user'],
  34. data() {
  35. return {
  36. userForm: {
  37. name: '',
  38. sex: '',
  39. phone: '',
  40. email: ''
  41. }
  42. }
  43. },
  44. created() {
  45. this.userForm = JSON.parse(JSON.stringify(this.user));
  46. },
  47. methods: {
  48. submit() {
  49. this.userForm['id'] = this.userForm.userId;
  50. updateUserDetails(this.userForm).then(res => {
  51. if (res.state) {
  52. this.$message.success('操作成功');
  53. this.$emit('callback', 'init');
  54. }
  55. })
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="scss">
  61. .user-update {
  62. padding: 10px;
  63. }
  64. </style>