<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<include file="common:title" />
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<include file="common:header" />
|
<include file="common:element-plus" />
|
<script>
|
$(function () {
|
$(".el-sub-menu__title").hover(function () {
|
$(this).addClass('hovercurrent');
|
}, function () {
|
$(this).removeClass('hovercurrent');
|
});
|
});
|
</script>
|
</head>
|
|
<body>
|
<div id="vue_item" v-cloak>
|
<el-container>
|
<el-aside class="el-menu-container" :width="el_aside_width">
|
<!-- 侧边菜单 -->
|
<include file="common:side_menu" />
|
</el-aside>
|
<el-container>
|
<el-header>
|
<include file="common:guide" one_word="后台菜单管理" two_word="总后台菜单" />
|
</el-header>
|
<el-main>
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<span>总后台菜单</span>
|
 
|
<el-link type="primary" class="header_add_btn" icon="CirclePlusFilled" :underline="false" href="javascript:void(0)" @click="Add()">添加</el-link>
|
</div>
|
</template>
|
<el-table :data="list" :tree-props="{children: 'children'}" row-key="id" default-expand-all border style="width: 100%" ref="tableRef">
|
<el-table-column label="菜单名称" prop="title"></el-table-column>
|
<el-table-column label="菜单索引" prop="menu_index"></el-table-column>
|
<el-table-column label="连接地址" prop="menu_url"></el-table-column>
|
<el-table-column label="Icon图标" prop="menu_icon" align="center"></el-table-column>
|
<el-table-column label="显示/隐藏" width="120" align="center">
|
<template #default="scope">
|
<el-switch v-model="scope.row.show_menu" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc" :active-value="1" :inactive-value="0"
|
inline-prompt active-text="显示" inactive-text="隐藏" @change="updateShowMenu(scope.row)" />
|
</template>
|
</el-table-column>
|
<el-table-column label="排序" prop="order_id" align="center" width="100"></el-table-column>
|
<el-table-column label="操作选项" fixed="right" min-width="150" :align="alignValue(200)">
|
<template #default="scope">
|
<el-button icon="edit" type="primary" @click="Edit(scope.row)"></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-main>
|
|
</el-container>
|
</el-container>
|
<!-- 添加一级菜单 -->
|
<el-dialog :title="Add_title" v-model="dialogVisible_menu" :show-close="true" width="30%">
|
<el-form ref="form" :model="Add_form" label-width="100px">
|
|
<el-form-item label="所属父类">
|
<el-select v-model="Add_form.father_id" placeholder="选择上级菜单" filterable clearable style="width: 90%;">
|
<el-option label="--" :value="0"></el-option>
|
<el-option v-for="(item,i) in list" :key="i" :label="item.title" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="菜单名称">
|
<el-input v-model="Add_form.title" placeholder="请输入菜单名称" style="width: 90%;"></el-input>
|
</el-form-item>
|
<el-form-item label="菜单索引">
|
<el-input v-model="Add_form.menu_index" placeholder="请输入菜单索引" style="width: 90%;"></el-input>
|
</el-form-item>
|
<el-form-item label="Icon图标">
|
<el-input v-model="Add_form.menu_icon" placeholder="请输入icon" style="width: 90%;"></el-input>
|
</el-form-item>
|
<el-form-item label="连接地址">
|
<el-input v-model="Add_form.menu_url" placeholder="请输入连接地址" style="width: 90%;"></el-input>
|
</el-form-item>
|
<el-form-item v-if="Add_form.id>0" label="排序值">
|
<el-input-number v-model="Add_form.order_id" class="mx-4" controls-position="right" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" :loading="ifsubmit" @click="saveMenu">保存</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</body>
|
<!-- 共用的方法 -->
|
<script src="/static/vue/mixin_admin.js"></script>
|
<script src="/static/admin/js/adminmenu/index.js"></script>
|
|
</html>
|
