xm
2024-06-14 722af26bc6fec32bb289b1df51a9016a4935610f
提交 | 用户 | 时间
722af2 1 <template>
X 2   <el-form ref="form" :model="user" :rules="rules" label-width="80px">
3     <el-form-item label="用户昵称" prop="nickName">
4       <el-input v-model="user.nickName" maxlength="30" />
5     </el-form-item>
6     <el-form-item label="手机号码" prop="phonenumber">
7       <el-input v-model="user.phonenumber" maxlength="11" />
8     </el-form-item>
9     <el-form-item label="邮箱" prop="email">
10       <el-input v-model="user.email" maxlength="50" />
11     </el-form-item>
12     <el-form-item label="性别">
13       <el-radio-group v-model="user.sex">
14         <el-radio label="0">男</el-radio>
15         <el-radio label="1">女</el-radio>
16       </el-radio-group>
17     </el-form-item>
18     <el-form-item>
19       <el-button type="primary" size="mini" @click="submit">保存</el-button>
20       <el-button type="danger" size="mini" @click="close">关闭</el-button>
21     </el-form-item>
22   </el-form>
23 </template>
24
25 <script>
26 import { updateUserProfile } from "@/api/system/user";
27
28 export default {
29   props: {
30     user: {
31       type: Object
32     }
33   },
34   data() {
35     return {
36       // 表单校验
37       rules: {
38         nickName: [
39           { required: true, message: "用户昵称不能为空", trigger: "blur" }
40         ],
41         email: [
42           { required: true, message: "邮箱地址不能为空", trigger: "blur" },
43           {
44             type: "email",
45             message: "请输入正确的邮箱地址",
46             trigger: ["blur", "change"]
47           }
48         ],
49         phonenumber: [
50           { required: true, message: "手机号码不能为空", trigger: "blur" },
51           {
52             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
53             message: "请输入正确的手机号码",
54             trigger: "blur"
55           }
56         ]
57       }
58     };
59   },
60   methods: {
61     submit() {
62       this.$refs["form"].validate(valid => {
63         if (valid) {
64           updateUserProfile(this.user).then(response => {
65             this.$modal.msgSuccess("修改成功");
66           });
67         }
68       });
69     },
70     close() {
71       this.$tab.closePage();
72     }
73   }
74 };
75 </script>