标准表格页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d4e240b5eaa628f10d29cd2d332926d6.png)
<template>
<div class="menu">
<div class="top">
<el-button
type="primary"
size="small"
icon="el-icon-plus"
@click="addMenu()"
>新增菜单</el-button
>
</div>
<div class="bottom">
<el-table
:data="menuList"
height="100%"
stripe
v-loading="!menuList.length"
element-loading-background="rgba(0, 0, 0, 0.2)"
>
<el-table-column prop="id" label="id" width="180"> </el-table-column
><el-table-column prop="name" label="菜单名称" width="220">
</el-table-column>
<el-table-column prop="parentId" label="parentId" width="180">
</el-table-column>
<el-table-column prop="path" label="路径"> </el-table-column>
<el-table-column prop="action" label="操作" width="180">
<template slot-scope="scope">
<el-button @click="detail(scope.row)" type="text" size="small"
>查看</el-button
>
<el-button @click="edit(scope.row)" type="text" size="small"
>修改</el-button
>
<el-button @click="del(scope.row)" type="text" size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<!-- 新增及修改弹框 -->
<el-dialog
:title="
dialogType === 'add'
? '新增菜单'
: dialogType === 'update'
? '更新菜单'
: '菜单详情'
"
:visible.sync="dialogVisible"
center
width="30%"
>
<MenuForm
:type="dialogType"
:info="editMenu"
:menuList="menuList"
@cancel="dialogVisible = false"
@confirm="confirm"
/>
</el-dialog>
</div>
</template>
<script>
// api
import { getAllMenus, addMenu, delMenu, editMenu } from "@/api/menu";
// components
import MenuForm from "./components/MenuForm.vue";
import { flatMenus } from "@/utils/tool";
export default {
name: "Menu",
components: {
MenuForm
},
data() {
return {
menuList: [],
dialogType: 'add', // add 新增 update 更新
dialogVisible: false,
editMenu: null,
}
},
methods: {
/**
* 新增菜单
*/
addMenu() {
this.dialogType = 'add';
this.dialogVisible = true;
},
/**
* 获取菜单数据
*/
getData() {
getAllMenus().then(res => {
if (res.obj.length) {
this.menuList = [];
this.menuList = flatMenus(res.obj);
}
})
},
/**
* 将菜单扁平化,并按 id 升序
*/
// flatMenus(menus) {
// const res = []
// function recursive(arr) {
// if (!arr || !arr.length) {
// // 结束递归
// } else {
// arr.forEach(item => {
// res.push({
// name: item.menuName,
// path: item.menuPath,
// id: item.menuId,
// parentId: item.parentId,
// })
// recursive(item.children)
// })
// }
// }
// recursive(menus)
// return res.sort((a, b) => a.id > b.id ? 1 : -1);
// },
/**
* 详情
*/
detail(row) {
console.log(row);
this.dialogType = 'detail';
this.editMenu = row;
this.dialogVisible = true;
},
/**
* 修改
*/
edit(row) {
this.dialogType = 'update';
this.editMenu = row;
this.dialogVisible = true;
},
/**
* 删除
*/
del(data) {
console.log(data);
let value = {
"id": data.id
}
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delMenu(data.id).then(res => {
if (res.code == 200) {
this.$message({
type: 'success',
message: '删除成功'
})
this.getData();
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
confirm(data) {
if (this.dialogType == 'update') {
editMenu(data).then(res => {
if (res.code == 200) {
this.dialogVisible = false;
this.$message({
type: 'success',
message: '修改成功'
})
this.getData();
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
}
else if (this.dialogType == 'add') {
addMenu(data).then(res => {
if (res.code == 200) {
this.dialogVisible = false;
this.$message({
type: 'success',
message: '添加成功'
})
this.getData();
}
else {
this.$message({
type: 'error',
message: res.message
})
}
})
}
}
},
created() {
this.getData()
}
}
</script>
<style lang="scss" scoped>
.menu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top {
display: flex;
margin-bottom: 20px;
}
.bottom {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
}
</style>
增删改查弹窗
<template>
<el-form v-if="menu" size="small" ref="form" :model="menu" label-width="80px">
<el-form-item label="菜单名称">
<el-input v-model="menu.name" placeholder="菜单名称" clearable></el-input>
</el-form-item>
<el-form-item v-if="menu.parentId !== 0" label="父级菜单">
<el-select
@change="parentIdChange"
v-model="menu.parentId"
placeholder="父级菜单"
clearable
>
<el-option
v-for="item in menuList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="菜单路径">
<el-input
v-model="menu.path"
placeholder="例:/example"
clearable
></el-input>
</el-form-item>
<span
style="width: 100%; display: flex; justify-content: center"
v-if="this.type != 'detail'"
>
<el-button size="small" type="primary" @click="confirm">确 定</el-button
><el-button size="small" @click="cancel">取 消</el-button>
</span>
</el-form>
</template>
<script>
export default {
name: "MenuForm",
props: {
type: {
type: String,
default: '' // add 新增 update 更新
},
info: {
type: Object,
default: {}
},
menuList: {
type: Array,
default: []
}
},
data() {
return {
menu: {
name: '',
path: '',
id: '',
parentId: ''
}
}
},
watch: {
type(newVal) {
if (newVal === "add") {
this.menu = {
name: '',
path: '',
id: '',
parentId: ''
}
}
},
info: {
handler: function (newVal) {
if (this.type === "update") {
this.menu = JSON.parse(JSON.stringify(newVal));
}
if (this.type === "detail") {
this.menu = JSON.parse(JSON.stringify(newVal));
}
},
deep: true,
immediate: true
}
},
methods: {
/**
* parentId 值改变
*/
parentIdChange(val) {
console.log(val);
},
/**
* 点击取消按钮
*/
cancel() {
this.$emit('cancel');
},
/**
* 点击确定按钮
*/
confirm() {
this.$emit('confirm', this.menu);
this.menu = {
name: '',
path: '',
id: '',
parentId: ''
}
}
}
}
</script>
<style lang="scss" scoped>
</style>