5 changed files with 280 additions and 24 deletions
@ -0,0 +1,9 @@ |
|||||
|
import api from '@/utils/api' |
||||
|
|
||||
|
export function getAll(params) { |
||||
|
return api({ |
||||
|
url: '/dataScopeDepartment/all', |
||||
|
method: 'get', |
||||
|
params |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,247 @@ |
|||||
|
<template> |
||||
|
<el-drawer title="数据权限" :visible="show" size="90%" :destroy-on-close="true" @close="close"> |
||||
|
<el-form ref="permission" :model="permission" label-width="100px"> |
||||
|
<el-form-item label="角色名称"> |
||||
|
{{ permission.roleName }} |
||||
|
</el-form-item> |
||||
|
<el-form-item label="角色代码"> |
||||
|
{{ permission.roleCode }} |
||||
|
</el-form-item> |
||||
|
<el-form-item label="权限范围"> |
||||
|
<el-select v-model="permission.dataScope"> |
||||
|
<el-option v-for="(item, index) in dataScopes" :key="index" :label="item" :value="index" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="permission.dataScope === 1" label="数据权限"> |
||||
|
<el-table |
||||
|
ref="departments" |
||||
|
:data="departments" |
||||
|
border |
||||
|
fit |
||||
|
height="650" |
||||
|
highlight-current-row |
||||
|
row-key="id" |
||||
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
||||
|
style="width: 99%;" |
||||
|
> |
||||
|
<el-table-column label="部门名称"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-checkbox v-model="scope.row.checked" :indeterminate="scope.row.indeterminate" @change="handleCheckAllChange(scope.row, $event)"> |
||||
|
{{ scope.row.name }} |
||||
|
</el-checkbox> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="4" :offset="2"> |
||||
|
<el-select v-if="permission.dataScope === 1" v-model="showMode" @change="changeShowMode"> |
||||
|
<el-option |
||||
|
v-for="(item, index) in showModes" |
||||
|
:key="index" |
||||
|
:label="item" |
||||
|
:value="index" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
<el-col :span="4" :offset="14"> |
||||
|
<el-button type="primary" @click="update"> |
||||
|
确 认 |
||||
|
</el-button> |
||||
|
<el-button @click="close"> |
||||
|
取 消 |
||||
|
</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CrudRole from '@/api/role' |
||||
|
import { getAll } from '@/api/data_scope_department' |
||||
|
|
||||
|
export default { |
||||
|
name: 'DataPermission', |
||||
|
data() { |
||||
|
return { |
||||
|
show: false, |
||||
|
permission: {}, |
||||
|
dataScopes: ['全部数据权限', '自定义数据权限', '本部门数据权限', '本部门及下级数据权限', '仅本人数据权限'], |
||||
|
departments: [], |
||||
|
showMode: 0, |
||||
|
showModes: ['合并所有', '展开所有', '全部勾选', '取消勾选'], |
||||
|
checkedIds: new Set() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
const that = this |
||||
|
this.common.$on('openDataPermission', function(data) { |
||||
|
that.open(data) |
||||
|
}) |
||||
|
}, |
||||
|
created() { |
||||
|
const that = this |
||||
|
this.common.$on('openDataPermission', function(data) { |
||||
|
that.open(data) |
||||
|
}) |
||||
|
this.getDepartmentList() |
||||
|
}, |
||||
|
methods: { |
||||
|
open(data) { |
||||
|
this.permission = data |
||||
|
this.getAllDataScopeDepartment() |
||||
|
this.show = true |
||||
|
}, |
||||
|
close() { |
||||
|
this.show = false |
||||
|
}, |
||||
|
getAllDataScopeDepartment() { |
||||
|
getAll({ |
||||
|
roleId: this.permission.id |
||||
|
}).then(data => { |
||||
|
data = data.map(row => row.departmentId) |
||||
|
this.departments.forEach(permission => { |
||||
|
if (permission.children.length > 0) { |
||||
|
this.echoChildren(permission.children, data) |
||||
|
} else { |
||||
|
this.settingChecked(permission, data) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
getDepartmentList() { |
||||
|
// 查询列表 |
||||
|
this.api({ |
||||
|
url: '/department/tree', |
||||
|
method: 'get' |
||||
|
}).then(data => { |
||||
|
this.departments = data |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 改变展示方式 |
||||
|
*/ |
||||
|
changeShowMode(val) { |
||||
|
switch (val) { |
||||
|
case 0: |
||||
|
this.departments.forEach(row => this.$refs.departments.toggleRowExpansion(row, false)) |
||||
|
break |
||||
|
case 1: |
||||
|
this.departments.forEach(row => this.$refs.departments.toggleRowExpansion(row, true)) |
||||
|
break |
||||
|
case 2: |
||||
|
this.departments.forEach(row => { |
||||
|
row.checked = true |
||||
|
row.indeterminate = false |
||||
|
this.handleCheckAllChange(row, true) |
||||
|
}) |
||||
|
break |
||||
|
case 3: |
||||
|
this.departments.forEach(row => { |
||||
|
row.checked = false |
||||
|
row.indeterminate = false |
||||
|
this.handleCheckAllChange(row, false) |
||||
|
}) |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
update() { |
||||
|
console.log(this.checkedIds) |
||||
|
console.log(Array.from(this.checkedIds)) |
||||
|
this.permission.dataScopeDepartmentIds = Array.from(this.checkedIds) |
||||
|
console.log(this.permission) |
||||
|
CrudRole.edit(this.permission).then(() => this.$notify.success('操作成功')) |
||||
|
}, |
||||
|
handleCheckAllChange(val, checked) { |
||||
|
if (checked) { |
||||
|
this.checkedIds.add(val.id) |
||||
|
} else { |
||||
|
this.checkedIds.delete(val.id) |
||||
|
} |
||||
|
// 有下级去处理下级 |
||||
|
if (val.children.length > 0) { |
||||
|
this.findChildren(val.children, checked) |
||||
|
} |
||||
|
// 处理上级 |
||||
|
if (val.parentId !== 0) { |
||||
|
this.findParent(this.departments, val.parentId) |
||||
|
} |
||||
|
val.indeterminate = false |
||||
|
}, |
||||
|
findChildren(list, checked) { |
||||
|
list.forEach(children => { |
||||
|
children.checked = checked |
||||
|
children.indeterminate = false |
||||
|
if (children.children.length > 0) { |
||||
|
this.findChildren(children.children, checked) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
findParent(list, parentId) { |
||||
|
list.forEach(result => { |
||||
|
let parentCheckedLength = 0 |
||||
|
let parentIndeterminateLength = 0 |
||||
|
// 对当前层级的上级操作 |
||||
|
if (result.id === parentId) { |
||||
|
// 判断下级的状态，用来为父级的状态做判断 |
||||
|
result.children.forEach(children => { |
||||
|
if (children.indeterminate) { |
||||
|
parentIndeterminateLength++ |
||||
|
} else if (children.checked) { |
||||
|
parentCheckedLength++ |
||||
|
} |
||||
|
}) |
||||
|
result.checked = parentCheckedLength === result.children.length |
||||
|
result.indeterminate = (parentIndeterminateLength > 0 || parentCheckedLength > 0) && parentCheckedLength < result.children.length |
||||
|
|
||||
|
if (result.checked) { |
||||
|
this.checkedIds.add(result.id) |
||||
|
} else { |
||||
|
this.checkedIds.delete(result.id) |
||||
|
} |
||||
|
// 如果还有上级，继续操作 |
||||
|
if (result.parentId !== 0) { |
||||
|
this.findParent(this.departments, result.parentId) |
||||
|
} |
||||
|
} else if (result.children.length > 0) { |
||||
|
this.findParent(result.children, parentId) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
echoChildren(list, optionsIds) { |
||||
|
list.forEach(result => { |
||||
|
if (result.children.length === 0) { |
||||
|
this.settingChecked(result, optionsIds) |
||||
|
} else { |
||||
|
this.echoChildren(result.children, optionsIds) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
settingChecked(result, optionsIds) { |
||||
|
let matching = false |
||||
|
optionsIds.forEach(optionsId => { |
||||
|
if (result.id === optionsId) { |
||||
|
result.checked = true |
||||
|
matching = true |
||||
|
} |
||||
|
}) |
||||
|
if (matching) { |
||||
|
this.handleCheckChange(result) |
||||
|
} |
||||
|
}, |
||||
|
handleCheckChange(val) { |
||||
|
// 处理上级 |
||||
|
if (val.parentId !== 0) { |
||||
|
this.findParent(this.departments, val.parentId) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue