<template> <div> <div class="title">修改基本信息</div> <el-form ref="form" :model="form" label-width="100px" :rules="rules"> <el-form-item label="用户名:" prop="userName"> <el-input v-model="form.userName" /> </el-form-item> <el-form-item label="所在部门:" prop="deptId"> <el-select v-model="form.deptId" style="width:100%" placeholder="请选择"> <el-option v-for="item in departList" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="电话号码:"> <el-input v-model="form.phone" /> </el-form-item> <el-form-item label="邮箱:"> <el-input v-model="form.email" /> </el-form-item> </el-form> <div class="btn"> <el-button type="primary" @click="confirm">确认修改</el-button> </div> </div> </template> <script> import { mapGetters } from 'vuex' import { rules } from '../../const' import { updateInfo } from '../../api' export default { data() { let { deptId, email, phone, userId, userName } = this.$store.state.user.userBaseInfo return { form: { deptId: deptId, email: email, phone: phone, userId: userId, userName: userName }, rules } }, computed: { ...mapGetters('depart', ['departList']), }, methods: { confirm() { this.$refs.form.validate((valid) => { if (valid) { updateInfo(this.form).then(res => { this.$message.success('操作成功') }) } else { console.log('error submit!!') return false } }) } } } </script> <style lang="scss" scoped> .btn { margin-top: 50px; text-align: center; } .title { width: 100%; height: 60px; background: rgba(226, 235, 255, 0.39); line-height: 60px; font-size: 18px; color: #333; font-weight: 500; text-align: center; margin-bottom: 30px; } .el-form { width: 500px; margin: 0 auto; } </style>