accout-vue3-ui/src/hooks/process/use-review-process.ts

import { reactive, ref, watchEffect } from "vue";
import { ElForm, FormRules } from "element-plus";

type Param = {
  callback: (...args: any[]) => any;
  failStatus: string;
  requiredRemark?: boolean;
};

export function useReviewProcess({
  callback,
  failStatus,
  requiredRemark
}: Param) {
  const formRef = ref<InstanceType<typeof ElForm>>(null);

  const formData = reactive({
    status: "",
    remark: ""
  });

  const formRules = reactive<FormRules>({
    status: [{ required: true, trigger: "change", message: "请选择审核状态" }],
    remark: [{ required: true, trigger: "change", message: "请输入备注" }]
  });

  const handleChangeStatus = () =>
    formRef.value.validate(isValid => isValid && callback());

  //不通过时备注为必填
  if (!requiredRemark) {
    watchEffect(
      () => (formRules.remark[0].required = formData.status === failStatus)
    );
  }

  return {
    formRef,
    formRules,
    formData,
    handleChangeStatus
  };
}