|
|
@@ -36,11 +36,13 @@
|
|
|
<el-scrollbar>
|
|
|
<el-tree
|
|
|
ref="treeRef"
|
|
|
+ show-checkbox
|
|
|
node-key="code"
|
|
|
- :highlight-current="true"
|
|
|
+ :render-after-expand="false"
|
|
|
:data="treeData"
|
|
|
:props="treeProps"
|
|
|
@node-click="clickNode"
|
|
|
+ @check-change="checkNode"
|
|
|
/>
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
@@ -82,10 +84,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, onMounted, computed } from 'vue';
|
|
|
+ import { ref, onMounted, computed, nextTick } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import type { userFormParamsType } from './types';
|
|
|
-
|
|
|
import { addRole, getFeaturePermissions, roleUserInfo, updateRole } from '@/api/system/role';
|
|
|
import useScene from '@/views/system-config/scene-manage/use-scene';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
@@ -199,20 +200,34 @@
|
|
|
|
|
|
const formParams = ref<userFormParamsType>(defaultTreeValueRef());
|
|
|
|
|
|
- function clickNode(tree, nodeInfo, _, __) {
|
|
|
- console.log('tree', tree);
|
|
|
- console.log('nodeInfo', nodeInfo.data.isShop);
|
|
|
- featurePermissionMap[selectedNodeKey.value] = [];
|
|
|
- if (nodeInfo.data.isShop) {
|
|
|
+ function clickNode(tree, _nodeInfo, _, __) {
|
|
|
+ if (tree.code in featurePermissionMap) {
|
|
|
selectedNodeKey.value = tree.code;
|
|
|
- const checkedNodes = featurePermissionMap[selectedNodeKey.value] || [];
|
|
|
- isAll.value = checkedNodes.length >= modeList.value.length;
|
|
|
- modeTreeRef.value.setCheckedKeys(checkedNodes);
|
|
|
+ isAll.value = featurePermissionMap[tree.code].length >= modeList.value.length;
|
|
|
+ modeTreeRef.value.setCheckedKeys(featurePermissionMap[tree.code]);
|
|
|
} else {
|
|
|
+ isAll.value = false;
|
|
|
selectedNodeKey.value = '';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ const checkNode = (checkedNodes, checkedKeys) => {
|
|
|
+ if (checkedKeys) {
|
|
|
+ if (checkedNodes.isShop && !(checkedNodes.code in featurePermissionMap)) {
|
|
|
+ selectedNodeKey.value = checkedNodes.code;
|
|
|
+ isAll.value = true;
|
|
|
+ handleCheckAll(true);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (checkedNodes.isShop && checkedNodes.code in featurePermissionMap) {
|
|
|
+ delete featurePermissionMap[checkedNodes.code];
|
|
|
+ }
|
|
|
+ selectedNodeKey.value = '';
|
|
|
+ isAll.value = false;
|
|
|
+ handleCheckAll(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
function treeNodeExpand(status) {
|
|
|
for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
|
|
|
treeRef.value.store._getAllNodes()[i].expanded = status;
|
|
|
@@ -294,11 +309,20 @@
|
|
|
function checkedModeTree(_, tree) {
|
|
|
isAll.value = tree.checkedKeys.length >= modeList.value.length;
|
|
|
featurePermissionMap[selectedNodeKey.value] = tree.checkedKeys;
|
|
|
+ const selectLength = tree.checkedKeys.length;
|
|
|
+ if (selectLength === 0) {
|
|
|
+ delete featurePermissionMap[selectedNodeKey.value];
|
|
|
+ treeRef.value!.setCheckedKeys(Object.keys(featurePermissionMap));
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function openDrawer(roleId?) {
|
|
|
isAll.value = false;
|
|
|
selectedNodeKey.value = '';
|
|
|
+ Object.keys(featurePermissionMap).forEach((key) => {
|
|
|
+ delete featurePermissionMap[key];
|
|
|
+ });
|
|
|
+
|
|
|
if (roleId) {
|
|
|
formParams.value.roleId = roleId;
|
|
|
getInfo();
|
|
|
@@ -353,18 +377,17 @@
|
|
|
|
|
|
function handleReset() {
|
|
|
formRef.value.resetFields();
|
|
|
- featurePermissionMap[selectedNodeKey.value] = [];
|
|
|
-
|
|
|
+ Object.keys(featurePermissionMap).forEach((key) => {
|
|
|
+ delete featurePermissionMap[key];
|
|
|
+ });
|
|
|
formParams.value = Object.assign(formParams.value, defaultValueRef());
|
|
|
- treeRef.value!.setCurrentKey(null);
|
|
|
+ treeRef.value!.setCheckedKeys([]);
|
|
|
modeTreeRef.value!.setCheckedNodes([]);
|
|
|
isAll.value = false;
|
|
|
selectedNodeKey.value = '';
|
|
|
}
|
|
|
function setFeaturePermission(permissionList) {
|
|
|
for (const item of permissionList) {
|
|
|
- console.log(item);
|
|
|
-
|
|
|
if (featurePermissionMap[item.workshopCode]) {
|
|
|
featurePermissionMap[item.workshopCode].push(item.permissionId);
|
|
|
} else {
|
|
|
@@ -386,11 +409,22 @@
|
|
|
formParams.value = info;
|
|
|
isDrawer.value = true;
|
|
|
setFeaturePermission(res.permissionMap);
|
|
|
+ const treeSelectData = Object.keys(featurePermissionMap);
|
|
|
+ isAll.value = false;
|
|
|
+ selectedNodeKey.value = '';
|
|
|
+
|
|
|
+ // const modeTreeSelectData = Object.values(featurePermissionMap)[0] as Array<string>;
|
|
|
+ // isAll.value = modeTreeSelectData.length >= modeTreeData.value.length;
|
|
|
+
|
|
|
// nextTick(() => {
|
|
|
// selectNodes.value = res.permissionMap.map((item) => item.workshopCode);
|
|
|
// // 将匹配到的节点的键值数组传递给 setCheckedKeys 方法
|
|
|
// treeRef.value.setCheckedKeys(selectNodes.value);
|
|
|
// });
|
|
|
+ nextTick(() => {
|
|
|
+ treeRef.value?.setCheckedKeys(treeSelectData, true);
|
|
|
+ modeTreeRef.value?.setCheckedKeys([]);
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
|