修改

src/router/index.js

@@ -141,14 +141,14 @@ export const asyncRoutes = [
             path: 'list',
             hidden: true,
             component: () => import('@/views/sys/roles/list.vue'),
-            name: 'SysRolesList',
+            name: 'SysRoles',
             meta: { title: '角色列表' }
           },
           {
             path: 'form',
             hidden: true,
             component: () => import('@/views/sys/roles/form.vue'),
-            name: 'SysRolesForm',
+            name: 'SysRoles',
             meta: { title: '添加角色' }
           }
         ]
@@ -164,14 +164,14 @@ export const asyncRoutes = [
             path: 'list',
             hidden: true,
             component: () => import('@/views/sys/users/list.vue'),
-            name: 'SysUsersList',
+            name: 'SysUsers',
             meta: { title: '角色列表' }
           },
           {
             path: 'form',
             hidden: true,
             component: () => import('@/views/sys/users/form.vue'),
-            name: 'SysUsersForm',
+            name: 'SysUsers',
             meta: { title: '添加用户' }
           }
         ]

src/views/sys/menus/form.vue

@@ -61,7 +61,6 @@ export default {
     }
   },
   created() {
-    debugger
     this.resetParentId()
     this.getFormData()
   },

src/views/sys/roles/form.vue

@@ -1,5 +1,145 @@
 <template>
   <div class="app-container">
-    <h1>菜单编辑</h1>
+    <el-page-header :content="isEdit?'修改角色':'添加角色'" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
+        <el-form-item label="上级菜单：" prop="parentId">
+          <span>{{ parentTitle }}</span>
+          <el-input v-model="menu.parentId" hidden />
+        </el-form-item>
+        <el-form-item label="菜单名称：" prop="title">
+          <el-input v-model="menu.title" />
+        </el-form-item>
+        <el-form-item label="前端名称：" prop="name">
+          <el-input v-model="menu.name" />
+        </el-form-item>
+        <el-form-item label="前端图标：" prop="icon">
+          <el-input v-model="menu.icon" style="width: 80%" />
+          <svg-icon style="margin-left: 8px" :icon-class="menu.icon" />
+        </el-form-item>
+        <el-form-item label="状态：">
+          <el-radio-group v-model="menu.status">
+            <el-radio :label="0">启用</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序：">
+          <el-input v-model="menu.sort" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
+          <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
+<script>
+import { getMenu, updateMenu, createMenu } from '@/api/menu'
+const defaultMenu = {
+  id: '',
+  title: '',
+  name: '',
+  icon: '',
+  status: 0,
+  sort: 0,
+  parentId: ''
+}
+export default {
+  name: 'MenuForm',
+  data() {
+    return {
+      parentTitle: '',
+      menu: Object.assign({}, defaultMenu),
+      isEdit: false
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      this.getFormData()
+    }
+  },
+  created() {
+    this.resetParentId()
+    this.getFormData()
+  },
+  methods: {
+    resetParentId() {
+      if (this.$route.query.parentId != null) {
+        this.menu.parentId = this.$route.query.parentId
+        this.parentTitle = this.$route.query.title
+      } else {
+        this.menu.parentId = ''
+        this.parentTitle = ''
+      }
+    },
+    getFormData() {
+      if (this.$route.query.id != null) {
+        this.menu.id = this.$route.query.id
+        this.isEdit = true
+        getMenu(this.menu.id).then(response => {
+          this.menu.title = response.data.title
+          this.menu.name = response.data.name
+          this.menu.icon = response.data.icon
+          this.menu.status = response.data.status
+          this.menu.sort = response.data.sort
+          this.menu.parentId = response.data.parentId
+        })
+      } else {
+        this.menu.id = ''
+        this.isEdit = false
+        this.menu = Object.assign({}, defaultMenu)
+      }
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.menu = Object.assign({}, defaultMenu)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateMenu(this.$route.query.id, this.menu).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createMenu(this.menu).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/sys/users/form.vue

@@ -1,5 +1,145 @@
 <template>
   <div class="app-container">
-    <h1>菜单编辑</h1>
+    <el-page-header :content="isEdit?'修改用户':'添加用户'" />
+    <el-card class="form-container" shadow="never">
+      <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
+        <el-form-item label="上级菜单：" prop="parentId">
+          <span>{{ parentTitle }}</span>
+          <el-input v-model="menu.parentId" hidden />
+        </el-form-item>
+        <el-form-item label="菜单名称：" prop="title">
+          <el-input v-model="menu.title" />
+        </el-form-item>
+        <el-form-item label="前端名称：" prop="name">
+          <el-input v-model="menu.name" />
+        </el-form-item>
+        <el-form-item label="前端图标：" prop="icon">
+          <el-input v-model="menu.icon" style="width: 80%" />
+          <svg-icon style="margin-left: 8px" :icon-class="menu.icon" />
+        </el-form-item>
+        <el-form-item label="状态：">
+          <el-radio-group v-model="menu.status">
+            <el-radio :label="0">启用</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="排序：">
+          <el-input v-model="menu.sort" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
+          <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
+<script>
+import { getMenu, updateMenu, createMenu } from '@/api/menu'
+const defaultMenu = {
+  id: '',
+  title: '',
+  name: '',
+  icon: '',
+  status: 0,
+  sort: 0,
+  parentId: ''
+}
+export default {
+  name: 'MenuForm',
+  data() {
+    return {
+      parentTitle: '',
+      menu: Object.assign({}, defaultMenu),
+      isEdit: false
+    }
+  },
+  watch: {
+    $route(route) {
+      this.resetParentId()
+      this.getFormData()
+    }
+  },
+  created() {
+    this.resetParentId()
+    this.getFormData()
+  },
+  methods: {
+    resetParentId() {
+      if (this.$route.query.parentId != null) {
+        this.menu.parentId = this.$route.query.parentId
+        this.parentTitle = this.$route.query.title
+      } else {
+        this.menu.parentId = ''
+        this.parentTitle = ''
+      }
+    },
+    getFormData() {
+      if (this.$route.query.id != null) {
+        this.menu.id = this.$route.query.id
+        this.isEdit = true
+        getMenu(this.menu.id).then(response => {
+          this.menu.title = response.data.title
+          this.menu.name = response.data.name
+          this.menu.icon = response.data.icon
+          this.menu.status = response.data.status
+          this.menu.sort = response.data.sort
+          this.menu.parentId = response.data.parentId
+        })
+      } else {
+        this.menu.id = ''
+        this.isEdit = false
+        this.menu = Object.assign({}, defaultMenu)
+      }
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.menu = Object.assign({}, defaultMenu)
+      this.getFormData()
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            if (this.isEdit) {
+              updateMenu(this.$route.query.id, this.menu).then(response => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            } else {
+              createMenu(this.menu).then(response => {
+                this.$refs[formName].resetFields()
+                this.resetForm(formName)
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                })
+                this.$router.back()
+              })
+            }
+          })
+        } else {
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>