Files
cai-ui/src/views/cai/user/user-add-update-dialog.vue
dute7liang 0b220e9e45 init
2024-01-02 23:41:24 +08:00

108 lines
3.2 KiB
Vue

<template>
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="昵称" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入昵称" />
</el-form-item>
<el-form-item label="头像" prop="avatar">
<image-upload2 v-model="form.avatar"/>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio :label="2"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="可发动态" prop="sendDynamic">
<el-radio-group v-model="form.sendDynamic">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="open = false"> </el-button>
</div>
</el-dialog>
</template>
<script>
import ImageUpload from '@/components/ImageUpload/index'
import { addBanner, getBanner, updateBanner } from '@/api/cai/banner'
import { addUser, getUser, updateUser } from '@/api/cai/user'
export default {
components: {
ImageUpload,
},
data () {
return {
open: false,
title: '',
form:{
id: undefined,
nickname: undefined,
avatar: undefined,
gender: undefined,
sendDynamic: undefined,
mobile: undefined,
},
// 表单校验
rules: {
mobile: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
nickname: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
avatar: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
gender: [
{ required: true, message: "数据不能为空", trigger: "blur" }
],
sendDynamic: [
{ required: true, message: "数据不能为空", trigger: "blur" }
]
},
buttonLoading: false,
}
},
created() {
},
methods: {
init (id) {
this.form.id = id || undefined;
this.title = "修改用户";
this.open = true;
this.$nextTick(() => {
this.$refs['form'].resetFields();
getUser(id).then(response => {
this.form = response.data;
});
})
},
// 表单提交
submitForm () {
this.$refs['form'].validate((valid) => {
if (valid) {
this.buttonLoading = true;
updateUser(this.form).then(data => {
this.$modal.msgSuccess("修改成功");
this.buttonLoading = false;
this.open = false
this.$emit('refreshDataList')
}).finally(() => {
this.buttonLoading = false;
});
}
})
},
}
}
</script>