addUser.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div >
  3. <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  4. <el-form-item label="会员昵称" prop="nickname">
  5. <el-input v-model="form.nickname" placeholder="请输入用户昵称" />
  6. </el-form-item>
  7. <el-form-item label="手机号码" prop="phone">
  8. <el-input v-model="form.phone" placeholder="请输入手机号码" />
  9. </el-form-item>
  10. <el-form-item label="状态">
  11. <el-radio-group v-model="form.status">
  12. <el-radio :label="item.dictValue" v-for="item in statusOptions" >{{item.dictLabel}}</el-radio>
  13. </el-radio-group>
  14. </el-form-item>
  15. </el-form>
  16. <div style="text-align:right;">
  17. <el-button type="primary" @click="submitForm">确 定</el-button>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. import { listUser, getUser, delUser, addUser, updateUser, exportUser } from "@/api/store/user";
  23. export default {
  24. name: "add",
  25. data() {
  26. return {
  27. statusOptions:[],
  28. // 表单参数
  29. form: {
  30. status:"1"
  31. },
  32. // 表单校验
  33. rules: {
  34. phone: [
  35. { required: true, message: "手机号不能为空", trigger: "blur" }
  36. ],
  37. nickname: [
  38. { required: true, message: "会员昵称不能为空", trigger: "blur" }
  39. ],
  40. }
  41. };
  42. },
  43. created() {
  44. this.getDicts("user_status").then((response) => {
  45. this.statusOptions = response.data;
  46. });
  47. },
  48. methods: {
  49. submitForm() {
  50. this.$refs["form"].validate(valid => {
  51. if (valid) {
  52. addUser(this.form).then(response => {
  53. if (response.code === 200) {
  54. this.msgSuccess("新增成功");
  55. this.$emit("addUser")
  56. }
  57. });
  58. }
  59. });
  60. },
  61. }
  62. };
  63. </script>
  64. <style scoped>
  65. </style>