hooks.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import {addStorage, editStorage, getStorageInfo} from '@apis';
  2. import {yupResolver} from '@hookform/resolvers/yup';
  3. import {AddStorageParams} from '@models';
  4. import {useMutation, useQuery} from '@tanstack/react-query';
  5. import {message} from 'antd';
  6. import {useEffect} from 'react';
  7. import {useForm, useFormContext} from 'react-hook-form';
  8. import {number, object, string} from 'yup';
  9. type FormState = {
  10. /** 库位编号 */
  11. storageLocationCode: string
  12. /** 库位名称 */
  13. storageLocationName: string
  14. /** 库位类型 */
  15. storageLocationType: string
  16. /** 是否禁用 */
  17. storageIsNotDisable: string
  18. /** 所在仓库 */
  19. storageWarehouseWhere: string
  20. /** 库位容量 */
  21. storageCapacity: number
  22. };
  23. const validate = object({
  24. storageLocationCode: string().required('请输入库位编号'),
  25. storageLocationName: string().required('请输入库位名称'),
  26. storageLocationType: string().required('请输入库位类型'),
  27. storageWarehouseWhere: string().required('请输入所在仓库'),
  28. storageIsNotDisable: string().required('请选择状态'),
  29. storageCapacity: number().typeError('请输入数字类型').min(0, '库位容量必须大于0')
  30. .required('请输入库位容量'),
  31. });
  32. function useAdd(onClose: () => void, onFetch: () => void) {
  33. const {isLoading, mutate} = useMutation(
  34. addStorage,
  35. {
  36. onSuccess({msg}) {
  37. if (msg === '200') {
  38. message.success('新增成功');
  39. onClose();
  40. onFetch();
  41. }
  42. },
  43. },
  44. );
  45. return [isLoading, mutate] as const;
  46. }
  47. function useEdit(onClose: () => void, onFetch: () => void) {
  48. const {isLoading, mutate} = useMutation(
  49. editStorage,
  50. {
  51. onSuccess({msg}) {
  52. if (msg === '200') {
  53. message.success('修改成功');
  54. onClose();
  55. onFetch();
  56. }
  57. },
  58. },
  59. );
  60. return [isLoading, mutate] as const;
  61. }
  62. export function useFormState(
  63. {onClose, onFetch, id, visible}:
  64. {onClose: () => void, onFetch: () => void, id: string, visible: boolean},
  65. ) {
  66. const formInstance = useForm<FormState>({
  67. defaultValues: {
  68. storageLocationCode: '',
  69. storageLocationName: '',
  70. storageLocationType: '',
  71. storageWarehouseWhere: '',
  72. storageIsNotDisable: '1',
  73. storageCapacity: 0,
  74. },
  75. resolver: yupResolver(validate),
  76. });
  77. const {handleSubmit, clearErrors} = formInstance;
  78. useEffect(function() {
  79. visible && clearErrors();
  80. }, [clearErrors, visible]);
  81. const [isAddLoading, addMutate] = useAdd(onClose, onFetch);
  82. const [isEditLoading, editMutate] = useEdit(onClose, onFetch);
  83. const isLoading = isAddLoading || isEditLoading;
  84. const onSubmit = handleSubmit(function({
  85. storageLocationName,
  86. storageLocationCode,
  87. storageLocationType,
  88. storageIsNotDisable,
  89. storageWarehouseWhere,
  90. storageCapacity,
  91. }) {
  92. const params: AddStorageParams = {
  93. storageLocationName,
  94. storageLocationCode,
  95. storageLocationType,
  96. isNotDisable: storageIsNotDisable,
  97. warehouseWhere: storageWarehouseWhere,
  98. storageLocationCapacity: storageCapacity,
  99. };
  100. id.length
  101. ? editMutate({...params, id})
  102. : addMutate(params);
  103. });
  104. return [{formInstance, isLoading}, {onSubmit}] as const;
  105. }
  106. export function useFormInstance() {
  107. const {control} = useFormContext<FormState>();
  108. return control;
  109. }
  110. export function useFormInfoValue(id: string) {
  111. const {setValue} = useFormContext<FormState>();
  112. const {data} = useQuery(
  113. [getStorageInfo.name, id],
  114. async function() {
  115. const data = await getStorageInfo(id);
  116. if (data.msg === '200') {
  117. if (data.data.list.length) return data.data.list[0];
  118. throw new Error('未获取到库位信息');
  119. }
  120. throw new Error(data.errMsg);
  121. },
  122. {
  123. suspense: true,
  124. enabled: Boolean(id.length),
  125. cacheTime: 0,
  126. },
  127. );
  128. useEffect(function() {
  129. setValue('storageLocationCode', data?.storageLocationCode ?? '');
  130. setValue('storageLocationName', data?.storageLocationName ?? '');
  131. setValue('storageLocationType', data?.storageLocationType ?? '');
  132. setValue('storageIsNotDisable', data?.isNotDisable ?? '1');
  133. setValue('storageWarehouseWhere', data?.warehouseWhere ?? '');
  134. setValue('storageCapacity', Number(data?.storageLocationCapacity ?? 0));
  135. }, [data, setValue]);
  136. }