|
@@ -14,11 +14,14 @@ import {
|
|
|
getAllGroupList,
|
|
|
getFindRolesByOrgIds,
|
|
|
getSubOrgsByToken,
|
|
|
+ getSubPermList,
|
|
|
updateCharacter,
|
|
|
} from '@/api';
|
|
|
|
|
|
import type { DataNode, TreeProps } from 'ant-design-vue/es/tree';
|
|
|
-import type { PermissionGroupItem } from '@/types';
|
|
|
+import type { Key } from 'ant-design-vue/es/vc-tree/interface';
|
|
|
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
|
|
|
+import type { OperationPermissions, TreeStructure } from '@/types';
|
|
|
|
|
|
interface HaracterItem {
|
|
|
name: string;
|
|
@@ -34,15 +37,28 @@ const permissions = ref<string>('dataPermissions');
|
|
|
const equipmentChecked = ref<boolean>(false);
|
|
|
const editorChecked = ref<boolean>(true);
|
|
|
// const valueTime = ref<string>('1');
|
|
|
-const devicePermissionsSelectedKeys = ref<number[]>([]);
|
|
|
+const operationpermissions = ref<OperationPermissions[]>([]);
|
|
|
const devicePermissionsExpandedKeys = ref<number[]>([]);
|
|
|
-const devicePermissionsCheckedKeys = ref<number[]>([]);
|
|
|
+const checkedFatherKeys = ref<number[]>([]);
|
|
|
+
|
|
|
+const devicePermissionsCheckedKeys = ref({
|
|
|
+ checked: [] as number[], // 完全选中的节点
|
|
|
+ halfChecked: [] as number[], // 半选中的节点(在严格模式下通常为空)
|
|
|
+});
|
|
|
const allKeys = ref<number[]>([]);
|
|
|
const indeterminate = ref<boolean>(false);
|
|
|
const orgId = ref<number>();
|
|
|
const characterId = ref<number>();
|
|
|
const enterShow = ref<boolean>(false);
|
|
|
const modalComponentRef = useTemplateRef('modalComponent');
|
|
|
+const expandedKeys = ref<number[]>([]);
|
|
|
+const checkedKeys = ref<number[]>([]);
|
|
|
+const treeStructure = ref<DataNode[]>([]);
|
|
|
+const fieldNamesCheck: TreeProps['fieldNames'] = {
|
|
|
+ children: 'subPermissions',
|
|
|
+ title: 'menuName',
|
|
|
+ key: 'id',
|
|
|
+};
|
|
|
const pagePermissionsTree = ref<DataNode[]>([]);
|
|
|
const fieldNames: TreeProps['fieldNames'] = {
|
|
|
children: 'deviceGroupChilds',
|
|
@@ -67,8 +83,9 @@ const clickCharacter = (id: number) => {
|
|
|
if (characterList.value.some((item) => !isValidString(item.name))) {
|
|
|
return;
|
|
|
}
|
|
|
-
|
|
|
characterListId.value = id;
|
|
|
+ getDeviceGroupList();
|
|
|
+ getFunctionPermList();
|
|
|
};
|
|
|
const addEditor = async (index: number) => {
|
|
|
if (characterList.value.some((item) => !isValidString(item.name))) {
|
|
@@ -146,23 +163,30 @@ const cancelPermission = () => {
|
|
|
editorChecked.value = true;
|
|
|
};
|
|
|
|
|
|
-const addTree = () => {
|
|
|
- console.log(devicePermissionsSelectedKeys.value);
|
|
|
+const addTree = (checked: Key[] | { checked: Key[]; halfChecked: Key[] }, info: CheckInfo) => {
|
|
|
+ if (info.node.parent) {
|
|
|
+ checkedFatherKeys.value.push(info.node.parent.node.id);
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
const savePermission = () => {
|
|
|
if (permissions.value === 'dataPermissions') {
|
|
|
handleRequest(async () => {
|
|
|
await addDevicePermissions({
|
|
|
roleId: characterListId.value,
|
|
|
- groupIds: devicePermissionsCheckedKeys.value,
|
|
|
+ groupIds: devicePermissionsCheckedKeys.value.checked,
|
|
|
});
|
|
|
getDeviceGroupList();
|
|
|
});
|
|
|
+ } else {
|
|
|
+ console.log(operationpermissions.value);
|
|
|
+ console.log(checkedFatherKeys.value);
|
|
|
+ console.log(checkedKeys.value);
|
|
|
+ console.log([...new Set([...checkedKeys.value, ...checkedFatherKeys.value])]);
|
|
|
}
|
|
|
editorChecked.value = true;
|
|
|
};
|
|
|
const clickOrganizationChange = (id: number) => {
|
|
|
- console.log(id);
|
|
|
orgId.value = id;
|
|
|
getFindRolesByOrg(id);
|
|
|
};
|
|
@@ -197,7 +221,7 @@ const getDeviceGroupList = () => {
|
|
|
roleId: characterListId.value,
|
|
|
});
|
|
|
devicePermissionsExpandedKeys.value = [];
|
|
|
- devicePermissionsCheckedKeys.value = [];
|
|
|
+ devicePermissionsCheckedKeys.value.checked = [];
|
|
|
allKeys.value = [];
|
|
|
list.forEach((item) => {
|
|
|
item.key = item.id;
|
|
@@ -210,34 +234,64 @@ const getDeviceGroupList = () => {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
- devicePermissionsCheckedKeys.value = getAllKeys(data);
|
|
|
+
|
|
|
+ data.forEach((item) => {
|
|
|
+ devicePermissionsCheckedKeys.value.checked.push(item.id);
|
|
|
+ item.deviceGroupChilds.forEach((i) => {
|
|
|
+ devicePermissionsCheckedKeys.value.checked.push(i.id);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
pagePermissionsTree.value = list as DataNode[];
|
|
|
});
|
|
|
};
|
|
|
+const transformTreeData = (data: TreeStructure[]): DataNode[] => {
|
|
|
+ return data.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ key: item.id, // 关键:将 id 映射到 key
|
|
|
+ title: item.menuName,
|
|
|
+ children: item.subPermissions ? transformTreeData(item.subPermissions) : undefined,
|
|
|
+ }));
|
|
|
+};
|
|
|
+
|
|
|
+const transformData = (data: TreeStructure[]): OperationPermissions[] => {
|
|
|
+ return data.map((item) => {
|
|
|
+ // 转换当前层级的属性
|
|
|
+ const transformed = {
|
|
|
+ value: item.id,
|
|
|
+ label: item.menuName,
|
|
|
+ list: [],
|
|
|
+ // 保留其他属性(如果需要)
|
|
|
+ ...(item.subPermissions && {
|
|
|
+ subPermissions: transformData(item.subPermissions),
|
|
|
+ }),
|
|
|
+ };
|
|
|
+
|
|
|
+ return transformed;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const getFunctionPermList = () => {
|
|
|
+ handleRequest(async () => {
|
|
|
+ const data = await getSubPermList(0);
|
|
|
+ if (data.length) {
|
|
|
+ treeStructure.value = transformTreeData(data[0].subPermissions[0].subPermissions);
|
|
|
+ operationpermissions.value = transformData(data[0].subPermissions[1].subPermissions);
|
|
|
+ console.log(operationpermissions.value);
|
|
|
+ checkedKeys.value = [10601, 10602, 10901, 107, 102, 103, 106, 109];
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
const selectAll = () => {
|
|
|
indeterminate.value = false;
|
|
|
if (equipmentChecked.value) {
|
|
|
- devicePermissionsCheckedKeys.value = allKeys.value;
|
|
|
+ devicePermissionsCheckedKeys.value.checked = allKeys.value;
|
|
|
} else {
|
|
|
- devicePermissionsCheckedKeys.value = [];
|
|
|
+ devicePermissionsCheckedKeys.value.checked = [];
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 获取所有节点 key方法
|
|
|
-const getAllKeys = (data: PermissionGroupItem[]) => {
|
|
|
- const keys: number[] = [];
|
|
|
- data.forEach((item) => {
|
|
|
- keys.push(item.id);
|
|
|
- if (item.deviceGroupChilds.length) {
|
|
|
- item.deviceGroupChilds.forEach((i) => {
|
|
|
- keys.push(i.id);
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- return keys;
|
|
|
-};
|
|
|
-
|
|
|
const addRadioGroup = () => {
|
|
|
if (permissions.value === 'functionPermissions') {
|
|
|
getDeviceGroupList();
|
|
@@ -246,7 +300,7 @@ const addRadioGroup = () => {
|
|
|
};
|
|
|
|
|
|
watch(
|
|
|
- () => devicePermissionsCheckedKeys.value,
|
|
|
+ () => devicePermissionsCheckedKeys.value.checked,
|
|
|
(count) => {
|
|
|
if (count) {
|
|
|
indeterminate.value = !!count.length && count.length < allKeys.value.length;
|
|
@@ -258,6 +312,7 @@ watch(
|
|
|
onMounted(() => {
|
|
|
handleRequest(async () => {
|
|
|
await getSubOrgsByToken();
|
|
|
+ getFunctionPermList();
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
@@ -354,7 +409,7 @@ onMounted(() => {
|
|
|
default-expand-all
|
|
|
:field-names="fieldNames"
|
|
|
:disabled="editorChecked"
|
|
|
- @check="addTree"
|
|
|
+ :check-strictly="true"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
@@ -374,17 +429,28 @@ onMounted(() => {
|
|
|
<AFlex align="center" class="device-permissions">
|
|
|
<div>查看权限</div>
|
|
|
</AFlex>
|
|
|
- <!-- <ATree
|
|
|
- v-model:selected-keys="pagePermissionsSelectedKeys"
|
|
|
- :tree-data="pagePermissionsTree"
|
|
|
- checkable
|
|
|
- default-expand-all
|
|
|
- class="tree-permissions"
|
|
|
- :disabled="editorChecked"
|
|
|
- /> -->
|
|
|
+ <div class="check-div">
|
|
|
+ <ATree
|
|
|
+ v-model:expanded-keys="expandedKeys"
|
|
|
+ v-model:checked-keys="checkedKeys"
|
|
|
+ :tree-data="treeStructure"
|
|
|
+ checkable
|
|
|
+ :field-names="fieldNamesCheck"
|
|
|
+ :disabled="editorChecked"
|
|
|
+ class="tree-permissions"
|
|
|
+ default-expand-all
|
|
|
+ @check="addTree"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
<AFlex align="center" class="device-permissions div-top">
|
|
|
<div>操作权限</div>
|
|
|
</AFlex>
|
|
|
+ <div class="operation">
|
|
|
+ <AFlex align="center" v-for="(item, index) in operationpermissions" :key="index" class="operation-div">
|
|
|
+ <ACheckboxGroup v-model:value="item.list" :options="item.subPermissions" :disabled="editorChecked" />
|
|
|
+ </AFlex>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</AFlex>
|
|
@@ -400,6 +466,23 @@ onMounted(() => {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.operation {
|
|
|
+ height: 200px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.operation-div {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ padding-left: 52px;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+}
|
|
|
+
|
|
|
+.check-div {
|
|
|
+ height: calc(100vh - 494px);
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
.permission-div {
|
|
|
height: calc(100vh - 244px);
|
|
|
overflow: auto;
|