<template> <div class="menu"> <div class="head clear-both"> <el-button @click="add" plain type="success" style="float: right" v-if="!$store.state.readonly">新增菜单</el-button> </div> <el-table :data="menuList" style="width: 100%"> <el-table-column prop="name" label="菜单名称"> </el-table-column> <el-table-column prop="cover" label="菜单Code"> </el-table-column> <el-table-column v-if="!$store.state.readonly" label="操作"> <template slot-scope="scope"> <el-button size="mini" plain type="primary" @click="edit(scope.row)"> 编辑 </el-button> <el-button size="mini" type="danger" plain @click="del(scope.row)" v-if="$store.state.deletePermission"> 删除 </el-button> </template> </el-table-column> </el-table> <el-dialog :title="dialog.title" center append-to-body :visible.sync="dialog.show" width="30%"> <el-form ref="form" :rules="dialog.rules" :model="dialog.form" label-width="100px"> <el-form-item label="菜单名称" prop="name"> <el-input v-model="dialog.form.name"></el-input> </el-form-item> <el-form-item label="菜单Code" prop="cover"> <el-input v-model="dialog.form.cover"></el-input> </el-form-item> <el-form-item label="上级菜单" prop="cover"> <el-select v-model="dialog.form.pid" placeholder="请选择"> <el-option label="无" :value="0"> </el-option> <el-option v-for="item in plist" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialog.show = false">取 消</el-button> <el-button type="primary" @click="sub">确 定</el-button> </span> </el-dialog> </div> </template> <script> import {getMenuListApi,saveMenuApi,delMenuApi,updateMenuApi} from "../../service/api"; export default { data(){ return { nowPage:1, total:0, menuList:[{cover:0,name:'系统'},{cover:2,name:'系统2'}], plist:[], dialog:{ title:'新增菜单', show:false, rules: { name: [ {required: true, message: '请填写菜单名称', trigger: 'change'}, ], cover: [ {required: true, message: '请填写菜单code', trigger: 'change'}, ] }, form:{ id:'', name:'', cover:'', pid:0, type:2 } }, } }, created(){ this.getList() }, methods:{ getList(){ getMenuListApi({limit:100}).then(res=>{ // if (res) { this.menuList = []; this.plist = []; let arr=[] // res.forEach(i=>{ // arr.push(i); // this.plist.push(i); // if(i.children){ // i.children.forEach(j=>{ // arr.push(j); // }) // } // }) res.forEach(i=>{ let x = {} x.cover = i.cover x.name = i.name x.pid = i.pid x.id = i.id x.created_at = i.created_at arr.push(x); this.plist.push(i); if(i.children){ i.children.forEach(j=>{ arr.push(j); }) } }) this.menuList = arr console.log(this.menuList) // debugger // } }) }, edit(data){ this.dialog.show = true; this.dialog.form.id = data.id; this.dialog.title = '编辑菜单'; this.dialog.form.name = data.name; this.dialog.form.cover = data.cover; this.dialog.form.pid = data.pid; }, add(){ this.dialog.show = true; this.dialog.form.id = ''; this.dialog.title = '新增菜单'; this.dialog.form.name = ''; this.dialog.form.pid = 0; this.dialog.form.cover = ''; }, del(data){ this.$confirm('此操作将删除该菜单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delMenuApi(data.id).then(res=>{ this.$message({ type: 'success', message: '删除成功!' }); this.getList() }); }); }, sub(){ this.$refs['form'].validate((valid) => { if(valid){ let dia = this.dialog; if(dia.form.id){ let json = { name:dia.form.name, cover:dia.form.cover, pid:dia.form.pid }; this.$confirm('此操作将修改该菜单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { updateMenuApi(dia.form.id,json).then(()=>{ this.$message({ type: 'success', message: '修改成功!' }); dia.show = false; this.getList() }) }) }else{ let json = { name:dia.form.name, cover:dia.form.cover, pid:dia.form.pid }; this.$confirm('此操作将添加新菜单?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { saveMenuApi(json).then(()=>{ this.$message({ type: 'success', message: '添加成功!' }); dia.show = false; this.getList() }) }) } } }) } } } </script> <style scoped lang="less"> .menu{ .head{ margin-bottom: 10px; } padding: 20px 0; .page-div{ text-align: center; padding-top: 20px } } .clear-both{ &:after{ content: ''; display: block; clear: both; } } </style>