|
|
@@ -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>
|
