新增用户loginName改name

This commit is contained in:
qinjie 2021-09-09 23:29:07 +08:00
parent eca6748670
commit 9b5b3b89c6
1 changed files with 140 additions and 197 deletions

View File

@ -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,10 +92,10 @@
</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 },
@ -172,13 +115,13 @@
}, },
methods: { methods: {
// //
add () { add() {
this.modalTitle = '新增用户' this.modalTitle = '新增用户'
this.visible = true this.visible = true
this.isAdd = true this.isAdd = true
}, },
// //
edit (record) { edit(record) {
this.modalTitle = '编辑用户' this.modalTitle = '编辑用户'
this.confirmLoading = true this.confirmLoading = true
this.visible = true this.visible = true
@ -188,7 +131,7 @@
this.form.setFieldsValue( this.form.setFieldsValue(
{ {
id: record.id, id: record.id,
loginName: record.loginName, name: record.name,
userName: record.userName, userName: record.userName,
nickName: record.nickName, nickName: record.nickName,
sex: record.sex, sex: record.sex,
@ -204,7 +147,7 @@
this.birthdayString = moment(record.birthday).format('YYYY-MM-DD') this.birthdayString = moment(record.birthday).format('YYYY-MM-DD')
this.confirmLoading = false this.confirmLoading = false
}, },
compareToFirstPassword (rule, value, callback) { compareToFirstPassword(rule, value, callback) {
const form = this.form const form = this.form
if (value && value !== form.getFieldValue('password')) { if (value && value !== form.getFieldValue('password')) {
// eslint-disable-next-line standard/no-callback-literal // eslint-disable-next-line standard/no-callback-literal
@ -213,7 +156,7 @@
callback() callback()
} }
}, },
validateToNextPassword (rule, value, callback) { validateToNextPassword(rule, value, callback) {
const form = this.form const form = this.form
if (value && this.confirmDirty) { if (value && this.confirmDirty) {
form.validateFields(['confirm'], { force: true }) form.validateFields(['confirm'], { force: true })
@ -223,14 +166,14 @@
/** /**
* 日期需单独转换 * 日期需单独转换
*/ */
onChange (date, dateString) { onChange(date, dateString) {
if (date == null) { if (date == null) {
this.birthdayString = [] this.birthdayString = []
} else { } else {
this.birthdayString = moment(date).format('YYYY-MM-DD') this.birthdayString = moment(date).format('YYYY-MM-DD')
} }
}, },
handleSubmit () { handleSubmit() {
const { form: { validateFields } } = this const { form: { validateFields } } = this
this.confirmLoading = true this.confirmLoading = true
validateFields((errors, values) => { validateFields((errors, values) => {
@ -270,7 +213,7 @@
} }
}) })
}, },
handleCancel () { handleCancel() {
this.form.resetFields() this.form.resetFields()
this.visible = false this.visible = false
// //
@ -278,5 +221,5 @@
this.form.getFieldDecorator('birthday', { initialValue: null }) this.form.getFieldDecorator('birthday', { initialValue: null })
} }
} }
} }
</script> </script>