From aec093161db40ad18bde85cd31ae3ab0c3c7926c Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 30 七月 2023 14:04:30 +0800
Subject: [PATCH] 1.已在服务器上发布，可访问
---
.env.development | 2
vue.config.js | 8 -
.env.production | 4
src/views/basicSettings/rolePermission.vue | 292 ++++++++++++++++++++++++++++++++----------------
4 files changed, 193 insertions(+), 113 deletions(-)
diff --git a/.env.development b/.env.development
index 5a14e1b..62fdafb 100644
--- a/.env.development
+++ b/.env.development
@@ -4,8 +4,6 @@
# base api
VUE_APP_BASE_API = '/api/'
-VUE_APP_BASE_API_BASE = '/base/'
-
# 鏂囦欢涓嬭浇鍦板潃 涓嬭浇鏁版嵁妯℃澘鍦板潃
VUE_APP_BASE_API_FILE = 'http://121.196.36.24:8001'
diff --git a/.env.production b/.env.production
index 6314dc2..6b25792 100644
--- a/.env.production
+++ b/.env.production
@@ -2,9 +2,7 @@
ENV = 'production'
# base api
-VUE_APP_BASE_API = '/apis/'
-
-VUE_APP_BASE_API_BASE = '/base/'
+VUE_APP_BASE_API = '/api/'
# 鏂囦欢涓嬭浇鍦板潃 涓嬭浇鏁版嵁妯℃澘鍦板潃
VUE_APP_BASE_API_FILE = 'http://121.196.36.24:8001'
diff --git a/src/views/basicSettings/rolePermission.vue b/src/views/basicSettings/rolePermission.vue
index 2e76889..a8a6f8b 100644
--- a/src/views/basicSettings/rolePermission.vue
+++ b/src/views/basicSettings/rolePermission.vue
@@ -97,7 +97,7 @@
overflow-y: auto;overflow-x:hidden;"
:style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
@scroll="scrollLeftScroll()"
- @mouseover="changeScrollLeftFlag(false)"
+ @mouseover="changeScrollLeftFlag('left')"
>
<div style=" ">
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
@@ -123,47 +123,95 @@
style="border-right: 1px solid rgba(0,0,0,0.2);width: 500px;padding-left: 10px;overflow-y: auto"
:style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
@scroll="scrollCenterScroll()"
- @mouseover="changeScrollLeftFlag(true)"
+ @mouseover="changeScrollLeftFlag('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"
+ @change="val=>handleCheckAllChange(val,'button')"
>鍏ㄩ��
</el-checkbox>
- <div v-for="item in treeCenter[0].children" :key="item.label">
- <div
- v-if="item.checkedButton"
- style="margin-left: 40px;height:26px;display: flex;"
- />
+ <div v-if="treeCenter.length>0">
+ <div v-for="item in treeCenter[0].children" :key="item.code">
+ <div
+ v-if="item.display"
+ style="margin-left: 40px;height:26px;display: flex;"
+ />
- <el-checkbox-group
- v-for="it in item.children"
- v-if="item.expanded"
- :key="it.code"
- v-model="it.checkedButton"
- style="margin-left: 40px;height:26px;display: flex"
- @change="val=>handleCheckedButtonChange(val,it.code,it.checkedButton)"
- >
+ <el-checkbox-group
+ v-for="it in item.children"
+ v-if="item.expanded"
+ :key="it.code"
+ v-model="it.checkedButton"
+ style="margin-left: 40px;height:26px;display: flex"
+ @change="val=>handleCheckedButtonChange(val,it.code)"
+ >
- <el-checkbox
- v-for="i in it.itemButton"
- :key="i"
- :label="i"
- style="display:flex;align-items: center"
- >{{ i }}
- </el-checkbox>
- </el-checkbox-group>
+ <el-checkbox
+ v-for="i in it.itemButton"
+ :key="i"
+ :label="i"
+ style="display:flex;align-items: center"
+ />
+ </el-checkbox-group>
+ </div>
+
+ </div>
+
+ </div>
+
+ <div
+ ref="scrollRight"
+ style="width: 360px;padding-left: 10px;overflow-y: auto"
+ :style="{height:isExpandForm?tableHeight:(tableHeight+35)+'px',}"
+ @scroll="scrollRightScroll()"
+ @mouseover="changeScrollLeftFlag('right')"
+ >
+ <div style=" ">
+ <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鏁版嵁鏉冮檺
+ </div>
+
+ <el-checkbox
+ v-model="dataIsChecked"
+ style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"
+ @change="val=>handleCheckAllChange(val,'data')"
+ >鍏ㄩ��
+ </el-checkbox>
+
+ <div v-if="treeCenter.length>0">
+ <div v-for="item in treeCenter[0].children" :key="item.code">
+ <div
+ v-if="item.display"
+ style="margin-left: 40px;height:26px;display: flex;"
+ />
+
+ <el-radio-group
+ v-for="it in item.children"
+ v-if="item.expanded"
+ :key="it.code"
+ v-model="it.checkedData"
+ style="margin-left: 40px;height:26px;display: flex"
+ @change="val=>handleCheckedDataChange(val,it.code)"
+ >
+ <el-radio
+ v-for="i in it.itemData"
+ :key="i"
+ style="display:flex;align-items: center"
+ :label="i"
+ />
+ </el-radio-group>
+ </div>
+
</div>
</div>
</div>
-
</el-tab-pane>
<el-tab-pane label="APP绔�" name="APP绔�">澶уぇ</el-tab-pane>
<el-tab-pane label="宸ユ帶绔�" name="宸ユ帶绔�">宸ユ帶绔�</el-tab-pane>
@@ -183,7 +231,11 @@
import ImportPicker from '@/components/ImportPicker'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
-import { RolePermissionSearchRole, RolePermissionSearchRoleMenu } from '@/api/basicSettings'
+import {
+ RolePermissionSearchRole,
+ RolePermissionSearchRoleMenu,
+ RolePermissionSearchRoleMenuButton
+} from '@/api/basicSettings'
import arrayToTree from 'array-to-tree'
export default {
@@ -209,64 +261,26 @@
page: 1, // 绗嚑椤�
rows: 20 // 姣忛〉澶氬皯鏉�
},
- treeLeft: [
- {
- code: '2000',
- label: '娴欐睙鏂板嚡杩暟瀛楃鎶�鑲′唤鏈夐檺鍏徃',
- children: [{
- code: '2001',
- label: '鎵�鏈変汉'
- }, {
- code: '2002',
- label: '閲戝伐杞﹂棿鍛樺伐'
- }]
- }
- ],
- treeCenter: [
- {
- label: 'PC绔〉闈�',
- code: '1000',
- children: [{
- code: '2000',
- label: '鍩虹璁剧疆',
- children: [{
- code: '2001',
- label: '缁勭粐鏋舵瀯'
- }, {
- code: '2002',
- label: '瑙掕壊鏉冮檺'
- }]
- }, {
- label: '璁惧绠＄悊',
- code: '3000',
- children: [{
- code: '3001',
- label: '璁惧娓呭崟'
- }, {
- code: '3002',
- label: '璁惧淇濆吇'
- }]
- }]
- }
- ],
+ treeLeft: [],
+ treeCenter: [],
defaultPropsLeft: {
children: 'roles',
label: 'name'
},
defaultPropsCenter: {
children: 'children',
- label: 'label'
+ label: 'name'
},
activeName: 'PC绔�',
buttonIsChecked: false,
-
- // itemButton: ['鏂板', '淇敼', '鍒犻櫎', '涓嬭浇', '涓婁紶'],
- // checkedButton: ['鏂板', '淇敼'],
+ dataIsChecked: false,
menuCheckedCodeArr: [], // 鑿滃崟鏉冮檺鏁扮粍閫変腑鐨�
- isScroll: false
+ allButtonData: [], // 鎵�鏈夌殑鎸夐挳鍔犳潈闄�
+
+ isScroll: 'left'
}
},
@@ -277,20 +291,6 @@
mounted() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
-
- this.treeCenter[0].children.forEach(item => {
- if (item.children && item.children.length) {
- item.children.forEach(it => {
- it.itemButton = ['鏂板', '淇敼', '鍒犻櫎', '涓嬭浇', '涓婁紶']
- // it.checkedButton = ['鏂板', '淇敼']
- it.checkedButton = []
- })
- item.itemButton = []
- item.checkedButton = []
- item.expanded = true
- }
- })
- console.log(JSON.parse(JSON.stringify(this.treeCenter)))
},
methods: {
@@ -302,11 +302,18 @@
this.$nextTick(() => { // 榛樿閫変腑绗竴涓�
this.$refs.treeLeftRef.setCurrentKey(res[0].roles[0].code) // 榛樿閫変腑鑺傜偣绗竴涓�
})
+ await this.getRolePermissionSearchRoleMenuButton(res[0].roles[0].code)
await this.getRolePermissionSearchRoleMenu(res[0].roles[0].code)
} else {
this.$notify.error('璇峰厛寤虹浉瀵瑰簲鐨勮鑹诧紒')
}
},
+
+ async getRolePermissionSearchRoleMenuButton(rolecode) {
+ const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode })
+ this.allButtonData = res
+ },
+
async getRolePermissionSearchRoleMenu(rolecode) {
const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: 'PC' })
@@ -317,24 +324,71 @@
childrenProperty: 'children'
})
- const aaa = [
+ this.menuCheckedCodeArr = []
+
+ 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 buttonChecked = this.allButtonData.tButton.filter(j =>
+ j.menucode === it.code && j.flag === 'Y'
+ ).map(j => j.name)
+ it.itemButton = buttonAll
+ 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)
+ it.itemData = dataAll
+ it.checkedData = dataChecked
+
+ // 鐢ㄤ綔鑿滃崟鍕鹃�夊洖鏄�
+ if (buttonChecked && buttonChecked.length > 0) {
+ this.menuCheckedCodeArr.push(it.code)
+ }
+ })
+ item.display = true
+ item.expanded = true
+ }
+ })
+
+ console.log(JSON.parse(JSON.stringify(result)), 8)
+
+ this.treeCenter = [
{ code: '-1', name: '鍏ㄩ儴', flag: result.every(i => i.flag === 'Y') ? 'Y' : 'N', children: result }
]
- console.log(JSON.parse(JSON.stringify(aaa)))
- // aaa鏁扮粍缁欒彍鍗曟爲褰� 鐒跺悗鍐嶅仛鎸夐挳绫荤殑
+ this.buttonIsChecked = result.every(i => i.flag === 'Y')
+
+ // console.log(this.menuCheckedCodeArr, 2)
+ this.$nextTick(() => {
+ this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
+ })
+
+ // console.log(this.treeCenter[0].children)
},
// 宸﹁竟婊氬姩鏉℃粦鍔ㄦ椂
scrollLeftScroll() {
- if (!this.isScroll) {
+ if (this.isScroll === 'left') {
this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
+ this.$refs.scrollRight.scrollTop = this.$refs.scrollLeft.scrollTop
}
},
// 涓棿杈规粴鍔ㄦ潯婊戝姩鏃�
scrollCenterScroll() {
- if (this.isScroll) {
+ if (this.isScroll === 'center') {
this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
+ this.$refs.scrollRight.scrollTop = this.$refs.scrollCenter.scrollTop
+ }
+ },
+ // 鍙充晶婊氬姩鏉℃粦鍔ㄦ椂
+ scrollRightScroll() {
+ if (this.isScroll === 'right') {
+ this.$refs.scrollLeft.scrollTop = this.$refs.scrollRight.scrollTop
+ this.$refs.scrollCenter.scrollTop = this.$refs.scrollRight.scrollTop
}
},
@@ -347,7 +401,7 @@
},
// 鍏ㄩ�夋敼鍙�
- handleCheckAllChange(val) {
+ handleCheckAllChange(val, belong) {
const checkedKeys = this.$refs.treeCenterRef.getCheckedKeys()
if (val) {
@@ -355,7 +409,12 @@
if (item.children && item.children.length) {
item.children.forEach(it => {
if (checkedKeys.includes(it.code)) {
- it.checkedButton = it.itemButton
+ if (belong === 'button') {
+ it.checkedButton = it.itemButton
+ }
+ if (belong === 'data') {
+ it.checkedData = '鍏ㄩ儴'
+ }
}
})
}
@@ -365,7 +424,12 @@
if (item.children && item.children.length) {
item.children.forEach(it => {
if (checkedKeys.includes(it.code)) {
- it.checkedButton = []
+ if (belong === 'button') {
+ it.checkedButton = []
+ }
+ if (belong === 'data') {
+ it.checkedData = undefined
+ }
}
})
}
@@ -374,12 +438,12 @@
console.log(this.treeCenter[0].children, 20)
},
- // 鍗曚釜鎸夐挳鏀瑰彉 oldValue 鏇存柊鍓嶇殑鍊� code 瀵瑰簲鐨勮彍鍗曠紪鐮� newValue 鏇存柊鍚庣殑鍊�
- handleCheckedButtonChange(oldValue, code, newValue) {
+ // 鍗曚釜鎸夐挳鏀瑰彉
+ handleCheckedButtonChange(value, code) {
// 鍒ゆ柇鏄惁鍖呭惈鍦ㄥ唴
- if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 鍚�
+ if (!this.menuCheckedCodeArr.includes(code) && value.length === 1) { // 鍚�
this.menuCheckedCodeArr.push(code)
- } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 鏄�
+ } else if (this.menuCheckedCodeArr.includes(code) && value.length === 0) { // 鏄�
this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
}
@@ -402,16 +466,16 @@
this.$forceUpdate()
},
+ // 鑾峰彇鏍戝舰鑺傜偣node
getLeftTreeNode(data, Node, VueComponent) {
console.log(data, Node, VueComponent, 2221)
console.log(Node.expanded)
this.treeCenter[0].children.forEach(item => {
- // console.log(item, 'item')
- if (item.label === data.label) {
+ if (item.name === data.name) {
item.expanded = Node.expanded
}
})
- if (data.label === 'PC绔〉闈�') {
+ if (data.code === '-1') {
Node.expanded = true // 鏆傛椂鍏堝啓鎴愯繖涓�
// this.treeCenter[0].children.forEach(item => {
// item.expanded = Node.expanded
@@ -423,6 +487,7 @@
handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
// console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys)
},
+ // 澶勭悊鏍戝舰閫変腑鍊兼敼鍙�
handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
// console.log(obj, selfChecked, selfChildrenTreeCheck)
if (!selfChildrenTreeCheck) {
@@ -432,6 +497,7 @@
item.children.forEach(it => {
if (it.code === obj.code) {
it.checkedButton = []
+ it.checkedData = undefined
}
})
}
@@ -441,6 +507,32 @@
}
},
+ // 鍗曢�夋鎸夐挳鏀瑰彉
+ handleCheckedDataChange(value, code) {
+ console.log(value, code)
+
+ 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) {
+ count++
+ }
+ childrenLength++
+ })
+ }
+ })
+ this.dataIsChecked = count === childrenLength
+ this.$forceUpdate()
+ },
+
// 鑾峰彇椤甸潰楂樺害
getHeight() {
this.$nextTick(() => {
diff --git a/vue.config.js b/vue.config.js
index bf01601..b0a451c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -58,14 +58,6 @@
['^' + process.env.VUE_APP_BASE_API]: '/api/'
}
// ws: true;//寮�鍚痺s, 濡傛灉鏄痟ttp浠ｇ悊姝ゅ鍙互涓嶇敤璁剧疆
- },
- [process.env.VUE_APP_BASE_API_BASE]: {
- target: 'http://121.196.36.24:8019', // 璇锋眰鐨勭涓夆絽鎺モ紳鍦板潃 鏈湴寮�鍙戞湇鍔″櫒
- changeOrigin: true, // 璇锋眰璺ㄥ煙鏃讹紝闇� 閰嶇疆姝ら」
- pathRewrite: { // 璺緞閲嶅啓,鏇挎崲target涓殑璇锋眰鍦板潃
- ['^' + process.env.VUE_APP_BASE_API_BASE]: '/base/'
- }
- // ws: true;//寮�鍚痺s, 濡傛灉鏄痟ttp浠ｇ悊姝ゅ鍙互涓嶇敤璁剧疆
}
}
// before: require('./mock/mock-server.js')
--
Gitblit v1.9.3