customHooks.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. /** 自定义hooks库 */
  2. import { useState, useEffect } from 'react'
  3. import { ContractListTree } from '@/types/contract'
  4. import { ListModal } from '@/types/safe'
  5. /** 合同树的自定义hook */
  6. export const useContractTree = (): [ContractListTree, (newTree: ContractListTree) => void] => {
  7. const [ tree, setTree ] = useState<ContractListTree>({
  8. bidsectionId: '',
  9. children: [],
  10. childsTotal: 0,
  11. contracts: 0,
  12. contractsIncome: '',
  13. contractsIncomeProgress: '',
  14. contractsPaid: '',
  15. contractsPay: '',
  16. contractsPayProgress: '',
  17. contractsReturned: '',
  18. csrf: '',
  19. hasFolder: false,
  20. id: '',
  21. isBid: false,
  22. isEnd: false,
  23. isfolder: 0,
  24. name: '',
  25. parentId: '',
  26. projectId: '',
  27. qualityRectification: 0,
  28. qualityRectificationIn: 0,
  29. qualityRectificationFinish: 0,
  30. qualityTotal: 0,
  31. safeRectification: 0,
  32. safeRectificationIn: 0,
  33. safeRectificationFinish: 0,
  34. safeTotal: 0
  35. })
  36. const onChange = (newTree: ContractListTree) => {
  37. setTree({ ...tree, ...newTree })
  38. }
  39. return [ tree, onChange ]
  40. }
  41. /** 树列表展开收起自定义hook */
  42. export const useTableExpand = (tree: ContractListTree[]): [string[], (expanded: boolean, record?: ContractListTree) => void] => {
  43. const [ ids, setIds ] = useState<Array<string>>([])
  44. useEffect(() => {
  45. const newIds = expandTree(tree as ContractListTree[])
  46. setIds(newIds)
  47. }, [ tree ])
  48. const onChange = (expanded: boolean, record?: ContractListTree) => {
  49. // 点击图标的展开收起
  50. if (record) {
  51. if (expanded) {
  52. const newIds = ids
  53. newIds.push(record.id)
  54. setIds(newIds)
  55. } else {
  56. setIds(ids.filter(item => item !== record.id))
  57. }
  58. } else {
  59. // 手动控制展开收起全部节点
  60. if (expanded && tree.length) {
  61. const newIds = expandTree(tree)
  62. setIds(newIds)
  63. } else {
  64. setIds([])
  65. }
  66. }
  67. }
  68. function expandTree(data: ContractListTree[]): string[] {
  69. let idArr: Array<string> = []
  70. data.forEach((item: ContractListTree) => {
  71. if (!!item.isfolder && item.children?.length) {
  72. idArr.push(item.id)
  73. const childIds = expandTree(item.children)
  74. idArr = [ ...idArr, ...childIds ]
  75. }
  76. })
  77. return idArr
  78. }
  79. return [ ids, onChange ]
  80. }
  81. /** 巡检列表页自定义hook*/
  82. export const useListModal = (dataType: number): [ListModal, (newData: ListModal) => void] => {
  83. const [ state, setState ] = useState<ListModal>({
  84. ruleModal: {
  85. visible: false,
  86. loading: false
  87. },
  88. addModal: {
  89. visible: false,
  90. loading: false
  91. },
  92. fileModal: {
  93. visible: false,
  94. dataType,
  95. dataId: ''
  96. },
  97. dataList: [],
  98. total: 0
  99. })
  100. const onChange = (newData: ListModal) => {
  101. setState({ ...state, ...newData })
  102. }
  103. return [ state, onChange ]
  104. }
  105. export const useAutoTable = (needSubtractHeight: number) => {
  106. // console.log(collapsed)
  107. const [ scroll, setScroll ] = useState({ y: document.body.clientHeight - needSubtractHeight })
  108. useEffect(() => {
  109. const handleScroll = () => setScroll({ ...scroll, y: document.body.clientHeight - needSubtractHeight })
  110. window.addEventListener('resize', handleScroll)
  111. return () => {
  112. window.removeEventListener('resize', handleScroll)
  113. }
  114. }, [])
  115. // 实际返回的宽度要大一点让table出现滚动条,反正折叠菜单栏卡顿
  116. return [ scroll.y ]
  117. }