|
@@ -1,18 +1,12 @@
|
|
|
<template>
|
|
<template>
|
|
|
<el-drawer :title="title" v-model="drawerOpened" @close="reset">
|
|
<el-drawer :title="title" v-model="drawerOpened" @close="reset">
|
|
|
- <el-form
|
|
|
|
|
- label-position="left"
|
|
|
|
|
- label-width="80px"
|
|
|
|
|
- :model="formData"
|
|
|
|
|
- :rules="formRules"
|
|
|
|
|
- ref="formInstance"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <el-form label-position="left" label-width="80px" :model="formData" :rules="formRules" ref="formInstance">
|
|
|
<el-form-item label="角色名称" prop="roleName">
|
|
<el-form-item label="角色名称" prop="roleName">
|
|
|
<el-input placeholder="角色名称" v-model="formData.roleName" />
|
|
<el-input placeholder="角色名称" v-model="formData.roleName" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="角色权限">
|
|
<el-form-item label="角色权限">
|
|
|
- <PermissioTreeCard title="相机权限" :tree-data="cameraPermTreeData" ref="cameraCardInstance" />
|
|
|
|
|
|
|
+ <!-- <PermissioTreeCard title="平台入口权限" :tree-data="menuPermTreeData" ref="menuCardInstance" /> -->
|
|
|
<PermissioTreeCard title="菜单权限" :tree-data="menuPermTreeData" ref="menuCardInstance" />
|
|
<PermissioTreeCard title="菜单权限" :tree-data="menuPermTreeData" ref="menuCardInstance" />
|
|
|
<PermissioTreeCard title="功能权限" :tree-data="funcPermTreeData" ref="funcCardInstance" />
|
|
<PermissioTreeCard title="功能权限" :tree-data="funcPermTreeData" ref="funcCardInstance" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -36,7 +30,6 @@
|
|
|
import { FormRules, FormInstance, ElMessage } from 'element-plus';
|
|
import { FormRules, FormInstance, ElMessage } from 'element-plus';
|
|
|
import useMenuPermTree from '../hooks/useMenuPermissionTree';
|
|
import useMenuPermTree from '../hooks/useMenuPermissionTree';
|
|
|
import useFuncPermTree from '../hooks/useFunctionPermissionTree';
|
|
import useFuncPermTree from '../hooks/useFunctionPermissionTree';
|
|
|
- import useCameraPermTree from '../hooks/useCameraPermissionTree';
|
|
|
|
|
import { createRole, editRole, getAssignedPerms } from '@/api/system/role';
|
|
import { createRole, editRole, getAssignedPerms } from '@/api/system/role';
|
|
|
import { PermissionTreeKey } from '@/types/permission/type';
|
|
import { PermissionTreeKey } from '@/types/permission/type';
|
|
|
|
|
|
|
@@ -45,17 +38,15 @@
|
|
|
}>();
|
|
}>();
|
|
|
|
|
|
|
|
const emits = defineEmits<{
|
|
const emits = defineEmits<{
|
|
|
- (e: 'submitted'): void; // 提交之后触发的事件
|
|
|
|
|
|
|
+ (e: 'submitted'): void; // 提交之后触发的事件
|
|
|
}>();
|
|
}>();
|
|
|
|
|
|
|
|
- const { cameraPermTreeData } = useCameraPermTree();
|
|
|
|
|
const { menuPermTreeData } = useMenuPermTree();
|
|
const { menuPermTreeData } = useMenuPermTree();
|
|
|
- const { funcPermTreeData} = useFuncPermTree();
|
|
|
|
|
|
|
+ const { funcPermTreeData } = useFuncPermTree();
|
|
|
|
|
|
|
|
const drawerOpened = ref(false);
|
|
const drawerOpened = ref(false);
|
|
|
- const cameraCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
|
|
|
|
|
const menuCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
|
|
const menuCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
|
|
|
- const funcCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
|
|
|
|
|
|
|
+ const funcCardInstance = ref<InstanceType<typeof PermissioTreeCard>>();
|
|
|
|
|
|
|
|
// 表单相关
|
|
// 表单相关
|
|
|
const defaultFormData = (): RoleForm => ({
|
|
const defaultFormData = (): RoleForm => ({
|
|
@@ -72,7 +63,7 @@
|
|
|
remark: {},
|
|
remark: {},
|
|
|
};
|
|
};
|
|
|
const formInstance = ref<FormInstance>();
|
|
const formInstance = ref<FormInstance>();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const isEditing = computed(() => formData.id != null);
|
|
const isEditing = computed(() => formData.id != null);
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -102,13 +93,12 @@
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
console.error(e);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
const displayAssignedPermissions = (result: AssignedPermissions) => {
|
|
const displayAssignedPermissions = (result: AssignedPermissions) => {
|
|
|
if (result.cameraIds?.length) {
|
|
if (result.cameraIds?.length) {
|
|
|
// 相机树很有可能会有 id 重复的情况,比如说 一个camera id 和 一个 workspace id 相同,这样会导致 tree 节点 value 不唯一,因此需要给个前缀
|
|
// 相机树很有可能会有 id 重复的情况,比如说 一个camera id 和 一个 workspace id 相同,这样会导致 tree 节点 value 不唯一,因此需要给个前缀
|
|
|
- const cameraIds = result.cameraIds.map(id => `camera-${id}`);
|
|
|
|
|
- cameraCardInstance.value?.setAssignedPermissions(cameraIds);
|
|
|
|
|
|
|
+ const cameraIds = result.cameraIds.map((id) => `camera-${id}`);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (result.menuIds?.length) {
|
|
if (result.menuIds?.length) {
|
|
@@ -118,7 +108,7 @@
|
|
|
if (result.permIds?.length) {
|
|
if (result.permIds?.length) {
|
|
|
funcCardInstance.value?.setAssignedPermissions(result.permIds);
|
|
funcCardInstance.value?.setAssignedPermissions(result.permIds);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* 重置表单
|
|
* 重置表单
|
|
@@ -126,7 +116,6 @@
|
|
|
const reset = () => {
|
|
const reset = () => {
|
|
|
formInstance.value?.resetFields();
|
|
formInstance.value?.resetFields();
|
|
|
Object.assign(formData, defaultFormData());
|
|
Object.assign(formData, defaultFormData());
|
|
|
- cameraCardInstance.value?.reset();
|
|
|
|
|
menuCardInstance.value?.reset();
|
|
menuCardInstance.value?.reset();
|
|
|
funcCardInstance.value?.reset();
|
|
funcCardInstance.value?.reset();
|
|
|
};
|
|
};
|
|
@@ -135,7 +124,6 @@
|
|
|
* 提交。创建和编辑统一
|
|
* 提交。创建和编辑统一
|
|
|
*/
|
|
*/
|
|
|
const submit = async () => {
|
|
const submit = async () => {
|
|
|
- formData.cameraIds = cleanCameraPermissions(cameraCardInstance.value!.getSelectedPermissions());
|
|
|
|
|
formData.menuIds = menuCardInstance.value!.getSelectedPermissions();
|
|
formData.menuIds = menuCardInstance.value!.getSelectedPermissions();
|
|
|
formData.permIds = funcCardInstance.value!.getSelectedPermissions();
|
|
formData.permIds = funcCardInstance.value!.getSelectedPermissions();
|
|
|
|
|
|
|
@@ -150,13 +138,13 @@
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
console.error(e);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* 获取到的相机的权限码是 camera-xxx, 例如 camera-11, 提交后端转换成数字 11
|
|
* 获取到的相机的权限码是 camera-xxx, 例如 camera-11, 提交后端转换成数字 11
|
|
|
*/
|
|
*/
|
|
|
const cleanCameraPermissions = (perms: PermissionTreeKey[]) => {
|
|
const cleanCameraPermissions = (perms: PermissionTreeKey[]) => {
|
|
|
- return perms.map(perm => {
|
|
|
|
|
|
|
+ return perms.map((perm) => {
|
|
|
if (typeof perm === 'string' && perm.includes('-')) {
|
|
if (typeof perm === 'string' && perm.includes('-')) {
|
|
|
const splits = perm.split('-');
|
|
const splits = perm.split('-');
|
|
|
return +splits[1];
|
|
return +splits[1];
|
|
@@ -165,7 +153,7 @@
|
|
|
// 否则正常返回
|
|
// 否则正常返回
|
|
|
return perm;
|
|
return perm;
|
|
|
});
|
|
});
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
defineExpose({ open });
|
|
defineExpose({ open });
|
|
|
</script>
|
|
</script>
|