vue 根据Cascader 级联选择器请求接口返回数据遍历Tree 树形控件并可以修改
vue 根据Cascader 级联选择器请求接口返回数据遍历Tree 树形控件并可以修改
lyudev
发布于 2022-08-04 10:54:59
发布于 2022-08-04 10:54:59
html
<el-form ref="form" :model="role" label-width="80px">
<el-form-item label="角色分类">
<el-cascader @change="rolechange" expand-trigger="hover" :props="casrule" :options="options" v-model="role.roleId">
</el-cascader>
</el-form-item>
<el-tree :data="menuList" show-checkbox node-key="index" :props="defaultProps" default-expand-all ref="tree"
highlight-current>
</el-tree>
<el-form-item>
<el-button type="primary" @click="creat">立即创建</el-button>
</el-form-item>
</el-form>
js
<script>
export default {
data() {
return {
role: {},
menuIds: [],
menuList: [],
options: [],
casrule: {
label: 'roleName',
value: 'roleId',
children: 'child'
},
defaultProps: {
children: 'child',
label: 'name',
},
three: []
}
},
mounted() {
this.getRoleList()
this.getMenu()
},
methods: {
//返回所有的栏目菜单，并显示全部tree图上，所有级别，ID和名称必须一样
getMenu() {
this.$request.get('sysMenu/listForTree', {}, res => {
this.menuList = res.data;
})
},
//根据选中的Cascader级联选择器以ID形式发送给后端，后端再返回对应有权限的栏目，用setCheckedNodes方法显示在tree图上，返回的ID和名称必须一样
rolechange(array) {
this.$request.get('sysMenuRole/findByRoleMenu', {
roleId: array[1]
}, res => {
if (res.result == 1) {
console.log(res.data);
this.$refs.tree.setCheckedNodes(res.data)
}
})
},
//Cascader级联选择器赋值
getRoleList() {
this.$request.get('zzRole/listForTree', {
current: 1,
size: 100
}, res => {
this.options = res.data;
})
},
handleCheckedCitiesChange(val) {
console.log(val)
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
creat() {
if (!this.role.roleId) {
this.$message.error("请选择角色")
return;
}
this.$request.post('sysMenuRole/update', {
roleId: this.role.roleId[1],//岗位ID
menuIds: this.three.toString().split(",")//菜单ID,发送有权限的ID
}, res => {
if (res.result == '1') {
this.$message("更新成功")
for (let i = 0; i < this.$refs.tree.getCheckedNodes().length; i++) {
this.three.push(this.$refs.tree.getCheckedNodes()[i].index);
}
console.log(this.three)
}
})
}
}
}
</script>
sysMenu/listForTree
{
"result": "1",
"msg": null,
"data": [
{
"icon": null,
"name": "首页",
"index": 1,
"child": null
},
{
"icon": null,
"name": "数据中心",
"index": 2,
"child": [
{
"name": "决策",
"icon": "el-icon-tickets",
"index": 91,
"child": [
{
"router": "/index/jcupload",
"name": "决策信息上传",
"index": 92
}
]
},
{
"name": "人口",
"icon": "icon-ren",
"index": 3,
"child": [
{
"name": "实有人口管理",
"icon": null,
"index": 4,
"child": [
{
"router": "/index/ImportHouse",
"name": "人口信息导入",
"index": 8
},
{
"router": "/index/AddHouse",
"name": "数据添加",
"index": 9
},
{
"router": "/index/Realpopulation",
"name": "实有人口",
"index": 95
}
]
},
{
"name": "重点人群管理",
"icon": null,
"index": 96,
"child": [
{
"router": "/index/ImportantImport",
"name": "人口信息上传",
"index": 97
},
{
"router": "/index/ImportantPersion/0",
"name": "重点人口",
"index": 98
}
]
},
{
"name": "常住人口",
"icon": null,
"index": 5,
"child": [
{
"router": "/index/HujiPersion",
"name": "人口（户籍）",
"index": 10
},
{
"router": "/index/BorrowPersion",
"name": "人口（借住）",
"index": 11
}
]
},
{
"router": "/index/FloatPersion",
"name": "流动人口",
"index": 6
},
{
"router": "/index/KongguaPersion",
"name": "空挂人口",
"index": 7
},
{
"router": "/index/WenKong",
"name": "稳控人口",
"index": 36
},
{
"router": "/index/JiaoZheng",
"name": "矫正人口",
"index": 37
},
{
"router": "/index/ImportantPersion/1",
"name": "刑释解教人员",
"index": 99
},
{
"router": "/index/ImportantPersion/2",
"name": "涉毒人员",
"index": 100
},
{
"router": "/index/ImportantPersion/3",
"name": "肇事肇祸精神障碍患者",
"index": 101
},
{
"router": "/index/ImportantPersion/4",
"name": "问题青少年",
"index": 102
},
{
"router": "/index/ImportantPersion/5",
"name": "涉访重点人",
"index": 103
},
{
"router": "/index/ImportantPersion/6",
"name": "涉外人员",
"index": 104
},
{
"router": "/index/ImportantPersion/8",
"name": "其它重点人员",
"index": 105
},
{
"router": "/index/ImportantPersion/7",
"name": "邪教人员",
"index": 106
}
]
},
{
"name": "组织",
"icon": "icon-huaban",
"index": 12,
"child": [
{
"router": "/index/AddOrg",
"name": "添加组织",
"index": 13
},
{
"router": "/index/partyInfo",
"name": "党员信息",
"index": 14
},
{
"router": "/index/Mechanism/1",
"name": "基层党组织",
"index": 15
},
{
"router": "/index/Mechanism/2",
"name": "基层政府组织",
"index": 16
},
{
"router": "/index/Mechanism/3",
"name": "基层人大组织",
"index": 17
},
{
"router": "/index/Mechanism/4",
"name": "基层政协组织",
"index": 18
},
{
"router": "/index/Mechanism/5",
"name": "社会自治组织",
"index": 19
}
]
},
{
"name": "地",
"icon": "el-icon-location",
"index": 20,
"child": [
{
"router": "/index/addPlace",
"name": "添加场所",
"index": 107
},
{
"router": "/index/Place/1",
"name": "楼宇",
"index": 108
},
{
"router": "/index/Place/2",
"name": "幼儿园",
"index": 21
},
{
"router": "/index/Place/3",
"name": "学校",
"index": 22
},
{
"router": "/index/Place/4",
"name": "商业场所",
"index": 23
},
{
"router": "/index/Place/5",
"name": "医院",
"index": 24
},
{
"router": "/index/Place/6",
"name": "车站码头",
"index": 25
},
{
"router": "/index/Place/7",
"name": "服务场所",
"index": 26
},
{
"router": "/index/Place/8",
"name": "宗教场所",
"index": 27
},
{
"router": "/index/Place/9",
"name": "党政机关",
"index": 28
},
{
"router": "/index/Place/10",
"name": "文体活动场所",
"index": 29
},
{
"router": "/index/Place/11",
"name": "地下场所",
"index": 30
}
]
}
]
},
{
"icon": null,
"name": "统计分析",
"index": 31,
"child": [
{
"name": "统计分析",
"icon": "el-icon-tickets",
"index": 76,
"child": [
{
"name": "人口信息统计",
"icon": null,
"index": 77,
"child": [
{
"router": "/Judgement/PersionH",
"name": "宏观数据专题",
"index": 78
}
]
},
{
"name": "组织信息统计",
"icon": null,
"index": 79,
"child": [
{
"router": "/Judgement/partyorg",
"name": "党组织",
"index": 80
},
{
"router": "/Judgement/Safe",
"name": "综合治理",
"index": 81
}
]
},
{
"router": "/Judgement/AddressJudge",
"name": "重点场所信息统计",
"index": 82
}
]
}
]
},
{
"icon": null,
"name": "研判分析",
"index": 32,
"child": [
{
"name": "研判分析",
"icon": null,
"index": 85,
"child": [
{
"router": "/yanpan/persion",
"name": "人口同、环比分析",
"index": 86
},
{
"router": "/yanpan/place",
"name": "重点场所同、环比分析",
"index": 87
},
{
"router": "/yanpan/org",
"name": "组织同、环比分析",
"index": 88
}
]
}
]
},
{
"icon": null,
"name": "决策分析",
"index": 33,
"child": [
{
"name": "决策分析",
"icon": null,
"index": 83,
"child": [
{
"router": "/juece/listCasePage",
"name": "决策列表",
"index": 84
}
]
}
]
},
{
"icon": null,
"name": "报表管理",
"index": 34,
"child": [
{
"name": "报表管理",
"icon": null,
"index": 89,
"child": [
{
"router": "/report/fillin",
"name": "报表填报",
"index": 90
}
]
}
]
},
{
"icon": null,
"name": "GIS应用",
"index": 35,
"child": [
{
"name": "人口",
"icon": "icon-ren",
"index": 44,
"child": [
{
"router": "/gis/persion?type=isChangzhu",
"name": "常住人口",
"index": 45
},
{
"router": "/gis/persion?type=isFloating",
"name": "流动人口",
"index": 46
},
{
"router": "/gis/persion?type=isEmptyHanging",
"name": "空挂人口",
"index": 47
},
{
"router": "/gis/persion?type=isChangzhu",
"name": "寄住人口",
"index": 48
},
{
"router": "/gis/persion?type=isKongGua",
"name": "稳控人口",
"index": 49
},
{
"router": "/gis/persion?type=isShequjiaozheng",
"name": "矫正人口",
"index": 50
},
{
"router": "/gis/persion?type=isXingshijiejiao",
"name": "刑释解教人员",
"index": 51
},
{
"router": "/gis/persion?type=isShedu",
"name": "涉毒人员",
"index": 52
},
{
"router": "/gis/persion?type=isJingshen",
"name": "肇事肇祸精神障碍患者",
"index": 53
},
{
"router": "/gis/persion?type=isJingshen",
"name": "问题青少年",
"index": 54
},
{
"router": "/gis/persion?type=isXinfang",
"name": "涉访重点人",
"index": 55
},
{
"router": "/gis/persion?type=isShewai",
"name": "涉外人员",
"index": 56
},
{
"router": "/gis/persion?type=isQita",
"name": "其它重点人员",
"index": 57
},
{
"router": "/gis/persion?type=isShexie",
"name": "邪教人员",
"index": 58
}
]
},
{
"name": "组织",
"icon": "icon-huaban",
"index": 59,
"child": [
{
"router": "/gis/org?type=isDang",
"name": "基层党组织",
"index": 60
},
{
"router": "/gis/org?type=isZF",
"name": "基层政府组织",
"index": 61
},
{
"router": "/gis/org?type=isRD",
"name": "基层人大组织",
"index": 62
},
{
"router": "/gis/org?type=isZX",
"name": "基层政协组织",
"index": 63
},
{
"router": "/gis/org?type=isZZ",
"name": "社会自治组织",
"index": 64
}
]
},
{
"name": "地",
"icon": "el-icon-location",
"index": 65,
"child": [
{
"router": "/gis/place?type=isSchool",
"name": "幼儿园",
"index": 66
},
{
"router": "/gis/place?type=isFang",
"name": "楼宇",
"index": 110
},
{
"router": "/gis/place?type=isSchool",
"name": "学校",
"index": 67
},
{
"router": "/gis/place?type=isBusiness",
"name": "商业场所",
"index": 68
},
{
"router": "/gis/place?type=isHospital",
"name": "医院",
"index": 69
},
{
"router": "/gis/place?type=isStation",
"name": "车站码头",
"index": 70
},
{
"router": "/gis/place?type=isService",
"name": "服务场所",
"index": 71
},
{
"router": "/gis/place?type=isReligion",
"name": "宗教场所",
"index": 72
},
{
"router": "/gis/place?type=isPGO",
"name": "党政机关",
"index": 73
},
{
"router": "/gis/place?type=isRS",
"name": "文体活动场所",
"index": 74
},
{
"router": "/gis/place?type=isUnder",
"name": "地下场所",
"index": 75
}
]
}
]
},
{
"icon": null,
"name": "账户设置",
"index": 38,
"child": [
{
"name": "用户管理",
"icon": null,
"index": 39,
"child": [
{
"router": "/setting/updatePW",
"name": "修改密码",
"index": 40
}
]
},
{
"name": "角色成员管理",
"icon": null,
"index": 41,
"child": [
{
"router": "/setting/RoleManage",
"name": "角色管理",
"index": 42
},
{
"router": "/setting/menuUpdate",
"name": "权限管理",
"index": 43
},
{
"router": "/setting/addUser",
"name": "用户添加",
"index": 109
}
]
}
]
}
]
}
sysMenuRole/findByRoleMenu
{
"result": "1",
"msg": null,
"data": [
{
"name": "账户设置",
"index": 38
},
{
"name": "用户管理",
"index": 39
},
{
"name": "修改密码",
"index": 40
},
{
"name": "角色成员管理",
"index": 41
},
{
"name": "角色管理",
"index": 42
},
{
"name": "权限管理",
"index": 43
},
{
"name": "用户添加",
"index": 109
}
]
}
zzRole/listForTree
{
"result": "1",
"msg": null,
"data": [
{
"roleId": "roleClass1",
"roleName": "网格员",
"child": [
{
"roleId": 2,
"roleName": "平安社区第一网格管理员"
},
{
"roleId": 3,
"roleName": "平安社区第二网格管理员"
},
{
"roleId": 4,
"roleName": "平安社区第三网格管理员"
},
{
"roleId": 5,
"roleName": "平安社区第四网格管理员"
},
{
"roleId": 6,
"roleName": "平安社区第五网格管理员"
},
{
"roleId": 7,
"roleName": "平安社区第六网格管理员"
},
{
"roleId": 9,
"roleName": "测试街道测试网格管理员"
},
{
"roleId": 11,
"roleName": "迎宾社区第一网格管理员"
},
{
"roleId": 12,
"roleName": "迎宾社区第二网格管理员"
},
{
"roleId": 13,
"roleName": "迎宾社区第三网格管理员"
},
{
"roleId": 14,
"roleName": "迎宾社区第四网格管理员"
},
{
"roleId": 15,
"roleName": "迎宾社区第五网格管理员"
},
{
"roleId": 16,
"roleName": "迎宾社区第六网格管理员"
},
{
"roleId": 18,
"roleName": "杏花社区第一网格管理员"
},
{
"roleId": 19,
"roleName": "杏花社区第二网格管理员"
},
{
"roleId": 20,
"roleName": "杏花社区第三网格管理员"
},
{
"roleId": 21,
"roleName": "杏花社区第四网格管理员"
},
{
"roleId": 22,
"roleName": "杏花社区第五网格管理员"
},
{
"roleId": 25,
"roleName": "中兴社区第一网格管理员"
},
{
"roleId": 26,
"roleName": "中兴社区第二网格管理员"
},
{
"roleId": 27,
"roleName": "中兴社区第三网格管理员"
},
{
"roleId": 28,
"roleName": "中兴社区第四网格管理员"
},
{
"roleId": 29,
"roleName": "中兴社区第五网格管理员"
},
{
"roleId": 30,
"roleName": "中兴社区第六网格管理员"
},
{
"roleId": 32,
"roleName": "虎山社区第一网格管理员"
},
{
"roleId": 33,
"roleName": "虎山社区第二网格管理员"
},
{
"roleId": 34,
"roleName": "虎山社区第三网格管理员"
},
{
"roleId": 35,
"roleName": "虎山社区第四网格管理员"
},
{
"roleId": 36,
"roleName": "虎山社区第五网格管理员"
},
{
"roleId": 37,
"roleName": "虎山社区第六网格管理员"
}
]
},
{
"roleId": "roleClass2",
"roleName": "社区管理员",
"child": [
{
"roleId": 1,
"roleName": "平安社区管理员"
},
{
"roleId": 10,
"roleName": "迎宾社区管理员"
},
{
"roleId": 17,
"roleName": "杏花社区管理员"
},
{
"roleId": 24,
"roleName": "中兴社区管理员"
},
{
"roleId": 31,
"roleName": "虎山社区管理员"
}
]
},
{
"roleId": "roleClass3",
"roleName": "领导班子",
"child": [
{
"roleId": 43,
"roleName": "领导班子"
}
]
},
{
"roleId": "roleClass4",
"roleName": "街道管理员",
"child": [
{
"roleId": 8,
"roleName": "老虎滩街道管理员"
}
]
}
]
}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-03-02，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。