ioc-admin-ui/src/views/userManagement/personManagement/messageDialog/userInfoEdit.vue

<template>
    <div>
        <el-dialog v-dialog-drag class="dialog" title="用户信息编辑" :visible.sync="dialogVisible" width="32%" append-to-body
            center>
            <el-divider></el-divider>
            <div style="height: 550px; padding: 20px">
                <el-form ref="form" :model="form" label-position="right" label-width="75px">
                    <el-form-item style="margin-bottom: 0;" label="用户名：" prop="username">
                        <div>
                            <el-input class="username" type="text" v-model="form.username" placeholder="用户名"></el-input>
                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最大长度64个字符，允许英文字母、数字或特殊字符</p>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0; width: 380px; " label-width="65px" label="密码:" prop="password">
                        <div>
                            <el-input class="password" v-model="form.password" placeholder="密码" show-password></el-input>
                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9;">最小长度8个字符，需带有英文字母、数字与特殊字符</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="name">
                        <el-input class="name" v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="电话：" prop="phone">
                        <div style="display: flex;">
                            <el-select class="select" v-model="select">
                                <el-option value="CN+86"></el-option>
                            </el-select>
                            <el-input class="phone" v-model="form.phone" placeholder="请输入手机号">
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="邮箱：" prop="email">
                        <el-input v-model="form.email" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公司：" prop="copporation">
                        <el-input v-model="form.corporation" placeholder="公司"></el-input>
                    </el-form-item>
                    <el-form-item label="部门：" prop="department">
                        <el-input v-model="form.department" placeholder="部门"></el-input>
                    </el-form-item>
                    <div style="display: flex;">
                        <el-form-item label="角色：" prop="role">
                            <el-select v-model="form.role">
                                <el-option value="用户组"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="权限：" prop="permission">
                            <el-select v-model="form.permission">
                                <el-option value="权限级别"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="display: flex;">
                        <el-form-item label="在职状态：" prop="working_status">
                            <el-select v-model="form.working_status">
                                <el-option value="在职"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职务：" prop="post">
                            <el-select v-model="form.post">
                                <el-option value="职务"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="display: flex;">
                        <el-form-item label="账户状态：" prop="account_status">
                            <el-select v-model="form.account_status">
                                <el-option value="正常"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="国籍：" prop="nationality">
                            <el-select v-model="form.nationality">
                                <el-option value="中国"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="avatar">
                        <el-avatar :size="110" :src="testUrl" @click=""></el-avatar>
                        <span>
                            <p style="font-size: 12px; line-height: 20px; color: #E9E9E9; text-align: center;">上传头像</p>
                        </span>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="reset" @click="resetForm('form')">重置</el-button>
                <el-button class="update" @click="editForm('form')">编辑</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            select:'',
            form: {
                username: '',
                password: '',
                name: '',
                phone: '',
                email: '',
                corporation: '',
                department: '',
                role: '',
                permission: '',
                working_status: '',
                post: '',
                account_status: '',
                nationality: ''
            },
            charNum:0,
            testUrl: require('@/assets/images/头像上传@3x.png')
        }
    },
    watch: { 
    },
    methods: {
        handleNodeClick() {

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        editForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //
                }
            })
        }
    }

}
</script>
<style lang="less" scoped>
/deep/.el-dialog {
    height: 750px !important;
}
.next{
    background-color: #2EA8E6;
    color: #FFFFFF;
}
.reset{
    background-color: #B3B3B3;
    color: #FFFFFF;
}
.update{
    background-color: #2EA8E6;
    color: #FFFFFF;
}

.avatar {
    position: absolute;
    right: 40px;
    top: 100px;
}

.select {
    /deep/.el-input__inner {
        width: 100px;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.phone {
    /deep/.el-input__inner {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.username {
    /deep/.el-input__inner {
        width: 300px !important;
    }
}

.password {
    margin-left: 10px;
        /deep/.el-input__inner {
        width: 300px !important;
    }
    /deep/.el-input__suffix-inner {
        position: absolute;
        right: 15px !important;
    }
}

.name {
    /deep/.el-input__inner {
        width: 300px !important;
    }
}

.el-form {
    .el-form-item {
        margin-bottom: 15px;
        /deep/.el-form-item__label {
            padding: 0;
            font-size: 15px;
        }
        /deep/.el-input__inner {
            height: 30px;
            background-color: #F7F9FA;
        }
    }
}



/deep/.el-dialog {
    height: 30vh;
}

/deep/.el-dialog__title {
    margin-right: 450px;
}

/deep/.el-dialog__headerbtn {
    font-size: 25px;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 95%;
    margin: 0;
    margin-left: 2.5%;
}

/deep/.el-dialog__footer {
    margin-top: 0px;
}

.el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    margin: 30px;
    padding: 5px;
}
</style>