<template>
|
<!--添加用户dialog-->
|
<el-dialog title="添加用户" :visible.sync="isShow" custom-class="custom-dialog" @close='cancelCreateUser()'>
|
<el-form label-position="right" status-icon :model="userInfo" :rules="myRules" size="small" ref="addUserForm">
|
<el-form-item label="用户名：" prop="user">
|
<el-input auto-complete="off" v-model="userInfo.user"></el-input>
|
</el-form-item>
|
<el-form-item label="真实姓名：" prop="name">
|
<el-input auto-complete="off" v-model="userInfo.name"></el-input>
|
</el-form-item>
|
<el-form-item label="密码：" prop="password">
|
<el-input auto-complete="off" v-model="userInfo.password"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancelCreateUser()">取 消</el-button>
|
<el-button type="primary" @click="createUser()">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!--添加用户dialog end-->
|
</template>
|
|
<script>
|
import { isvalidUsername, isValidRealName, isValidPassword } from '@/utils/validate'
|
export default {
|
name: 'createUserDialog',
|
props: {
|
isVisible: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
isVisible(val) {
|
this.isShow = val
|
if (!val) {
|
this.$refs.addUserForm.resetFields()
|
}
|
}
|
},
|
data() {
|
// 登录名自定义规则
|
const rules1 = (rule, value, callback) => {
|
if (!isvalidUsername(value)) {
|
callback(new Error(`可用字母、数字、下划线，需以字母开头`))
|
} else if (value.length < 4) {
|
callback(new Error(`用户名不能低于4位`))
|
} else {
|
callback()
|
}
|
}
|
// 真实姓名验证
|
const rules2 = (rule, value, callback) => {
|
if (!isValidRealName(value)) {
|
callback(new Error(`只能输入字母、中文`))
|
} else if (value.length < 2) {
|
callback(new Error(`姓名不能低于2位`))
|
} else {
|
callback()
|
}
|
}
|
// 密码自定义规则
|
const rulesPass = (rule, value, callback) => {
|
if (!isValidPassword(value)) {
|
callback(new Error(`可用字母、数字，长度不低于6位`))
|
} else if (value.length < 6) {
|
callback(new Error(`密码不能低于6位`))
|
} else {
|
callback()
|
}
|
}
|
return {
|
isShow: this.isVisible,
|
userInfo: {
|
user: '', // 登录名
|
name: '', // 真实姓名
|
password: ''// 密码
|
},
|
myRules: {
|
user: [
|
{ required: true, message: '用户名不能为空', trigger: ['blur', 'change'] },
|
// 自定义规则
|
{ validator: rules1, trigger: ['blur', 'change'] }
|
],
|
name: [
|
{ required: true, message: '姓名不能为空', trigger: ['blur', 'change'] },
|
{ validator: rules2, trigger: ['blur', 'change'] }
|
],
|
password: [
|
{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] },
|
// 自定义规则
|
{ validator: rulesPass, trigger: ['blur', 'change'] }
|
]
|
}
|
}
|
},
|
methods: {
|
createUser() {
|
this.$refs.addUserForm.validate((valid) => {
|
if (valid) {
|
const temp = {}
|
for (const prop in this.userInfo) {
|
if (this.userInfo.hasOwnProperty(prop)) {
|
temp[prop] = this.userInfo[prop]
|
}
|
}
|
this.$emit('submit', { action: 'confirm', data: temp })
|
// this.$refs.addUserForm.resetFields()
|
} else {
|
return false
|
}
|
})
|
},
|
cancelCreateUser() {
|
this.$emit('submit', { action: 'cancel' })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
