.

src/router.js

@@ -31,6 +31,11 @@ const router = new Router({
                     name: 'users',
                     component: () => import(/* webpackChunkName: "users" */ './views/Users.vue'),
                 },
+                {
+                    path: '/userEdit',
+                    name: 'userEdit',
+                    component: () => import(/* webpackChunkName: "userEdit" */ './views/UserEdit.vue'),
+                },
                 {
                     path: '/products',
                     name: 'products',

src/views/UserEdit.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
+            label-position="right" size="small">
+            <el-form-item prop="avatar" label="头像">
+                <single-upload v-model="formData.avatar"></single-upload>
+            </el-form-item>
+            <el-form-item prop="username" label="用户名">
+                <el-input v-model="formData.username"></el-input>
+            </el-form-item>
+            <el-form-item prop="nickname" label="昵称">
+                <el-input v-model="formData.nickname"></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="手机">
+                <el-input v-model="formData.phone"></el-input>
+            </el-form-item>
+            <el-form-item prop="coin" label="余额">
+                <el-input-number v-model="formData.coin"></el-input-number>
+            </el-form-item>
+            <el-form-item prop="authorities" label="角色">
+                <el-select v-model="formData.authorities" value-key='id'
+                    multiple>
+                    <el-option v-for="item in authorities" :label="item.name"
+                        :value="item" :key="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="save" :loading="loading">保存
+                </el-button>
+                <el-button type="danger" @click="del" :loading="loading" plain>
+                    删除
+                </el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    created() {
+        if (this.$route.params.formData) {
+            this.formData = this.$route.params.formData;
+        } else {
+            this.$http.get(`/user/get/${this.$route.query.id}`).then(res => {
+                if (res.success) {
+                    this.formData = res.data;
+                }
+            });
+        }
+        this.$http.get('/authority/all').then(res => {
+            if (res.success) {
+                this.authorities = res.data;
+            }
+        });
+    },
+    data() {
+        return {
+            rules: {},
+            formData: {
+                authorities: [],
+            },
+            loading: false,
+            authorities: [],
+        };
+    },
+    methods: {
+        save() {
+            this.loading = true;
+            this.$axios
+                .post('/user/save', this.formData)
+                .then(res => {
+                    this.loading = false;
+                    if (res.data.success) {
+                        this.$message.success('保存成功');
+                    } else {
+                        this.$message.error(res.data.error);
+                    }
+                })
+                .catch(e => {
+                    this.loading = false;
+                    console.log(e);
+                });
+        },
+        del() {
+            this.$confirm('此操作不可恢复, 是否继续删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    this.loading = true;
+                    return this.$axios.delete(`/user/${this.formData.id}`);
+                })
+                .then(res => {
+                    this.loading = false;
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    this.loading = false;
+                    console.log(e);
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+</style>>

src/views/Users.vue

@@ -6,27 +6,25 @@
                 <template slot-scope="{ row }">
                     <el-image
                         style="width: 30px; height: 30px; display: block; margin: auto;"
-                        fit="cover"
-                        :src="row.avatar"
-                        :preview-src-list="[row.avatar]"
-                    ></el-image>
+                        fit="cover" :src="row.avatar"
+                        :preview-src-list="[row.avatar]"></el-image>
                 </template>
             </el-table-column>
-            <el-table-column prop="username" label="用户名" min-width="150" class-name="ellipsis"></el-table-column>
-            <el-table-column prop="nickname" label="昵称" min-width="150" class-name="ellipsis"></el-table-column>
-            <el-table-column label="操作" fixed="right" width="120" align="center">
+            <el-table-column prop="username" label="用户名" min-width="150"
+                class-name="ellipsis"></el-table-column>
+            <el-table-column prop="nickname" label="昵称" min-width="150"
+                class-name="ellipsis"></el-table-column>
+            <el-table-column label="操作" fixed="right" width="120"
+                align="center">
                 <template slot-scope="{ row }">
-                    <el-button size="mini" type="primary" @click="edit(row)">编辑</el-button>
+                    <el-button size="mini" type="primary" @click="edit(row)">编辑
+                    </el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <pagination
-            :page-size="pageSize"
-            :current-page="page"
-            :total="totalElements"
-            @size-change="onSizeChange"
-            @current-change="onCurrentChange"
-        ></pagination>
+        <pagination :page-size="pageSize" :current-page="page"
+            :total="totalElements" @size-change="onSizeChange"
+            @current-change="onCurrentChange"></pagination>
     </div>
 </template>
 
@@ -47,7 +45,17 @@ export default {
                 })
                 .then(this.handleRes);
         },
-        edit(row) {},
+        edit(row) {
+            this.$router.push({
+                name: 'userEdit',
+                query: {
+                    id: row.id,
+                },
+                params: {
+                    formData: row,
+                },
+            });
+        },
     },
 };
 </script>