Browse Source

feat: 使用hook接管项目节的子节点展开解决新建节点没有自动展开的问题

lanjianrong 4 years ago
parent
commit
54b409f940

+ 5 - 0
src/pages/Contract/Content/Income/components/TableContent/index.tsx

@@ -7,6 +7,7 @@ import { ContractTree, iShowTemplateState, iTemplateState } from '@/types/contra
 import { iFile } from '@/types/file'
 import { apiSaveFileInfo } from '@/utils/common/api'
 import { contractConsts } from '@/utils/common/constStatus'
+import { useTableExpand } from '@/utils/common/customHooks'
 import consts from '@/utils/consts'
 import { formatMoney } from '@/utils/util'
 import { Button, message, Radio, Table, Tabs } from 'antd'
@@ -42,6 +43,9 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
     template: '',
     loading: false
   })
+
+  const [ ids, setRowKeys  ] = useTableExpand(contractStore.tree)
+
   const [ tempalte, setTempalte ] = useState<{ template1: iTemplateState, template2: iTemplateState }>({
     template1: {
       attribution: '',
@@ -358,6 +362,7 @@ const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, h
               defaultExpandAllRows={true}
               onRow={onClickRow}
               rowClassName={handleRowClass}
+              expandable={{ expandedRowKeys: ids, onExpand: (expanded: boolean, record: any) => setRowKeys(expanded, record as ContractTree) }}
               style={{ height: '100%', overflowY: 'scroll' }}
             />
             : ''

+ 7 - 7
src/utils/common/customHooks.ts

@@ -1,6 +1,6 @@
 /** 自定义hooks库 */
 import { useState, useEffect } from 'react'
-import { ContractListTree } from '@/types/contract'
+import { ContractListTree, ContractTree } from '@/types/contract'
 import { ListModal } from '@/types/safe'
 
 /** 合同树的自定义hook */
@@ -41,14 +41,14 @@ export const useContractTree = (): [ContractListTree, (newTree: ContractListTree
 }
 
 /** 树列表展开收起自定义hook */
-export const useTableExpand = (tree: ContractListTree[]): [string[], (expanded: boolean, record?: ContractListTree) => void] => {
+export const useTableExpand = (tree: Array<ContractListTree | ContractTree>): [string[], (expanded: boolean, record?: ContractListTree | ContractTree) => void] => {
   const [ ids, setIds ] = useState<Array<string>>([])
   useEffect(() => {
-    const newIds = expandTree(tree as ContractListTree[])
+    const newIds = expandTree(tree as Array<ContractListTree | ContractTree>)
 
     setIds(newIds)
   }, [ tree ])
-  const onChange = (expanded: boolean, record?: ContractListTree) => {
+  const onChange = (expanded: boolean, record?: ContractListTree | ContractTree) => {
     // 点击图标的展开收起
     if (record) {
       if (expanded) {
@@ -68,11 +68,11 @@ export const useTableExpand = (tree: ContractListTree[]): [string[], (expanded:
       }
     }
   }
-  function expandTree(data: ContractListTree[]): string[] {
+  function expandTree(data: Array<ContractListTree | ContractTree>): string[] {
     let idArr: Array<string> = []
 
-    data.forEach((item: ContractListTree) => {
-      if (!!item.isfolder && item.children?.length) {
+    data.forEach((item: ContractListTree | ContractTree) => {
+      if (item.children?.length) {
         idArr.push(item.id)
         const childIds = expandTree(item.children)
         idArr = [ ...idArr, ...childIds ]