|
|
@@ -21,35 +21,37 @@
|
|
|
></el-switch>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-<!-- 权限码重复的有： <span v-for="item in duplicates" :key="item.permissionCode" class="mr5 mb5">{{item.pageName}} {{item.permissionCode}}</span>-->
|
|
|
- <el-tree
|
|
|
- class="tree-border mt20"
|
|
|
- :data="state.menuTableData"
|
|
|
- show-checkbox
|
|
|
- ref="menuRef"
|
|
|
- node-key="permissionCode"
|
|
|
- check-on-click-node
|
|
|
- :expand-on-click-node="false"
|
|
|
- check-strictly
|
|
|
- :props="{ label: 'pageName', children: 'children', class: customNodeClass }"
|
|
|
- >
|
|
|
- <template #default="{ data }">
|
|
|
-<!-- {{ data.permissionCode }}-->
|
|
|
- <span>{{ data.pageName }} </span>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
+ <div class="border-box">
|
|
|
+ <el-input v-model="filterText" placeholder="权限名称" clearable />
|
|
|
+ <el-tree
|
|
|
+ class="tree-border mt20"
|
|
|
+ :data="state.menuTableData"
|
|
|
+ show-checkbox
|
|
|
+ ref="menuRef"
|
|
|
+ node-key="permissionCode"
|
|
|
+ check-on-click-node
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :props="{ label: 'pageName', children: 'children', class: customNodeClass }"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ >
|
|
|
+ <template #default="{ data }">
|
|
|
+
|
|
|
+ <span>{{ data.pageName }}-{{ data.permissionCode }}</span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
<el-button @click="closeDialog" class="default-button">取 消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">确 定</el-button>
|
|
|
+ <el-button type="primary" @click="onSubmit" :loading="state.loading">确 定</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="rolePermission">
|
|
|
-import {onMounted, reactive, ref} from 'vue';
|
|
|
+import {onMounted, reactive, ref, watch} from 'vue';
|
|
|
import {ElMessage} from 'element-plus';
|
|
|
import {auth} from '/@/utils/authFunction';
|
|
|
import {getMenuList} from '/@/api/system/menu';
|
|
|
@@ -63,6 +65,7 @@ interface Tree {
|
|
|
isPenultimate?: boolean;
|
|
|
expanded: boolean;
|
|
|
menuType?: number;
|
|
|
+ pageName: string;
|
|
|
children?: Tree[];
|
|
|
}
|
|
|
|
|
|
@@ -122,6 +125,15 @@ const opened = () => {
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
+const filterText = ref('')
|
|
|
+watch(filterText, (val) => {
|
|
|
+ menuRef.value!.filter(val)
|
|
|
+})
|
|
|
+const filterNode = (value: string, data: Tree) => {
|
|
|
+ if (!value) return true
|
|
|
+ return data.pageName.includes(value)
|
|
|
+}
|
|
|
+
|
|
|
// 关闭弹窗
|
|
|
const closeDialog = () => {
|
|
|
state.dialogVisible = false;
|
|
|
@@ -138,32 +150,12 @@ const getCode = (arr: any) => {
|
|
|
});
|
|
|
return newArr;
|
|
|
};
|
|
|
-const duplicates = ref<any>([]);
|
|
|
// 获取所有菜单
|
|
|
const getMenuListApi = () => {
|
|
|
getMenuList().then((res: any) => {
|
|
|
state.menuTableData = res?.result ?? [];
|
|
|
- duplicates.value = findDuplicateNodes(state.menuTableData, 'permissionCode');
|
|
|
});
|
|
|
};
|
|
|
-// 查找重复的节点
|
|
|
-const findDuplicateNodes = (tree:any, property:any)=> {
|
|
|
- const hash:any = {};
|
|
|
- const duplicates = new Set();
|
|
|
- tree.forEach((node:any) => {
|
|
|
- const value = node[property];
|
|
|
- if (hash[value]) {
|
|
|
- duplicates.add(node);
|
|
|
- } else {
|
|
|
- hash[value] = true;
|
|
|
- }
|
|
|
- if (node.children) {
|
|
|
- const childDuplicates = findDuplicateNodes(node.children, property);
|
|
|
- childDuplicates.forEach(duplicate => duplicates.add(duplicate));
|
|
|
- }
|
|
|
- });
|
|
|
- return duplicates;
|
|
|
-}
|
|
|
/** 树权限（展开/折叠）*/
|
|
|
const handleCheckedTreeExpand = (value: boolean) => {
|
|
|
for (let i = 0; i < state.menuTableData.length; i++) {
|
|
|
@@ -187,19 +179,26 @@ const handleCheckedTreeNodeAll = (value: boolean) => {
|
|
|
};
|
|
|
// 保存
|
|
|
const onSubmit = () => {
|
|
|
- let systemMenuArr: EmptyArrayType;
|
|
|
- systemMenuArr = menuRef.value.getCheckedNodes();
|
|
|
+ let systemMenuArr = menuRef.value.getCheckedNodes();
|
|
|
+ let halfCheck = menuRef.value.getHalfCheckedNodes();
|
|
|
systemMenuArr = systemMenuArr.map((v: any) => {
|
|
|
return {
|
|
|
code: v.permissionCode,
|
|
|
type: v.menuType,
|
|
|
};
|
|
|
});
|
|
|
+ halfCheck = halfCheck.map((v: any) => {
|
|
|
+ return {
|
|
|
+ code: v.permissionCode,
|
|
|
+ type: v.menuType,
|
|
|
+ };
|
|
|
+ })
|
|
|
let req = {
|
|
|
roleId: state.currentRow.id,
|
|
|
roleCode: state.currentRow.name,
|
|
|
- systemMenuArr: systemMenuArr,
|
|
|
+ systemMenuArr:[...systemMenuArr,...halfCheck],
|
|
|
};
|
|
|
+ state.loading = true;
|
|
|
setRolePower(req)
|
|
|
.then(() => {
|
|
|
ElMessage({
|
|
|
@@ -208,10 +207,12 @@ const onSubmit = () => {
|
|
|
});
|
|
|
closeDialog();
|
|
|
emit('updateList');
|
|
|
+ state.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
// 新增失败
|
|
|
closeDialog();
|
|
|
+ state.loading = false;
|
|
|
});
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
@@ -230,10 +231,11 @@ defineExpose({
|
|
|
box-sizing: border-box;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.tree-border {
|
|
|
+.border-box{
|
|
|
border: var(--el-border);
|
|
|
border-radius: var(--el-border-radius-base);
|
|
|
padding: 15px;
|
|
|
+ margin-top: 15px;
|
|
|
}
|
|
|
:deep(.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children) {
|
|
|
display: flex;
|
zhangchong