修改用户

src/components/users/users.vue

@@ -34,8 +34,8 @@
           </template>
         </el-table-column>
         <el-table-column  label="操作" >
-          <template >
+          <template slot-scope="scope">
-            <el-button size="mini" type="primary" icon="el-icon-edit"></el-button>
+            <el-button @click="edit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
             <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
             <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
               <el-button  size="mini" type="warning" icon="el-icon-setting"></el-button>
@@ -48,7 +48,7 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="queryInfo.pagenum"
-        :page-sizes="[1, 2, 20, 50]"
+        :page-sizes="[10, 15, 20, 50]"
         :page-size="queryInfo.pagesize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
@@ -56,7 +56,7 @@
 
     </el-card>
 
-    <el-dialog title="添加用户" :visible.sync="dialogVisible" @close="formClose">
+    <el-dialog title="添加用户" :visible.sync="dialogVisible" @close="formClose('add')">
       <!--内在主体区-->
 
       <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="70px" >
@@ -82,6 +82,29 @@
       </span>
     </el-dialog>
 
+    <el-dialog title="修改用户" :visible.sync="editVisible" @close="formClose('edit')">
+      <!--内在主体区-->
+
+      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="70px" >
+        <el-form-item label="用户名" prop="username">
+          <el-input disabled v-model="editForm.username"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="editForm.email"></el-input>
+        </el-form-item>
+        <el-form-item label="手机" prop="mobile">
+          <el-input v-model="editForm.mobile"></el-input>
+        </el-form-item>
+
+      </el-form>
+
+      <!--底部区-->
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editSubmitForm">确 定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 
 </template>
@@ -100,46 +123,65 @@ export default {
       const reg = /^1\d{10}$/
       reg.test(value) ? callback() : callback(new Error('手机号不合法'))
     }
+    const editRule = {
+      username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+      ],
+      email: [
+        { required: true, message: '请输入邮箱', trigger: 'blur' },
+        { min: 3, message: '长度错误', trigger: 'blur' },
+        { validator: checkemail, trigger: 'blur' }
+      ],
+      mobile: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { min: 11, max: 11, message: '长度为11位', trigger: 'blur' },
+        { validator: checkMobile, trigger: 'blur' }
+      ]
+    }
+
+    const rule = {
+      ...editRule,
+      password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+      ]
+    }
+
     return {
       dialogVisible: false,
+      editVisible: false,
       addForm: {
         username: '',
         password: '',
         email: '',
         mobile: ''
       },
-      rules: {
+      editForm: {
-        username: [
+        username: '',
-          { required: true, message: '请输入用户名', trigger: 'blur' },
+        email: '',
-          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
+        mobile: ''
-        ],
-        password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 3, max: 10, message: '长度在3到10之间', trigger: 'blur' }
-        ],
-        email: [
-          { required: true, message: '请输入邮箱', trigger: 'blur' },
-          { min: 3, message: '长度错误', trigger: 'blur' },
-          { validator: checkemail, trigger: 'blur' }
-        ],
-        mobile: [
-          { required: true, message: '请输入手机号', trigger: 'blur' },
-          { min: 11, max: 11, message: '长度为11位', trigger: 'blur' },
-          { validator: checkMobile, trigger: 'blur' }
-        ]
       },
+      editRules: editRule,
+      rules: rule,
       queryInfo: {
         query: '',
         pagenum: 1,
-        pagesize: 1
+        pagesize: 5
       },
       userList: [],
       total: 0
     }
   },
   methods: {
-    formClose () {
+    edit (data) {
-      this.resetForm()
+      ['id', 'username', 'email', 'mobile'].forEach(v => {
+        this.editForm[v] = data[v]
+      })
+      this.editVisible = true
+    },
+    formClose (obj) {
+      this.resetForm(obj)
     },
     submitForm () {
       this.$refs.addFormRef.validate(async validate => {
@@ -147,7 +189,7 @@ export default {
           return
         }
         const { data: res } = await this.$http.post('users', this.addForm)
-        if (res.meta.status !== 201) {
+        if (res.meta.status !== 200) {
           return this.$message.error(res.meta.msg)
         }
         this.$message.success(res.meta.msg)
@@ -155,8 +197,22 @@ export default {
         await this.getUserList()
       })
     },
-    resetForm () {
+    editSubmitForm () {
-      this.$refs.addFormRef.resetFields()
+      this.$refs.editFormRef.validate(async validate => {
+        if (!validate) {
+          return
+        }
+        const { data: res } = await this.$http.put('users/' + this.editForm.id, this.editForm)
+        if (res.meta.status !== 200) {
+          return this.$message.error(res.meta.msg)
+        }
+        this.editVisible = false
+        await this.getUserList()
+        return this.$message.success(res.meta.msg)
+      })
+    },
+    resetForm (obj) {
+      this.$refs[obj + 'FormRef'].resetFields()
     },
     handleSizeChange (val) {
       this.queryInfo.pagesize = val
@@ -185,7 +241,7 @@ export default {
       this.total = res.data.total
     }
   },
-  created () {
+  mounted () {
     this.getUserList()
   }
 }