Bootstrap

ElementUI 使用Dialog实现弹窗添加功能(用户添加,两次输入密码进行比较)

在这里插入图片描述

新增员工按钮

<el-button @click="editAddUser()" type="primary" size="mini" round><i class="el-icon-delete"></i> 新增员工
               </el-button>

点击按钮触发函数

//打开添加用户弹窗
editAddUser() {
     this.addUserVisible = true;
 },

添加员工 AddUser.vue内容

<template>
    <div>
        <el-dialog :title="title" :visible.sync="addUserVisible"  width="55%"
                   :before-close="handleCancel" :close-on-click-modal="false" @open="openAddUser()">
            <el-form label-position="right" label-width="100px" :inline="true" :model="userInfo" :rules="rules" ref="user"
                     style="padding: 0px 70px 0px 10px;" class="demo-ruleForm">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="userInfo.userName" @blur="checkUserName" clearable placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名" prop="realName">
                    <el-input v-model="userInfo.realName" clearable placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="userInfo.password" placeholder="请输入登录密码"
                              autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="userInfo.checkPassword"
                              placeholder="请确认登录密码"
                              autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="identity">
                    <el-input v-model="userInfo.identity" clearable placeholder="请输入身份证号"></el-input>
                </el-form-item>

                <el-form-item label="家庭地址" prop="address">
                    <el-input v-model="userInfo.address" clearable placeholder="请输入家庭地址"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="userInfo.phone" clearable placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="userInfo.sex">
                        <el-radio label="1"></el-radio>
                        <el-radio label="0"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="职业称谓" prop="position">
                    <el-input v-model.number="userInfo.position" clearable placeholder="请输入职业称谓"></el-input>
                </el-form-item>
                <el-form-item label="员工类型" prop="type">
                    <el-radio-group v-model="userInfo.roleId">
                        <el-radio label="1">超级管理员</el-radio>
                        <el-radio label="2">普通员工</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit('user')">创建用户</el-button>
                <el-button @click="resetForm('user')">重置信息</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "AddUser",
        props: {
            addUserVisible: Boolean,
            data: [Object, Boolean],
            title: String,
        },
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.userInfo.checkPassword !== '') {
                        this.$refs.user.validateField('checkPassword');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userInfo.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var checktel = (rule, value, callback) => {
                if (!value || value === "") {
                    return callback(new Error('手机号码不能为空'));
                }
                if (!(/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(value))) {
                    callback(new Error('请输入合法的手机号码'));
                } else {
                    callback();
                }
            };
            var checkidentity = (rule, value, callback) => {
                if (!value || value === "") {
                    return callback(new Error('身份证号不能为空'));
                }
                if (!(/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))) {
                    callback(new Error('请输入合法的身份证号码'));
                } else {
                    callback();
                }
            };
            return {
                userInfo: {
                    userId: '',
                    userName: '',
                    realName: '',
                    identity: '',
                    sex: '1',
                    address: '',
                    phone: '',
                    position: '',
                    roleId: '1',
                    roleName: '',
                    userStatus: '1',
                    password: '',
                    checkPassword: ''
                },
                rules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],
                    checkPassword: [
                        {required: true, validator: validatePass2, trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入真实名字', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    identity: [
                        {required: true, validator: checkidentity, trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入家庭地址', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, validator: checktel, trigger: 'blur'},
                    ],
                    position: [
                        {required: true, message: '请输入职业称谓', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            openAddUser() {
                this.$nextTick(function () {
                    this.$refs['user'].resetFields();
                    for (var key in this.entity) {
                        if (this.entity.hasOwnProperty(key)) {
                            this.entity[key] = '';
                        }
                    }
                });
            },
            //关闭弹窗
            handleCancel() {
                this.$refs['user'].resetFields();
                this.$emit('cancel');
            },
            onSubmit(formName) {
                let formData = this.userInfo;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('val-change', formData);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            checkUserName(){
                let app = this;
                let data={
                    userName:app.userInfo.userName
                }
                app.$Api.checkUserName(data, function (result) {
                    if (result.result == "false") {
                        app.$notify({
                            title: '温馨提示:',
                            message: result.message,
                            type: 'warning'
                        });
                        app.userInfo.userName='';
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>

导入AddUser.vue

import AddUser from "~/views/UserManage/AddUser.vue";

components中加入AddUser

components: {
     AddUser
 },

使用AddUser组件

<AddUser
    :title="addUserTitle"
    :addUserVisible="addUserVisible"
    @val-change="addUser"
    @cancel="addUserVisible = false"
></AddUser>
  • title 为Dialog框左上角添加员工标题字样
  • addUserVisible 控制Dialog框显示和隐藏
  • @val-change AddUser组件将添加数据传递回父组件 父组件执行此函数进行后台添加
  • @cancel 关闭Dialog框

data中定义数据

data() {
    return {
        //默认为false,Dialog不显示
		 addCarVisible: false,
        //Dialog的标题
         addCarTitle: "添加车辆",
	}
}

调用函数

 //打开添加用户弹窗
editAddUser() {
    this.addUserVisible = true;
},
//添加用户
addUser(data) {
    let APP = this;
    APP.$Api.addUser(data, function (result) {
        if (result.result == "true") {
            APP.$notify.success({
                title: '温馨提示:',
                message: '员工' + result.message,
            });
            APP.addUserVisible = false;
            APP.queryUserList();
        } else {
            APP.$notify.error({
                title: '温馨提示:',
                message: '员工' + result.message
            });
            APP.addUserVisible = true;
        }
    });
},
;