预检查和表单提交

今天在写一个需要预检查的表单提交页面时，我把预检查冗在了提交函数里面导致很耦合且状态不分明，后面我把预检查和提交函数分开，将precheck和submit分开那么形成层级衔接关系而不是覆盖关系，感觉明了不少，同时附着Form上的brules用bv (validation) 检查实现数据层和服务层的双保险

import {BeForm,BeFormItem,BeInput,BeMButton,bv,useForm,
} from '@finfe/beetle-ui';
import { MoneyRead } from '@react/components/Money';
import { Modal } from '@ss/mtd-react3';
import type { NormalListResponseResult } from '@tmc/business';
import { precheckAudit, rejectExpense } from '@tmc/business/src/apis/approve';
import { SupportOperateTypes } from '@tmc/business/src/constance/approve';
import React, { useState } from 'react';interface RejectModalProps {visible: boolean;onClose: () => void;expenses: NormalListResponseResult[];onSuccess?: () => void;
}const RejectModal: React.FC<RejectModalProps> = ({visible,onClose,expenses,onSuccess,
}) => {// 是否有离职员工会导致中间有无警告弹窗过程const [showLeaveWarning, setShowLeaveWarning] = useState(false);const [leaveStaffList, setLeaveStaffList] = useState<any[]>([]);// 预检查是否有离职员工const handlePrecheck = async () => {const expenseNoList = expenses.map((expense) => expense.expenseNo);const precheckResult = await precheckAudit({expenseNoList,operateType: SupportOperateTypes.REJECT,});const failList = Array.isArray(precheckResult?.operateFailList)? precheckResult.operateFailList: [];if (failList.length > 0) {setLeaveStaffList(failList);setShowLeaveWarning(true);return;} else {form.submit();}};const handleSubmit = async (value: string) => {const expenseDetails = expenses.map((expense) => ({expenseNo: expense.expenseNo,expenseTagList: expense.expenseTagList?.map((tag) => ({tagCode: tag.tagCode,tagValue: 1,})),}));await rejectExpense(expenseDetails, value);Modal.success({title: '成功',message: `成功驳回 ${expenses.length} 个费用申请`,});setShowLeaveWarning(false);setLeaveStaffList([]);onClose();onSuccess?.();};const handleCancel = () => {setShowLeaveWarning(false);setLeaveStaffList([]);onClose();};const form = useForm({onSubmit: (values) => {return handleSubmit(values.comment); // 表单数据托管给form了所以绑定的肯定是submit而不是预检查},});return (<ModalonClose={handleCancel}open={visible}style={{ width: '500px' }}title={showLeaveWarning ? '离职人员提醒' : '驳回申请'}><Modal.Body>{showLeaveWarning ? (// 离职人员警告界面<div><div className="mb-4 text-orange-500">以下人员已离职，是否继续驳回？</div><div className="max-h-[120px] overflow-auto border border-yellow-300 rounded p-2 bg-yellow-50 mb-6">{leaveStaffList.map((staff, index) => (<divclassName={`text-sm text-orange-600 ${index === leaveStaffList.length - 1 ? '' : 'mb-1'}`}key={index}>{staff.staffName} - {staff.reason}</div>))}</div></div>) : (// 正常驳回界面<div><div className="mb-4"><div className="mb-2 text-gray-600 text-sm">将要驳回以下 {expenses.length} 个费用申请：</div><div className="max-h-[120px] overflow-auto border border-gray-300 rounded p-2 bg-gray-50">{expenses.map((expense, index) => (<divclassName={`text-xs text-gray-600 flex items-center gap-1 ${index === expenses.length - 1 ? '' : 'mb-1'}`}key={expense.expenseNo}><span>{expense.expenseNo} - {expense.proposerStaffName} -</span><MoneyReadcurrency={expense.expenseCurrency || 'CNY'}value={expense.expenseTotalAmount}/></div>))}</div></div><BeForm form={form}><BeFormItembrules={bv.required('请输入驳回原因')}fieldName="comment"label="驳回原因"><BeInput /></BeFormItem></BeForm></div>)}</Modal.Body><Modal.Footer>{showLeaveWarning ? (<><BeMButtononClick={() => setShowLeaveWarning(false)}style={{ marginRight: '12px' }}>返回</BeMButton><BeMButton onClick={() => form.submit()} type="primary">继续驳回</BeMButton></>) : (<><BeMButton onClick={handleCancel} style={{ marginRight: '12px' }}>取消</BeMButton><BeMButton onClick={handlePrecheck} type="primary">驳回</BeMButton></>)}</Modal.Footer></Modal>);
};export default RejectModal;