新增用户loginName改name
This commit is contained in:
parent
eca6748670
commit
9b5b3b89c6
|
@ -1,12 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<a-modal
|
<a-modal :title="modalTitle" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel">
|
||||||
:title="modalTitle"
|
|
||||||
:width="900"
|
|
||||||
:visible="visible"
|
|
||||||
:confirmLoading="confirmLoading"
|
|
||||||
@ok="handleSubmit"
|
|
||||||
@cancel="handleCancel"
|
|
||||||
>
|
|
||||||
<a-spin :spinning="confirmLoading">
|
<a-spin :spinning="confirmLoading">
|
||||||
<a-divider orientation="left">基本信息</a-divider>
|
<a-divider orientation="left">基本信息</a-divider>
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
|
@ -16,24 +9,14 @@
|
||||||
<a-input v-decorator="['id']" />
|
<a-input v-decorator="['id']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
||||||
<a-form-item
|
<a-form-item label="账号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="账号"
|
<a-input placeholder="请输入账号" v-decorator="['name', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号!'}]}]" />
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input placeholder="请输入账号" v-decorator="['loginName', {rules: [{required: true, min: 5, message: '请输入至少五个字符的账号!'}]}]" />
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :md="12" :sm="24" >
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="姓名"
|
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input placeholder="请输入姓名" v-decorator="['userName', {rules: [{required: true, message: '请输入姓名!'}]}]" />
|
<a-input placeholder="请输入姓名" v-decorator="['userName', {rules: [{required: true, message: '请输入姓名!'}]}]" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
@ -42,16 +25,8 @@
|
||||||
<a-row :gutter="24" v-if="isAdd">
|
<a-row :gutter="24" v-if="isAdd">
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="密码"
|
<a-input placeholder="请输入密码" type="password" v-decorator="['password', {rules: [{required: true, message: '请输入密码!'},{
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
placeholder="请输入密码"
|
|
||||||
type="password"
|
|
||||||
v-decorator="['password', {rules: [{required: true, message: '请输入密码!'},{
|
|
||||||
validator: validateToNextPassword,
|
validator: validateToNextPassword,
|
||||||
},]}]" />
|
},]}]" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
@ -59,16 +34,8 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="重复密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="重复密码"
|
<a-input placeholder="请再次输入密码" type="password" v-decorator="['confirm', {rules: [{required: true, message: '请再次输入密码!'},
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input
|
|
||||||
placeholder="请再次输入密码"
|
|
||||||
type="password"
|
|
||||||
v-decorator="['confirm', {rules: [{required: true, message: '请再次输入密码!'},
|
|
||||||
{
|
{
|
||||||
validator: compareToFirstPassword,
|
validator: compareToFirstPassword,
|
||||||
}]}]" />
|
}]}]" />
|
||||||
|
@ -79,24 +46,14 @@
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="昵称"
|
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input placeholder="请输入昵称" v-decorator="['nickName']" />
|
<a-input placeholder="请输入昵称" v-decorator="['nickName']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="生日"
|
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday']" />
|
<a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
@ -105,12 +62,8 @@
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||||
label="性别"
|
<a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别!' }]}]">
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
>
|
|
||||||
<a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别!' }]}]" >
|
|
||||||
<a-radio :value="1">男</a-radio>
|
<a-radio :value="1">男</a-radio>
|
||||||
<a-radio :value="2">女</a-radio>
|
<a-radio :value="2">女</a-radio>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
|
@ -119,12 +72,7 @@
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="邮箱"
|
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input placeholder="请输入邮箱" v-decorator="['email']" />
|
<a-input placeholder="请输入邮箱" v-decorator="['email']" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
@ -133,12 +81,7 @@
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :md="12" :sm="24">
|
<a-col :md="12" :sm="24">
|
||||||
<a-form :form="form">
|
<a-form :form="form">
|
||||||
<a-form-item
|
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
||||||
label="手机号"
|
|
||||||
:labelCol="labelCol"
|
|
||||||
:wrapperCol="wrapperCol"
|
|
||||||
has-feedback
|
|
||||||
>
|
|
||||||
<a-input placeholder="请输入手机号" v-decorator="['phoneNumber',{rules: [{ required: true, message: '请输入手机号!' }]}]" />
|
<a-input placeholder="请输入手机号" v-decorator="['phoneNumber',{rules: [{ required: true, message: '请输入手机号!' }]}]" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
@ -149,134 +92,134 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { userAdd, userEdit } from '@/api/security/user'
|
import { userAdd, userEdit } from '@/api/security/user'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: { span: 24 },
|
xs: { span: 24 },
|
||||||
sm: { span: 6 }
|
sm: { span: 6 }
|
||||||
},
|
},
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
xs: { span: 24 },
|
xs: { span: 24 },
|
||||||
sm: { span: 16 }
|
sm: { span: 16 }
|
||||||
},
|
},
|
||||||
modalTitle: '新增菜单',
|
modalTitle: '新增菜单',
|
||||||
visible: false,
|
visible: false,
|
||||||
confirmLoading: false,
|
confirmLoading: false,
|
||||||
form: this.$form.createForm(this),
|
form: this.$form.createForm(this),
|
||||||
birthdayString: [],
|
birthdayString: [],
|
||||||
isAdd: false
|
isAdd: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 新增初始化方法
|
||||||
|
add() {
|
||||||
|
this.modalTitle = '新增用户'
|
||||||
|
this.visible = true
|
||||||
|
this.isAdd = true
|
||||||
|
},
|
||||||
|
// 编辑初始化方法
|
||||||
|
edit(record) {
|
||||||
|
this.modalTitle = '编辑用户'
|
||||||
|
this.confirmLoading = true
|
||||||
|
this.visible = true
|
||||||
|
this.isAdd = false
|
||||||
|
// 基本信息加人表单
|
||||||
|
setTimeout(() => {
|
||||||
|
this.form.setFieldsValue(
|
||||||
|
{
|
||||||
|
id: record.id,
|
||||||
|
name: record.name,
|
||||||
|
userName: record.userName,
|
||||||
|
nickName: record.nickName,
|
||||||
|
sex: record.sex,
|
||||||
|
email: record.email,
|
||||||
|
phoneNumber: record.phoneNumber
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}, 100)
|
||||||
|
// 时间单独处理
|
||||||
|
if (record.birthday != null) {
|
||||||
|
this.form.getFieldDecorator('birthday', { initialValue: moment(record.birthday, 'YYYY-MM-DD') })
|
||||||
|
}
|
||||||
|
this.birthdayString = moment(record.birthday).format('YYYY-MM-DD')
|
||||||
|
this.confirmLoading = false
|
||||||
|
},
|
||||||
|
compareToFirstPassword(rule, value, callback) {
|
||||||
|
const form = this.form
|
||||||
|
if (value && value !== form.getFieldValue('password')) {
|
||||||
|
// eslint-disable-next-line standard/no-callback-literal
|
||||||
|
callback('请确认两次输入密码的一致性!')
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
validateToNextPassword(rule, value, callback) {
|
||||||
// 新增初始化方法
|
const form = this.form
|
||||||
add () {
|
if (value && this.confirmDirty) {
|
||||||
this.modalTitle = '新增用户'
|
form.validateFields(['confirm'], { force: true })
|
||||||
this.visible = true
|
|
||||||
this.isAdd = true
|
|
||||||
},
|
|
||||||
// 编辑初始化方法
|
|
||||||
edit (record) {
|
|
||||||
this.modalTitle = '编辑用户'
|
|
||||||
this.confirmLoading = true
|
|
||||||
this.visible = true
|
|
||||||
this.isAdd = false
|
|
||||||
// 基本信息加人表单
|
|
||||||
setTimeout(() => {
|
|
||||||
this.form.setFieldsValue(
|
|
||||||
{
|
|
||||||
id: record.id,
|
|
||||||
loginName: record.loginName,
|
|
||||||
userName: record.userName,
|
|
||||||
nickName: record.nickName,
|
|
||||||
sex: record.sex,
|
|
||||||
email: record.email,
|
|
||||||
phoneNumber: record.phoneNumber
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}, 100)
|
|
||||||
// 时间单独处理
|
|
||||||
if (record.birthday != null) {
|
|
||||||
this.form.getFieldDecorator('birthday', { initialValue: moment(record.birthday, 'YYYY-MM-DD') })
|
|
||||||
}
|
|
||||||
this.birthdayString = moment(record.birthday).format('YYYY-MM-DD')
|
|
||||||
this.confirmLoading = false
|
|
||||||
},
|
|
||||||
compareToFirstPassword (rule, value, callback) {
|
|
||||||
const form = this.form
|
|
||||||
if (value && value !== form.getFieldValue('password')) {
|
|
||||||
// eslint-disable-next-line standard/no-callback-literal
|
|
||||||
callback('请确认两次输入密码的一致性!')
|
|
||||||
} else {
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
validateToNextPassword (rule, value, callback) {
|
|
||||||
const form = this.form
|
|
||||||
if (value && this.confirmDirty) {
|
|
||||||
form.validateFields(['confirm'], { force: true })
|
|
||||||
}
|
|
||||||
callback()
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 日期需单独转换
|
|
||||||
*/
|
|
||||||
onChange (date, dateString) {
|
|
||||||
if (date == null) {
|
|
||||||
this.birthdayString = []
|
|
||||||
} else {
|
|
||||||
this.birthdayString = moment(date).format('YYYY-MM-DD')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSubmit () {
|
|
||||||
const { form: { validateFields } } = this
|
|
||||||
this.confirmLoading = true
|
|
||||||
validateFields((errors, values) => {
|
|
||||||
if (!errors) {
|
|
||||||
if (this.birthdayString.length > 0) {
|
|
||||||
values.birthday = this.birthdayString
|
|
||||||
}
|
|
||||||
if (values.id) {
|
|
||||||
userEdit(values).then((res) => {
|
|
||||||
this.confirmLoading = false
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.$message.success('编辑成功')
|
|
||||||
this.$emit('ok', values)
|
|
||||||
this.handleCancel()
|
|
||||||
} else {
|
|
||||||
this.$message.error('编辑失败:' + res.msg)
|
|
||||||
}
|
|
||||||
}).finally((res) => {
|
|
||||||
this.confirmLoading = false
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
userAdd(values, { password: values.password }).then((res) => {
|
|
||||||
this.confirmLoading = false
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.$message.success('新增成功')
|
|
||||||
this.$emit('ok', values)
|
|
||||||
this.handleCancel()
|
|
||||||
} else {
|
|
||||||
this.$message.error('新增失败:' + res.msg)
|
|
||||||
}
|
|
||||||
}).finally((res) => {
|
|
||||||
this.confirmLoading = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.confirmLoading = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCancel () {
|
|
||||||
this.form.resetFields()
|
|
||||||
this.visible = false
|
|
||||||
// 清理时间
|
|
||||||
this.birthdayString = ''
|
|
||||||
this.form.getFieldDecorator('birthday', { initialValue: null })
|
|
||||||
}
|
}
|
||||||
|
callback()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 日期需单独转换
|
||||||
|
*/
|
||||||
|
onChange(date, dateString) {
|
||||||
|
if (date == null) {
|
||||||
|
this.birthdayString = []
|
||||||
|
} else {
|
||||||
|
this.birthdayString = moment(date).format('YYYY-MM-DD')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSubmit() {
|
||||||
|
const { form: { validateFields } } = this
|
||||||
|
this.confirmLoading = true
|
||||||
|
validateFields((errors, values) => {
|
||||||
|
if (!errors) {
|
||||||
|
if (this.birthdayString.length > 0) {
|
||||||
|
values.birthday = this.birthdayString
|
||||||
|
}
|
||||||
|
if (values.id) {
|
||||||
|
userEdit(values).then((res) => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success('编辑成功')
|
||||||
|
this.$emit('ok', values)
|
||||||
|
this.handleCancel()
|
||||||
|
} else {
|
||||||
|
this.$message.error('编辑失败:' + res.msg)
|
||||||
|
}
|
||||||
|
}).finally((res) => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
userAdd(values, { password: values.password }).then((res) => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success('新增成功')
|
||||||
|
this.$emit('ok', values)
|
||||||
|
this.handleCancel()
|
||||||
|
} else {
|
||||||
|
this.$message.error('新增失败:' + res.msg)
|
||||||
|
}
|
||||||
|
}).finally((res) => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.confirmLoading = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleCancel() {
|
||||||
|
this.form.resetFields()
|
||||||
|
this.visible = false
|
||||||
|
// 清理时间
|
||||||
|
this.birthdayString = ''
|
||||||
|
this.form.getFieldDecorator('birthday', { initialValue: null })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue