xpyy-scm/src/pages/user/table/modal/hooks.ts

import {addUser, editUser} from '@apis';
import {usePutData} from '@hooks';
import {AddUserParams} from '@models';
import {formatValidateError} from '@utils';
import {toTypedSchema} from '@vee-validate/zod';
import {useForm} from 'vee-validate';
import {Ref, watchEffect} from 'vue';
import {object, string} from 'zod';

export type FormState = Omit<AddUserParams, 'auditAuthority'>
& {auditAuthority: string[]};

export function useFormState(
  id: Ref<string>,
  visible: Ref<boolean>,
  options: {onFetch: () => void, onClose: () => void},
) {
  const {handleSubmit, setErrors, setValues} = useForm<FormState>({
    initialValues: {
      userName: '',
      realName: '',
      email: '',
      phone: '',
      role: '',
      auditAuthority: [] as string[],
    },
    validationSchema: toTypedSchema(object({
      userName: string(formatValidateError('user.modal.errors[0]'))
        .min(1, 'user.modal.errors[0]'),
      realName: string(formatValidateError('user.modal.errors[1]'))
        .min(1, 'user.modal.errors[1]'),
      email: string(formatValidateError('user.modal.errors[2]'))
        .email('user.modal.errors[3]'),
      phone: string(formatValidateError('user.modal.errors[4]'))
        .min(1, 'user.modal.errors[4]'),
      role: string(formatValidateError('user.modal.errors[5]'))
        .min(1, 'user.modal.errors[5]'),
      auditAuthority: string().array(),
    })),
  });

  watchEffect(function() {
    if (visible.value) {
      setErrors({
        userName: void 0,
        realName: void 0,
        email: void 0,
        phone: void 0,
        role: void 0,
      });
    }
  });

  const {onFetch, onClose} = options;

  const [isLoading, {addMutate, editMutate}] = usePutData({
    addFn: addUser,
    editFn: editUser,
    onFetch,
    onClose,
  });

  const onSubmit = handleSubmit(function({
    userName,
    realName,
    email,
    phone,
    role,
    auditAuthority,
  }) {
    const parasm: AddUserParams = {
      userName,
      realName,
      email,
      phone,
      role,
      auditAuthority: auditAuthority.join(','),
    };

    id.value.length > 0
      ? editMutate({id: id.value, ...parasm})
      : addMutate(parasm);
  });

  return [isLoading, {setValues, onSubmit}] as const;
}