表单中有tabs、内容是树结构的赋值和回显
// 以下是传值时有传父节点halfCheckedKeys
<a-form-model-item label="" :wrapper-col="{ span: 22 }">
<a-tabs :tab-position="mode" :activeKey="defaultActiveKey" @change="callback">
<a-tab-pane
v-for="(item, index) in ResourceTreeData"
:key="index"
:tab="item.resourceName"
forceRender="true"
>
<a-tree
v-model="form.rIds[index]"
checkable
:tree-data="item.childs"
:replaceFields="{ children: 'childs', title: 'resourceName', key: 'resourceId', value: 'resourceId' }"
@check="(checkedKeys, e) => onCheck(checkedKeys, e, index)"
/>
</a-tab-pane>
</a-tabs>
</a-form-model-item>
/****/
data() {
return {
form:[],
checkedKeys: [],
ResourceTreeData: [],
subOrgData: [],
allSelectedNodes: [],
test: [],
testTree: [],
defaultActiveKey: 0
}
}
methods: {
// 打开新增、编辑表单页或者弹窗
async showCorrection(record) {
//先清空allSelectedNodes， checkedKeys
this.allSelectedNodes = [];
this.checkedKeys = [];
if (record) {
this.title = '编辑角色';
const res = await queryRole({ roleId: record.roleId });
for (let i = 0; i < this.ResourceTreeData.length; i++) {
if (this.ResourceTreeData[i].childs) {//过滤childs为空的避免出现错误
//过滤半选父节点留下选中的子节点
this.deepList(this.ResourceTreeData[i].childs);
this.checkedKeys[i] = [...new Set(this.test)].filter(item => new Set(eval(res.data.rIds)).has(item));
//清空this.test避免数据发生错误
this.test = [];
//包含半选父节点和选择的子节点
this.treeList(this.ResourceTreeData[i].childs);
this.allSelectedNodes[i] = [...new Set(this.testTree)].filter(item =>
new Set(eval(res.data.rIds)).has(item)
);
//清空this.testTree 避免数据发生错误
this.testTree = [];
}
}
this.isEdit = true;
this.form = { ...res.data, rIds: this.checkedKeys };
} else {
this.title = '新增角色';
}
this.showCorrectionModel = true;
},
//保存
onSubmit() {
if (!this.form.rIds.length) {
this.$message.error('请为该角色选择功能权限');
return false;
}
this.$refs.ruleForm.validate(async valid => {
if (valid) {
try {
if (this.form.roleId) {
await updateRole({ ...this.form, rIds: [...this.allSelectedNodes.flat()] });//[...this.allSelectedNodes.flat()]把allSelectedNodes数组中的数组整合成一个数组
} else {
await addRole({ ...this.form, rIds: [...this.allSelectedNodes.flat()] });
}
this.$message.success('保存成功');
this.fetchTableData();
this.resetForm();
} catch (error) {
console.log(error);
this.$message.error((error && error.rtn_msg) || '系统繁忙，请稍后再试');
}
} else {
console.log('error submit!!');
return false;
}
});
},
// tabs 切换
callback(val) {
console.log(val);
this.defaultActiveKey = val;
},
// tbbs
onCheck(checkedKeys, info, index) {
// console.log(checkedKeys);
// console.log(info);
this.allSelectedNodes[index] = checkedKeys.concat(info.halfCheckedKeys);//选框选中时把半选父节点加上
this.form.rIds[index] = checkedKeys;
},
// 遍历树形数据获取不含父节点的数组
deepList(data) {
data.map(item => {
if (item.childs && item.childs.length > 0) {
this.deepList(item.childs);
} else {
//test数组存放
this.test.push(item.resourceId);
}
});
},
// 遍历树形数据获取包含父节点的数组
treeList(data) {
data.map(item => {
if (item.childs && item.childs.length > 0) {
this.treeList(item.childs);
}
this.testTree.push(item.resourceId);
});
}
}
this.ResourceTreeData=[
{
"childs": [
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [],
"isShow": 1,
"parentId": "26eb9b6704371143f5911486cb045b20",
"resourceId": "187806bed09096fdbb997fae6a1f14a8",
"resourceName": "查看",
"resourcePermission": "system:reported-record:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "597ea67daeb4dc503f68d304dea57ede",
"resourceId": "26eb9b6704371143f5911486cb045b20",
"resourceName": "上报记录",
"resourcePermission": "manage-security::reported-record",
"resourceType": 1,
"sortIndex": 5,
"status": 1,
"url": "/manage-security/reported-record"
},
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [],
"isShow": 1,
"parentId": "59f4492541a852427f3e92817bca2970",
"resourceId": "fec4105b9bb297cf2e1b08ce21e92279",
"resourceName": "查看",
"resourcePermission": "system:user-groups:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "32dbead5f7b4f3e68dc8d38a3942c261",
"resourceId": "59f4492541a852427f3e92817bca2970",
"resourceName": "用户分组",
"resourcePermission": "manage-security::user-groups",
"resourceType": 1,
"sortIndex": 2,
"status": 1,
"url": "/manage-security/user-management/user-groups"
},
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [],
"isShow": 1,
"parentId": "e9c57f4e706fef1a06673e7f1ef5233f",
"resourceId": "bb7f83ca07c418b1f525a9d755221d1f",
"resourceName": "查看",
"resourcePermission": "system:face-database:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "32dbead5f7b4f3e68dc8d38a3942c261",
"resourceId": "e9c57f4e706fef1a06673e7f1ef5233f",
"resourceName": "人脸库",
"resourcePermission": "manage-security::face-database",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/manage-security/user-management/face-database"
}
],
"isShow": 1,
"parentId": "597ea67daeb4dc503f68d304dea57ede",
"resourceId": "32dbead5f7b4f3e68dc8d38a3942c261",
"resourceName": "用户管理",
"resourcePermission": "manage-security::user-management",
"resourceType": 1,
"sortIndex": 3,
"status": 1,
"url": "/manage-security/user-management"
},
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [],
"isShow": 1,
"parentId": "956d17f476a88e058275704693fdf82b",
"resourceId": "78b0f948a3cad4d64d0ff18a4d3deac2",
"resourceName": "查看",
"resourcePermission": "system:warning-center:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "597ea67daeb4dc503f68d304dea57ede",
"resourceId": "956d17f476a88e058275704693fdf82b",
"resourceName": "告警中心",
"resourcePermission": "manage-security::warning-center",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/manage-security/warning-center"
},
{
"appId": "2021312345698785",
"childs": [
{
"appId": "2021312345698785",
"childs": [],
"isShow": 1,
"parentId": "ca41e2563063a5f2eed79fe4c479be56",
"resourceId": "cfb4ed931456f291525e83fed58f9908",
"resourceName": "查看",
"resourcePermission": "system:basic-config:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "597ea67daeb4dc503f68d304dea57ede",
"resourceId": "ca41e2563063a5f2eed79fe4c479be56",
"resourceName": "基础配置",
"resourcePermission": "manage-security::basic-config",
"resourceType": 1,
"sortIndex": 2,
"status": 1,
"url": "/manage-security/basic-config"
}
],
"isShow": 1,
"parentId": "",
"resourceId": "597ea67daeb4dc503f68d304dea57ede",
"resourceName": "测试1",
"resourcePermission": "smart-community::manage-security",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/smart-community/manage-security"
}
],
"resourceName": "测试1"
},
{
"childs": [
{
"appId": "2021125447896355",
"childs": [
{
"appId": "2021125447896355",
"childs": [],
"isShow": 1,
"parentId": "12a0ab0ffdf0965585cdca15131cbfa5",
"resourceId": "1226821a8979291e0ad64df32e5e99d2",
"resourceName": "魔盒升级",
"resourcePermission": "system.mohe_upgrade",
"resourceType": 1,
"sortIndex": 3,
"status": 1,
"url": ""
},
{
"appId": "2021125447896355",
"childs": [],
"isShow": 1,
"parentId": "12a0ab0ffdf0965585cdca15131cbfa5",
"resourceId": "2b742ec847bb6d7be1b65744b0fae654",
"resourceName": "项目配置",
"resourcePermission": "system.mohe_upgradeversion",
"resourceType": 1,
"sortIndex": 4,
"status": 1,
"url": ""
},
{
"appId": "2021125447896355",
"childs": [],
"isShow": 1,
"parentId": "12a0ab0ffdf0965585cdca15131cbfa5",
"resourceId": "6e1eaaa33ca0a7bfc6e778130e36d54b",
"resourceName": "版本管理",
"resourcePermission": "system.mohe_version",
"resourceType": 1,
"sortIndex": 2,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "",
"resourceId": "12a0ab0ffdf0965585cdca15131cbfa5",
"resourceName": "一应魔盒",
"resourcePermission": "system.mohe",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
},
{
"appId": "2021125447896355",
"childs": [],
"isShow": 0,
"parentId": "",
"resourceId": "2",
"resourceName": "组织管理",
"resourcePermission": "1",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/www"
},
],
"resourceName": "测试2"
},
{
"childs": [
{
"appId": "2021359632589636",
"childs": [
{
"appId": "2021359632589636",
"childs": [
{
"appId": "2021359632589636",
"childs": [],
"isShow": 1,
"parentId": "4ab8d371919beb06b20cad2455e785d6",
"resourceId": "34cf8ad1f22ccde6f8bde338e6113c0d",
"resourceName": "查看",
"resourcePermission": "system:access-records:list",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": ""
},
{
"appId": "2021359632589636",
"childs": [],
"isShow": 1,
"parentId": "4ab8d371919beb06b20cad2455e785d6",
"resourceId": "fd90b7253eba7cca77cc2a120a50f68f",
"resourceName": "导出",
"resourcePermission": "system:access-records:export",
"resourceType": 1,
"sortIndex": 2,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "d79ef85cb6d7c3a2bbdb5908767398d5",
"resourceId": "4ab8d371919beb06b20cad2455e785d6",
"resourceName": "通行记录",
"resourcePermission": "manage-crossing::access-records",
"resourceType": 1,
"sortIndex": 4,
"status": 1,
"url": "/manage-crossing/access-records"
},
],
"isShow": 1,
"parentId": "",
"resourceId": "d79ef85cb6d7c3a2bbdb5908767398d5",
"resourceName": "测试3",
"resourcePermission": "smart-community::manage-crossing",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/smart-community/manage-crossing"
}
],
"resourceName": "测试3"
},
{
"childs": [
{
"appId": "2021356398563256",
"childs": [
{
"appId": "2021356398563256",
"childs": [
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "78e75af5d08bc62db20db006e19858e6",
"resourceName": "职务管理",
"resourcePermission": "manage-middleground::duty-management",
"resourceType": 1,
"sortIndex": 7,
"status": 1,
"url": "/manage-middleground/authority-management/duty-management"
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "9220631abbd30c0b7434ef582d94c233",
"resourceName": "角色管理",
"resourcePermission": "manage-middleground::role-management",
"resourceType": 1,
"sortIndex": 3,
"status": 1,
"url": "/manage-middleground/authority-management/role-management"
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "9481bf3d73f0901faa5697543091db38",
"resourceName": "用户管理",
"resourcePermission": "manage-middleground::user-management",
"resourceType": 1,
"sortIndex": 11,
"status": 1,
"url": "/manage-middleground/authority-management/user-management"
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "a5bdf10cc3b326f0bc97260a4decf53f",
"resourceName": "岗位管理",
"resourcePermission": "manage-middleground::position-management",
"resourceType": 1,
"sortIndex": 5,
"status": 1,
"url": "/manage-middleground/authority-management/position-management"
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "d9e8eb170c4df046b3ff9e161337d51f",
"resourceName": "员工管理",
"resourcePermission": "manage-middleground::staff-management",
"resourceType": 1,
"sortIndex": 9,
"status": 1,
"url": "/manage-middleground/authority-management/staff-management"
},
{
"appId": "2021356398563256",
"childs": [
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "dbd499c14867ab6034ee2b976b7ae369",
"resourceId": "9c9a92c51c27373dfcabc87f0422fa3f",
"resourceName": "查看",
"resourcePermission": "system:enter-order:list",
"resourceType": 2,
"sortIndex": 1,
"status": 1,
"url": ""
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "dbd499c14867ab6034ee2b976b7ae369",
"resourceId": "e30440dcf5edc1d44359f8b50887cf63",
"resourceName": "导出",
"resourcePermission": "system:enter-order:export",
"resourceType": 2,
"sortIndex": 2,
"status": 1,
"url": ""
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "dbd499c14867ab6034ee2b976b7ae369",
"resourceId": "fc84d547d97a9dabb91955ed161e23d3",
"resourceName": "删除",
"resourcePermission": "system:enter-order:repair",
"resourceType": 2,
"sortIndex": 3,
"status": 1,
"url": ""
}
],
"isShow": 1,
"parentId": "41817516cfd1626e3008667496e9aa2d",
"resourceId": "dbd499c14867ab6034ee2b976b7ae369",
"resourceName": "组织管理",
"resourcePermission": "manage-middleground::organization-management",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/manage-middleground/authority-management/organization-management"
}
],
"isShow": 1,
"parentId": "fcbfb6b599662ef5dd409cc0c6921968",
"resourceId": "41817516cfd1626e3008667496e9aa2d",
"resourceName": "权限管理",
"resourcePermission": "manage-middleground::authority-management",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/manage-middleground/authority-management"
},
{
"appId": "2021356398563256",
"childs": [],
"isShow": 1,
"parentId": "fcbfb6b599662ef5dd409cc0c6921968",
"resourceId": "4bcbd0949da77330b57882be4154da30",
"resourceName": "个人中心",
"resourcePermission": "manage-middleground::personal-center",
"resourceType": 1,
"sortIndex": 11,
"status": 1,
"url": "/manage-middleground/personal-center"
},
],
"isShow": 1,
"parentId": "",
"resourceId": "fcbfb6b599662ef5dd409cc0c6921968",
"resourceName": "业务中台",
"resourcePermission": "smart-community::manage-middleground",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/smart-community/manage-middleground"
}
],
"resourceName": "管理中台"
},
{
"childs": [
{
"appId": "2021523694156693",
"childs": [
{
"appId": "2021523694156693",
"childs": [],
"isShow": 1,
"parentId": "289d9910170279e6f58837a6511f546b",
"resourceId": "b70844ad3dfc40b6ef8e226fdbfac79e",
"resourceName": "经营概览",
"resourcePermission": "smart-parking::business-overview",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/smart-parking/business-overview"
}
],
"isShow": 1,
"parentId": "",
"resourceId": "289d9910170279e6f58837a6511f546b",
"resourceName": "停车数据",
"resourcePermission": "smart-parking::fixed-car-management",
"resourceType": 1,
"sortIndex": 1,
"status": 1,
"url": "/smart-parking/fixed-car-management"
}
],
"resourceName": "测试4"
}
]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
