useTable.ts 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
  2. import type { PaginationProps } from '../types/pagination';
  3. import type { DynamicProps } from '/#/utils';
  4. import type { FormActionType } from '/@/components/Form';
  5. import type { WatchStopHandle } from 'vue';
  6. import { getDynamicProps } from '/@/utils';
  7. import { ref, onUnmounted, unref, watch, toRaw } from 'vue';
  8. import { isProdMode } from '/@/utils/env';
  9. import { error } from '/@/utils/log';
  10. type Props = Partial<DynamicProps<BasicTableProps>>;
  11. type UseTableMethod = TableActionType & {
  12. getForm: () => FormActionType;
  13. };
  14. export function useTable(
  15. tableProps?: Props
  16. ): [
  17. (instance: TableActionType, formInstance: UseTableMethod) => void,
  18. TableActionType & {
  19. getForm: () => FormActionType;
  20. }
  21. ] {
  22. const tableRef = ref<Nullable<TableActionType>>(null);
  23. const loadedRef = ref<Nullable<boolean>>(false);
  24. const formRef = ref<Nullable<UseTableMethod>>(null);
  25. let stopWatch: WatchStopHandle;
  26. function register(instance: TableActionType, formInstance: UseTableMethod) {
  27. isProdMode() &&
  28. onUnmounted(() => {
  29. tableRef.value = null;
  30. loadedRef.value = null;
  31. });
  32. if (unref(loadedRef) && isProdMode() && instance === unref(tableRef)) return;
  33. tableRef.value = instance;
  34. formRef.value = formInstance;
  35. tableProps && instance.setProps(getDynamicProps(tableProps));
  36. loadedRef.value = true;
  37. stopWatch?.();
  38. stopWatch = watch(
  39. () => tableProps,
  40. () => {
  41. tableProps && instance.setProps(getDynamicProps(tableProps));
  42. },
  43. {
  44. immediate: true,
  45. deep: true,
  46. }
  47. );
  48. }
  49. function getTableInstance(): TableActionType {
  50. const table = unref(tableRef);
  51. if (!table) {
  52. error(
  53. 'The table instance has not been obtained yet, please make sure the table is presented when performing the table operation!'
  54. );
  55. }
  56. return table as TableActionType;
  57. }
  58. const methods: TableActionType & {
  59. getForm: () => FormActionType;
  60. } = {
  61. reload: async (opt?: FetchParams) => {
  62. getTableInstance().reload(opt);
  63. },
  64. setProps: (props: Partial<BasicTableProps>) => {
  65. getTableInstance().setProps(props);
  66. },
  67. redoHeight: () => {
  68. getTableInstance().redoHeight();
  69. },
  70. setLoading: (loading: boolean) => {
  71. getTableInstance().setLoading(loading);
  72. },
  73. getDataSource: () => {
  74. return getTableInstance().getDataSource();
  75. },
  76. getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
  77. const columns = getTableInstance().getColumns({ ignoreIndex }) || [];
  78. return toRaw(columns);
  79. },
  80. setColumns: (columns: BasicColumn[]) => {
  81. getTableInstance().setColumns(columns);
  82. },
  83. setTableData: (values: any[]) => {
  84. return getTableInstance().setTableData(values);
  85. },
  86. setPagination: (info: Partial<PaginationProps>) => {
  87. return getTableInstance().setPagination(info);
  88. },
  89. deleteSelectRowByKey: (key: string) => {
  90. getTableInstance().deleteSelectRowByKey(key);
  91. },
  92. getSelectRowKeys: () => {
  93. return toRaw(getTableInstance().getSelectRowKeys());
  94. },
  95. getSelectRows: () => {
  96. return toRaw(getTableInstance().getSelectRows());
  97. },
  98. clearSelectedRowKeys: () => {
  99. getTableInstance().clearSelectedRowKeys();
  100. },
  101. setSelectedRowKeys: (keys: string[] | number[]) => {
  102. getTableInstance().setSelectedRowKeys(keys);
  103. },
  104. getPaginationRef: () => {
  105. return getTableInstance().getPaginationRef();
  106. },
  107. getSize: () => {
  108. return toRaw(getTableInstance().getSize());
  109. },
  110. updateTableData: (index: number, key: string, value: any) => {
  111. return getTableInstance().updateTableData(index, key, value);
  112. },
  113. getRowSelection: () => {
  114. return toRaw(getTableInstance().getRowSelection());
  115. },
  116. getCacheColumns: () => {
  117. return toRaw(getTableInstance().getCacheColumns());
  118. },
  119. getForm: () => {
  120. return (unref(formRef) as unknown) as FormActionType;
  121. },
  122. setShowPagination: async (show: boolean) => {
  123. getTableInstance().setShowPagination(show);
  124. },
  125. getShowPagination: () => {
  126. return toRaw(getTableInstance().getShowPagination());
  127. },
  128. expandAll: () => {
  129. getTableInstance().expandAll();
  130. },
  131. collapseAll: () => {
  132. getTableInstance().collapseAll();
  133. },
  134. };
  135. return [register, methods];
  136. }