useTableSkill.ts 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import { h, ref } from 'vue';
  2. import { Button } from 'ant-design-vue';
  3. /**
  4. * Skill 约定记录(防止接口参数回归错误)
  5. * 1) skill 仅用于前端组件能力标记(如按钮 `:skill="true"`),不是后端接口业务字段。
  6. * 2) 通信/交易底层接口中的日期入参(startDate、endDate)统一使用 `YYYY-MM-DD`。
  7. * 3) 月维度字段映射为日期时:开始取当月第一天,结束取当月最后一天。
  8. */
  9. export function useTableSkill() {
  10. const queryLoading = ref(false);
  11. const runWithQueryLoading = async <T>(task: () => Promise<T>, timeoutMs = 15000): Promise<T> => {
  12. queryLoading.value = true;
  13. const stopLoadingTimer = window.setTimeout(() => {
  14. queryLoading.value = false;
  15. }, timeoutMs);
  16. try {
  17. return await task();
  18. } finally {
  19. window.clearTimeout(stopLoadingTimer);
  20. queryLoading.value = false;
  21. }
  22. };
  23. return {
  24. queryLoading,
  25. runWithQueryLoading,
  26. };
  27. }
  28. export function buildTableActionColumn<T = any>(
  29. onClick: (record: T) => void,
  30. options?: {
  31. title?: string;
  32. buttonText?: string;
  33. width?: number;
  34. },
  35. ) {
  36. return {
  37. title: options?.title || '操作',
  38. dataIndex: 'action',
  39. key: 'action',
  40. width: options?.width || 120,
  41. customRender: ({ record }: { record: T }) =>
  42. h(
  43. Button,
  44. {
  45. type: 'link',
  46. size: 'small',
  47. color: 'primary',
  48. skill: true,
  49. onClick: () => onClick(record),
  50. },
  51. { default: () => options?.buttonText || '查看详情' },
  52. ),
  53. };
  54. }