hooks.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import {deleteMenu} from '@apis';
  2. import {MenuListData} from '@models';
  3. import {Button} from 'antd';
  4. import {ColumnsType} from 'antd/es/table';
  5. import {useTableModalEvent, useTableDeleteEvent} from '@hooks';
  6. import {
  7. HUGE_TABLE_WIDTH,
  8. LARGE_TABLE_WIDTH,
  9. MIDDLE_TABLE_WIDTH,
  10. NORMAL_TABLE_WIDTH,
  11. SMALL_TABLE_WIDTH,
  12. } from '@utils';
  13. import {FontIcon} from '@components';
  14. const tableColumns: ColumnsType<MenuListData> = [
  15. {
  16. title: '菜单名称',
  17. dataIndex: 'name',
  18. key: 'name',
  19. width: HUGE_TABLE_WIDTH,
  20. },
  21. {
  22. title: '菜单排序',
  23. dataIndex: 'orderBy',
  24. key: 'orderBy',
  25. width: SMALL_TABLE_WIDTH,
  26. },
  27. {
  28. title: '图标',
  29. dataIndex: 'img',
  30. key: 'img',
  31. render(_, {img}) {
  32. return <FontIcon name={img} />;
  33. },
  34. width: SMALL_TABLE_WIDTH,
  35. },
  36. {
  37. title: '修改人',
  38. dataIndex: 'modifyUser',
  39. key: 'modifyUser',
  40. width: NORMAL_TABLE_WIDTH,
  41. },
  42. {
  43. title: '修改时间',
  44. dataIndex: 'modifyTime',
  45. key: 'modifyTime',
  46. width: MIDDLE_TABLE_WIDTH,
  47. },
  48. ];
  49. export function useHandle(refetch: () => void) {
  50. const [{visible, editId}, {onAdd, onEdit, onClose}] = useTableModalEvent();
  51. const [pendingId, onDelete] = useTableDeleteEvent(deleteMenu, refetch, {
  52. label: '菜单',
  53. });
  54. const [
  55. {visible: childVisible, editId: pid},
  56. {onEdit: onChildMenu, onClose: closeChildModal},
  57. ] = useTableModalEvent();
  58. const columns: ColumnsType<MenuListData> = [
  59. ...tableColumns,
  60. {
  61. title: '操作',
  62. dataIndex: 'id',
  63. key: 'id',
  64. width: LARGE_TABLE_WIDTH,
  65. fixed: 'right',
  66. render(_, {id}) {
  67. return (
  68. <>
  69. <Button
  70. type='text'
  71. className='ant-text-btn-color-primary'
  72. disabled={pendingId === id}
  73. onClick={onEdit(id)}
  74. >
  75. 修改
  76. </Button>
  77. <Button
  78. type='text'
  79. className='ant-text-btn-color-primary'
  80. disabled={pendingId === id}
  81. onClick={onChildMenu(id)}
  82. >
  83. 子菜单
  84. </Button>
  85. <Button
  86. type='text'
  87. danger
  88. loading={pendingId === id}
  89. onClick={onDelete(id)}
  90. >
  91. 删除
  92. </Button>
  93. </>
  94. );
  95. },
  96. },
  97. ];
  98. return [
  99. {columns, visible, editId, childVisible, pid},
  100. {onModalClose: onClose, onAdd, closeChildModal},
  101. ] as const;
  102. }