<template>
|
<div class="page">
|
<div class="page-title">
|
<div><h2>菜单管理</h2><p>菜单为动态配置，左侧导航直接读取这里的数据</p></div>
|
<el-button type="primary" icon="el-icon-plus" @click="openCreate(null)">新增一级菜单</el-button>
|
</div>
|
<div class="table-panel">
|
<el-table :data="tree" row-key="id" border default-expand-all :tree-props="{ children: 'children' }">
|
<el-table-column prop="name" label="菜单名称" min-width="220"></el-table-column>
|
<el-table-column prop="icon" label="图标" width="200"><template slot-scope="{ row }"><span class="icon-cell"><i :class="row.icon"></i><span>{{ row.icon }}</span></span></template></el-table-column>
|
<el-table-column prop="url" label="路由地址" min-width="240"></el-table-column>
|
<el-table-column prop="permissions" label="权限标识" min-width="170"></el-table-column>
|
<el-table-column prop="menuType" label="类型" width="90"><template slot-scope="{ row }"><el-tag size="mini" :type="row.menuType === 0 ? 'info' : 'primary'">{{ row.menuType === 0 ? '目录' : '菜单' }}</el-tag></template></el-table-column>
|
<el-table-column prop="sortNo" label="排序" width="80" align="center"></el-table-column>
|
<el-table-column prop="visible" label="显示" width="80" align="center"><template slot-scope="{ row }"><el-tag size="mini" :type="row.visible === 0 ? 'info' : 'success'">{{ row.visible === 0 ? '隐藏' : '显示' }}</el-tag></template></el-table-column>
|
<el-table-column label="操作" width="200" fixed="right"><template slot-scope="{ row }"><el-button type="text" @click="openCreate(row)">新增下级</el-button><el-button type="text" @click="openEdit(row)">编辑</el-button><el-button type="text" class="danger-link" @click="remove(row)">删除</el-button></template></el-table-column>
|
</el-table>
|
</div>
|
<el-dialog :title="form.id ? '编辑菜单' : '新增菜单'" :visible.sync="dialogVisible" width="640px" append-to-body>
|
<el-form ref="form" :model="form" :rules="rules" label-width="105px">
|
<el-form-item label="上级菜单"><el-input :value="parentName" readonly></el-input></el-form-item>
|
<el-form-item label="菜单名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
|
<el-form-item label="菜单类型"><el-radio-group v-model="form.menuType"><el-radio-button :label="0">目录</el-radio-button><el-radio-button :label="1">菜单</el-radio-button></el-radio-group></el-form-item>
|
<el-form-item label="路由地址"><el-input v-model="form.url" placeholder="/fault/report"></el-input></el-form-item>
|
<el-form-item label="图标"><el-input v-model="form.icon" placeholder="el-icon-tickets"></el-input></el-form-item>
|
<el-form-item label="权限标识"><el-input v-model="form.permissions"></el-input></el-form-item>
|
<el-form-item label="排序"><el-input-number v-model="form.sortNo" :min="1" style="width:160px"></el-input-number></el-form-item>
|
<el-form-item label="是否显示"><el-switch v-model="form.visible" :active-value="1" :inactive-value="0"></el-switch></el-form-item>
|
</el-form>
|
<template slot="footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" :loading="saving" @click="save">保存</el-button></template>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
export default {
|
name: 'MenuManage',
|
data() { return { tree: [], flat: [], dialogVisible: false, saving: false, form: {}, rules: { name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }] } } },
|
computed: { parentName() { const parent = this.flat.find(item => item.id === this.form.pid); return parent ? parent.name : '无（一级菜单）' } },
|
created() { this.load() },
|
methods: {
|
load() { Promise.all([api.get('/system/menu/nav'), api.get('/system/menu/list')]).then(([tree, list]) => { this.tree = tree.data || []; this.flat = list.data || [] }) },
|
openCreate(parent) { this.form = { pid: parent ? parent.id : 0, name: '', url: '', icon: 'el-icon-tickets', menuType: parent ? 1 : 0, permissions: '', sortNo: 10, visible: 1 }; this.dialogVisible = true },
|
openEdit(row) { this.form = { ...row }; this.dialogVisible = true },
|
save() { this.$refs.form.validate(valid => { if (!valid) return; this.saving = true; const request = this.form.id ? api.put('/system/menu/' + this.form.id, this.form) : api.post('/system/menu', this.form); request.then(() => { this.$message.success('保存成功'); this.dialogVisible = false; this.load() }).finally(() => { this.saving = false }) }) },
|
remove(row) { this.$confirm(`确定删除菜单“${row.name}”吗？`, '删除确认', { type: 'warning' }).then(() => api.delete('/system/menu/' + row.id)).then(() => { this.$message.success('删除成功'); this.load() }).catch(() => {}) }
|
}
|
}
|
</script>
|
<style scoped>
|
.danger-link { color: #d9534f; }
|
.icon-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
|
</style>
|
