panqihua
2 years ago
parent
2c1d292491
commit
cb9972642d
@ -0,0 +1,192 @@ |
||||
<template> |
||||
<div> |
||||
<h3>基本信息</h3> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
||||
<el-row> |
||||
<el-col :span="18"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="用户昵称" prop="nickName"> |
||||
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12" v-if="showDetail"> |
||||
<el-form-item label="用户ID"> |
||||
<el-input v-model="form.userId" readonly /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="手机号" prop="phonenumber"> |
||||
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="微信昵称" prop="wechatNickName"> |
||||
<el-input v-model="form.wechatNickName" placeholder="请输入微信昵称" maxlength="50" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="性别"> |
||||
<el-select v-model="form.sex" placeholder="请选择性别"> |
||||
<el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" |
||||
:label="dict.label" :value="dict.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="钱包余额" prop="balance"> |
||||
<el-input-number v-model="form.balance" :precision="2" :step="0.01" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item v-if="form.userId == undefined" label="登陆密码" prop="password"> |
||||
<el-input v-model="form.password" placeholder="默认123456" type="password" maxlength="20" |
||||
show-password /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="推荐人"> |
||||
<el-autocomplete :fetch-suggestions="queryByPhone" :trigger-on-focus="false" clearable |
||||
placeholder="请输入手机号" v-model="form.referrerPhone" |
||||
@select="item => form.referrerId = item.userId" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="推荐人ID"> |
||||
<el-input v-model="form.referrerId" readonly /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<template v-if="showDetail"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="注册时间"> |
||||
<el-input :value="parseTime(form.createTime)" readonly disable /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="最近登陆时间"> |
||||
<el-input :value="parseTime(form.loginDate)" readonly disable /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<el-form-item label="状态"> |
||||
<el-radio-group v-model="form.status"> |
||||
<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" |
||||
:label="dict.value">{{ |
||||
dict.label |
||||
}}</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
<el-col :span="5" :offset="1"> |
||||
<user-avatar :circle="false" show-bottom-label /> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer" style="text-align:center"> |
||||
<el-button type="primary" @click="submitForm">保存</el-button> |
||||
<el-button @click="reset">重置</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
|
||||
import userAvatar from "./userAvatar"; |
||||
import { phoneSelect, addUser, updateUser } from "@/api/system/user"; |
||||
|
||||
export default { |
||||
name: 'BaseForm', |
||||
components: { userAvatar }, |
||||
dicts: ['sys_normal_disable', 'sys_user_sex'], |
||||
props: { |
||||
reset: Function, |
||||
form: Object, |
||||
showDetail: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
onSuccess: { |
||||
type: Function, |
||||
required: false |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
// 表单校验 |
||||
rules: { |
||||
nickName: [ |
||||
{ required: true, message: "用户昵称不能为空", trigger: "blur" } |
||||
], |
||||
password: [ |
||||
{ required: true, message: "用户密码不能为空", trigger: "blur" }, |
||||
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' } |
||||
], |
||||
email: [ |
||||
{ |
||||
type: "email", |
||||
message: "请输入正确的邮箱地址", |
||||
trigger: ["blur", "change"] |
||||
} |
||||
], |
||||
phonenumber: [ |
||||
{ |
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, |
||||
message: "请输入正确的手机号码", |
||||
trigger: "blur" |
||||
} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 模糊查询手机号 |
||||
queryByPhone(queryString, cb) { |
||||
phoneSelect(queryString).then(response => { |
||||
const data = response.data.map(item => { |
||||
return { |
||||
value: item.phonenumber, |
||||
userId: item.userId |
||||
} |
||||
}) |
||||
cb(data) |
||||
}) |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate(valid => { |
||||
if (valid) { |
||||
if (this.form.userId != undefined) { |
||||
updateUser(this.form).then(response => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.onSuccess && this.onSuccess() |
||||
}); |
||||
} else { |
||||
this.form.avatar = this.$store.getters.avatar.replace(process.env.VUE_APP_BASE_API, '') |
||||
addUser(this.form).then(response => { |
||||
console.info(this.onSuccess) |
||||
this.$modal.msgSuccess("新增成功"); |
||||
this.onSuccess && this.onSuccess() |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue