chenke
/
hl-web-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

更新菜单管理

master
chenke 3 years ago
parent
b18cc1e814
commit
ceca28ac66
3 changed files with 375 additions and 313 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/api/menu.js
  2. 1
      src/styles/scss/index.scss
  3. 675
      src/views/menu/index.vue

12
src/api/menu.js
View File

@ -37,17 +37,17 @@ export function roleMenuTreeselect(roleId) {
// 新增菜单 // 新增菜单
export function addMenu(data) { export function addMenu(data) {
return request({ return request({
url: '/api/v1/menu',
url: '/menu/AddMenu',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 修改菜单 // 修改菜单
export function updateMenu(data, id) {
export function updateMenu(data ) {
return request({ return request({
url: '/api/v1/menu/' + id,
method: 'put',
url: '/menu/menuEdit',
method: 'post',
data: data data: data
}) })
} }
@ -55,8 +55,8 @@ export function updateMenu(data, id) {
// 删除菜单 // 删除菜单
export function delMenu(data) { export function delMenu(data) {
return request({ return request({
url: '/api/v1/menu',
method: 'delete',
url: '/menu/menuDel',
method: 'post',
data: data data: data
}) })
} }

1
src/styles/scss/index.scss
View File

@ -4,6 +4,7 @@
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; @import './sidebar.scss';
@import './btn.scss'; @import './btn.scss';
@import './admin.scss';
body { body {
margin: 0; margin: 0;

675
src/views/menu/index.vue
View File

@ -1,270 +1,287 @@
<template> <template>
<el-card class="box-card">
<el-form :inline="true">
<el-form-item label="菜单名称">
<el-input
v-model="queryParams.title"
placeholder="请输入菜单名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
<el-option
v-for="dict in visibleOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="menuList"
border
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
<el-table-column prop="icon" label="图标" align="center" width="100px">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="60px" />
<el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
<span v-else>{{ scope.row.component }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
<template slot-scope="scope">
<span>{{ scope.row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="handleAdd(scope.row)"
>新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-card class="box-card">
<el-form :inline="true">
<el-form-item label="菜单名称">
<el-input
v-model="queryParams.title"
placeholder="请输入菜单名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
<el-option
v-for="dict in visibleOptions"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<!-- 添加或修改菜单对话框 -->
<el-drawer
ref="drawer"
:title="title"
:before-close="cancel"
:visible.sync="open"
direction="rtl"
custom-class="demo-drawer"
size="830px"
>
<div class="demo-drawer__content">
<el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="106px">
<el-row>
<el-col :span="24">
<el-form-item prop="parentId">
<span slot="label">
上级菜单
<el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<!-- <treeselect
v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
/> -->
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="title">
<span slot="label">
菜单标题
<el-tooltip content="菜单位置显示的说明信息" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.title" placeholder="请输入菜单标题" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="sort">
<span slot="label">
显示排序
<el-tooltip content="根据序号升序排列" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input-number v-model="form.sort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-table
v-loading="loading"
:data="menuList"
border
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
<el-table-column prop="icon" label="图标" align="center" width="100px">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" width="60px" />
<el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span v-if="scope.row.menuType == 'A'">{{ scope.row.path }}</span>
<span v-else>{{ scope.row.component }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createdAt" width="180">
<template slot-scope="scope">
<span>{{ scope.row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24">
<el-form-item prop="menuType">
<span slot="label">
菜单类型
<el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.menuType">
<el-radio label="M">目录</el-radio>
<el-radio label="C">菜单</el-radio>
<el-radio label="F">按钮</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="菜单图标">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()"
>
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
<svg-icon
v-if="form.icon"
slot="prefix"
:icon-class="form.icon"
class="el-input__icon"
style="height: 32px;width: 16px;"
/>
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
</el-input>
</el-popover>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" prop="menuName">
<span slot="label">
路由名称
<el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.menuName" placeholder="请输入路由名称" />
</el-form-item>
</el-col>
<!-- 添加或修改菜单对话框 -->
<el-drawer
ref="drawer"
:title="title"
:before-close="cancel"
:visible.sync="open"
direction="rtl"
custom-class="demo-drawer"
size="830px"
>
<div class="demo-drawer__content">
<el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="106px">
<el-row>
<el-col :span="24">
<el-form-item prop="parentId">
<span slot="label">
上级菜单
<el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<treeselect
v-model="form.fid"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="title">
<span slot="label">
菜单标题
<el-tooltip content="菜单位置显示的说明信息" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.title" placeholder="请输入菜单标题" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="sort">
<span slot="label">
显示排序
<el-tooltip content="根据序号升序排列" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input-number v-model="form.sort" controls-position="right" :min="0" />
</el-form-item>
</el-col>
<el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
<el-form-item prop="component">
<span slot="label">
组件路径
<el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.component" placeholder="请输入组件路径" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="menu_name">
<span slot="label">
路由名称
<el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.menu_name" placeholder="请输入路由名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'">
<span slot="label">
是否外链
<el-tooltip content="可以通过iframe打开指定地址" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.isFrame">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="component">
<span slot="label">
组件路径
<el-tooltip
content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.component" placeholder="请输入组件路径" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType != 'F'" prop="path">
<span slot="label">
路由地址
<el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.path" placeholder="请输入路由地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType != 'F'" prop="path">
<span slot="label">
路由地址
<el-tooltip
content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.path" placeholder="请输入路由地址" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
<span slot="label">
权限标识
<el-tooltip content="前端权限控制按钮是否显示" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType != 'F'">
<span slot="label">
菜单状态
<el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.visible">
<el-radio
v-for="dict in visibleOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="demo-drawer__footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</el-drawer>
</el-card>
<el-col :span="12">
<el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
<span slot="label">
权限标识
<el-tooltip content="前端权限控制按钮是否显示" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.menuType != 'F'">
<span slot="label">
菜单状态
<el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.visible">
<el-radio
v-for="dict in visibleOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
菜单栏状态
<el-tooltip content="需要显示菜单列表的设置为显示，否则设置为隐藏" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.show_sidebar">
<el-radio
v-for="dict in visibleOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
标签栏状态
<el-tooltip content="需要显示标签栏的设置为显示，否则设置为隐藏" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.show_tags">
<el-radio
v-for="dict in showTagsOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
底部栏状态
<el-tooltip content="需要显示底部工具栏的设置为显示，否则设置为隐藏" placement="top">
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-radio-group v-model="form.show_bottom">
<el-radio
v-for="dict in showBottomOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<span slot="label">
是否隐藏面包屑
</span>
<el-radio-group v-model="form.hide_breadcrumb">
<el-radio
v-for="dict in hideBreadcrumbOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item>
<span slot="label">
参数
<el-tooltip
content="非技术人员请勿修改"
placement="top"
>
<i class="el-icon-question" />
</el-tooltip>
</span>
<el-input v-model="form.params" placeholder="" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="demo-drawer__footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</el-drawer>
</el-card>
</template> </template>
<script> <script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/menu' import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/menu'
const Treeselect = require('@riophae/vue-treeselect')
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect' import IconSelect from '@/components/IconSelect'
@ -284,7 +301,22 @@ export default {
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 菜单状态数据字典 // 菜单状态数据字典
visibleOptions: [],
visibleOptions: [
{value: false, label: "隐藏"},
{value: true, label: "显示"}
],
showBottomOptions: [
{value: false, label: "隐藏"},
{value: true, label: "显示"}
],
showTagsOptions: [
{value: false, label: "隐藏"},
{value: true, label: "显示"}
],
hideBreadcrumbOptions: [
{value: false, label: "否"},
{value: true, label: "是"}
],
// 查询参数 // 查询参数
queryParams: { queryParams: {
title: undefined, title: undefined,
@ -293,7 +325,22 @@ export default {
}, },
// 表单参数 // 表单参数
form: { form: {
apis: [],
id: undefined,
fid: 0,
title: undefined,
menu_name: undefined,
icon: undefined,
menu_type: 'user',
component: undefined,
path: undefined,
sort: 0,
visible: '0',
no_cache: 1,
show_sidebar: 1,
show_tags: 1,
show_bottom: 1,
is_hot: 0,
params: undefined
}, },
// 表单校验 // 表单校验
rules: { rules: {
@ -341,19 +388,17 @@ export default {
delete node.children delete node.children
} }
return { return {
id: node.menuId,
id: node.id,
label: node.title, label: node.title,
children: node.children children: node.children
} }
}, },
/** 查询菜单下拉树结构 */ /** 查询菜单下拉树结构 */
getTreeselect() { getTreeselect() {
listMenu().then(response => {
this.menuOptions = []
const menu = { menuId: 0, title: '主类目', children: [] }
menu.children = response.data
this.menuOptions.push(menu)
})
this.menuOptions = []
const menu = { id: 0, title: '主类目', children: [] }
menu.children = this.menuList
this.menuOptions.push(menu)
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
@ -363,18 +408,23 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
menuId: undefined,
parentId: 0,
menuName: undefined,
id: undefined,
fid: 0,
title: undefined,
menu_name: undefined,
icon: undefined, icon: undefined,
menuType: 'M',
apis: [],
menu_type: 'user',
component: undefined,
path: undefined,
sort: 0, sort: 0,
action: this.form.menuType === 'A' ? this.form.action : '',
isFrame: '1',
visible: '0'
visible: '0',
no_cache: 1,
show_sidebar: 1,
show_tags: 1,
show_bottom: 1,
is_hot: 0,
params: undefined
} }
this.resetForm('form')
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@ -385,51 +435,57 @@ export default {
this.reset() this.reset()
this.getTreeselect() this.getTreeselect()
if (row != null) { if (row != null) {
this.form.parentId = row.menuId
this.form.fid = row.id
} }
this.open = true this.open = true
this.title = '添加菜单' this.title = '添加菜单'
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
console.log(row)
this.reset() this.reset()
this.getTreeselect() this.getTreeselect()
getMenu(row.menuId).then(response => {
this.form = response.data
this.open = true
this.title = '修改菜单'
})
},
setApis(apiArray) {
var l = []
for (var index = 0; index < apiArray.length; index++) {
const element = apiArray[index]
l.push(element.id)
}
this.form.apis = l
// getMenu(row.menuId).then(response => {
this.form = row
this.open = true
this.title = '修改菜单'
// })
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm: function() {
submitForm: function () {
delete this.form.children
this.$refs['form'].validate(valid => { this.$refs['form'].validate(valid => {
if (valid) { if (valid) {
if (this.form.menuId !== undefined) {
updateMenu(this.form, this.form.menuId).then(response => {
if (this.form.id !== undefined) {
updateMenu(this.form).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess(response.msg)
this.$message({
message: response.msg,
type: 'success'
})
this.open = false this.open = false
this.getList() this.getList()
} else { } else {
this.msgError(response.msg)
this.$message({
message: response.msg,
type: 'error'
})
} }
}) })
} else { } else {
addMenu(this.form).then(response => { addMenu(this.form).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess(response.msg)
this.$message({
message: response.msg,
type: 'success'
})
this.open = false this.open = false
this.getList() this.getList()
} else { } else {
this.msgError(response.msg)
this.$message({
message: response.msg,
type: 'error'
})
} }
}) })
} }
@ -442,37 +498,42 @@ export default {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(function() {
var Ids = (row.menuId && [row.menuId]) || this.ids
return delMenu({ 'ids': Ids })
}).then(function () {
return delMenu({ 'id': row.id })
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.msgSuccess(response.msg)
this.$message({
message: response.msg,
type: 'success'
})
this.open = false this.open = false
this.getList() this.getList()
} else { } else {
this.msgError(response.msg)
this.$message({
message: response.msg,
type: 'error'
})
} }
}).catch(function() {})
}).catch(function () { })
} }
} }
} }
</script> </script>
<style lang="css"> <style lang="css">
.panel .el-transfer__buttons{
.panel .el-transfer__buttons {
width: 150px; width: 150px;
} }
.panel .el-transfer__buttons .el-button + .el-button{
margin-left:0;
.panel .el-transfer__buttons .el-button + .el-button {
margin-left: 0;
} }
.panel .el-transfer-panel{
.panel .el-transfer-panel {
width: 300px; width: 300px;
} }
.el-col { .el-col {
padding: 0 5px;
padding: 0 5px;
} }
.el-drawer__header{
margin-bottom: 0;
.el-drawer__header {
margin-bottom: 0;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save