99 lines
3.8 KiB
Vue
99 lines
3.8 KiB
Vue
<!-- Author: fruit.com.cn -->
|
|
|
|
<script setup>
|
|
import { AppIcons } from '@/constants/icons'
|
|
import { menuIconNames, useMenuManagement } from '@/views/permission/composables/useMenuManagement'
|
|
import PageHeading from '@/views/components/PageHeading.vue'
|
|
|
|
const { treeData, loading, form, parentOptions, resetForm, selectNode, saveMenu, deleteMenu } =
|
|
useMenuManagement()
|
|
</script>
|
|
|
|
<template>
|
|
<PageHeading eyebrow="后台管理" title="菜单管理" description="维护系统菜单结构、路由与按钮权限。">
|
|
<el-button type="primary" @click="resetForm(0)">
|
|
<AppIcon :icon="AppIcons.add" />
|
|
新增菜单
|
|
</el-button>
|
|
</PageHeading>
|
|
|
|
<div class="menu-editor-layout">
|
|
<section v-loading="loading" class="panel menu-tree-panel">
|
|
<div class="panel-heading">
|
|
<div><h2>系统菜单</h2></div>
|
|
</div>
|
|
<el-tree
|
|
:data="treeData"
|
|
node-key="id"
|
|
default-expand-all
|
|
highlight-current
|
|
:expand-on-click-node="false"
|
|
@node-click="selectNode"
|
|
/>
|
|
</section>
|
|
|
|
<section class="panel menu-form-panel">
|
|
<div class="panel-heading">
|
|
<div
|
|
><h2>{{ form.id ? '编辑菜单' : '新增菜单' }}</h2></div
|
|
>
|
|
<el-button v-if="form.id" type="danger" @click="deleteMenu">删除菜单</el-button>
|
|
</div>
|
|
<el-form label-width="110px" label-position="right" class="menu-editor-form">
|
|
<el-form-item label="菜单名称" required>
|
|
<el-input v-model="form.title" maxlength="20" />
|
|
</el-form-item>
|
|
<el-form-item label="菜单类型">
|
|
<el-radio-group v-model="form.type">
|
|
<el-radio label="CATALOG">目录</el-radio>
|
|
<el-radio label="MENU">菜单</el-radio>
|
|
<el-radio label="BUTTON">按钮</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="上级菜单">
|
|
<el-select v-model="form.parentId">
|
|
<el-option
|
|
v-for="item in parentOptions"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.type !== 'BUTTON'" label="路由地址" required>
|
|
<el-input v-model="form.routePath" placeholder="目录填 /content，子菜单填 dramas" />
|
|
</el-form-item>
|
|
<el-form-item v-if="form.type === 'MENU'" label="路由名称">
|
|
<el-input v-model="form.routeName" placeholder="例如 dramas" />
|
|
</el-form-item>
|
|
<el-form-item v-if="form.type === 'MENU'" label="组件路径">
|
|
<el-input
|
|
v-model="form.component"
|
|
placeholder="例如 views/contentManagement/DramaManagementView"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="权限标识">
|
|
<el-input v-model="form.permissionCode" placeholder="例如 drama:list" />
|
|
</el-form-item>
|
|
<el-form-item v-if="form.type === 'CATALOG'" label="菜单图标">
|
|
<el-select v-model="form.icon" clearable placeholder="请选择">
|
|
<el-option v-for="icon in menuIconNames" :key="icon" :label="icon" :value="icon" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="菜单排序">
|
|
<el-input-number v-model="form.sort" :min="1" :max="999" />
|
|
</el-form-item>
|
|
<el-form-item label="是否显示">
|
|
<el-switch v-model="form.visible" :active-value="1" :inactive-value="0" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="menu-form-footer">
|
|
<el-button type="primary" @click="saveMenu">保存菜单</el-button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|