auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Bunny 2024-10-07 23:30:42 +08:00
parent c8d5a70bb3
commit f3e39db4ee
11 changed files with 253 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/v1/power.ts
View File

@ -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 });
};
/**
* 权限---添加权限
*/

4
src/store/system/power.ts
View File

@ -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;
},
},
});

0
src/views/system/adminUser/assign-user-to-role.vue → src/views/system/adminUser/assign-roles-to-user.vue
View File

2
src/views/system/adminUser/utils/hooks.tsx
View File

@ -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';

7
src/views/system/power/index.vue
View File

@ -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

17
src/views/system/power/power-dialog.vue
View File

@ -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" />

3
src/views/system/power/utils/columns.ts
View File

@ -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 };

105
src/views/system/role/assign-powers-to-role.vue Normal file
View File

@ -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>

122
src/views/system/role/index.vue
View File

@ -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>

18
src/views/system/role/utils/columns.ts
View File

@ -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]',
]);

43
src/views/system/role/utils/hooks.ts
View File

@ -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);
}
};