realty/virgo.wzfrontend/console/src/layout/components/userUpdate.vue

<template>
	<div class="hui-flex hui-dialog">
		<div class="hui-flex-box hui-dialog-content">
			<el-form ref="userForm" :model="userForm" label-position="top">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="userForm.name"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="phone">
					<el-input v-model="userForm.phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="userForm.sex" placeholder="请选择性别">
						<el-option label="男" value="M"></el-option>
						<el-option label="女" value="W"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="userForm.email" placeholder="请输入邮箱地址"></el-input>
				</el-form-item>
				<el-form-item label="头像" class="hui-textarea">
					<upload ref="image" :list="responsibility" type="insert" :maxLen="1"></upload>
				</el-form-item>
			</el-form>
		</div>
		<div class="hui-dialog-submit">
			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
			<el-button size="medium" type="primary" @click="submit">保 存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		updateUserDetails
	} from '@/httpApi/loginRegister'
	import upload from '@/components/common/upload'
	export default {
		props: ['user'],
		data() {
			return {
				userForm: {
					name: '',
					sex: '',
					phone: '',
					email: ''
				},
				responsibility: []
			}
		},
		mounted() {
			this.userForm = JSON.parse(JSON.stringify(this.user));
			if (this.userForm.portrait) this.responsibility = [{
				url: this.userForm.portrait,
				type: 'png'
			}]
		},
		methods: {
			submit() {
				this.userForm['id'] = this.userForm.userId;
				if (this.$refs.image.fileList.length > 0) this.userForm['portrait'] = this.$refs
					.image.fileList[0].url;
				updateUserDetails(this.userForm).then(res => {
					if (res.state) {
						this.$message.success('操作成功');
						this.$emit('callback', 'init');
					}
				})
			}
		},
		components: {
			upload
		},
	}
</script>

<style lang="scss">
	.user-update {
		padding: 10px;
	}
</style>