From ebe7bf1b9118958f6a93406305f5728bfd5d90c9 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期一, 03 三月 2025 10:33:24 +0800
Subject: [PATCH] 1. 综合看板修改编码
---
src/views/basicSettings/powerDivider.vue | 1101 +++++++++++++++++++++++++++++----------------------------
1 files changed, 553 insertions(+), 548 deletions(-)
diff --git a/src/views/basicSettings/powerDivider.vue b/src/views/basicSettings/powerDivider.vue
index 8b7e629..8d0e266 100644
--- a/src/views/basicSettings/powerDivider.vue
+++ b/src/views/basicSettings/powerDivider.vue
@@ -1,548 +1,553 @@
-<template>
- <div>
- <div class="body" :style="{height:mainHeight+'px'}">
-
- <div
- class="elTableDiv"
- >
-
- <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;overflow: auto"
- :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"
- />
- <!-- draggable-->
- <!-- :allow-drop="treeLeftAllowDrop"-->
- </div>
-
- <div
- style="margin-left: 10px;width: calc(100% - 300px);position: relative"
- >
-
- <el-button
- style="position: absolute;right: 15px;z-index:1;top:3px"
- type="primary"
- :loading="$store.state.app.buttonIsDisabled"
- :disabled="$store.state.app.buttonIsDisabled"
- @click="saveClick"
- >淇� 瀛�
- </el-button>
-
- <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
- <el-tab-pane label="PC绔�" name="PC">
- <div style="display: flex;">
- <div
- ref="scrollLeft"
- style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
- overflow-y: auto;overflow-x:hidden;"
- :style="{height:(tableHeight-40)+'px'}"
- @scroll="scrollLeftScroll()"
- @mouseover="isScroll='left'"
- >
- <div style=" ">
- <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
- </div>
-
- <el-tree
- ref="treeCenterPCRef"
- style="padding-top: 10px;"
- :data="treeCenter"
- highlight-current
- :props="defaultPropsCenter"
- show-checkbox
- node-key="menucode"
- :default-expand-all="true"
- @check-change="handleTreeCenterCheckChange"
- @check="handleTreeCenterCheck"
- @node-click="getLeftTreeNode"
- />
- </div>
- <!-- <div-->
- <!-- ref="scrollCenter"-->
- <!-- style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
- <!-- :style="{height:(tableHeight-40)+'px'}"-->
- <!-- @scroll="scrollCenterScroll()"-->
- <!-- @mouseover="isScroll='center'"-->
- <!-- >-->
- <!-- <div style=" ">-->
- <!-- <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鎸夐挳鏉冮檺-->
- <!-- </div>-->
-
- <!-- <el-checkbox-->
- <!-- v-model="buttonIsChecked"-->
- <!-- style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
- <!-- @change=" handleCheckAllChange "-->
- <!-- >鍏ㄩ��-->
- <!-- </el-checkbox>-->
-
- <!-- <div v-if="treeCenter.length>0">-->
- <!-- <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->
-
- <!-- <div-->
- <!-- v-if="!item.buttoncodelist"-->
- <!-- style="margin-left: 40px;height:26px;display: flex;"-->
- <!-- />-->
-
- <!-- <el-checkbox-group-->
- <!-- v-for="it in item.children"-->
- <!-- v-if="item.expanded"-->
- <!-- :key="it.menucode"-->
- <!-- v-model="it.buttonChecked"-->
- <!-- style="margin-left: 40px;height:26px;display: flex;"-->
- <!-- @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
- <!-- >-->
-
- <!-- <el-checkbox-->
- <!-- v-for="i in it.buttoncodelist"-->
- <!-- :key="i"-->
- <!-- :label="i"-->
- <!-- style="display:flex;align-items: center;"-->
- <!-- />-->
- <!-- </el-checkbox-group>-->
-
- <!-- </div>-->
-
- <!-- </div>-->
-
- <!-- </div>-->
- </div>
- </el-tab-pane>
- <el-tab-pane label="APP绔�" name="APP">
- <div style="display: flex;">
- <div
- ref="scrollLeft"
- style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
- overflow-y: auto;overflow-x:hidden;"
- :style="{height:(tableHeight-40)+'px'}"
- @scroll="scrollLeftScroll()"
- @mouseover="isScroll='left'"
- >
- <div style=" ">
- <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
- </div>
-
- <el-tree
- ref="treeCenterAPPRef"
- style="padding-top: 10px;"
- :data="treeCenter"
- highlight-current
- :props="defaultPropsCenter"
- show-checkbox
- node-key="menucode"
- :default-expand-all="true"
- @check-change="handleTreeCenterCheckChange"
- @check="handleTreeCenterCheck"
- @node-click="getLeftTreeNode"
- />
- </div>
- </div>
- </el-tab-pane>
- <!-- <el-tab-pane label="宸ユ帶绔�" name="宸ユ帶绔�">宸ユ帶绔�</el-tab-pane>-->
- </el-tabs>
-
- </div>
-
- </div>
-
- </div>
-
- </div>
-</template>
-
-<script>
-import waves from '@/directive/waves'
-import {
- RolePermissionSava,
- RolePermissionSearchRole,
- RolePermissionSearchRoleMenu,
- RolePermissionSearchRoleMenuButton
-} from '@/api/basicSettings'
-import arrayToTree from 'array-to-tree'
-
-export default {
- name: 'PowerDivider',
- directives: { waves },
- data() {
- return {
- mainHeight: 0,
- tableHeight: 0,
-
- treeLeft: [], // 宸︿晶鏍�
- treeCenter: [], // 涓棿鏍�
- defaultPropsLeft: {
- children: 'roles',
- label: 'name'
- },
- defaultPropsCenter: {
- children: 'children',
- label: 'menuname'
- },
- activeName: 'PC',
-
- buttonIsChecked: false,
-
- menuCheckedCodeArr: [], // 鑿滃崟鏉冮檺鏁扮粍閫変腑鐨�
-
- allButtonData: [], // 鎵�鏈夎彍鍗曞搴旂殑鎸夐挳鏉冮檺鍔犳暟鎹潈闄�
-
- isScroll: 'left',
-
- ButtonData: JSON.parse(localStorage.getItem('ButtonData'))
-
- }
- },
-
- activated() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
},
created() {
-
- },
- mounted() {
- window.addEventListener('resize', this.getHeight)
- this.getHeight()
-
- this.getRolePermissionSearchRole()
- },
- methods: {
-
- // 鑾峰彇瑙掕壊鏉冮檺鏌ヨ瑙掕壊
- async getRolePermissionSearchRole() {
- const { data: res } = await RolePermissionSearchRole()
- this.treeLeft = res
-
- let rolecode = ''
- if (window.location.hash.indexOf('?') !== -1) {
- rolecode = window.location.hash.split('?')[1].split('=')[1]
- }
-
- if (res && res.length > 0) {
- this.$nextTick(() => { // 榛樿閫変腑绗竴涓�
- this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 榛樿閫変腑鑺傜偣绗竴涓�
- })
-
- await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 鐢ㄤ簬鏁版嵁鍥炴樉
-
- await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 鐢ㄤ簬娓叉煋椤甸潰
- } else {
- this.$notify.error('璇峰厛寤虹浉瀵瑰簲鐨勮鑹诧紒')
- }
- },
- async tabClick() {
- this.treeCenter = []
- await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬鏁版嵁鍥炴樉
- await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬娓叉煋椤甸潰
- },
-
- // 鑾峰彇鑿滃崟鏉冮檺瀵瑰簲鐨勬寜閽�
- async getRolePermissionSearchRoleMenuButton(rolecode) {
- const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })
- this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : []
- },
- // 鑾峰彇鑿滃崟鏉冮檺
- async getRolePermissionSearchRoleMenu(rolecode) {
- const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })
-
- // 鎷垮埌鏁扮粍list杞崲鎴愭爲褰ree
- const result = arrayToTree(res, {
- parentProperty: 'parent_id',
- customID: 'menucode',
- childrenProperty: 'children'
- })
-
- this.treeCenter = [
- { menucode: '-1', menuname: '鍏ㄩ儴', children: result }
- ]
-
- this.treeCenter[0].children.sort((a, b) => a.menu_seq - b.menu_seq)
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
- if (it.buttoncodelist && it.buttoncodelist.length > 0) {
- it.buttoncodelist = this.ButtonData.filter(j =>
- it.buttoncodelist.includes(j.buttoncode)
- )
-
- it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)
- }
- })
-
- item.children.sort((a, b) => a.menu_seq - b.menu_seq)
-
- item.expanded = true
- }
- })
-
- this.handleData()// 澶勭悊鏁版嵁鍥炴樉
- },
- // 澶勭悊缁勫悎鏁版嵁
- handleData() {
- this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
- this.$nextTick(() => {
- if (this.activeName === 'PC') {
- this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
- }
- if (this.activeName === 'APP') {
- this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
- }
- })
-
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
- temp = temp.length > 0 ? temp.split(',') : []
- it.buttonChecked = [] // 鏁版嵁鍥炴樉
- this.ButtonData.forEach(j => {
- if (temp.includes(j.buttoncode)) {
- it.buttonChecked.push(j.buttonname)
- }
- })
- })
- }
- })
-
- this.handleCheckedButtonChange('', '', '', true)
- // this.$forceUpdate()
- },
-
- // 宸﹁竟婊氬姩鏉℃粦鍔ㄦ椂
- scrollLeftScroll() {
- if (this.isScroll === 'left') {
- this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
- }
- },
- // 涓棿杈规粴鍔ㄦ潯婊戝姩鏃�
- scrollCenterScroll() {
- if (this.isScroll === 'center') {
- this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
- }
- },
-
- // 鍏ㄩ�夋敼鍙�
- handleCheckAllChange(val) {
- let checkedKeys
- if (this.activeName === 'PC') {
- checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()
- }
- if (this.activeName === 'APP') {
- checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()
- }
-
- if (val) {
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- if (checkedKeys.includes(it.menucode)) {
- it.buttonChecked = it.buttoncodelist
- }
- })
- }
- })
- } else {
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- if (checkedKeys.includes(it.menucode)) {
- it.buttonChecked = []
- }
- })
- }
- })
- }
- },
- // 鍗曚釜鎸夐挳鏀瑰彉
- handleCheckedButtonChange(oldValue, code, newValue, flag) {
- // console.log(oldValue, code, newValue, 2)
- // 鍒ゆ柇鏄惁鍖呭惈鍦ㄥ唴
- if (!flag) {
- if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 鍚�
- this.menuCheckedCodeArr.push(code)
- } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 鏄�
- this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
- }
- if (this.activeName === 'PC') {
- this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
- }
- if (this.activeName === 'APP') {
- this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
- }
- }
-
- // 杩欓噷鏄垽鏂叏閫塩heckbox 鏄惁閫変腑
- let count = 0
- let childrenLength = 0
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {
- count++
- }
-
- if (it.buttoncodelist.length) {
- childrenLength++
- }
- })
- }
- })
-
- this.buttonIsChecked = count === childrenLength
- this.$forceUpdate()
- },
- // 鑾峰彇鏍戝舰鑺傜偣node
- getLeftTreeNode(data, Node, VueComponent) {
- this.treeCenter[0].children.forEach(item => {
- if (item.menucode === data.menucode) {
- item.expanded = Node.expanded
- }
- })
- if (data.menucode === '-1') {
- Node.expanded = true // 鏆傛椂鍏堝啓鎴愯繖涓�
- }
- this.$forceUpdate()
- },
- // 澶勭悊涓棿鏍戝舰鍕鹃��
- handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
- // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '鍔犲瀹�')
-
- if (checkedKeys.length === 0) { // 鏍戝舰鑿滃崟鍏ㄤ笉閫夌殑鎯呭喌涓�
- this.buttonIsChecked = false
- this.menuCheckedCodeArr = []
- } else {
- if (checkedKeys.includes(obj.menucode)) { // 鍒ゆ柇鏄惁鍖呭惈鍦ㄥ唴 //鏄�
- this.menuCheckedCodeArr.push(obj.menucode)
- } else { // 鍚�
- this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
- }
- }
- },
- // 澶勭悊涓棿鏍戝舰閫変腑鍊兼敼鍙�
- handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
- // console.log(obj, selfChecked, selfChildrenTreeCheck, '鐜嬭�佸悏')
- if (!selfChildrenTreeCheck) {
- if (!selfChecked) { // 浠庨�変腑鍒颁笉閫変腑
- obj.buttonChecked = []
- this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
- }
- if (selfChecked) { // 浠庝笉閫変腑鍒伴�変腑
- obj.buttonCheckedCode = []
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- if (it.menucode === obj.menucode) {
- this.menuCheckedCodeArr.push(obj.menucode)
- }
- })
- }
- })
- }
-
- this.$forceUpdate()
- }
- },
- // 瑙掕壊鍒囨崲
- async treeLeftNodeClick(obj, Node, VueComponent) {
- if (obj.code !== '000') {
- await this.getRolePermissionSearchRoleMenuButton(obj.code)
- this.handleData()
- }
- },
- // 椤甸潰鍕鹃�夊ソ淇濆瓨浜嬩欢
- async saveClick() {
- const rolecode = this.$refs.treeLeftRef.getCurrentKey()
- const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions
- let menuKeyArr
- if (this.activeName === 'PC') {
- menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()
- }
- if (this.activeName === 'APP') {
- menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()
- }
-
- const arr = []
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- if (menuKeyArr.includes(it.menucode)) {
- if (it.buttonChecked && it.buttonChecked.length > 0) { // 宸查�夎彍鍗�
- it.buttonCheckedCode = this.ButtonData.filter(i =>
- it.buttonChecked.includes(i.buttonname)
- ).map(i => i.buttoncode)
- }
- arr.push({
- menucode: it.menucode,
- datacode,
- buttoncode: it.buttonCheckedCode ? it.buttonCheckedCode.join(',') : ''
- })
- }
- })
- }
- })
- this.$store.state.app.buttonIsDisabled = true
-
- const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
- if (res.code === '200') {
- const rolename = this.treeLeft.find(i => i.code === rolecode).name
- this.$notify.success(rolename + '鐨勮鑹叉潈闄愭彁浜ゆ垚鍔燂紒')
- await this.getRolePermissionSearchRoleMenuButton(rolecode)
- this.$store.state.app.buttonIsDisabled = false
- }
- },
- // 鑾峰彇椤甸潰楂樺害
- getHeight() {
- this.$nextTick(() => {
- this.mainHeight = window.innerHeight - 85
- this.tableHeight = this.mainHeight - 50
- })
- },
- // 宸︿晶鏍戝舰鎷栧姩澶勭悊
- treeLeftAllowDrop(draggingNode, dropNode, type) {
- // console.log(draggingNode, dropNode, type)
- // 娉ㄦ帀鐨勬槸鍚岀骇鎷栨嫿
- if (draggingNode.level === dropNode.level) {
- return type === 'prev' || type === 'next'
- } else {
- // 涓嶅悓绾ц繘琛屽鐞�
- return false
- }
- }
- }
-}
-</script>
-
-<style scoped lang="scss">
-::v-deep .el-checkbox__label {
- width: 55px;
-}
-
-.el-checkbox-group {
- margin-left: 0 !important;
- padding-left: 40px;
-}
-
-.el-checkbox-group:hover {
- background: #f0f7ff;
-}
-</style>
+<template>
+ <div>
+ <div class="body" :style="{height:mainHeight+'px'}">
+
+ <div
+ class="elTableDiv"
+ >
+
+ <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;overflow: auto"
+ :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"
+ />
+ <!-- draggable-->
+ <!-- :allow-drop="treeLeftAllowDrop"-->
+ </div>
+
+ <div
+ style="margin-left: 10px;width: calc(100% - 300px);position: relative"
+ >
+
+ <el-button
+ style="position: absolute;right: 15px;z-index:1;top:3px"
+ type="primary"
+ :loading="$store.state.app.buttonIsDisabled"
+ :disabled="$store.state.app.buttonIsDisabled"
+ @click="saveClick"
+ >淇� 瀛�
+ </el-button>
+
+ <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
+ <el-tab-pane label="PC绔�" name="PC">
+ <div style="display: flex;">
+ <div
+ ref="scrollLeft"
+ style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
+ overflow-y: auto;overflow-x:hidden;"
+ :style="{height:(tableHeight-40)+'px'}"
+ @scroll="scrollLeftScroll()"
+ @mouseover="isScroll='left'"
+ >
+ <div style=" ">
+ <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
+ </div>
+
+ <el-tree
+ ref="treeCenterPCRef"
+ style="padding-top: 10px;"
+ :data="treeCenter"
+ highlight-current
+ :props="defaultPropsCenter"
+ show-checkbox
+ node-key="menucode"
+ :default-expand-all="true"
+ @check-change="handleTreeCenterCheckChange"
+ @check="handleTreeCenterCheck"
+ @node-click="getLeftTreeNode"
+ />
+ </div>
+ <!-- <div-->
+ <!-- ref="scrollCenter"-->
+ <!-- style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
+ <!-- :style="{height:(tableHeight-40)+'px'}"-->
+ <!-- @scroll="scrollCenterScroll()"-->
+ <!-- @mouseover="isScroll='center'"-->
+ <!-- >-->
+ <!-- <div style=" ">-->
+ <!-- <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鎸夐挳鏉冮檺-->
+ <!-- </div>-->
+
+ <!-- <el-checkbox-->
+ <!-- v-model="buttonIsChecked"-->
+ <!-- style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
+ <!-- @change=" handleCheckAllChange "-->
+ <!-- >鍏ㄩ��-->
+ <!-- </el-checkbox>-->
+
+ <!-- <div v-if="treeCenter.length>0">-->
+ <!-- <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->
+
+ <!-- <div-->
+ <!-- v-if="!item.buttoncodelist"-->
+ <!-- style="margin-left: 40px;height:26px;display: flex;"-->
+ <!-- />-->
+
+ <!-- <el-checkbox-group-->
+ <!-- v-for="it in item.children"-->
+ <!-- v-if="item.expanded"-->
+ <!-- :key="it.menucode"-->
+ <!-- v-model="it.buttonChecked"-->
+ <!-- style="margin-left: 40px;height:26px;display: flex;"-->
+ <!-- @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
+ <!-- >-->
+
+ <!-- <el-checkbox-->
+ <!-- v-for="i in it.buttoncodelist"-->
+ <!-- :key="i"-->
+ <!-- :label="i"-->
+ <!-- style="display:flex;align-items: center;"-->
+ <!-- />-->
+ <!-- </el-checkbox-group>-->
+
+ <!-- </div>-->
+
+ <!-- </div>-->
+
+ <!-- </div>-->
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="APP绔�" name="APP">
+ <div style="display: flex;">
+ <div
+ ref="scrollLeft"
+ style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
+ overflow-y: auto;overflow-x:hidden;"
+ :style="{height:(tableHeight-40)+'px'}"
+ @scroll="scrollLeftScroll()"
+ @mouseover="isScroll='left'"
+ >
+ <div style=" ">
+ <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
+ </div>
+
+ <el-tree
+ ref="treeCenterAPPRef"
+ style="padding-top: 10px;"
+ :data="treeCenter"
+ highlight-current
+ :props="defaultPropsCenter"
+ show-checkbox
+ node-key="menucode"
+ :default-expand-all="true"
+ @check-change="handleTreeCenterCheckChange"
+ @check="handleTreeCenterCheck"
+ @node-click="getLeftTreeNode"
+ />
+ </div>
+ </div>
+ </el-tab-pane>
+ <!-- <el-tab-pane label="宸ユ帶绔�" name="宸ユ帶绔�">宸ユ帶绔�</el-tab-pane>-->
+ </el-tabs>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+</template>
+
+<script>
+import waves from '@/directive/waves'
+import {
+ RolePermissionSava,
+ RolePermissionSearchRole,
+ RolePermissionSearchRoleMenu,
+ RolePermissionSearchRoleMenuButton
+} from '@/api/basicSettings'
+import arrayToTree from 'array-to-tree'
+
+export default {
+ name: 'PowerDivider',
+ directives: { waves },
+ data() {
+ return {
+ mainHeight: 0,
+ tableHeight: 0,
+
+ treeLeft: [], // 宸︿晶鏍�
+ treeCenter: [], // 涓棿鏍�
+ defaultPropsLeft: {
+ children: 'roles',
+ label: 'name'
+ },
+ defaultPropsCenter: {
+ children: 'children',
+ label: 'menuname'
+ },
+ activeName: 'PC',
+
+ buttonIsChecked: false,
+
+ menuCheckedCodeArr: [], // 鑿滃崟鏉冮檺鏁扮粍閫変腑鐨�
+
+ allButtonData: [], // 鎵�鏈夎彍鍗曞搴旂殑鎸夐挳鏉冮檺鍔犳暟鎹潈闄�
+
+ isScroll: 'left',
+
+ ButtonData: JSON.parse(localStorage.getItem('ButtonData'))
+
+ }
+ },
+
+ activated() {
+ window.addEventListener('resize', this.getHeight)
+ this.getHeight()
+ this.getRolePermissionSearchRole()
+ },
+ created() {
+
+ },
+ mounted() {
+ window.addEventListener('resize', this.getHeight)
+ this.getHeight()
+
+ this.getRolePermissionSearchRole()
+ },
+ methods: {
+
+ // 鑾峰彇瑙掕壊鏉冮檺鏌ヨ瑙掕壊
+ async getRolePermissionSearchRole() {
+ const { data: res } = await RolePermissionSearchRole()
+ this.treeLeft = res
+
+ let rolecode = ''
+ if (window.location.hash.indexOf('?') !== -1) {
+ rolecode = window.location.hash.split('?')[1].split('=')[1]
+ }
+
+ if (res && res.length > 0) {
+ this.$nextTick(() => { // 榛樿閫変腑绗竴涓�
+ this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 榛樿閫変腑鑺傜偣绗竴涓�
+ })
+
+ await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 鐢ㄤ簬鏁版嵁鍥炴樉
+
+ await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 鐢ㄤ簬娓叉煋椤甸潰
+ } else {
+ this.$notify.error('璇峰厛寤虹浉瀵瑰簲鐨勮鑹诧紒')
+ }
+ },
+ async tabClick() {
+ this.treeCenter = []
+ await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬鏁版嵁鍥炴樉
+ await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬娓叉煋椤甸潰
+ },
+
+ // 鑾峰彇鑿滃崟鏉冮檺瀵瑰簲鐨勬寜閽�
+ async getRolePermissionSearchRoleMenuButton(rolecode) {
+ const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })
+ this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : []
+ },
+ // 鑾峰彇鑿滃崟鏉冮檺
+ async getRolePermissionSearchRoleMenu(rolecode) {
+ const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })
+
+ // 鎷垮埌鏁扮粍list杞崲鎴愭爲褰ree
+ const result = arrayToTree(res, {
+ parentProperty: 'parent_id',
+ customID: 'menucode',
+ childrenProperty: 'children'
+ })
+
+ this.treeCenter = [
+ { menucode: '-1', menuname: '鍏ㄩ儴', children: result }
+ ]
+
+ this.treeCenter[0].children.sort((a, b) => a.menu_seq - b.menu_seq)
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
+ if (it.buttoncodelist && it.buttoncodelist.length > 0) {
+ it.buttoncodelist = this.ButtonData.filter(j =>
+ it.buttoncodelist.includes(j.buttoncode)
+ )
+
+ it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)
+ }
+ })
+
+ item.children.sort((a, b) => a.menu_seq - b.menu_seq)
+
+ item.expanded = true
+ }
+ })
+
+ this.handleData()// 澶勭悊鏁版嵁鍥炴樉
+ },
+ // 澶勭悊缁勫悎鏁版嵁
+ handleData() {
+ this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
+ this.$nextTick(() => {
+ if (this.activeName === 'PC') {
+ this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
+ }
+ if (this.activeName === 'APP') {
+ this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
+ }
+ })
+
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
+ temp = temp.length > 0 ? temp.split(',') : []
+ it.buttonChecked = [] // 鏁版嵁鍥炴樉
+ this.ButtonData.forEach(j => {
+ if (temp.includes(j.buttoncode)) {
+ it.buttonChecked.push(j.buttonname)
+ }
+ })
+ })
+ }
+ })
+
+ this.handleCheckedButtonChange('', '', '', true)
+ // this.$forceUpdate()
+ },
+
+ // 宸﹁竟婊氬姩鏉℃粦鍔ㄦ椂
+ scrollLeftScroll() {
+ if (this.isScroll === 'left') {
+ this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
+ }
+ },
+ // 涓棿杈规粴鍔ㄦ潯婊戝姩鏃�
+ scrollCenterScroll() {
+ if (this.isScroll === 'center') {
+ this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
+ }
+ },
+
+ // 鍏ㄩ�夋敼鍙�
+ handleCheckAllChange(val) {
+ let checkedKeys
+ if (this.activeName === 'PC') {
+ checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()
+ }
+ if (this.activeName === 'APP') {
+ checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()
+ }
+
+ if (val) {
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ if (checkedKeys.includes(it.menucode)) {
+ it.buttonChecked = it.buttoncodelist
+ }
+ })
+ }
+ })
+ } else {
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ if (checkedKeys.includes(it.menucode)) {
+ it.buttonChecked = []
+ }
+ })
+ }
+ })
+ }
+ },
+ // 鍗曚釜鎸夐挳鏀瑰彉
+ handleCheckedButtonChange(oldValue, code, newValue, flag) {
+ // console.log(oldValue, code, newValue, 2)
+ // 鍒ゆ柇鏄惁鍖呭惈鍦ㄥ唴
+ if (!flag) {
+ if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 鍚�
+ this.menuCheckedCodeArr.push(code)
+ } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 鏄�
+ this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
+ }
+ if (this.activeName === 'PC') {
+ this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
+ }
+ if (this.activeName === 'APP') {
+ this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
+ }
+ }
+
+ // 杩欓噷鏄垽鏂叏閫塩heckbox 鏄惁閫変腑
+ let count = 0
+ let childrenLength = 0
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {
+ count++
+ }
+
+ if (it.buttoncodelist.length) {
+ childrenLength++
+ }
+ })
+ }
+ })
+
+ this.buttonIsChecked = count === childrenLength
+ this.$forceUpdate()
+ },
+ // 鑾峰彇鏍戝舰鑺傜偣node
+ getLeftTreeNode(data, Node, VueComponent) {
+ this.treeCenter[0].children.forEach(item => {
+ if (item.menucode === data.menucode) {
+ item.expanded = Node.expanded
+ }
+ })
+ if (data.menucode === '-1') {
+ Node.expanded = true // 鏆傛椂鍏堝啓鎴愯繖涓�
+ }
+ this.$forceUpdate()
+ },
+ // 澶勭悊涓棿鏍戝舰鍕鹃��
+ handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
+ // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '鍔犲瀹�')
+
+ if (checkedKeys.length === 0) { // 鏍戝舰鑿滃崟鍏ㄤ笉閫夌殑鎯呭喌涓�
+ this.buttonIsChecked = false
+ this.menuCheckedCodeArr = []
+ } else {
+ if (checkedKeys.includes(obj.menucode)) { // 鍒ゆ柇鏄惁鍖呭惈鍦ㄥ唴 //鏄�
+ this.menuCheckedCodeArr.push(obj.menucode)
+ } else { // 鍚�
+ this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
+ }
+ }
+ },
+ // 澶勭悊涓棿鏍戝舰閫変腑鍊兼敼鍙�
+ handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
+ // console.log(obj, selfChecked, selfChildrenTreeCheck, '鐜嬭�佸悏')
+ if (!selfChildrenTreeCheck) {
+ if (!selfChecked) { // 浠庨�変腑鍒颁笉閫変腑
+ obj.buttonChecked = []
+ this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
+ }
+ if (selfChecked) { // 浠庝笉閫変腑鍒伴�変腑
+ obj.buttonCheckedCode = []
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ if (it.menucode === obj.menucode) {
+ this.menuCheckedCodeArr.push(obj.menucode)
+ }
+ })
+ }
+ })
+ }
+
+ this.$forceUpdate()
+ }
+ },
+ // 瑙掕壊鍒囨崲
+ async treeLeftNodeClick(obj, Node, VueComponent) {
+ if (obj.code !== '000') {
+ await this.getRolePermissionSearchRoleMenuButton(obj.code)
+ this.handleData()
+ }
+ },
+ // 椤甸潰鍕鹃�夊ソ淇濆瓨浜嬩欢
+ async saveClick() {
+ const rolecode = this.$refs.treeLeftRef.getCurrentKey()
+ const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions
+ let menuKeyArr
+ if (this.activeName === 'PC') {
+ menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()
+ }
+ if (this.activeName === 'APP') {
+ menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()
+ }
+
+ const arr = []
+ this.treeCenter[0].children.forEach(item => {
+ if (item.children && item.children.length) {
+ item.children.forEach(it => {
+ if (menuKeyArr.includes(it.menucode)) {
+ if (it.buttonChecked && it.buttonChecked.length > 0) { // 宸查�夎彍鍗�
+ it.buttonCheckedCode = this.ButtonData.filter(i =>
+ it.buttonChecked.includes(i.buttonname)
+ ).map(i => i.buttoncode)
+ }
+ arr.push({
+ menucode: it.menucode,
+ datacode,
+ buttoncode: it.buttonCheckedCode ? it.buttonCheckedCode.join(',') : ''
+ })
+ }
+ })
+ }
+ })
+ this.$store.state.app.buttonIsDisabled = true
+
+ const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
+ if (res.code === '200') {
+ const rolename = this.treeLeft.find(i => i.code === rolecode).name
+ this.$notify.success(rolename + '鐨勮鑹叉潈闄愭彁浜ゆ垚鍔燂紒')
+ await this.getRolePermissionSearchRoleMenuButton(rolecode)
+ this.$store.state.app.buttonIsDisabled = false
+ }
+ },
+ // 鑾峰彇椤甸潰楂樺害
+ getHeight() {
+ this.$nextTick(() => {
+ this.mainHeight = window.innerHeight - 85
+ this.tableHeight = this.mainHeight - 50
+ })
+ },
+ // 宸︿晶鏍戝舰鎷栧姩澶勭悊
+ treeLeftAllowDrop(draggingNode, dropNode, type) {
+ // console.log(draggingNode, dropNode, type)
+ // 娉ㄦ帀鐨勬槸鍚岀骇鎷栨嫿
+ if (draggingNode.level === dropNode.level) {
+ return type === 'prev' || type === 'next'
+ } else {
+ // 涓嶅悓绾ц繘琛屽鐞�
+ return false
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-checkbox__label {
+ width: 55px;
+}
+
+.el-checkbox-group {
+ margin-left: 0 !important;
+ padding-left: 40px;
+}
+
+.el-checkbox-group:hover {
+ background: #f0f7ff;
+}
+</style>
--
Gitblit v1.9.3