根据角色不同类别改变树的选择和禁用，下面我将所有代码复制过来，如果有变量确实自行补充
html
<template>
<div class="manageRole">
<div class="manageRole-header">
<el-input
v-model="searchValue"
@change="getRoleList()"
clearable
placeholder="搜索"
size="mini"
suffix-icon="el-icon-search"
></el-input>
<span>角色：</span>
<el-select v-model="jsValue" clearable size="mini" placeholder="请选择">
<el-option
v-for="(item, index) in roleList"
:key="index"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
<span>权限：</span>
<el-select v-model="qxValue" clearable size="mini" placeholder="请选择">
<el-option
v-for="(item, index) in functionList"
:key="index"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
<el-button @click="getChange()" size="mini" class="button-self-style" style="float: right"
>新增</el-button
>
</div>
<el-table :data="roleList" style="width: 100%" stripe>
<el-table-column type="index" label="序号" width="100" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="name"
label="角色名称"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column label="角色类别" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{
scope.row.type == 1 ? '应急局' : scope.row.type == 2 ? '行业部门' : '乡镇街道'
}}</span>
</template>
</el-table-column>
<el-table-column
prop="permodel"
label="权限模块"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column prop="description" label="角色说明" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="created_user" label="创建者" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<a style="cursor: pointer; color: #2dfdfc" @click="getChange(scope.row)">
<i class="el-icon-edit"></i>编辑</a
>
<a style="cursor: pointer; margin-left: 20px" @click="deleteUser(scope.row)">
<i class="el-icon-delete"></i>删除</a
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChange"
@current-change="currentChange"
:page-size="page.pageSize"
:total="page.total"
:current-page="1"
:page-sizes="[24, 48, 72, 96]"
style="float: right; margin-top: 10px"
background
layout=" prev, pager, next,sizes,jumper"
>
</el-pagination>
<el-dialog
class="allDialogStyle"
:visible.sync="dialogChange"
center
width="430px"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
>
<span class="dialog-footer" style="position: absolute; right: 10px"> </span>
<el-tabs v-model="activeName">
<el-tab-pane :label="ifCreate ? '新增用户信息' : '修改用户信息'" name="first">
<!-- <p></p> -->
<div style="width: 100%; margin-top: 10px">
<span style="color: red">*</span>
<span style="color: #fff">角色名称：</span>
<el-input v-model="tempData.name" clearable size="mini"></el-input>
</div>
<div style="width: 100%">
<span style="color: red">*</span>
<span style="color: #fff">角色类别：</span>
<el-radio-group v-model="jsRadio" @change="jsChange">
<el-radio label="1">应急局</el-radio>
<el-radio label="2">行业部门</el-radio>
<el-radio label="3">乡镇街道</el-radio>
</el-radio-group>
</div>
<div style="width: 100%">
<span style="color: red">*</span>
<span style="color: #fff">权限模块：</span>
<div
style="
border: 1px solid rgba(15, 189, 205, 0.42);
padding: 5px;
width: 100%;
margin: 10px 0;
display: flex;
justify-content: space-between;
"
>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:props="{
children: 'children',
label: 'name'
}"
ref="Tree"
check-on-click-node
:check-strictly="true"
:expand-on-click-node="false"
@check-change="handleCheckChange"
@node-click="nodeClick"
style="max-height: 500px; overflow-y: auto; width: 100%"
>
<span
slot-scope="{ data }"
:style="{
color: !data.disabled ? '#fff' : '#6e7f95'
}"
>
{{ data.name }}
</span>
</el-tree>
</div>
</div>
<div style="width: 100%">
<span style="color: #fff">角色说明：</span>
<el-input
type="textarea"
v-model="tempData.description"
clearable
size="mini"
></el-input>
</div>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button size="mini" class="button-self-style" @click="handleClose">取 消</el-button>
<el-button
size="mini"
class="button-self-style"
type="primary"
@click="changeUser(false), handleClose"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
activeName: 'first',
page: {
total: 0,
pageNum: 0,
pageSize: 24
}, // 分页
jsValue: '',
searchValue: '',
qxValue: '',
roleList: [],
tempData: {},
dialogChange: false,
ifCreate: false,
treeData: [],
functionList: [],
defaultCheck: [],
permids: [], // 编辑选中的id
jsRadio: '1' // 默认角色
}
},
props: {},
components: {},
computed: {
...mapGetters({
userInfo: 'getUserInfo'
}),
onChange(val) {
const { jsValue, qxValue } = this // 同时监听多个属性
return { jsValue, qxValue }
}
},
watch: {
onChange(val) {
this.getRoleList()
}
},
mounted() {
this.getRoleList()
this.getFunctionList()
},
methods: {
// 获取登录和编辑用户权限
getRoleList() {
let json = []
this.roleList = []
if (this.searchValue) {
this.page.pageNum = 0 // 筛选后从第一页开始
json.push({ field: 'name', operator: 'EQ', value: this.searchValue })
}
if (this.qxValue) {
this.page.pageNum = 0 // 筛选后从第一页开始
json.push({ field: 'permodel', operator: 'FQ', value: this.qxValue })
}
if (this.jsValue) {
this.page.pageNum = 0 // 筛选后从第一页开始
json.push({ field: 'name', operator: 'EQ', value: this.jsValue })
}
let params = {
pageNo: this.page.pageNum,
pageSize: this.page.pageSize,
simcode: this.userInfo.simcode,
keyword: JSON.stringify(json)
}
this.$store.dispatch('getRoleList', params).then((res) => {
if (res.data.code === 1) {
this.roleList = res.data.data
} else {
this.$message.error(res.data.msg)
}
})
},
getChange(val) {
this.dialogChange = true
this.defaultCheck = []
this.permids = []
this.tempData = {
code: (val && val.code) || this.userInfo.simcode,
created_at: (val && val.created_at) || this.formatTime(),
created_user: (val && val.created_user) || this.userInfo.xzq_name,
description: (val && val.description) || '', // 角色描述
gjjsfyx: (val && val.gjjsfyx) || 0,
issystem: (val && val.issystem) || '0', // 是否预置
name: (val && val.name) || '',
permodel: (val && val.permodel && val.permodel.split(',')) || [], // 模块
shengsfyx: (val && val.shengsfyx) || 0,
shisfyx: (val && val.shisfyx) || 1,
xsfyx: (val && val.xsfyx) || 1,
id: (val && val.id) || '',
type: (val && val.type) || this.jsRadio // 默认角色
}
// debugger
this.$nextTick(() => {
if (val) {
this.ifCreate = false // 编辑用户
this.jsRadio = this.tempData.type + ''
if (this.tempData.permodel && this.tempData.permodel.length > 0) {
for (let index = 0; index < this.tempData.permodel.length; index++) {
let item = this.tempData.permodel[index]
this.treeData = this.getDgData(this.functionList, item, this.jsRadio, 1)
}
} else {
this.treeData = this.getDgData(this.functionList, null, this.jsRadio, 1)
}
} else {
this.ifCreate = true // 新建
this.treeData = this.getDgData(this.functionList, null, this.jsRadio, 1)
}
console.log(this.treeData)
this.$refs.Tree.setCheckedKeys(this.defaultCheck) // 获取已经设置的资源后渲染
})
}, // 获取选中数据
getDgData(data, item, js, ifChildrenDis = 1) {
let pushData = (value) => {
if (this.ifCreate) {
this.tempData.permodel.push(value.name)
this.defaultCheck.push(value.id) //
this.permids.push({ id: value.id, pid: value.pid })
} else if (value.name == item) {
// debugger
this.defaultCheck.push(value.id) // 编辑默认选中
this.permids.push({ id: value.id, pid: value.pid })
}
}
for (let index = 0; index < data.length; index++) {
data[index].disabled = false
const ele = data[index]
// 创建根据默认的角色选中对应权限 ..
// [管理员(权限全部默认打钩)\行业部门(驾驶舱,平台资源,数据管理)\乡镇街道(驾驶舱\平台资源),没有打钩的权限置灰],选择逐级递增,
// ifChildrenDis :1全选 2 禁用 3 不管
// debugger
if (js == '1') {
pushData(ele)
} else if (js == '2') {
if (ele.pid == '0') {
// 遍历最外层
if (['1', '2', '5'].includes(ele.id)) {
pushData(ele)
ifChildrenDis = 1
}
// else if (ele.id == '5') {
// ifChildrenDis = 3 // 行业部门的数据管理不管，让用户自己选
// }
else {
ifChildrenDis = 2
ele.disabled = true // 除了默认选中的都禁用
}
} else {
// 子级 的判断根据父级传参
if (ifChildrenDis == 1) {
pushData(ele) // 子级选择
} else if (ifChildrenDis == 2) {
ele.disabled = true // 子级禁用
} // 3子级不管
}
} else if (js == '3') {
if (ele.pid == '0') {
// 遍历最外层
if (['1', '2'].includes(ele.id)) {
pushData(ele)
} else {
ifChildrenDis = 2
ele.disabled = true // 除了默认选中的都禁用
}
} else {
// 子级 的判断根据父级传参
if (ifChildrenDis == 1) {
pushData(ele) // 子级选择
} else if (ifChildrenDis == 2) {
ele.disabled = true // 子级禁用
} // 3子级不管
}
}
if (ele.children) {
this.getDgData(ele.children, item, js, ifChildrenDis)
}
}
return data
}, // 递归获取
jsChange(val) {
// debugger
this.$nextTick(() => {
this.tempData.type = val
this.defaultCheck = []
this.permids = []
this.treeData = []
if (this.ifCreate) {
this.tempData.permodel = []
}
this.ifCreate = true // 切换类别改为创建模式
this.treeData = JSON.parse(JSON.stringify(this.getDgData(this.functionList, null, val, 1))) // 重新更新整个视图
this.$refs.Tree.setCheckedKeys(this.defaultCheck) // 获取已经设置的资源后渲染
// console.log(this.defaultCheck)
})
}, // 编辑新建默认角色
changeUser() {
if (this.tempData.name == '' || this.tempData.permodel.length == 0) {
this.$message.error('请填写完全必选项！')
return
}
console.log(this.tempData)
// debugger
this.$store
.dispatch('addOrUpdateRole', { role: this.tempData, permids: this.permids })
.then((res) => {
if (res.data.code === 1) {
this.$message.success(res.data.msg)
this.getRoleList()
} else {
this.$message.error(res.data.msg)
}
})
.catch((err) => {
this.$message.error(err.data.msg)
})
this.dialogChange = false
}, // 编辑用户信息
deleteUser(val) {
if (val.issystem == 1) {
this.$message.error('系统预置角色不能删除')
return
}
this.$confirm('是否删除该用户', '确认删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
showClose: false,
customClass: 'self-confirm-box allDialogStyle',
cancelButtonClass: 'button-self-style el-button--mini',
confirmButtonClass: 'button-self-style el-button--mini'
})
.then(() => {
this.$store.dispatch('DeleteRole', { role_id: val.id }).then((res) => {
if (res.data.code === 1) {
this.getRoleList()
} else if (res.data.msg == '当前角色存在用户绑定关系，是否仍要删除？') {
this.$confirm(res.data.msg, '确认删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
showClose: false,
customClass: 'self-confirm-box allDialogStyle',
cancelButtonClass: 'button-self-style el-button--mini',
confirmButtonClass: 'button-self-style el-button--mini'
})
.then(() => {
this.$store.dispatch('DeleteRole', { role_id: val.id, sfrysc: 1 }).then((res) => {
if (res.data.code === 1) {
this.getRoleList()
} else {
this.$message.error(res.data.msg)
}
})
})
.catch(() => {
this.$message.info('已取消')
})
} else {
this.$message.error(res.data.msg)
}
})
})
.catch(() => {
this.$message.info('已取消')
})
}, // 删除用户
getFunctionList() {
this.functionList = []
this.$store.dispatch('getFunctionList', {}).then((res) => {
if (res.data.code == 1) {
this.functionList = res.data.data.filter((ele) => {
return { id: ele.id, name: ele.name }
})
}
})
}, // 权限书
handleCheckChange(data, checked, indeterminate) {
let arr = this.$refs.Tree.getCheckedNodes()
this.tempData.permodel = []
this.permids = []
this.defaultCheck = []
arr.forEach((item) => {
this.defaultCheck.push(item.id) // 编辑默认选中
this.tempData.permodel.push(item.name)
this.permids.push({ id: item.id, pid: item.pid })
})
// console.log(arr, 'chenck')
// console.log(this.permids)
// console.log(this.tempData.permodel)
// console.log(this.defaultCheck)
}, // 多选
handleClose() {
this.dialogChange = false
this.jsRadio = '1'
this.tempData = {}
this.permids = []
this.defaultCheck = []
}, // 关闭弹窗
// 分页数据
currentChange(val) {
this.page.pageNum = val - 1
this.getRoleList()
},
sizeChange(val) {
this.page.pageSize = val
this.getRoleList()
},
nodeClick(data, node) {
// 这个方法是勾选父级子级也默认勾选 取消子级不影响父级
// debugger
this.childNodesChange(node)
// 这个方法是勾选子级默认把父级也勾选上
this.parentNodesChange(node)
// this.$refs.Tree.getCheckedNodes() 这个方法是官网自带的 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
let arr = this.$refs.Tree.getCheckedNodes()
// debugger
this.tempData.permodel = []
this.permids = []
this.defaultCheck = []
arr.forEach((item) => {
this.defaultCheck.push(item.id) // 编辑默认选中
this.tempData.permodel.push(item.name)
this.permids.push({ id: item.id, pid: item.pid })
})
console.log(arr, 'node')
// this.$message.info(`当前已选择--${this.tempData.permodel}`)
// console.log(this.defaultCheck, 'defaultCheck')
},
childNodesChange(node) {
let len = node.childNodes.length
if (len > 0) {
for (let i = 0; i < len; i++) {
if (!node.checked) {
node.childNodes[i].checked = false
} else {
node.childNodes[i].checked = true
}
this.childNodesChange(node.childNodes[i])
}
}
},
parentNodesChange(node) {
if (node.parent) {
for (let key in node) {
if (key == 'parent') {
node[key].checked = true
this.parentNodesChange(node[key])
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
.manageRole {
width: 100%;
height: 100%;
overflow: hidden;
.manageRole-header {
width: 100%;
padding: 10px 0;
color: #fff;
font-size: 14px;
/deep/ .el-input {
width: 200px;
}
> span {
margin-left: 20px;
}
}
/deep/ .el-table {
border-radius: 5px;
border: none;
.el-table__body-wrapper {
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 280px);
}
}
.allDialogStyle {
overflow: hidden;
/deep/ .el-tree {
color: #fff;
background: none;
.el-tree-node.is-current > .el-tree-node__content {
background: rgba(221, 221, 221, 0.4);
}
.el-tree-node .el-tree-node__content .is-leaf {
background: none !important;
}
.el-tree-node .el-tree-node__content:hover {
background: rgba(221, 221, 221, 0.4);
}
}
}
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
