feat: 🚀 角色权限分配完成部门,获取权限和权限父级选择完成

src/api/v1/power.ts

@@ -8,6 +8,13 @@ export const fetchGetPowerList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `power/getPowerList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/**
+ * 权限---根据角色id获取权限内容
+ */
+export const fetchGetPowerListByRoleId = (data: any) => {
+	return http.request<BaseResult<object>>('get', 'rolePower/getPowerListByRoleId', { data });
+};
+
 /**
  * 权限---添加权限
  */

src/store/system/power.ts

@@ -13,7 +13,7 @@ export const usePowerStore = defineStore('powerStore', {
 			// 权限列表
 			datalist: [],
 			// 权限树形结构
-			treeList: [],
+			allPowerList: [],
 			// 查询表单
 			form: {
 				// 权限编码
@@ -84,7 +84,7 @@ export const usePowerStore = defineStore('powerStore', {
 		async getAllPowers() {
 			const result = await fetchGetAllPowers();
 			if (result.code !== 200) return;
-			this.treeList = result.data;
+			this.allPowerList = result.data;
 		},
 	},
 });

src/views/system/adminUser/utils/hooks.tsx

@@ -9,7 +9,7 @@ import { isAddUserinfo } from '@/views/system/adminUser/utils/columns';
 import ResetPasswordDialog from '@/views/system/adminUser/reset-passwords.vue';
 import { deviceDetection } from '@pureadmin/utils';
 import CropperPreview from '@/components/CropperPreview';
-import AssignUserToRole from '@/views/system/adminUser/assign-user-to-role.vue';
+import AssignUserToRole from '@/views/system/adminUser/assign-roles-to-user.vue';
 import userAvatar from '@/assets/user.jpg';
 import { fetchForcedOffline, fetchUploadAvatarByAdmin } from '@/api/v1/user';
 import { useUserStore } from '@/store/system/user';

src/views/system/power/index.vue

@@ -12,10 +12,12 @@ import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
 import { usePowerStore } from '@/store/system/power.ts';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { handleTree } from '@pureadmin/utils';
 
 const tableRef = ref();
 const formRef = ref();
 const powerStore = usePowerStore();
+const datalist = computed(() => handleTree(powerStore.datalist));
 
 /**
  * * 当前页改变时
@@ -80,7 +82,7 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" :title="$t('power')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar :columns="columns" :isExpandAll="true" :tableRef="tableRef?.getTableRef()" :title="$t('power')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
 				<!-- 添加权限按钮 -->
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
@@ -96,7 +98,7 @@ onMounted(() => {
 					ref="tableRef"
 					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
-					:data="powerStore.datalist"
+					:data="datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="powerStore.loading"
 					:pagination="powerStore.pagination"
@@ -104,6 +106,7 @@ onMounted(() => {
 					adaptive
 					align-whole="center"
 					border
+					default-expand-all
 					highlight-current-row
 					row-key="id"
 					showOverflowTooltip

src/views/system/power/power-dialog.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/system/power/utils/columns';
+import { powerCascadeProps, rules } from '@/views/system/power/utils/columns';
 import { FormProps } from '@/views/system/power/utils/types';
 import { $t } from '@/plugins/i18n';
+import { handleTree } from '@pureadmin/utils';
+import { usePowerStore } from '@/store/system/power';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -20,15 +22,22 @@ const props = withDefaults(defineProps<FormProps>(), {
 
 const formRef = ref<FormInstance>();
 const form = ref(props.formInline);
+const powerStore = usePowerStore();
+const datalist = computed(() => handleTree(powerStore.allPowerList));
+
+onMounted(() => {
+	powerStore.getAllPowers();
+});
 
 defineExpose({ formRef });
 </script>
 
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
-		{{ form.parentId }}
 		<el-form-item :label="$t('power_parentId')" prop="parentId">
-			<el-input v-model="form.parentId" autocomplete="off" type="text" />
+			<!--<el-cascader v-model="form.parentId" :options="datalist" :props="powerCascadeProps" class="w-full" clearable filterable show-all-levels />-->
+			<el-cascader v-model="form.parentId" :options="handleTree(powerStore.allPowerList)" :props="powerCascadeProps" class="w-full" clearable filterable show-all-levels />
+			<!--<el-input v-model="form.parentId" autocomplete="off" type="text" />-->
 		</el-form-item>
 		<el-form-item :label="$t('power_powerCode')" prop="powerCode">
 			<el-input v-model="form.powerCode" autocomplete="off" type="text" />

src/views/system/power/utils/columns.ts

@@ -30,3 +30,6 @@ export const rules = reactive({
 	// 请求路径
 	requestUrl: [{ required: true, message: `${$t('input')}${$t('power_requestUrl')}`, trigger: 'blur' }],
 });
+
+// 权限树形结构props
+export const powerCascadeProps = { value: 'id', label: 'powerName', emitPath: false, checkStrictly: true };

src/views/system/role/assign-powers-to-role.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { iconClass } from '@/views/system/role/utils/columns';
+import Close from '@iconify-icons/ep/close';
+import Check from '@iconify-icons/ep/check';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { delay, getKeyList, handleTree, subBefore, useResizeObserver } from '@pureadmin/utils';
+import { contentRef, currentRow, onMenuPowerClick, powerTreeIsShow, powerTreeRef, tableRef } from '@/views/system/role/utils/hooks';
+import { message } from '@/utils/message';
+import { usePowerStore } from '@/store/system/power';
+import { powerCascadeProps } from '@/views/system/power/utils/columns';
+
+// 是否展开全部
+const isExpandAll = ref(false);
+// 是否选择全部
+const isSelectAll = ref(false);
+const isLinkage = ref(false);
+// 树形选择器高度计算
+const treeHeight = ref();
+// 搜索树形结构过滤内容
+const treeSearchValue = ref();
+// 选择的树形id列表
+const treeIds = ref([]);
+const powerStore = usePowerStore();
+const datalist = computed(() => handleTree(powerStore.allPowerList));
+
+/**
+ * 获取所有权限
+ */
+const getAllPowers = async () => {
+	await powerStore.getAllPowers();
+	treeIds.value = getKeyList(powerStore.allPowerList, 'id');
+};
+
+/**
+ * 菜单权限-保存
+ */
+const onSave = () => {
+	const { id, description } = currentRow.value;
+	// 根据用户 id 调用实际项目中菜单权限修改接口
+	console.log(id, powerTreeRef.value.getCheckedKeys());
+	message(`${description} 权限修改成功`, { type: 'success' });
+};
+
+/**
+ * * 权限过滤
+ * @param query
+ * @param node
+ */
+const filterMethod = (query: string, node) => node.powerName!.includes(query);
+
+/**
+ * * 菜单搜索
+ * @param query
+ */
+const onQueryChanged = (query: string) => powerTreeRef.value!.filter(query);
+
+watch(isExpandAll, val => {
+	val ? powerTreeRef.value.setExpandedKeys(treeIds.value) : powerTreeRef.value.setExpandedKeys([]);
+});
+
+watch(isSelectAll, val => {
+	val ? powerTreeRef.value.setCheckedKeys(treeIds.value) : powerTreeRef.value.setCheckedKeys([]);
+});
+
+onMounted(() => {
+	getAllPowers();
+
+	useResizeObserver(contentRef, async () => {
+		await nextTick();
+		delay(60).then(() => {
+			treeHeight.value = parseFloat(subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, 'px'));
+		});
+	});
+});
+</script>
+
+<template>
+	<div v-if="powerTreeIsShow" class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto">
+		<div class="flex justify-between w-full px-3 pt-5 pb-4">
+			<div class="flex">
+				<span :class="iconClass">
+					<IconifyIconOffline v-tippy="{ content: '关闭' }" :icon="Close" class="dark:text-white" height="18px" width="18px" @click="onMenuPowerClick" />
+				</span>
+				<span :class="[iconClass, 'ml-2']">
+					<IconifyIconOffline v-tippy="{ content: '保存菜单权限' }" :icon="Check" class="dark:text-white" height="18px" width="18px" @click="onSave" />
+				</span>
+			</div>
+			<p class="font-bold truncate">
+				菜单权限
+				{{ `${currentRow?.name ? `（${currentRow.name}）` : ''}` }}
+			</p>
+		</div>
+		<el-input v-model="treeSearchValue" class="mb-1" clearable placeholder="请输入菜单进行搜索" @input="onQueryChanged" />
+		<div class="flex flex-wrap">
+			<el-checkbox v-model="isExpandAll" label="展开/折叠" />
+			<el-checkbox v-model="isSelectAll" label="全选/全不选" />
+			<el-checkbox v-model="isLinkage" label="父子联动" />
+		</div>
+		<el-tree-v2 ref="powerTreeRef" :check-strictly="!isLinkage" :data="datalist" :filter-method="filterMethod" :height="treeHeight" :props="powerCascadeProps" show-checkbox>
+			<template #default="{ node }">
+				<span>{{ node.label }}</span>
+			</template>
+		</el-tree-v2>
+	</div>
+</template>

src/views/system/role/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { columns } from '@/views/system/role/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/system/role/utils/hooks';
+import { contentRef, deleteIds, formRef, onAdd, onDelete, onDeleteBatch, onMenuPowerClick, onSearch, onUpdate, powerTreeIsShow, tableRef } from '@/views/system/role/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
@@ -12,9 +12,10 @@ import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
 import { useRoleStore } from '@/store/system/role.ts';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import { deviceDetection } from '@pureadmin/utils';
+import Menu from '@iconify-icons/ep/menu';
+import AssignPowersToRole from '@/views/system/role/assign-powers-to-role.vue';
 
-const tableRef = ref();
-const formRef = ref();
 const roleStore = useRoleStore();
 
 /**
@@ -72,57 +73,74 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" :title="$t('role')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
-			<template #buttons>
-				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
+		<div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+			<PureTableBar
+				:class="[powerTreeIsShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+				:columns="columns"
+				:title="$t('role')"
+				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
+				@fullscreen="tableRef.setAdaptive()"
+				@refresh="onSearch"
+			>
+				<template #buttons>
+					<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
 
-				<!-- 批量删除按钮 -->
-				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
-					{{ $t('delete_batches') }}
-				</el-button>
-			</template>
+					<!-- 批量删除按钮 -->
+					<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+						{{ $t('delete_batches') }}
+					</el-button>
+				</template>
 
-			<template v-slot="{ size, dynamicColumns }">
-				<pure-table
-					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 96 }"
-					:columns="dynamicColumns"
-					:data="roleStore.datalist"
-					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
-					:loading="roleStore.loading"
-					:pagination="roleStore.pagination"
-					:size="size"
-					adaptive
-					align-whole="center"
-					border
-					highlight-current-row
-					row-key="id"
-					showOverflowTooltip
-					table-layout="auto"
-					@page-size-change="onPageSizeChange"
-					@page-current-change="onCurrentPageChange"
-					@selection-change="onSelectionChange"
-				>
-					<template #createUser="{ row }">
-						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
-					</template>
+				<template v-slot="{ size, dynamicColumns }">
+					<pure-table
+						ref="tableRef"
+						:adaptiveConfig="{ offsetBottom: 96 }"
+						:columns="dynamicColumns"
+						:data="roleStore.datalist"
+						:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+						:loading="roleStore.loading"
+						:pagination="roleStore.pagination"
+						:size="size"
+						adaptive
+						align-whole="center"
+						border
+						highlight-current-row
+						row-key="id"
+						showOverflowTooltip
+						table-layout="auto"
+						@page-size-change="onPageSizeChange"
+						@page-current-change="onCurrentPageChange"
+						@selection-change="onSelectionChange"
+					>
+						<template #createUser="{ row }">
+							<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+						</template>
 
-					<template #updateUser="{ row }">
-						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
-					</template>
+						<template #updateUser="{ row }">
+							<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+						</template>
 
-					<template #operation="{ row }">
-						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
-						<el-popconfirm :title="`是否确认删除 ${row.roleCode}数据`" @confirm="onDelete(row)">
-							<template #reference>
-								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
-									{{ $t('delete') }}
-								</el-button>
-							</template>
-						</el-popconfirm>
-					</template>
-				</pure-table>
-			</template>
-		</PureTableBar>
+						<template #operation="{ row }">
+							<!-- 修改 -->
+							<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+
+							<!-- 删除 -->
+							<el-popconfirm :title="`是否确认删除 ${row.roleCode}数据`" @confirm="onDelete(row)">
+								<template #reference>
+									<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+										{{ $t('delete') }}
+									</el-button>
+								</template>
+							</el-popconfirm>
+
+							<el-button :icon="useRenderIcon(Menu)" :size="size" class="reset-margin" link type="primary" @click="onMenuPowerClick(row)"> 权限 </el-button>
+						</template>
+					</pure-table>
+				</template>
+			</PureTableBar>
+
+			<!-- 为角色分配角色 -->
+			<assign-powers-to-role />
+		</div>
 	</div>
 </template>

src/views/system/role/utils/columns.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import { $t } from '@/plugins/i18n';
 
 // 表格列
@@ -24,3 +24,19 @@ export const rules = reactive({
 	// 描述
 	description: [{ required: true, message: `${$t('input')}${$t('role_description')}`, trigger: 'blur' }],
 });
+
+// 权限显示图标类名
+export const iconClass = computed(() => [
+	'w-[22px]',
+	'h-[22px]',
+	'flex',
+	'justify-center',
+	'items-center',
+	'outline-none',
+	'rounded-[4px]',
+	'cursor-pointer',
+	'transition-colors',
+	'hover:bg-[#0000000f]',
+	'dark:hover:bg-[#ffffff1f]',
+	'dark:hover:text-[#ffffffd9]',
+]);

src/views/system/role/utils/hooks.ts

@@ -5,10 +5,23 @@ import { h, ref } from 'vue';
 import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/role/utils/types';
 import { $t } from '@/plugins/i18n';
+import { fetchGetPowerListByRoleId } from '@/api/v1/power';
 
+// 表格ref
+export const tableRef = ref();
+// 表单ref
 export const formRef = ref();
-const roleStore = useRoleStore();
+// 展开权限内容ref
+export const contentRef = ref();
+// 权限树形结构ref
+export const powerTreeRef = ref();
+// 删除的id列表
 export const deleteIds = ref([]);
+// 是否显示权限菜单
+export const powerTreeIsShow = ref(false);
+// 选择的当前行
+export const currentRow = ref();
+const roleStore = useRoleStore();
 
 /**
  * * 搜索初始化角色
@@ -26,12 +39,7 @@ export function onAdd() {
 	addDialog({
 		title: `${$t('add_new')}${$t('role')}`,
 		width: '30%',
-		props: {
-			formInline: {
-				roleCode: undefined,
-				description: undefined,
-			},
-		},
+		props: { formInline: { roleCode: undefined, description: undefined } },
 		draggable: true,
 		fullscreenIcon: true,
 		closeOnClickModal: false,
@@ -58,12 +66,7 @@ export function onUpdate(row: any) {
 	addDialog({
 		title: `${$t('modify')}${$t('role')}`,
 		width: '30%',
-		props: {
-			formInline: {
-				roleCode: row.roleCode,
-				description: row.description,
-			},
-		},
+		props: { formInline: { roleCode: row.roleCode, description: row.description } },
 		draggable: true,
 		fullscreenIcon: true,
 		closeOnClickModal: false,
@@ -121,3 +124,17 @@ export const onDeleteBatch = async () => {
 	await roleStore.deleteRole(ids);
 	await onSearch();
 };
+
+/**
+ * 菜单权限
+ * @param row
+ */
+export const onMenuPowerClick = async (row: any) => {
+	const { id } = row;
+	currentRow.value = row;
+	powerTreeIsShow.value = true;
+	const { data, code } = await fetchGetPowerListByRoleId({ id });
+	if (code === 200) {
+		powerTreeRef.value.setCheckedKeys(data);
+	}
+};