perf(views): 编写"角色管理"页面数据权限功能

src/api/index.ts

@@ -40,6 +40,7 @@ import type {
   DeviceParamGroup,
   DeviceParams,
   DeviceParamType,
+  DevicePermissionsParams,
   DevicesList,
   DevicesListItemData,
   DeviceTypeCount,
@@ -89,6 +90,8 @@ import type {
   PageParams,
   ParameterVerification,
   ParamValueListAutomaticQuery,
+  PermissionGroupItem,
+  PermissionList,
   PointTimeSeriesQuery,
   PostProtocolPage,
   PostProtocolPageItem,
@@ -504,6 +507,21 @@ export const deleteDeviceGroup = async (id: number) => {
   });
 };
 
+export const addDevicePermissions = async (params: DevicePermissionsParams) => {
+  await request(apiBiz('/deviceGroup/update/role'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+};
+
+export const getAllGroupList = async (params: PermissionList) => {
+  const data = await request<PermissionGroupItem[]>(apiBiz('/deviceGroup/getAllList'), {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+  return data;
+};
+
 // 设备列表
 
 export const deviceAdd = async (equipmentInformationForm: EquipmentDetailsForm) => {

src/types/index.ts

@@ -2489,3 +2489,44 @@ export interface DeviceCop {
   enableCopSet: boolean;
   deviceName?: string;
 }
+
+export interface PermissionList {
+  userId?: number;
+  orgId?: number;
+  parentId?: number;
+  roleId?: number;
+  haveDevice?: boolean;
+  haveChild?: boolean;
+}
+
+export interface RoleIds {
+  roleIds: number[];
+}
+export interface PermissionGroupItem {
+  id: number;
+  userId: number;
+  groupName: string;
+  comment: string;
+  parentId: number;
+  deleted?: number;
+  orgId: number;
+  roleIds: RoleIds;
+  key?: number;
+  deviceGroupChilds: TwoPermissionGroupItem[];
+}
+
+export interface TwoPermissionGroupItem {
+  id: number;
+  groupName: string;
+  comment: string;
+  parentId: number;
+  userId: number;
+  orgId: number;
+  roleIds: RoleIds;
+  key?: number;
+}
+
+export interface DevicePermissionsParams {
+  roleId: number;
+  groupIds: number[];
+}

src/views/role-manage/RoleManage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { message } from 'ant-design-vue';
 
 import ConfirmModal from '@/components/ConfirmModal.vue';
@@ -7,9 +7,18 @@ import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
-import { addCharacter, deleteCharacter, getFindRolesByOrgIds, getSubOrgsByToken, updateCharacter } from '@/api';
-
-import type { DataNode } from 'ant-design-vue/es/tree';
+import {
+  addCharacter,
+  addDevicePermissions,
+  deleteCharacter,
+  getAllGroupList,
+  getFindRolesByOrgIds,
+  getSubOrgsByToken,
+  updateCharacter,
+} from '@/api';
+
+import type { DataNode, TreeProps } from 'ant-design-vue/es/tree';
+import type { PermissionGroupItem } from '@/types';
 
 interface HaracterItem {
   name: string;
@@ -24,29 +33,23 @@ const inputRef = ref<HTMLInputElement[]>([]); // 明确的类型声明
 const permissions = ref<string>('dataPermissions');
 const equipmentChecked = ref<boolean>(false);
 const editorChecked = ref<boolean>(true);
-const valueTime = ref<string>('1');
-const pagePermissionsSelectedKeys = ref<number[]>([]);
+// const valueTime = ref<string>('1');
+const devicePermissionsSelectedKeys = ref<number[]>([]);
+const devicePermissionsExpandedKeys = ref<number[]>([]);
+const devicePermissionsCheckedKeys = ref<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 pagePermissionsTree = ref<DataNode[]>([
-  {
-    title: '父节点 1',
-    key: '0-0',
-    children: [
-      {
-        title: '子节点 1',
-        key: '0-0-0',
-        children: [
-          { title: '孙子节点 1', key: '0-0-0-0' },
-          { title: '孙子节点 2', key: '0-0-0-1' },
-        ],
-      },
-      { title: '子节点 2', key: '0-0-1' },
-    ],
-  },
-]);
+const pagePermissionsTree = ref<DataNode[]>([]);
+const fieldNames: TreeProps['fieldNames'] = {
+  children: 'deviceGroupChilds',
+  title: 'groupName',
+  key: 'id',
+};
+
 const addCharacterName = async () => {
   if (characterList.value.some((item) => !isValidString(item.name))) {
     return;
@@ -139,9 +142,23 @@ const editorPermission = () => {
   editorChecked.value = false;
 };
 const cancelPermission = () => {
+  getDeviceGroupList();
   editorChecked.value = true;
 };
+
+const addTree = () => {
+  console.log(devicePermissionsSelectedKeys.value);
+};
 const savePermission = () => {
+  if (permissions.value === 'dataPermissions') {
+    handleRequest(async () => {
+      await addDevicePermissions({
+        roleId: characterListId.value,
+        groupIds: devicePermissionsCheckedKeys.value,
+      });
+      getDeviceGroupList();
+    });
+  }
   editorChecked.value = true;
 };
 const clickOrganizationChange = (id: number) => {
@@ -165,15 +182,79 @@ const getFindRolesByOrg = (id: number) => {
       });
       if (!characterListId.value) {
         characterListId.value = data[0].id;
+        getDeviceGroupList();
       }
     }
   });
 };
 
+const getDeviceGroupList = () => {
+  handleRequest(async () => {
+    const list = await getAllGroupList({
+      roleId: undefined,
+    });
+    const data = await getAllGroupList({
+      roleId: characterListId.value,
+    });
+    devicePermissionsExpandedKeys.value = [];
+    devicePermissionsCheckedKeys.value = [];
+    allKeys.value = [];
+    list.forEach((item) => {
+      item.key = item.id;
+      allKeys.value.push(item.id);
+      devicePermissionsExpandedKeys.value.push(item.id);
+      if (item.deviceGroupChilds.length) {
+        item.deviceGroupChilds.forEach((i) => {
+          i.key = i.id;
+          allKeys.value.push(i.id);
+        });
+      }
+    });
+    devicePermissionsCheckedKeys.value = getAllKeys(data);
+    pagePermissionsTree.value = list as DataNode[];
+  });
+};
+
+const selectAll = () => {
+  indeterminate.value = false;
+  if (equipmentChecked.value) {
+    devicePermissionsCheckedKeys.value = allKeys.value;
+  } else {
+    devicePermissionsCheckedKeys.value = [];
+  }
+};
+
+// 获取所有节点 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();
+  }
   editorChecked.value = true;
 };
 
+watch(
+  () => devicePermissionsCheckedKeys.value,
+  (count) => {
+    if (count) {
+      indeterminate.value = !!count.length && count.length < allKeys.value.length;
+      equipmentChecked.value = count.length === allKeys.value.length;
+    }
+  },
+);
+
 onMounted(() => {
   handleRequest(async () => {
     await getSubOrgsByToken();
@@ -255,18 +336,29 @@ onMounted(() => {
         </ARadioGroup>
         <div v-if="permissions === 'dataPermissions'">
           <AFlex align="center" class="device-permissions">
-            <ACheckbox class="select-all" v-model:checked="equipmentChecked" :disabled="editorChecked"
+            <ACheckbox
+              class="select-all"
+              v-model:checked="equipmentChecked"
+              :indeterminate="indeterminate"
+              :disabled="editorChecked"
+              @change="selectAll"
               >设备组权限</ACheckbox
             >
           </AFlex>
-          <ATree
-            v-model:selected-keys="pagePermissionsSelectedKeys"
-            :tree-data="pagePermissionsTree"
-            checkable
-            default-expand-all
-            :disabled="editorChecked"
-          />
-          <AFlex align="center" class="device-permissions div-top">
+          <div class="permission-div">
+            <ATree
+              v-model:expanded-keys="devicePermissionsExpandedKeys"
+              v-model:checked-keys="devicePermissionsCheckedKeys"
+              :tree-data="pagePermissionsTree"
+              checkable
+              default-expand-all
+              :field-names="fieldNames"
+              :disabled="editorChecked"
+              @check="addTree"
+            />
+          </div>
+
+          <!-- <AFlex align="center" class="device-permissions div-top">
             <ACheckbox class="select-all" :disabled="editorChecked" v-model:checked="equipmentChecked"
               >启用时间查询颗粒度设置</ACheckbox
             >
@@ -276,20 +368,20 @@ onMounted(() => {
             <ARadio value="2">小时</ARadio>
             <ARadio value="3">天</ARadio>
             <ARadio value="4">月</ARadio>
-          </ARadioGroup>
+          </ARadioGroup> -->
         </div>
         <div v-if="permissions === 'functionPermissions'">
           <AFlex align="center" class="device-permissions">
             <div>查看权限</div>
           </AFlex>
-          <ATree
+          <!-- <ATree
             v-model:selected-keys="pagePermissionsSelectedKeys"
             :tree-data="pagePermissionsTree"
             checkable
             default-expand-all
             class="tree-permissions"
             :disabled="editorChecked"
-          />
+          /> -->
           <AFlex align="center" class="device-permissions div-top">
             <div>操作权限</div>
           </AFlex>
@@ -308,6 +400,11 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.permission-div {
+  height: calc(100vh - 244px);
+  overflow: auto;
+}
+
 .pointer-left {
   margin-left: 24px;
 }