|
|
@@ -19,43 +19,38 @@
|
|
|
角色权限
|
|
|
</div>
|
|
|
<table
|
|
|
+ v-loading="loading"
|
|
|
:data="permissionList"
|
|
|
- class="table">
|
|
|
- <!-- <tr
|
|
|
+ class="table"
|
|
|
+ >
|
|
|
+ <tr
|
|
|
v-for="(item,index) in permissionList"
|
|
|
- :key="index">
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<td class="td-title">
|
|
|
+ <!-- 全选 -->
|
|
|
<b>{{ item.name }}</b>
|
|
|
<el-checkbox
|
|
|
:indeterminate="isIndeterminate[item.id]"
|
|
|
v-model="checkAll[item.id]"
|
|
|
- @change="handleCheckAllChange($event,item)">
|
|
|
+ @change="handleCheckAllChange($event,item)"
|
|
|
+ >
|
|
|
</el-checkbox>
|
|
|
</td>
|
|
|
<td>
|
|
|
<el-checkbox-group
|
|
|
- v-model="resourceIdList">
|
|
|
+ v-model="selectPermission"
|
|
|
+ >
|
|
|
<el-checkbox
|
|
|
v-for="i in item.permissions"
|
|
|
:label="i.id"
|
|
|
:key="i.id"
|
|
|
- @change="handleCheckedChange($event,item)">
|
|
|
+ @change="handleCheckedChange($event,item)"
|
|
|
+ >
|
|
|
{{ i.name }}
|
|
|
</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</td>
|
|
|
- </tr> -->
|
|
|
- <tr
|
|
|
- v-for="(item,index) in permissionList"
|
|
|
- :key="index">
|
|
|
- <td class="td-title">
|
|
|
- <b>{{ item.name }}</b>
|
|
|
- <el-checkbox
|
|
|
- :indeterminate="isIndeterminate[item.id]"
|
|
|
- v-model="checkAll[item.id]"
|
|
|
- @change="handleCheckItem($event,item)">
|
|
|
- </el-checkbox>
|
|
|
- </td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="td-title">
|
|
|
@@ -63,9 +58,10 @@
|
|
|
<el-checkbox
|
|
|
v-model="isAllChecked"
|
|
|
:indeterminate="isIndeterminateAll"
|
|
|
- @change="handleCheckAll"></el-checkbox>
|
|
|
+ @change="handleCheckAll"
|
|
|
+ ></el-checkbox>
|
|
|
</td>
|
|
|
- <!-- <td></td> -->
|
|
|
+ <td></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
@@ -80,7 +76,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getPermissionList, editRole } from '@/api/systemSetting/role'
|
|
|
+import { cloneDeep, map } from 'lodash'
|
|
|
+import { getResourceTreeList, editRole } from '@/api/systemSetting/role'
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
@@ -95,6 +92,7 @@ export default {
|
|
|
visible: false, // 弹窗状态，由父集弹窗控制
|
|
|
|
|
|
permissionList: [], // 权限列表
|
|
|
+ selectPermission: [], // 已选择权限
|
|
|
resourceIdList: [], // 已选择权限
|
|
|
isIndeterminate: {}, // 所有模块不确定状态合集
|
|
|
checkAll: {}, // 所有模块对应权限合集
|
|
|
@@ -145,14 +143,24 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
async getPermissionList () {
|
|
|
+ this.loading = true
|
|
|
this.allPermissionID = []
|
|
|
- const res = await getPermissionList()
|
|
|
- this.permissionList = res.data
|
|
|
- this.allPermissionID = res.data.map(item => item.id)
|
|
|
+ this.permissionList = []
|
|
|
+ const res = await getResourceTreeList()
|
|
|
+
|
|
|
+ if (res && res.data) {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ item.permissions = item.children || []
|
|
|
+ this.permissionList.push(item)
|
|
|
+ this.allPermissionID.push(item.id)
|
|
|
+ this.allPermissionID.push(...item.permissions.map(i => i.id))
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
},
|
|
|
// 所有模块全选
|
|
|
handleCheckAll (val) {
|
|
|
- this.resourceIdList = val ? this.allPermissionID.slice(0) : []
|
|
|
+ this.selectPermission = val ? this.allPermissionID.slice(0) : []
|
|
|
this.isIndeterminateAll = false
|
|
|
|
|
|
this.permissionList.forEach(item => {
|
|
|
@@ -164,18 +172,18 @@ export default {
|
|
|
handleCheckAllChange (val, module) {
|
|
|
if (val) { // 全选
|
|
|
module.permissions.forEach(item => {
|
|
|
- let idx = this.resourceIdList.indexOf(item.id)
|
|
|
+ let idx = this.selectPermission.indexOf(item.id)
|
|
|
|
|
|
if (idx < 0) {
|
|
|
- this.resourceIdList.push(item.id)
|
|
|
+ this.selectPermission.push(item.id)
|
|
|
}
|
|
|
})
|
|
|
} else { // 全不选
|
|
|
module.permissions.forEach(item => {
|
|
|
- let idx = this.resourceIdList.indexOf(item.id)
|
|
|
+ let idx = this.selectPermission.indexOf(item.id)
|
|
|
|
|
|
if (idx >= 0) {
|
|
|
- this.resourceIdList.splice(idx, 1)
|
|
|
+ this.selectPermission.splice(idx, 1)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -185,7 +193,7 @@ export default {
|
|
|
},
|
|
|
handleCheckedChange (val, module) {
|
|
|
// 交集
|
|
|
- let intersection = this.resourceIdList.filter(val => {
|
|
|
+ let intersection = this.selectPermission.filter(val => {
|
|
|
let list = module.permissions.map(i => {
|
|
|
return i.id
|
|
|
})
|
|
|
@@ -199,21 +207,12 @@ export default {
|
|
|
|
|
|
this.checkAllStatus()
|
|
|
},
|
|
|
- handleCheckItem (val, item) {
|
|
|
- if (val) {
|
|
|
- this.resourceIdList.push(item.id)
|
|
|
- } else {
|
|
|
- this.resourceIdList.splice(this.resourceIdList.indexOf(item.id), 1)
|
|
|
- }
|
|
|
-
|
|
|
- this.checkAllStatus()
|
|
|
- },
|
|
|
// 全选状态判断
|
|
|
checkAllStatus () {
|
|
|
// 全选判断
|
|
|
- this.isAllChecked = this.resourceIdList.length === this.allPermissionID.length
|
|
|
+ this.isAllChecked = this.selectPermission.length === this.allPermissionID.length
|
|
|
// 全选不确定状态
|
|
|
- this.isIndeterminateAll = this.resourceIdList.length > 0 && this.resourceIdList.length < this.allPermissionID.length
|
|
|
+ this.isIndeterminateAll = this.selectPermission.length > 0 && this.selectPermission.length < this.allPermissionID.length
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -224,28 +223,22 @@ export default {
|
|
|
this.reset()
|
|
|
|
|
|
if (val && this.roleItem) {
|
|
|
- const { id, name, resourceList } = this.roleItem
|
|
|
- this.form.name = name
|
|
|
- this.form.id = id
|
|
|
- this.resourceIdList = resourceList.map(item => item.id) || []
|
|
|
+ this.form = cloneDeep(this.roleItem)
|
|
|
+ const { resourceList } = this.roleItem
|
|
|
+ this.selectPermission = map(resourceList, 'id')
|
|
|
|
|
|
- // this.permissionList.forEach(item => {
|
|
|
- // // 交集
|
|
|
- // let intersection = this.resourceIdList.filter(val => {
|
|
|
- // let list = item.permissions.map(i => {
|
|
|
- // return i.id
|
|
|
- // })
|
|
|
- // return list.indexOf(val) >= 0
|
|
|
- // })
|
|
|
- // let checkedCount = intersection.length
|
|
|
- // // 单模块全选
|
|
|
- // this.checkAll[item.id] = checkedCount === item.permissions.length
|
|
|
- // // 单模块不确定状态
|
|
|
- // this.isIndeterminate[item.id] = checkedCount > 0 && checkedCount < item.permissions.length
|
|
|
- // })
|
|
|
this.permissionList.forEach(item => {
|
|
|
- // this.isIndeterminate[item.id] = false
|
|
|
- this.checkAll[item.id] = this.resourceIdList.includes(item.id)
|
|
|
+ const cLength = item.children ? item.children.length : 0
|
|
|
+
|
|
|
+ if (cLength > 0) {
|
|
|
+ // 交集
|
|
|
+ const hasOne = item.children.some(i => this.selectPermission.includes(i.id))
|
|
|
+ const hasAll = item.children.every(i => this.selectPermission.includes(i.id))
|
|
|
+ // 单模块全选
|
|
|
+ this.checkAll[item.id] = !!hasAll
|
|
|
+ // 单模块不确定状态
|
|
|
+ this.isIndeterminate[item.id] = !hasAll && hasOne
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
this.checkAllStatus()
|
|
|
@@ -259,15 +252,23 @@ export default {
|
|
|
.btn-wrap {
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
+
|
|
|
.table {
|
|
|
- border-collapse: collapse; width: 100%; margin-bottom: 20px;
|
|
|
+ border-collapse: collapse;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
td {
|
|
|
- border: 1px solid #ddd; padding:10px 20px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 10px 20px;
|
|
|
}
|
|
|
- .td-title{
|
|
|
- text-align: right; width: 100px;
|
|
|
+
|
|
|
+ .td-title {
|
|
|
+ text-align: right;
|
|
|
+ width: 100px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// .el-checkbox+.el-checkbox{
|
|
|
// margin: 0;
|
|
|
// }
|
