|
|
|
@ -22,12 +22,7 @@ |
|
|
|
</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-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
@ -58,18 +53,8 @@ |
|
|
|
</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-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" |
|
|
|
@ -101,13 +86,13 @@ |
|
|
|
<i class="el-icon-question" /> |
|
|
|
</el-tooltip> |
|
|
|
</span> |
|
|
|
<!-- <treeselect |
|
|
|
v-model="form.parentId" |
|
|
|
<treeselect |
|
|
|
v-model="form.fid" |
|
|
|
:options="menuOptions" |
|
|
|
:normalizer="normalizer" |
|
|
|
:show-count="true" |
|
|
|
placeholder="选择上级菜单" |
|
|
|
/> --> |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
@ -133,60 +118,26 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<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"> |
|
|
|
<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.menuName" placeholder="请输入路由名称" /> |
|
|
|
<el-input v-model="form.menu_name" placeholder="请输入路由名称" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item prop="component"> |
|
|
|
<span slot="label"> |
|
|
|
组件路径 |
|
|
|
<el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top"> |
|
|
|
<el-tooltip |
|
|
|
content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
<i class="el-icon-question" /> |
|
|
|
</el-tooltip> |
|
|
|
</span> |
|
|
|
@ -194,26 +145,14 @@ |
|
|
|
</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 v-if="form.menuType != 'F'" prop="path"> |
|
|
|
<span slot="label"> |
|
|
|
路由地址 |
|
|
|
<el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top"> |
|
|
|
<el-tooltip |
|
|
|
content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" |
|
|
|
placement="top" |
|
|
|
> |
|
|
|
<i class="el-icon-question" /> |
|
|
|
</el-tooltip> |
|
|
|
</span> |
|
|
|
@ -249,6 +188,85 @@ |
|
|
|
</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"> |
|
|
|
@ -256,7 +274,6 @@ |
|
|
|
<el-button @click="cancel">取 消</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-drawer> |
|
|
|
</el-card> |
|
|
|
</template> |
|
|
|
@ -264,7 +281,7 @@ |
|
|
|
<script> |
|
|
|
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 IconSelect from '@/components/IconSelect' |
|
|
|
|
|
|
|
@ -284,7 +301,22 @@ export default { |
|
|
|
// 是否显示弹出层 |
|
|
|
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: { |
|
|
|
title: undefined, |
|
|
|
@ -293,7 +325,22 @@ export default { |
|
|
|
}, |
|
|
|
// 表单参数 |
|
|
|
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: { |
|
|
|
@ -341,19 +388,17 @@ export default { |
|
|
|
delete node.children |
|
|
|
} |
|
|
|
return { |
|
|
|
id: node.menuId, |
|
|
|
id: node.id, |
|
|
|
label: node.title, |
|
|
|
children: node.children |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 查询菜单下拉树结构 */ |
|
|
|
getTreeselect() { |
|
|
|
listMenu().then(response => { |
|
|
|
this.menuOptions = [] |
|
|
|
const menu = { menuId: 0, title: '主类目', children: [] } |
|
|
|
menu.children = response.data |
|
|
|
const menu = { id: 0, title: '主类目', children: [] } |
|
|
|
menu.children = this.menuList |
|
|
|
this.menuOptions.push(menu) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 取消按钮 |
|
|
|
cancel() { |
|
|
|
@ -363,18 +408,23 @@ export default { |
|
|
|
// 表单重置 |
|
|
|
reset() { |
|
|
|
this.form = { |
|
|
|
menuId: undefined, |
|
|
|
parentId: 0, |
|
|
|
menuName: undefined, |
|
|
|
id: undefined, |
|
|
|
fid: 0, |
|
|
|
title: undefined, |
|
|
|
menu_name: undefined, |
|
|
|
icon: undefined, |
|
|
|
menuType: 'M', |
|
|
|
apis: [], |
|
|
|
menu_type: 'user', |
|
|
|
component: undefined, |
|
|
|
path: undefined, |
|
|
|
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() { |
|
|
|
@ -385,51 +435,57 @@ export default { |
|
|
|
this.reset() |
|
|
|
this.getTreeselect() |
|
|
|
if (row != null) { |
|
|
|
this.form.parentId = row.menuId |
|
|
|
this.form.fid = row.id |
|
|
|
} |
|
|
|
this.open = true |
|
|
|
this.title = '添加菜单' |
|
|
|
}, |
|
|
|
/** 修改按钮操作 */ |
|
|
|
handleUpdate(row) { |
|
|
|
console.log(row) |
|
|
|
this.reset() |
|
|
|
this.getTreeselect() |
|
|
|
getMenu(row.menuId).then(response => { |
|
|
|
this.form = response.data |
|
|
|
// getMenu(row.menuId).then(response => { |
|
|
|
this.form = row |
|
|
|
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 |
|
|
|
// }) |
|
|
|
}, |
|
|
|
/** 提交按钮 */ |
|
|
|
submitForm: function () { |
|
|
|
delete this.form.children |
|
|
|
this.$refs['form'].validate(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) { |
|
|
|
this.msgSuccess(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.open = false |
|
|
|
this.getList() |
|
|
|
} else { |
|
|
|
this.msgError(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'error' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
addMenu(this.form).then(response => { |
|
|
|
if (response.code === 200) { |
|
|
|
this.msgSuccess(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.open = false |
|
|
|
this.getList() |
|
|
|
} else { |
|
|
|
this.msgError(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'error' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -443,15 +499,20 @@ export default { |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(function () { |
|
|
|
var Ids = (row.menuId && [row.menuId]) || this.ids |
|
|
|
return delMenu({ 'ids': Ids }) |
|
|
|
return delMenu({ 'id': row.id }) |
|
|
|
}).then((response) => { |
|
|
|
if (response.code === 200) { |
|
|
|
this.msgSuccess(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.open = false |
|
|
|
this.getList() |
|
|
|
} else { |
|
|
|
this.msgError(response.msg) |
|
|
|
this.$message({ |
|
|
|
message: response.msg, |
|
|
|
type: 'error' |
|
|
|
}) |
|
|
|
} |
|
|
|
}).catch(function () { }) |
|
|
|
} |
|
|
|
|
