feat(tree): add clickRowToExpand option close #318

Vben
1 parent 80b47c84
Showing 5 changed files with 36 additions and 13 deletions
CHANGELOG.zh_CN.md
src/components/Tree/src/index.vue
src/components/Tree/src/props.ts
src/components/Tree/src/types.ts
src/views/demo/system/account/AccountModal.vue
 ## Wip
  
+### ✨ Features
+
+- `BasicTree` 新增`clickRowToExpand`,用于单击树节点展开
+
 ### 🐛 Bug Fixes
  
 - 修复`Description`已知问题
 - 修复`BasicForm`已知问题
 - 修复`BasicTree`下 ActionItem 的 show 属性逻辑问题
+- 修复树组件 demo 示例样式错误
+- 修复账号管理新增未清空旧数据
  
 ## 2.0.2 (2021-03-04)
  
@@ -121,7 +121,7 @@
         return icon;
       }
  
-      async function handleRightClick({ event, node }: any) {
+      async function handleRightClick({ event, node }: Recordable) {
         const { rightMenuList: menuList = [], beforeRightClick } = props;
         let rightMenuList: ContextMenuItem[] = [];
  
@@ -137,14 +137,14 @@
         });
       }
  
-      function setExpandedKeys(keys: string[]) {
+      function setExpandedKeys(keys: Keys) {
         state.expandedKeys = keys;
       }
  
       function getExpandedKeys() {
         return state.expandedKeys;
       }
-      function setSelectedKeys(keys: string[]) {
+      function setSelectedKeys(keys: Keys) {
         state.selectedKeys = keys;
       }
  
@@ -182,10 +182,23 @@
         searchState.searchData = filter(unref(treeDataRef), (node) => {
           const { title } = node;
           return title?.includes(searchValue) ?? false;
-          // || key?.includes(searchValue);
         });
       }
  
+      function handleClickNode(key: string, children: TreeItem[]) {
+        if (!props.clickRowToExpand || !children || children.length === 0) return;
+        if (!state.expandedKeys.includes(key)) {
+          setExpandedKeys([...state.expandedKeys, key]);
+        } else {
+          const keys = [...state.expandedKeys];
+          const index = keys.findIndex((item) => item === key);
+          if (index !== -1) {
+            keys.splice(index, 1);
+          }
+          setExpandedKeys(keys);
+        }
+      }
+
       watchEffect(() => {
         treeDataRef.value = props.treeData as TreeItem[];
         state.expandedKeys = props.expandedKeys;
@@ -264,11 +277,15 @@
  
           const propsData = omit(item, 'title');
           const icon = getIcon({ ...item, level }, item.icon);
+          const children = get(item, childrenField) || [];
           return (
             <Tree.TreeNode {...propsData} node={toRaw(item)} key={get(item, keyField)}>
               {{
                 title: () => (
-                  <span class={`${prefixCls}-title pl-2`}>
+                  <span
+                    class={`${prefixCls}-title pl-2`}
+                    onClick={handleClickNode.bind(null, item.key, children)}
+                  >
                     {icon && <TreeIcon icon={icon} />}
                     <span
                       class={`${prefixCls}__content`}
@@ -279,8 +296,7 @@
                     <span class={`${prefixCls}__actions`}> {renderAction({ ...item, level })}</span>
                   </span>
                 ),
-                default: () =>
-                  renderTreeNode({ data: get(item, childrenField) || [], level: level + 1 }),
+                default: () => renderTreeNode({ data: children, level: level + 1 }),
               }}
             </Tree.TreeNode>
           );
@@ -289,7 +305,7 @@
       return () => {
         const { title, helpMessage, toolbar, search } = props;
         return (
-          <div class={[prefixCls, 'h-full bg-white']}>
+          <div class={[prefixCls, 'h-full bg-white', attrs.class]}>
             {(title || toolbar || search) && (
               <TreeHeader
                 checkAll={checkAll}
@@ -21,6 +21,7 @@ export const basicProps = {
   toolbar: propTypes.bool,
   search: propTypes.bool,
   checkStrictly: propTypes.bool,
+  clickRowToExpand: propTypes.bool.def(true),
  
   replaceFields: {
     type: Object as PropType<ReplaceFields>,
@@ -14,11 +14,10 @@ export interface ReplaceFields {
   key?: string;
 }
  
-export type Keys = string[] | number[];
+export type Keys = (string | number)[];
 export type CheckKeys =
-  | string[]
-  | number[]
-  | { checked: string[] | number[]; halfChecked: string[] | number[] };
+  | (string | number)[]
+  | { checked: (string | number)[]; halfChecked: (string | number)[] };
  
 export interface TreeActionType {
   checkAll: (checkAll: boolean) => void;
@@ -17,7 +17,7 @@
     setup(_, { emit }) {
       const isUpdate = ref(true);
  
-      const [registerForm, { setFieldsValue, updateSchema, validate }] = useForm({
+      const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
         labelWidth: 100,
         schemas: accountFormSchema,
         showActionButtonGroup: false,
@@ -27,6 +27,7 @@
       });
  
       const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+        resetFields();
         setModalProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;