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