新增用户loginName改name

src/views/security/user/UserForm.vue

@@ -1,12 +1,5 @@
 <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-divider orientation="left">基本信息</a-divider>
       <a-row :gutter="24">
@@ -16,24 +9,14 @@
               <a-input v-decorator="['id']" />
             </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>
         </a-col>
-        <a-col :md="12" :sm="24" >
+        <a-col :md="12" :sm="24">
           <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-form-item>
           </a-form>
@@ -42,16 +25,8 @@
       <a-row :gutter="24" v-if="isAdd">
         <a-col :md="12" :sm="24">
           <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,
                 },]}]" />
             </a-form-item>
@@ -59,16 +34,8 @@
         </a-col>
         <a-col :md="12" :sm="24">
           <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,
                                                   }]}]" />
@@ -79,24 +46,14 @@
       <a-row :gutter="24">
         <a-col :md="12" :sm="24">
           <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-form-item>
           </a-form>
         </a-col>
         <a-col :md="12" :sm="24">
           <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-form-item>
           </a-form>
@@ -105,12 +62,8 @@
       <a-row :gutter="24">
         <a-col :md="12" :sm="24">
           <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="2">女</a-radio>
               </a-radio-group>
@@ -119,12 +72,7 @@
         </a-col>
         <a-col :md="12" :sm="24">
           <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-form-item>
           </a-form>
@@ -133,12 +81,7 @@
       <a-row :gutter="24">
         <a-col :md="12" :sm="24">
           <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-form-item>
           </a-form>
@@ -149,134 +92,134 @@
 </template>
 
 <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>