fix(tree): 解决勾选父节点禁用状态下的子节点也会被勾选的问题

Author: jxhhdx

packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree-data.ts

@@ -1,6 +1,6 @@
-import { TreeData } from '../../';
+import type { ITreeNode } from '../../';
 
-export const checkableTreeData: TreeData = [
+export const checkableTreeData: ITreeNode[] = [
  {
  label: 'Parent node 1',
  children: [
@@ -13,3 +13,27 @@ export const checkableTreeData: TreeData = [
  },
  { label: 'Leaf node 2' },
 ];
+
+export const disabledCheckableTreeData: ITreeNode[] = [
+ {
+ label: 'Parent node 1',
+ expanded: true,
+ children: [
+ {
+ label: 'Parent node 1-1',
+ disableToggle: true,
+ disableSelect: true,
+ disableCheck: true,
+ children: [{ label: 'Leaf node 1-1-1' }],
+ },
+ {
+ label: 'Leaf node 1-2',
+ disableCheck: true,
+ },
+ ],
+ },
+ {
+ label: 'Leaf node 2',
+ disableSelect: true,
+ },
+];

packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx

@@ -1,15 +1,12 @@
 import type { ComponentPublicInstance, ComponentInternalInstance } from 'vue';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, nextTick } from 'vue';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { Tree, ICheck } from '../../';
-import { checkableTreeData } from './checkable-tree-data';
+import { checkableTreeData, disabledCheckableTreeData } from './checkable-tree-data';
 import { useNamespace } from '../../../shared/hooks/use-namespace';
 
-jest.mock('../../../locale/create', () => ({
- createI18nTranslate: () => jest.fn(),
-}));
-
 type ITreeFactory = { expandAllNodes: () => void };
+const ns = useNamespace('tree', true);
 const checkBoxNs = useNamespace('checkbox', true);
 
 describe('Checkable tree', () => {
@@ -159,4 +156,31 @@ describe('Checkable tree', () => {
  await wrapper2.get('.disable').trigger('click');
  expect(wrapper2.findAll(checkBoxNs.b())[0].classes()).toContain('active');
  });
+
+ it("When the parent node is checked, the child node in disabled status should not be checked", async () => {
+ const curWrapper = mount({
+ setup() {
+ const data = ref(disabledCheckableTreeData);
+ return () => {
+ return (
+ <>
+ <Tree data={data.value} check />
+ </>
+ );
+ };
+ }
+ });
+ await nextTick();
+ const nodes = curWrapper.findAll(ns.e('node'));
+ const checkbox = checkBoxNs.b();
+ expect(nodes).toHaveLength(4);
+ expect(nodes[0].find(checkbox).classes()).toContain('unchecked');
+ expect(nodes[1].find(checkbox).classes()).toContain('unchecked');
+ expect(nodes[2].find(checkbox).classes()).toContain('unchecked');
+ await nodes[0].get('label').trigger('click');
+ expect(nodes[0].find(checkbox).classes()).toContain('active');
+ expect(nodes[1].find(checkbox).classes()).toContain('unchecked');
+ expect(nodes[2].find(checkbox).classes()).toContain('unchecked');
+ curWrapper.unmount();
+ });
 });

packages/devui-vue/devui/tree/src/composables/use-check.ts

@@ -1,6 +1,6 @@
 import { ref, Ref, SetupContext } from 'vue';
 import { ICheckStrategy, IInnerTreeNode, IUseCore, IUseCheck } from './use-tree-types';
-
+type ISetNodeValue = Parameters<IUseCore['setNodeValue']>;
 export default function (
  options: Ref<{ checkStrategy: ICheckStrategy }> = ref({ checkStrategy: 'both' as ICheckStrategy })
 ) {
@@ -12,6 +12,12 @@ export default function (
  context.emit('check-change', node);
  };
 
+ const setNodeValueInAvailable = (node: ISetNodeValue[0], key: ISetNodeValue[1], value: ISetNodeValue[2]) => {
+ if (!node.disableCheck) {
+ setNodeValue(node, key, value);
+ }
+ };
+
  const uncheckNode = (node: IInnerTreeNode): void => {
  setNodeValue(node, 'checked', false);
  context.emit('check-change', node);
@@ -30,17 +36,17 @@ export default function (
  // 子节点选中后触发
  if (checked) {
  if (!parentNode.checked) {
- setNodeValue(parentNode, 'checked', true);
+ setNodeValueInAvailable(parentNode, 'checked', true);
  }
  } else {
  // 子节点取消后触发
  const siblingNodes = getChildren(parentNode);
  const checkedSiblingNodes = siblingNodes.filter(item => item.checked && item.id !== node.id);
  // 子节点全部是取消状态
  if (checkedSiblingNodes.length === 0) {
- setNodeValue(parentNode, 'checked', false);
+ setNodeValueInAvailable(parentNode, 'checked', false);
  } else {
- setNodeValue(parentNode, 'checked', true);
+ setNodeValueInAvailable(parentNode, 'checked', true);
  childChecked = true;
  }
  }
@@ -57,14 +63,14 @@ export default function (
  context.emit('check-change', node);
 
  if (['downward', 'both'].includes(options.value.checkStrategy)) {
- getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
+ getChildren(node).forEach(item => setNodeValueInAvailable(item, 'checked', false));
  }
  } else {
  setNodeValue(node, 'checked', true);
  context.emit('check-change', node);
 
  if (['downward', 'both'].includes(options.value.checkStrategy)) {
- getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
+ getChildren(node).forEach(item => setNodeValueInAvailable(item, 'checked', true));
  }
  }