jeecg/jeecgboot-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

角色授权操作不方便

Browse Source
This commit is contained in:
JEECG
2024-04-26 18:31:09 +08:00
parent 4aa4f702ba
commit 24df8d2356
2 changed files with 95 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/Tree/src/BasicTree.vue
View File

@@ -19,6 +19,7 @@
toRaw,
watch,
onMounted,
nextTick,
} from 'vue';
import TreeHeader from './components/TreeHeader.vue';
import { Tree, Spin, Empty } from 'ant-design-vue';
@@ -68,6 +69,7 @@
...fieldNames,
};
});
const treeRef = ref<any>(null);
const getBindValues = computed(() => {
let propsData = {
@@ -88,28 +90,35 @@
emit('update:selectedKeys', v);
},
onCheck: (v: CheckKeys, e) => {
let currentValue = toRaw(state.checkedKeys) as KeyType[];
if (isArray(currentValue) && searchState.startSearch) {
//update-begin-author:liusq---date:20230404--for: [issue/429]树搜索点击事件失效---
const value = e.node.eventKey;
currentValue = difference(currentValue, getChildrenKeys(value));
if (e.checked) {
currentValue.push(value);
}
//update-begin-author:liusq---date:20230404--for: [issue/429]树搜索点击事件失效---
state.checkedKeys = currentValue;
} else {
state.checkedKeys = v;
}
const rawVal = toRaw(state.checkedKeys);
emit('update:value', rawVal);
emit('check', rawVal, e);
handleCheck(v, e);
},
onRightClick: handleRightClick,
};
return omit(propsData, 'treeData', 'class');
});
/**
* 2024-04-26
* liaozhiyang
* 【issues/1151】层级独立时勾选了父级，然后点击层级关联子级视觉上勾选了，但是保存子级没存上(把函数独立出来复用)
* */
const handleCheck = (v: CheckKeys, e?) => {
let currentValue = toRaw(state.checkedKeys) as KeyType[];
if (isArray(currentValue) && searchState.startSearch && e) {
// update-begin-author:liusq---date:20230404--for: [issue/429]树搜索点击事件失效---
const value = e.node.eventKey;
currentValue = difference(currentValue, getChildrenKeys(value));
if (e.checked) {
currentValue.push(value);
}
// update-begin-author:liusq---date:20230404--for: [issue/429]树搜索点击事件失效---
state.checkedKeys = currentValue;
} else {
state.checkedKeys = v;
}
const rawVal = toRaw(state.checkedKeys);
emit('update:value', rawVal);
emit('check', rawVal, e);
};
const getTreeData = computed((): TreeItem[] =>
searchState.startSearch ? searchState.searchData : unref(treeDataRef),
@@ -317,10 +326,18 @@
emit('change', v);
},
);
watchEffect(() => {
state.checkStrictly = props.checkStrictly;
});
// update-begin--author:liaozhiyang---date:20240426---for：【issues/1151】层级独立时勾选了父级，然后点击层级关联子级视觉上勾选了，但是保存子级没存上
watch(
() => props.checkStrictly,
() => {
state.checkStrictly = props.checkStrictly;
nextTick(() => {
const value = treeRef.value?.checkedKeys;
handleCheck([...value]);
});
}
);
// update-end--author:liaozhiyang---date:20240426---for：【issues/1151】层级独立时勾选了父级，然后点击层级关联子级视觉上勾选了，但是保存子级没存上
const instance: TreeActionType = {
setExpandedKeys,
@@ -444,7 +461,7 @@
)}
<Spin spinning={unref(props.loading)} tip="加载中...">
<ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
<Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
<Tree ref={treeRef} {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
</ScrollContainer>
<Empty
v-show={unref(getNotFound)}

64
src/views/system/role/components/RolePermissionDrawer.vue
View File

@@ -25,8 +25,8 @@
:checkedKeys="checkedKeys"
:expandedKeys="expandedKeys"
:selectedKeys="selectedKeys"
:checkStrictly="checkStrictly"
:clickRowToExpand="false"
:checkStrictly="true"
title="所拥有的的权限"
@check="onCheck"
@select="onTreeNodeSelect"
@@ -48,8 +48,8 @@
</template>
<script lang="ts" setup>
import { ref, computed, unref, onMounted } from 'vue';
import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
import { BasicTree, TreeItem } from '/src/components/Tree';
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicTree, TreeItem } from '/@/components/Tree';
import { PopConfirmButton } from '/@/components/Button';
import RoleDataRuleDrawer from './RoleDataRuleDrawer.vue';
import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../role.api';
@@ -60,7 +60,7 @@
//树的全部节点信息
const allTreeKeys = ref([]);
//树的选择节点信息
const checkedKeys = ref([]);
const checkedKeys = ref<any>([]);
const defaultCheckedKeys = ref([]);
//树的选中的节点信息
const selectedKeys = ref([]);
@@ -71,8 +71,8 @@
//展开折叠的key
const expandedKeys = ref<any>([]);
//父子节点选中状态是否关联
const checkStrictly = ref<boolean>(true);
//父子节点选中状态是否关联 true不关联，false关联
const checkStrictly = ref<boolean>(false);
const [registerDrawer1, { openDrawer: openDataRuleDrawer }] = useDrawer();
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await reset();
@@ -114,10 +114,58 @@
}
/**
* 点击选中
* 2024-04-26
* liaozhiyang
*/
function onCheck(o) {
checkedKeys.value = o.checked ? o.checked : o;
function onCheck(o, e) {
// checkStrictly: true=>层级独立，false=>层级关联.
if (checkStrictly.value) {
checkedKeys.value = o.checked ? o.checked : o;
} else {
const keys = getNodeAllKey(e.node, 'children', 'key');
if (e.checked) {
// 反复操作下可能会有重复的keys，得用new Set去重下
checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
} else {
const result = removeMatchingItems(checkedKeys.value, keys);
checkedKeys.value = result;
}
}
}
/**
* 2024-04-26
* liaozhiyang
* 删除相匹配数组的项
*/
function removeMatchingItems(arr1, arr2) {
// 使用哈希表记录 arr2 中的元素
const hashTable = {};
for (const item of arr2) {
hashTable[item] = true;
}
// 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
return arr1.filter((item) => !hashTable[item]);
}
/**
* 2024-04-26
* liaozhiyang
* 获取当前节点及以下所有子孙级的key
*/
function getNodeAllKey(node: any, children: any, key: string) {
const result: any = [];
result.push(node[key]);
const recursion = (data) => {
data.forEach((item: any) => {
result.push(item[key]);
if (item[children]?.length) {
recursion(item[children]);
}
});
};
node[children]?.length && recursion(node[children]);
return result;
}
/**
* 选中节点，打开数据权限抽屉
*/