From d452ddf5f00f9f7f7a8de12c02adb725f4be2f12 Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期二, 21 四月 2020 16:00:06 +0800 Subject: [PATCH] 用户管理角色选择权限控制 --- ruoyi-ui/src/views/system/menu/index.vue | 81 ++++++++++++++++++++++++++++++---------- 1 files changed, 60 insertions(+), 21 deletions(-) diff --git a/ruoyi-ui/src/views/system/menu/index.vue b/ruoyi-ui/src/views/system/menu/index.vue index b1a5cdb..74b4378 100644 --- a/ruoyi-ui/src/views/system/menu/index.vue +++ b/ruoyi-ui/src/views/system/menu/index.vue @@ -11,9 +11,9 @@ /> </el-form-item> <el-form-item label="状态"> - <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small"> + <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small"> <el-option - v-for="dict in visibleOptions" + v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" @@ -32,22 +32,22 @@ row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > - <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="130px"></el-table-column> - <el-table-column prop="icon" label="图标" align="center" width="100px"> + <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> + <el-table-column prop="icon" label="图标" align="center" width="100"> <template slot-scope="scope"> <svg-icon :icon-class="scope.row.icon" /> </template> </el-table-column> - <el-table-column prop="orderNum" label="排序" width="60px"></el-table-column> - <el-table-column prop="perms" label="权限标识" width="130px" :show-overflow-tooltip="true"></el-table-column> - <el-table-column prop="component" label="组件路径" width="180px" :show-overflow-tooltip="true"></el-table-column> - <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80px"></el-table-column> - <el-table-column label="创建时间" align="center" prop="createTime" width="180"> + <el-table-column prop="orderNum" label="排序" width="60"></el-table-column> + <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column> + <el-table-column label="创建时间" align="center" prop="createTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> - <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width"> + <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" @@ -74,7 +74,7 @@ </el-table> <!-- 添加或修改菜单对话框 --> - <el-dialog :title="title" :visible.sync="open" width="600px"> + <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="24"> @@ -82,6 +82,7 @@ <treeselect v-model="form.parentId" :options="menuOptions" + :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" /> @@ -151,11 +152,22 @@ <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" /> </el-form-item> </el-col> - <el-col :span="24"> - <el-form-item v-if="form.menuType != 'F'" label="菜单状态"> + <el-col :span="12"> + <el-form-item v-if="form.menuType != 'F'" label="显示状态"> <el-radio-group v-model="form.visible"> <el-radio v-for="dict in visibleOptions" + :key="dict.dictValue" + :label="dict.dictValue" + >{{dict.dictLabel}}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item v-if="form.menuType != 'F'" label="菜单状态"> + <el-radio-group v-model="form.status"> + <el-radio + v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue" >{{dict.dictLabel}}</el-radio> @@ -173,7 +185,7 @@ </template> <script> -import { listMenu, getMenu, treeselect, delMenu, addMenu, updateMenu } from "@/api/system/menu"; +import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import IconSelect from "@/components/IconSelect"; @@ -193,8 +205,10 @@ title: "", // 是否显示弹出层 open: false, - // 菜单状态数据字典 + // 显示状态数据字典 visibleOptions: [], + // 菜单状态数据字典 + statusOptions: [], // 查询参数 queryParams: { menuName: undefined, @@ -209,6 +223,9 @@ ], orderNum: [ { required: true, message: "菜单顺序不能为空", trigger: "blur" } + ], + path: [ + { required: true, message: "路由地址不能为空", trigger: "blur" } ] } }; @@ -217,6 +234,9 @@ this.getList(); this.getDicts("sys_show_hide").then(response => { this.visibleOptions = response.data; + }); + this.getDicts("sys_normal_disable").then(response => { + this.statusOptions = response.data; }); }, methods: { @@ -228,25 +248,43 @@ getList() { this.loading = true; listMenu(this.queryParams).then(response => { - this.menuList = response.data; + this.menuList = this.handleTree(response.data, "menuId"); this.loading = false; }); }, + /** 转换菜单数据结构 */ + normalizer(node) { + if (node.children && !node.children.length) { + delete node.children; + } + return { + id: node.menuId, + label: node.menuName, + children: node.children + }; + }, /** 查询菜单下拉树结构 */ getTreeselect() { - treeselect().then(response => { + listMenu().then(response => { this.menuOptions = []; - const menu = { id: 0, label: '主类目', children: [] }; - menu.children = response.data; + const menu = { menuId: 0, menuName: '主类目', children: [] }; + menu.children = this.handleTree(response.data, "menuId"); this.menuOptions.push(menu); }); }, - // 菜单显示状态字典翻译 + // 显示状态字典翻译 visibleFormat(row, column) { if (row.menuType == "F") { return ""; } return this.selectDictLabel(this.visibleOptions, row.visible); + }, + // 菜单状态字典翻译 + statusFormat(row, column) { + if (row.menuType == "F") { + return ""; + } + return this.selectDictLabel(this.statusOptions, row.status); }, // 取消按钮 cancel() { @@ -263,7 +301,8 @@ menuType: "M", orderNum: undefined, isFrame: "1", - visible: "0" + visible: "0", + status: "0" }; this.resetForm("form"); }, -- Gitblit v1.9.2