菜单管理功能加强,新增功能项:是否隐藏菜单(某些页面不需要显示在左侧菜单栏中),是否缓存菜单(可解决切换Tab重新渲染的问题,使用该功能必须填写组件名称,且必须与组件中的name一致)

This commit is contained in:
dqjdda
2019-08-27 15:56:06 +08:00
parent a138fbc6b6
commit b0830fba37
22 changed files with 52 additions and 27 deletions

View File

@@ -27,38 +27,39 @@
<!--表单组件-->
<eForm ref="form" :is-add="isAdd"/>
<!--表格渲染-->
<tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" size="small">
<el-table-column prop="icon" label="图标" align="center" width="80px">
<tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" :height="height" size="small">
<el-table-column prop="icon" label="图标" align="center" width="60px">
<template slot-scope="scope">
<svg-icon :icon-class="scope.row.icon" />
</template>
</el-table-column>
<el-table-column prop="sort" align="center" width="100px" label="排序">
<el-table-column prop="sort" align="center" label="排序">
<template slot-scope="scope">
<el-tag>{{ scope.row.sort }}</el-tag>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="path" label="链接地址"/>
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径"/>
<el-table-column prop="iframe" width="100px" label="内部菜单">
<el-table-column :show-overflow-tooltip="true" prop="componentName" label="组件名称"/>
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" width="130px"/>
<el-table-column prop="iframe" label="内部菜单">
<template slot-scope="scope">
<span v-if="!scope.row.iframe"></span>
<span v-else></span>
</template>
</el-table-column>
<el-table-column prop="iframe" width="100px" label="是否缓存">
<el-table-column prop="iframe" label="是否缓存">
<template slot-scope="scope">
<span v-if="scope.row.cache"></span>
<span v-else></span>
</template>
</el-table-column>
<el-table-column prop="iframe" width="100px" label="是否隐藏">
<el-table-column prop="iframe" label="是否隐藏">
<template slot-scope="scope">
<span v-if="scope.row.hidden"></span>
<span v-else></span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建日期">
<el-table-column prop="createTime" label="创建日期" width="135px">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
@@ -92,6 +93,7 @@ import { del } from '@/api/menu'
import { parseTime } from '@/utils/index'
import eForm from './form'
export default {
name: 'Menu',
components: { treeTable, eForm },
mixins: [initData],
data() {
@@ -99,14 +101,16 @@ export default {
columns: [
{
text: '名称',
value: 'name'
value: 'name',
width: 140
}
],
delLoading: false, expand: true
delLoading: false, expand: true, height: 625
}
},
created() {
this.$nextTick(() => {
this.height = document.documentElement.clientHeight - 200
this.init()
})
},
@@ -148,7 +152,7 @@ export default {
this.isAdd = false
const _this = this.$refs.form
_this.getMenus()
_this.form = { id: data.id, component: data.component, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden }
_this.form = { id: data.id, component: data.component, componentName: data.componentName, name: data.name, sort: data.sort, pid: data.pid, path: data.path, iframe: data.iframe.toString(), roles: [], icon: data.icon, cache: data.cache, hidden: data.hidden }
_this.dialog = true
},
changExpand() {