userInfo.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px">
  3. <el-form-item label="用户昵称:" prop="nickName">
  4. <el-input v-model="userForm.nickName" maxlength="30" />
  5. </el-form-item>
  6. <el-form-item label="手机号码:" prop="phonenumber">
  7. <el-input v-model="userForm.phonenumber" maxlength="11" />
  8. </el-form-item>
  9. <el-form-item label="邮箱:" prop="email">
  10. <el-input v-model="userForm.email" maxlength="50" />
  11. </el-form-item>
  12. <el-form-item label="性别:">
  13. <el-radio-group v-model="userForm.sex">
  14. <el-radio value="0">男</el-radio>
  15. <el-radio value="1">女</el-radio>
  16. </el-radio-group>
  17. </el-form-item>
  18. <el-form-item>
  19. <el-button type="primary" @click="submit">保存</el-button>
  20. <el-button type="danger" @click="close">关闭</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </template>
  24. <script setup lang="ts">
  25. import { updateUserProfile } from '@/api/system/user';
  26. import { propTypes } from '@/utils/propTypes';
  27. const props = defineProps({
  28. user: propTypes.any.isRequired
  29. });
  30. const userForm = computed(() => props.user);
  31. const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  32. const userRef = ref<ElFormInstance>();
  33. const rule: ElFormRules = {
  34. nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  35. email: [
  36. { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
  37. {
  38. type: 'email',
  39. message: '请输入正确的邮箱地址',
  40. trigger: ['blur', 'change']
  41. }
  42. ],
  43. phonenumber: [
  44. {
  45. required: true,
  46. message: '手机号码不能为空',
  47. trigger: 'blur'
  48. },
  49. { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  50. ]
  51. };
  52. const rules = ref<ElFormRules>(rule);
  53. /** 提交按钮 */
  54. const submit = () => {
  55. userRef.value?.validate(async (valid: boolean) => {
  56. if (valid) {
  57. await updateUserProfile(props.user);
  58. proxy?.$modal.msgSuccess('修改成功');
  59. }
  60. });
  61. };
  62. /** 关闭按钮 */
  63. const close = () => {
  64. proxy?.$tab.closePage();
  65. };
  66. </script>