<template> 
 | 
  <el-form ref="form" :model="user" :rules="rules" label-width="80px"> 
 | 
    <el-form-item label="用户昵称" prop="nickName"> 
 | 
      <el-input v-model="user.nickName" maxlength="30" /> 
 | 
    </el-form-item>  
 | 
    <el-form-item label="手机号码" prop="phonenumber"> 
 | 
      <el-input v-model="user.phonenumber" maxlength="11" /> 
 | 
    </el-form-item> 
 | 
    <el-form-item label="邮箱" prop="email"> 
 | 
      <el-input v-model="user.email" maxlength="50" /> 
 | 
    </el-form-item> 
 | 
    <el-form-item label="性别"> 
 | 
      <el-radio-group v-model="user.sex"> 
 | 
        <el-radio label="0">男</el-radio> 
 | 
        <el-radio label="1">女</el-radio> 
 | 
      </el-radio-group> 
 | 
    </el-form-item> 
 | 
    <el-form-item> 
 | 
      <el-button type="primary" size="mini" @click="submit">保存</el-button> 
 | 
      <el-button type="danger" size="mini" @click="close">关闭</el-button> 
 | 
    </el-form-item> 
 | 
  </el-form> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import { updateUserProfile } from "@/api/system/user"; 
 | 
  
 | 
export default { 
 | 
  props: { 
 | 
    user: { 
 | 
      type: Object 
 | 
    } 
 | 
  }, 
 | 
  data() { 
 | 
    return { 
 | 
      // 表单校验 
 | 
      rules: { 
 | 
        nickName: [ 
 | 
          { required: true, message: "用户昵称不能为空", trigger: "blur" } 
 | 
        ], 
 | 
        email: [ 
 | 
          { required: true, message: "邮箱地址不能为空", trigger: "blur" }, 
 | 
          { 
 | 
            type: "email", 
 | 
            message: "'请输入正确的邮箱地址", 
 | 
            trigger: ["blur", "change"] 
 | 
          } 
 | 
        ], 
 | 
        phonenumber: [ 
 | 
          { required: true, message: "手机号码不能为空", trigger: "blur" }, 
 | 
          { 
 | 
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, 
 | 
            message: "请输入正确的手机号码", 
 | 
            trigger: "blur" 
 | 
          } 
 | 
        ] 
 | 
      } 
 | 
    }; 
 | 
  }, 
 | 
  methods: { 
 | 
    submit() { 
 | 
      this.$refs["form"].validate(valid => { 
 | 
        if (valid) { 
 | 
          updateUserProfile(this.user).then(response => { 
 | 
            this.$modal.msgSuccess("修改成功"); 
 | 
          }); 
 | 
        } 
 | 
      }); 
 | 
    }, 
 | 
    close() { 
 | 
      this.$store.dispatch("tagsView/delView", this.$route); 
 | 
      this.$router.push({ path: "/index" }); 
 | 
    } 
 | 
  } 
 | 
}; 
 | 
</script> 
 |