From f2587f2104ea44568171de5b3ec844868fb6224b Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 02 八月 2023 11:24:59 +0800
Subject: [PATCH] 1.角色权限完善
---
src/views/basicSettings/roleList.vue | 448 ++++++++++++++++++++++++--------------------------------
1 files changed, 192 insertions(+), 256 deletions(-)
diff --git a/src/views/basicSettings/roleList.vue b/src/views/basicSettings/roleList.vue
index 89635a6..a59c491 100644
--- a/src/views/basicSettings/roleList.vue
+++ b/src/views/basicSettings/roleList.vue
@@ -1,93 +1,80 @@
<template>
<div>
<div class="body" :style="{height:mainHeight+'px'}">
- <div class="bodyTopButtonGroup" style="justify-content: space-between">
- <el-button v-waves type="primary" icon="el-icon-circle-plus-outline">鏂板</el-button>
- <el-button v-waves icon="el-icon-download">瀵煎叆</el-button>
- </div>
-
- <div class="bodyTopFormGroup">
- <el-form
- ref="form"
- :model="form"
- label-width="100px"
- inline
- style="display: flex;"
- >
- <div class="elForm">
- <el-form-item label="姣嶄欢缂栫爜" style=" display: flex;">
- <el-input v-model="form.OrgCode" placeholder="璇疯緭鍏�" style="width: 200px" />
- </el-form-item>
- <el-form-item label="姣嶄欢鍚嶇О" style=" display: flex;">
- <el-input v-model="form.OrgName" placeholder="璇疯緭鍏�" style="width: 200px" />
- </el-form-item>
- <el-form-item label="姣嶄欢瑙勬牸" style=" display: flex;">
- <el-input v-model="form.OrgName" placeholder="璇疯緭鍏�" style="width: 200px" />
- </el-form-item>
-
- <el-form-item label="鐗堟湰缂栧彿" style=" display: flex;">
- <el-input v-model="form.OrgName" placeholder="璇疯緭鍏�" style="width: 200px" />
- </el-form-item>
- <el-form-item v-show="isExpandForm" label="鍒涘缓浜哄憳" style=" display: flex;">
- <el-input v-model="form.UserName" style="width: 200px" placeholder="璇疯緭鍏�" />
- </el-form-item>
- <el-form-item v-show="isExpandForm" label="鍒涘缓鏃ユ湡" style=" display: flex;">
- <el-date-picker
- v-model="form.createdate"
- style="width: 200px"
- type="date"
- placeholder="閫夋嫨鏃ユ湡"
- />
- </el-form-item>
- </div>
- <div
- class="bodySearchReset"
- :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
- >
- <el-button v-waves type="primary" icon="el-icon-search">鏌ヨ</el-button>
- <el-button v-waves type="info" icon="el-icon-refresh">閲嶇疆</el-button>
- </div>
- </el-form>
- <div
- class="bodyTopFormExpand"
- >
- <svg-icon
- v-show="mouseHoverType==='mouseout'"
- style="cursor: pointer"
- :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
- @mouseenter="mouseHoverType=$event.type"
- />
- <svg-icon
- v-show="mouseHoverType==='mouseenter'"
- style="cursor: pointer"
- :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
- @click="isExpandForm=!isExpandForm"
- @mouseout="mouseHoverType=$event.type"
- />
- </div>
- </div>
<div
class="elTableDiv"
>
- <div style="width: 300px;">
+ <div style="width: 300px;background:#fff">
+
+ <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
+ <div style="display: flex;">
+ <div
+ style="width: 5px;height: 100%;border-radius: 5px;"
+ :style="{background:$store.state.settings.theme}"
+ />
+ <div style="margin-left: 8px;">瑙掕壊鍚嶇О</div>
+ </div>
+
+ <div style="margin-right:10px">
+ <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="rolePlusClick" />
+ </div>
+
+ </div>
+
<el-tree
ref="treeLeftRef"
- style="padding: 10px;"
- :style="{height:isExpandForm?tableHeight:(tableHeight+105)+'px'}"
+ style="padding: 10px;overflow: scroll"
+ :style="{height:(tableHeight-20)+'px'}"
:data="treeLeft"
node-key="code"
highlight-current
:props="defaultPropsLeft"
:default-expand-all="true"
+ :expand-on-click-node="false"
@node-click="treeLeftNodeClick"
- />
+ >
+ <span slot-scope="{ node, data }" class="custom-tree-node">
+ <span v-if="!data.isEdit">{{ node.label }}</span>
+ <input
+ v-if="data.isEdit"
+ :ref="data.code"
+ v-model="node.label"
+ type="text"
+ @click.stop
+ @blur="roleSave(data)"
+ @keyup.enter="roleSave(data)"
+ >
+
+ <span v-if="!data.isEdit">
+ <i
+ v-if="data.code!=='000'"
+ class="el-icon-edit"
+ style="margin-right:10px;color: #999"
+ @click.stop="val=>roleEditClick(val,node,data)"
+ />
+ <i
+ v-if="data.code!=='000'"
+ class="el-icon-delete"
+ style="margin-right: 4px;color: #999"
+ @click.stop="val=>roleDeleteClick(val,node,data)"
+ />
+ </span>
+ </span>
+ </el-tree>
</div>
<div
- style="margin-left: 15px;width:100%;"
+ style="margin-left: 15px;width:100%;position: relative"
>
+
+ <el-button
+ style="position: absolute;right: 15px;z-index:1;top:3px"
+ type="primary"
+ @click="saveClick"
+ >淇� 瀛�</el-button>
+
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="PC绔�" name="PC绔�">
<div style="display: flex;">
@@ -96,14 +83,14 @@
ref="scrollLeft"
style="border-right: 1px solid rgba(0,0,0,0.2);width: 200px;
overflow-y: auto;overflow-x:hidden;"
- :style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
+ :style="{height:(tableHeight-40)+'px'}"
@scroll="scrollLeftScroll()"
- @mouseover="changeScrollLeftFlag('left')"
+ @mouseover="isScroll='left'"
>
<div style=" ">
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
</div>
- <!-- :style="{height:isExpandForm?tableHeight:(tableHeight+15)+'px',}"-->
+
<el-tree
ref="treeCenterRef"
style="padding-top: 10px;width: 199px;"
@@ -122,9 +109,9 @@
<div
ref="scrollCenter"
style="border-right: 1px solid rgba(0,0,0,0.2);width: 600px;padding-left: 10px;overflow-y: auto"
- :style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
+ :style="{height:(tableHeight-40)+'px'}"
@scroll="scrollCenterScroll()"
- @mouseover="changeScrollLeftFlag('center')"
+ @mouseover="isScroll='center'"
>
<div style=" ">
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鎸夐挳鏉冮檺
@@ -155,8 +142,8 @@
<el-checkbox
v-for="i in it.itemButton"
- :key="i"
- :label="i"
+ :key="i.code"
+ :label="i.name"
style="display:flex;align-items: center"
/>
</el-checkbox-group>
@@ -169,9 +156,9 @@
<div
ref="scrollRight"
style="width: 360px;padding-left: 10px;overflow-y: auto"
- :style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
+ :style="{height:(tableHeight-40)+'px',}"
@scroll="scrollRightScroll()"
- @mouseover="changeScrollLeftFlag('right')"
+ @mouseover="isScroll='right'"
>
<div style=" ">
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鏁版嵁鏉冮檺
@@ -201,9 +188,9 @@
>
<el-radio
v-for="i in it.itemData"
- :key="i"
+ :key="i.code"
style="display:flex;align-items: center"
- :label="i"
+ :label="i.name"
/>
</el-radio-group>
</div>
@@ -228,42 +215,26 @@
</template>
<script>
-import Pagination from '@/components/Pagination'
-import ImportPicker from '@/components/ImportPicker'
-import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import {
+ RolePermissionSava,
RolePermissionSearchRole,
RolePermissionSearchRoleMenu,
RolePermissionSearchRoleMenuButton
} from '@/api/basicSettings'
import arrayToTree from 'array-to-tree'
+import { throttle } from '@/utils/debounceAndThrottle'
export default {
- name: 'Zzjg',
- components: {
- Pagination, ImportPicker
- },
- directives: { elDragDialog, waves },
+ name: 'RoleList',
+ directives: { waves },
data() {
return {
- mouseHoverType: 'mouseout',
- isExpandForm: false,
mainHeight: 0,
tableHeight: 0,
- form: {
- OrgCode: '', // 缁勭粐鏋舵瀯浠ｇ爜
- OrgName: '', // 缁勭粐鏋舵瀯鍚嶇О
- OrgType: '', // 缁勭粐绫诲瀷
- UserName: '', // 鍒涘缓浜哄憳
- createdate: '',
- prop: 'lm_date', // 鎺掑簭瀛楁
- order: 'desc', // 鎺掑簭瀛楁
- page: 1, // 绗嚑椤�
- rows: 20 // 姣忛〉澶氬皯鏉�
- },
- treeLeft: [],
- treeCenter: [],
+
+ treeLeft: [], // 宸︿晶鏍�
+ treeCenter: [], // 涓棿鏍�
defaultPropsLeft: {
children: 'roles',
label: 'name'
@@ -285,6 +256,20 @@
}
},
+ watch: {
+ treeLeft: {
+ handler(newValue, oldValue) {
+ newValue[0].roles.forEach(i => {
+ if (i.isEdit) {
+ this.$nextTick(() => {
+ this.$refs[i.code].focus()
+ })
+ }
+ })
+ },
+ deep: true
+ }
+ },
created() {
this.getRolePermissionSearchRole()
@@ -298,7 +283,12 @@
// 鑾峰彇瑙掕壊鏉冮檺鏌ヨ瑙掕壊
async getRolePermissionSearchRole() {
const { data: res } = await RolePermissionSearchRole()
+ res[0].roles.forEach(i => {
+ i.isEdit = false
+ })
+
this.treeLeft = res
+
if (res.length > 0) {
this.$nextTick(() => { // 榛樿閫変腑绗竴涓�
this.$refs.treeLeftRef.setCurrentKey(res[0].roles[0].code) // 榛樿閫変腑鑺傜偣绗竴涓�
@@ -327,12 +317,11 @@
this.menuCheckedCodeArr = []
- // console.log(this.allButtonData, 213)
result.forEach(item => {
if (item.children && item.children.length) {
item.children.forEach(it => {
// 鎸夐挳鏉冮檺鍥炴樉
- const buttonAll = this.allButtonData.tButton.filter(j => j.menucode === it.code).map(j => j.name)
+ const buttonAll = this.allButtonData.tButton.filter(j => j.menucode === it.code)
const buttonChecked = this.allButtonData.tButton.filter(j =>
j.menucode === it.code && j.flag === 'Y'
).map(j => j.name)
@@ -340,11 +329,11 @@
it.checkedButton = buttonChecked
// 鏁版嵁鏉冮檺鍥炴樉
- const dataAll = this.allButtonData.tData.filter(j => j.menucode === it.code).map(j => j.name)
- const dataChecked = this.allButtonData.tData.filter(j => j.menucode === it.code && j.flag === 'Y').name
- // console.log(dataAll, dataChecked, 2)
+ const dataAll = this.allButtonData.tData.filter(j => j.menucode === it.code)
+ const dataChecked = this.allButtonData.tData.filter(j => j.menucode === it.code && j.flag === 'Y')
+
it.itemData = dataAll
- it.checkedData = dataChecked
+ it.checkedData = dataChecked.length > 0 ? dataChecked[0].name : []
// 鐢ㄤ綔鑿滃崟鍕鹃�夊洖鏄�
if (it.flag === 'Y') {
@@ -356,22 +345,20 @@
}
})
- console.log(JSON.parse(JSON.stringify(result)), 8)
+ // console.log(JSON.parse(JSON.stringify(result)), 8)
this.treeCenter = [
{ code: '-1', name: '鍏ㄩ儴', flag: result.every(i => i.flag === 'Y') ? 'Y' : 'N', children: result }
]
- // this.buttonIsChecked = result.every(i => i.flag === 'Y')
this.handleCheckedButtonChange('', '', true)
this.handleCheckedDataChange('', '', true)
- // console.log(this.menuCheckedCodeArr, 2)
+
this.$nextTick(() => {
this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
})
this.$forceUpdate()
- // console.log(this.treeCenter[0].children)
},
// 宸﹁竟婊氬姩鏉℃粦鍔ㄦ椂
@@ -395,15 +382,6 @@
this.$refs.scrollCenter.scrollTop = this.$refs.scrollRight.scrollTop
}
},
-
- resize() {
-
- },
-
- changeScrollLeftFlag(val) {
- this.isScroll = val
- },
-
// 鍏ㄩ�夋敼鍙�
handleCheckAllChange(val, belong) {
const checkedKeys = this.$refs.treeCenterRef.getCheckedKeys()
@@ -414,7 +392,7 @@
item.children.forEach(it => {
if (checkedKeys.includes(it.code)) {
if (belong === 'button') {
- it.checkedButton = it.itemButton
+ it.checkedButton = it.itemButton.map(i => i.name)
}
if (belong === 'data') {
it.checkedData = '鍏ㄩ儴'
@@ -439,8 +417,6 @@
}
})
}
-
- // console.log(this.treeCenter[0].children, 20)
},
// 鍗曚釜鎸夐挳鏀瑰彉
handleCheckedButtonChange(value, code, flag) {
@@ -470,7 +446,6 @@
this.buttonIsChecked = count === childrenLength
this.$forceUpdate()
},
-
// 鑾峰彇鏍戝舰鑺傜偣node
getLeftTreeNode(data, Node, VueComponent) {
// console.log(data, Node, VueComponent, 2221)
@@ -488,7 +463,7 @@
}
this.$forceUpdate()
},
- // 澶勭悊鏍戝舰鍕鹃��
+ // 澶勭悊涓棿鏍戝舰鍕鹃��
handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
// console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '鍔犲瀹�')
@@ -504,9 +479,10 @@
}
}
},
- // 澶勭悊鏍戝舰閫変腑鍊兼敼鍙�
+ // 澶勭悊涓棿鏍戝舰閫変腑鍊兼敼鍙�
handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
// console.log(obj, selfChecked, selfChildrenTreeCheck, '鐜嬭�佸悏')
+ obj.flag = selfChecked ? 'Y' : 'N'
if (!selfChildrenTreeCheck) {
if (!selfChecked) {
this.treeCenter[0].children.forEach(item => {
@@ -523,24 +499,22 @@
}
}
},
-
// 鍗曢�夋鎸夐挳鏀瑰彉
handleCheckedDataChange(value, code, flag) {
// console.log(value, code)
- if (flag) {
+ if (!flag) {
this.menuCheckedCodeArr.push(code)
this.menuCheckedCodeArr = [...new Set(this.menuCheckedCodeArr)]
this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
}
-
// 杩欓噷鏄垽鏂叏閫塺adio 鏄惁閫変腑
let count = 0
let childrenLength = 0
this.treeCenter[0].children.forEach(item => {
if (item.children && item.children.length) {
item.children.forEach(it => {
- if (it.checkedData) {
+ if (it.checkedData.length > 0) {
count++
}
if (it.itemData.length > 0) {
@@ -551,145 +525,107 @@
})
// console.log(count, childrenLength, 9)
this.dataIsChecked = count === childrenLength
- // console.log(JSON.parse(JSON.stringify(this.treeCenter[0].children)))
-
this.$forceUpdate()
},
-
- async treeLeftNodeClick(obj, Node, VueComponent) {
- // this.menuCheckedCodeArr = []
-
- await this.getRolePermissionSearchRoleMenuButton(obj.code)
- await this.getRolePermissionSearchRoleMenu(obj.code)
+ // 瑙掕壊鍒囨崲
+ async treeLeftNodeClick(obj, Node, VueComponent) {
+ if (obj.code !== '000') {
+ await this.getRolePermissionSearchRoleMenuButton(obj.code)
+ await this.getRolePermissionSearchRoleMenu(obj.code)
+ }
},
+ // 瑙掕壊鍚嶇О鏂板
+ rolePlusClick() {
+ this.treeLeft[0].roles.push({ code: 1234, name: '', isEdit: true })
+ },
+ // 瑙掕壊鍚嶇О淇敼
+ roleEditClick(self, node, data) {
+ // console.log(self, node, data)
+ this.treeLeft[0].roles.forEach(i => {
+ i.isEdit = false
+ })
+ data.isEdit = !data.isEdit
+ },
+ // 瑙掕壊鍚嶇О鍒犻櫎
+ roleDeleteClick(self, node, data) {
+ // console.log(self, node, data)
+ // this.treeLeft[0].roles.forEach((item, index) => {
+ // if (item.code === data.code) {
+ // this.treeLeft[0].roles.splice(index, 1) // 鏆傛椂鍏堝啓鎴愬墠绔垹闄わ紝鍚庢湡璋冪敤鎺ュ彛鍒犻櫎
+ // }
+ // })
+ },
+ // 瑙掕壊鍚嶇О淇濆瓨 閲囩敤闃叉姈褰㈠紡
+ roleSave: throttle(function(data) {
+ data.isEdit = false
+ console.log('鎵ц浜嗭紒')
+ }, 1000, true),
+ // 椤甸潰鍕鹃�夊ソ淇濆瓨浜嬩欢
+ saveClick() {
+ // console.log(this.treeCenter)
+
+ const rolecode = this.$refs.treeLeftRef.getCurrentKey()
+
+ const roleMenu = []
+ const roleButton = []
+ const roleData = []
+
+ this.treeCenter[0].children.forEach((item, index) => {
+ if (item.children && item.children.length) {
+ item.children.forEach((it, ind) => {
+ if (it.flag === 'Y') {
+ roleMenu.push({ rolecode, menucode: it.code })
+
+ if (it.itemButton && it.itemButton.length && it.checkedButton.length > 0) {
+ it.itemButton.forEach(i => {
+ if (it.checkedButton.includes(i.name)) {
+ roleButton.push({ rolecode, buttoncode: i.code })
+ }
+ })
+ }
+ if (it.checkedData && it.checkedData.length) {
+ roleData.push({ rolecode, datacode: it.itemData.find(i => i.name === it.checkedData).code })
+ }
+ }
+ })
+ }
+ })
+ // console.log(roleMenu)
+ // console.log(roleButton)
+ // console.log(roleData)
+ const data = {
+ roleMenu, roleButton, roleData
+ }
+
+ RolePermissionSava(data).then(res => {
+ if (res.code === '200') {
+ const rolename = this.treeLeft[0].roles.find(i => i.code === rolecode).name
+ this.$notify.success(rolename + '鐨勮鑹叉潈闄愭彁浜ゆ垚鍔燂紒')
+ this.getRolePermissionSearchRoleMenuButton(rolecode)
+ this.getRolePermissionSearchRoleMenu(rolecode)
+ }
+ this.$forceUpdate()
+ })
+ },
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
this.mainHeight = window.innerHeight - 85
- this.tableHeight = this.mainHeight - 255
- // this.$refs.tableDataRef.doLayout()
+ this.tableHeight = this.mainHeight - 50
})
}
}
}
</script>
-<!--鍏叡椤甸潰鏍峰紡-->
-<style lang="scss" scoped>
-$main_color: #42b983;
-::v-deep .el-button--text {
- font-size: 14px;
- cursor: pointer;
-}
-
-.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
- color: $main_color;
- cursor: pointer;
-}
-
-.el-icon-edit-outline {
- margin-right: 15px;
-}
-
-::v-deep .el-button--primary, .el-button--default, .el-button--info {
- height: 34px;
- display: flex;
- align-items: center;
- padding: 0 15px;
-}
-
-::v-deep .el-button--primary {
- //background-color: $main_color !important;
-}
-
-::v-deep .el-button--default {
- background-color: #f8f8fa;
- border: none;
-}
-
-::v-deep .el-input__inner {
- height: 34px;
- line-height: 34px;
- //color: #a7a7a7;
-}
-
-::v-deep .el-dialog__body {
- padding: 20px 100px !important;
-}
-
-::v-deep .dialogVisibleRoles .el-dialog__body {
- padding: 20px 20px !important;
-}
-
-::v-deep .importPickerClass .el-dialog__body {
- padding: 20px 20px !important;
-}
-
-::v-deep .el-dialog__footer {
- display: flex;
- justify-content: flex-end;
-}
-
-::v-deep .el-table .caret-wrapper {
- transform: scale(0.8);
-}
-
-::v-deep .cell {
+<style scoped lang="scss">
+.custom-tree-node {
+ flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: #f8f8fa;
-}
-
-::v-deep .el-table__body .el-table__row.hover-row td {
- background-color: #eaecef;
-}
-
-::v-deep .el-form--inline .el-form-item__label {
- color: #a7a7a7;
-}
-
-.body ::v-deep .el-divider {
- border: 1px solid #eee;
- width: 99%;
- margin: 10px auto;
-}
-
-.body ::v-deep .el-form-item {
- margin-bottom: 0;
-}
-
-.userDialogVisible ::v-deep .el-form-item {
- margin-bottom: 0;
-}
-
-::v-deep .el-select__caret {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.tableFixed {
- ::v-deep .el-table__fixed-right {
- height: 100% !important;
- }
-
- ::v-deep .el-table__fixed {
- height: 100% !important;
- }
-}
-</style>
-<style>
-
-.el-table .custom-row {
- background: #f8f8fa;
+ font-size: 14px;
+ padding-right: 8px;
}
</style>
--
Gitblit v1.9.3