From d4ab8daa939334d634c5ccfe2ccac7d61d17a467 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期五, 28 十月 2022 15:07:35 +0800 Subject: [PATCH] 权限菜单加载--未完 --- src/views/operate/fivepack/shop/components/main/index.vue | 2 src/views/systemSetting/baseSetting/department/index.vue | 2 src/views/systemSetting/baseSetting/user/components/main/index.vue | 2 src/views/operate/fivepack/threepack/components/main/index.vue | 2 src/views/systemSetting/baseSetting/role/updateUser/index.vue | 336 +++++++++++++++++---------------- src/views/layout/components/Menu/index.vue | 220 +++++++++++++++++---- 6 files changed, 349 insertions(+), 215 deletions(-) diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue index 7a0c60f..1dfcb9e 100644 --- a/src/views/layout/components/Menu/index.vue +++ b/src/views/layout/components/Menu/index.vue @@ -5,7 +5,58 @@ <h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2> <el-scrollbar> <!-- 璺敱 --> - <el-menu router class="el-menu-vertical" :default-active="$route.path" > + <el-menu router class="el-menu-vertical" :default-active="$route.path"> + <!-- <el-submenu + :index="menu.url ? menu.url : menu.id.toString()" + v-for="menu in menuList" + :key="menu.id" + class="firstMenu" + > + <template slot="title"> + <span slot="prefix" class="icon-padding fisrtSpan"> + <svg-icon :icon-class="menu.icon"></svg-icon> + </span> + <span class="fisrtSpan">{{ menu.title }}</span> + </template> + <template v-if="menu.children.length > 0"> + <el-submenu + v-for="secondMenu in menu.children" + :key="secondMenu.id" + :index=" + secondMenu.url ? secondMenu.url : secondMenu.id.toString() + " + class="secondMenu" + > + <template v-if="secondMenu.children.length > 0"> + <template slot="title"> + <span class="secondSpan">{{ secondMenu.title }}</span> + </template> + <el-menu-item + v-for="thirdMenu in secondMenu.children" + :key="thirdMenu.id" + :index="`${thirdMenu.id}`" + :route="{ name: thirdMenu.url }" + >{{ thirdMenu.title }}</el-menu-item + > + </template> + <el-menu-item + v-else + :key="secondMenu.id" + :index="`${secondMenu.id}`" + :route="{ name: secondMenu.url }" + >{{ secondMenu.title }}</el-menu-item + > + </el-submenu> + </template> + + <el-menu-item + v-else + :key="menu.id" + :index="`${menu.id}`" + :route="{ name: menu.url }" + >{{ menu.title }}</el-menu-item + > + </el-submenu> --> <!-- 绯荤粺璁剧疆妯″潡 --> <el-submenu index="/home/system" class="firstMenu"> <template slot="title"> @@ -21,29 +72,47 @@ <span class="secondSpan">鍩烘湰璁剧疆</span> </template> <!-- 鐢ㄦ埛绠$悊 --> - <el-menu-item index="/home/system/userSetting/user">鐢ㄦ埛绠$悊</el-menu-item> + <el-menu-item index="/home/system/userSetting/user" + >鐢ㄦ埛绠$悊</el-menu-item + > <!-- 瑙掕壊绠$悊 --> - <el-menu-item index="/home/system/userSetting/role">瑙掕壊绠$悊</el-menu-item> + <el-menu-item index="/home/system/userSetting/role" + >瑙掕壊绠$悊</el-menu-item + > <!-- 閮ㄩ棬绠$悊 --> - <el-menu-item index="/home/system/userSetting/department">閮ㄩ棬绠$悊</el-menu-item> + <el-menu-item index="/home/system/userSetting/department" + >閮ㄩ棬绠$悊</el-menu-item + > </el-submenu> <!-- 骞冲彴璁剧疆 --> <el-submenu index="/home/system/platform" class="secondMenu"> <template slot="title"> <span class="secondSpan">闂ㄦ埛绠$悊</span> </template> - <el-menu-item index="/home/system/platform/mySetting">鑷畾涔夎彍鍗�</el-menu-item> - <el-menu-item index="/home/system/platform/portalSetting">logo绠$悊</el-menu-item> - <el-menu-item index="/home/system/platform/otherInterface">绗笁鏂规帴鍙g鐞�</el-menu-item> + <el-menu-item index="/home/system/platform/mySetting" + >鑷畾涔夎彍鍗�</el-menu-item + > + <el-menu-item index="/home/system/platform/portalSetting" + >logo绠$悊</el-menu-item + > + <el-menu-item index="/home/system/platform/otherInterface" + >绗笁鏂规帴鍙g鐞�</el-menu-item + > </el-submenu> <!-- 璁惧绠$悊 --> <el-submenu index="/home/system/device" class="secondMenu"> <template slot="title"> <span class="secondSpan">璁惧绠$悊</span> </template> - <el-menu-item index="/home/system/device/bayonet">鍗″彛璁惧绠$悊</el-menu-item> - <el-menu-item index="/home/system/device/point">鐐逛綅绠$悊</el-menu-item> - <el-menu-item index="/home/system/device/grid">缃戞牸绠$悊</el-menu-item> + <el-menu-item index="/home/system/device/bayonet" + >鍗″彛璁惧绠$悊</el-menu-item + > + <el-menu-item index="/home/system/device/point" + >鐐逛綅绠$悊</el-menu-item + > + <el-menu-item index="/home/system/device/grid" + >缃戞牸绠$悊</el-menu-item + > </el-submenu> </el-submenu> <!-- 杩愯惀绠$悊妯″潡 --> @@ -58,26 +127,44 @@ <template slot="title"> <span class="secondSpan">鍩虹璁剧疆</span> </template> - <el-menu-item index="/home/operate/baseSetting/violation">杩濊浜嬮」璁剧疆</el-menu-item> - <el-menu-item index="/home/operate/baseSetting/illegalBuild">杩濆缓浜嬮」璁剧疆</el-menu-item> + <el-menu-item index="/home/operate/baseSetting/violation" + >杩濊浜嬮」璁剧疆</el-menu-item + > + <el-menu-item index="/home/operate/baseSetting/illegalBuild" + >杩濆缓浜嬮」璁剧疆</el-menu-item + > <!-- <el-menu-item index="/home/operate/baseSetting/threepack">闂ㄥ墠涓夊寘璁剧疆</el-menu-item> --> </el-submenu> <el-submenu index="/home/operate/disposal" class="secondMenu"> <template slot="title"> <span class="secondSpan">浜嬮」澶勭悊绠$悊</span> </template> - <el-menu-item index="/home/operate/casepool/pool">妗堜欢姹�</el-menu-item> - <el-menu-item index="/home/operate/casepool/escalation">涓婃姤绠$悊</el-menu-item> - <el-menu-item index="/home/operate/casepool/dispatch">璋冨害绠$悊</el-menu-item> - <el-menu-item index="/home/operate/casepool/learn">鍐嶅涔犵鐞�</el-menu-item> - <el-menu-item index="/home/operate/casepool/notDeal">鏆備笉澶勭悊</el-menu-item> + <el-menu-item index="/home/operate/casepool/pool" + >妗堜欢姹�</el-menu-item + > + <el-menu-item index="/home/operate/casepool/escalation" + >涓婃姤绠$悊</el-menu-item + > + <el-menu-item index="/home/operate/casepool/dispatch" + >璋冨害绠$悊</el-menu-item + > + <el-menu-item index="/home/operate/casepool/learn" + >鍐嶅涔犵鐞�</el-menu-item + > + <el-menu-item index="/home/operate/casepool/notDeal" + >鏆備笉澶勭悊</el-menu-item + > </el-submenu> <el-submenu index="/home/operate/management" class="secondMenu"> <template slot="title"> <span class="secondSpan">瀹℃牳绠$悊</span> </template> - <el-menu-item index="/home/operate/management">瀹℃牳绠$悊</el-menu-item> - <el-menu-item index="/home/operate/management/managementMessage">鐭俊瀹℃牳绠$悊</el-menu-item> + <el-menu-item index="/home/operate/management" + >瀹℃牳绠$悊</el-menu-item + > + <el-menu-item index="/home/operate/management/managementMessage" + >鐭俊瀹℃牳绠$悊</el-menu-item + > <!-- <el-menu-item index="/home/operate/baseSetting/threepack">闂ㄥ墠涓夊寘璁剧疆</el-menu-item> --> </el-submenu> <el-menu-item index="/home/operate/myWait">鎴戠殑寰呭姙</el-menu-item> @@ -85,27 +172,47 @@ <template slot="title"> <span class="secondSpan">涓撻」鏁存不</span> </template> - <el-menu-item index="/home/operate/rectification/taskList">浠诲姟鍒楄〃</el-menu-item> - <el-menu-item index="/home/operate/rectification/surveyList">鏅煡鍒楄〃</el-menu-item> - <el-menu-item index="/home/operate/rectification/renovationList">鏁存不鍒楄〃</el-menu-item> + <el-menu-item index="/home/operate/rectification/taskList" + >浠诲姟鍒楄〃</el-menu-item + > + <el-menu-item index="/home/operate/rectification/surveyList" + >鏅煡鍒楄〃</el-menu-item + > + <el-menu-item index="/home/operate/rectification/renovationList" + >鏁存不鍒楄〃</el-menu-item + > </el-submenu> - <el-menu-item index="/home/operate/lawEnforcement">宸℃煡鎵ф硶</el-menu-item> + <el-menu-item index="/home/operate/lawEnforcement" + >宸℃煡鎵ф硶</el-menu-item + > <el-menu-item index="/home/operate/dasds">妗堝嵎鏌ヨ</el-menu-item> <el-submenu index="/home/operate/fivepack" class="secondMenu"> <template slot="title"> <span class="secondSpan">闂ㄥ墠浜斿寘澶勭疆绠$悊</span> </template> - <el-menu-item index="/home/operate/fivepack/threepackage">闂ㄥ墠涓夊寘</el-menu-item> - <el-menu-item index="/home/operate/fivepack/shop">搴楅摵绠$悊</el-menu-item> + <el-menu-item index="/home/operate/fivepack/threepackage" + >闂ㄥ墠涓夊寘</el-menu-item + > + <el-menu-item index="/home/operate/fivepack/shop" + >搴楅摵绠$悊</el-menu-item + > </el-submenu> - <el-menu-item index="/home/operate/dasdas">绠楁硶妯″瀷绠$悊</el-menu-item> + <el-menu-item index="/home/operate/dasdas" + >绠楁硶妯″瀷绠$悊</el-menu-item + > <el-submenu index="/home/operate/car" class="secondMenu"> <template slot="title"> <span class="secondSpan">杞﹁締绠$悊</span> </template> - <el-menu-item index="/home/operate/car/carIndex">杞﹁締绠$悊</el-menu-item> - <el-menu-item index="/home/operate/car/lawTrajectory">杞ㄨ抗鍒嗘瀽(鎵ф硶杞�)</el-menu-item> - <el-menu-item index="/home/operate/car/soilTrajectory">杞ㄨ抗鍒嗘瀽(娓e湡杞�)</el-menu-item> + <el-menu-item index="/home/operate/car/carIndex" + >杞﹁締绠$悊</el-menu-item + > + <el-menu-item index="/home/operate/car/lawTrajectory" + >杞ㄨ抗鍒嗘瀽(鎵ф硶杞�)</el-menu-item + > + <el-menu-item index="/home/operate/car/soilTrajectory" + >杞ㄨ抗鍒嗘瀽(娓e湡杞�)</el-menu-item + > </el-submenu> <el-menu-item index="/home/operate">鍥剧墖绠$悊</el-menu-item> <el-menu-item index="/home/operate">瑙嗛绠$悊</el-menu-item> @@ -113,8 +220,12 @@ <template slot="title"> <span class="secondSpan">娑堟伅绠$悊</span> </template> - <el-menu-item index="/home/operate/message/messageIndex">娑堟伅绠$悊</el-menu-item> - <el-menu-item index="/home/operate/message/mycontrol">鏍忕洰绠$悊</el-menu-item> + <el-menu-item index="/home/operate/message/messageIndex" + >娑堟伅绠$悊</el-menu-item + > + <el-menu-item index="/home/operate/message/mycontrol" + >鏍忕洰绠$悊</el-menu-item + > </el-submenu> <el-menu-item index="/home/operate">鐭俊绠$悊</el-menu-item> <el-menu-item index="/home/operate/log">鏃ュ織绠$悊</el-menu-item> @@ -193,27 +304,40 @@ <script> export default { - data(){ - return{ - - } + data() { + return { + menuList: [], + }; }, - created(){ + created() { // this.getMenuList(); + this.loadMenu(); }, - methods:{ + methods: { + loadMenu() { + const info = JSON.parse(sessionStorage.getItem("user")); + var timer; + if (info && info.menus) { + clearTimeout(timer); + this.menuList = info.menus; + console.log(info.menus); + } else { + timer = setInterval(() => { + this.loadMenu(); + }, 1000); + } + }, // 鑾峰彇鑿滃崟鍒楄〃 - getMenuList(){ + getMenuList() { let arr; this.$axios({ - method:'get', - url:'sccg/system/portal/menu/search_myself' - }) - .then(res=>{ + method: "get", + url: "sccg/system/portal/menu/search_myself", + }).then((res) => { console.log(res); - }) - } - } + }); + }, + }, }; </script> @@ -255,7 +379,7 @@ background: #07162e; text-align: left; - &:hover>.el-submenu__title { + &:hover > .el-submenu__title { background-color: #092c4a; } @@ -285,7 +409,7 @@ } .secondMenu { - &:hover>.el-submenu__title { + &:hover > .el-submenu__title { background-color: #092c4a; } @@ -295,7 +419,7 @@ } .thirdMenu { - &:hover>.el-submenu__title { + &:hover > .el-submenu__title { background-color: #092c4a; } diff --git a/src/views/operate/fivepack/shop/components/main/index.vue b/src/views/operate/fivepack/shop/components/main/index.vue index ed93039..e2f45b3 100644 --- a/src/views/operate/fivepack/shop/components/main/index.vue +++ b/src/views/operate/fivepack/shop/components/main/index.vue @@ -56,7 +56,7 @@ search: "", dialogUpdate: false, userInfo: '', - totalNum: 200, + totalNum: 0, pageSize: 10, currentPage: 1, renderFlag: false, diff --git a/src/views/operate/fivepack/threepack/components/main/index.vue b/src/views/operate/fivepack/threepack/components/main/index.vue index 8f0776a..8633125 100644 --- a/src/views/operate/fivepack/threepack/components/main/index.vue +++ b/src/views/operate/fivepack/threepack/components/main/index.vue @@ -60,7 +60,7 @@ dialogUpdate: false, updateFlag: false, userInfo: '', - totalNum: 200, + totalNum: 0, pageSize: 10, currentPage: 1, renderFlag: false, diff --git a/src/views/systemSetting/baseSetting/department/index.vue b/src/views/systemSetting/baseSetting/department/index.vue index cec4db5..50452b4 100644 --- a/src/views/systemSetting/baseSetting/department/index.vue +++ b/src/views/systemSetting/baseSetting/department/index.vue @@ -159,7 +159,7 @@ dialogUpdate: false, updateFlag: false, userInfo: "", - totalNum: 200, + totalNum: 0, pageSize: 10, currentPage: 1, context: "", diff --git a/src/views/systemSetting/baseSetting/role/updateUser/index.vue b/src/views/systemSetting/baseSetting/role/updateUser/index.vue index c7940b3..28c9738 100644 --- a/src/views/systemSetting/baseSetting/role/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/role/updateUser/index.vue @@ -1,189 +1,199 @@ <template> - <div class="updateUser"> - <main> - <div class="mainContent"> - <div class="my-tree"> - <div class="my-tree__wrap"> - <el-tree ref="tree" :data="roleList" :props="defaultProps" show-checkbox @check="handleCheck" - :default-checked-keys="checkedIds" default-expand-all node-key="id"> - </el-tree> - </div> - <!-- <div class="my-tree__bottom"></div> --> - <!-- <div class="my-tree__right"></div> --> - </div> - <div class="selection"> - <el-button class="cancel" @click="resetRole">鍙栨秷</el-button> - <el-button class="save" @click="saveRole">淇濆瓨</el-button> - </div> - </div> - </main> - </div> + <div class="updateUser"> + <main> + <div class="mainContent"> + <div class="my-tree"> + <div class="my-tree__wrap"> + <el-tree + ref="tree" + :data="roleList" + :props="defaultProps" + show-checkbox + :default-checked-keys="checkedIds" + default-expand-all + node-key="id" + > + </el-tree> + </div> + <!-- <div class="my-tree__bottom"></div> --> + <!-- <div class="my-tree__right"></div> --> + </div> + <div class="selection"> + <el-button class="cancel" @click="resetRole">鍙栨秷</el-button> + <el-button class="save" @click="saveRole">淇濆瓨</el-button> + </div> + </div> + </main> + </div> </template> <script> export default { - data() { - return { - role: { - name: '', - sort: '', - description: '', - }, - roleList: [], - defaultProps: { - children: 'children', - label: 'title' - }, - treeLabel: '', - treeId: 23, - checkedIds: [], - resCheckedIds: [], + data() { + return { + role: { + name: "", + sort: "", + description: "", + }, + roleList: [], + defaultProps: { + children: "children", + label: "title", + }, + treeLabel: "", + treeId: 23, + checkedIds: [], + resCheckedIds: [], + }; + }, + created() { + const that = this; + this.getRoleMenus(this.userInfo.id); + this.getMenuList(); + }, + methods: { + // 鑾峰彇绯荤粺鑿滃崟 + getMenuList() { + this.$axios({ + method: "get", + url: "sccg/menu/treeList", + }).then((res) => { + this.roleList = res.data; + }); + }, + // 鏍戝舰鎺т欢澶嶉�夋鐐瑰嚮浜嬩欢 + handleCheck(data, checked) { + // console.log(checked.checkedKeys); + // this.checkedIds = checked.checkedKeys; + // console.log(this.checkedIds); + }, + // 淇濆瓨role + saveRole() { + let nodes = this.$refs.tree.getCheckedNodes(false, true); + + const { userInfo } = this; + this.checkedIds = nodes.map((n) => n.id); + + this.$axios({ + method: "post", + url: + "sccg/role/allocMenu?roleId=" + + userInfo.id + + "&menuIds=" + + this.checkedIds, + }).then((res) => { + if (res.code === 200) { + this.$message({ + type: "success", + message: "淇敼瑙掕壊鏉冮檺鎴愬姛", + }); + this.getRoleMenus(userInfo.id); + this.$emit("changeDialog", { flag: false }); + // this.getUserList(); + } else { + this.$message({ + type: "warning", + message: res.message, + }); } + }); + // this.$emit('changeDialog',{dialogUpdate:false}); }, - created() { - const that = this; - this.getRoleMenus(this.userInfo.id); - this.getMenuList(); + // 娑堥櫎role + resetRole() { + this.resCheckedIds = []; + this.$emit("changeDialog", { dialogUpdate: false }); }, - methods: { - // 鑾峰彇绯荤粺鑿滃崟 - getMenuList() { - this.$axios({ - method: 'get', - url: 'sccg/menu/treeList', - }) - .then(res => { - this.roleList = res.data; - }) - }, - // 鏍戝舰鎺т欢澶嶉�夋鐐瑰嚮浜嬩欢 - handleCheck(data, checked) { - console.log(checked.checkedKeys); - this.checkedIds = checked.checkedKeys; - console.log(this.checkedIds); - }, - // 淇濆瓨role - saveRole() { - this.resCheckedIds = []; - const { userInfo } = this; - this.resCheckedIds = this.checkedIds; - this.$axios({ - method: 'post', - url: 'sccg/role/allocMenu?roleId=' + userInfo.id + '&menuIds=' + this.checkedIds, - }) - .then(res => { - if (res.code === 200) { - this.$message({ - type: 'success', - message: '淇敼瑙掕壊鏉冮檺鎴愬姛', - }) - this.getRoleMenus(userInfo.id); - this.$emit('changeDialog', { flag: false }); - this.getUserList(); - } else { - this.$message({ - type: 'warning', - message: res.message - }) - } - }) - // this.$emit('changeDialog',{dialogUpdate:false}); - }, - // 娑堥櫎role - resetRole() { - this.resCheckedIds = []; - this.$emit('changeDialog', { dialogUpdate: false }); - }, - // 鑾峰彇瑙掕壊鑿滃崟 - getRoleMenus(roleId) { - this.$axios({ - method: 'get', - url: `sccg/role/listMenu/${roleId}` - }) - .then(res => { - this.checkedIds = []; - res.data.forEach(item => { - this.checkedIds.push(item.id); - }) - }) - } + // 鑾峰彇瑙掕壊鑿滃崟 + getRoleMenus(roleId) { + this.$axios({ + method: "get", + url: `sccg/role/listMenu/${roleId}`, + }).then((res) => { + this.checkedIds = []; + res.data.forEach((item) => { + this.checkedIds.push(item.id); + }); + }); }, - props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog'] -} + }, + props: ["userInfo", "updateFlag", "getUserList", "changeDialog"], +}; </script> <style lang="scss" scoped> .updateUser { - border-radius: 1px; + border-radius: 1px; + background-color: #09152f; + + main { + text-align: left; + padding: 50px 55px; background-color: #09152f; - main { - text-align: left; - padding: 50px 55px; - background-color: #09152f; + .mainContent { + .my-tree { + height: 200px; + overflow: hidden; + background-color: #17324c; + position: relative; + border-radius: 4px; - .mainContent { - .my-tree { - height: 200px; - overflow: hidden; - background-color: #17324c; - position: relative; - border-radius: 4px; - - .my-tree__wrap { - overflow-y: scroll; - height: 200px; - } - - .my-tree__bottom { - position: absolute; - left: 0px; - bottom: 0px; - background-color: #09152f; - width: 100%; - height: 20px; - border-bottom-left-radius: 4px; - } - - .my-tree__right { - position: absolute; - right: 0px; - top: 0px; - background-color: #09152f; - width: 20px; - height: 100%; - } - } + .my-tree__wrap { + overflow-y: scroll; + height: 200px; } - } - &::v-deep .el-textarea__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + .my-tree__bottom { + position: absolute; + left: 0px; + bottom: 0px; + background-color: #09152f; + width: 100%; + height: 20px; + border-bottom-left-radius: 4px; + } - ::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + .my-tree__right { + position: absolute; + right: 0px; + top: 0px; + background-color: #09152f; + width: 20px; + height: 100%; + } + } } + } + + &::v-deep .el-textarea__inner { + background-color: #09152f; + border: 1px solid #17324c; + } + + ::v-deep .el-input__inner { + background-color: #09152f; + border: 1px solid #17324c; + } } .selection { - margin-top: 10px; - display: flex; - justify-content: space-between; + margin-top: 10px; + display: flex; + justify-content: space-between; - .el-button { - padding: 10px 20px; - border-radius: 4px; - } + .el-button { + padding: 10px 20px; + border-radius: 4px; + } - .save { - background-color: #409eff; - color: #fff; - } + .save { + background-color: #409eff; + color: #fff; + } - .cancel { - background-color: #09152f; - color: #4b9bb7; - } + .cancel { + background-color: #09152f; + color: #4b9bb7; + } } </style> \ No newline at end of file diff --git a/src/views/systemSetting/baseSetting/user/components/main/index.vue b/src/views/systemSetting/baseSetting/user/components/main/index.vue index 755ab53..4ccec1b 100644 --- a/src/views/systemSetting/baseSetting/user/components/main/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/main/index.vue @@ -112,7 +112,7 @@ dialogView:false, updateFlag: false, userInfo: '', - totalNum: 200, + totalNum: 0, pageSize: 10, currentPage: 1, renderFlag: false, -- Gitblit v1.8.0