dros/src/pages/patient/components/register.form.tsx

import React from 'react';
import {
  Form,
  Input,
  DatePicker,
  InputNumber,
  Select,
  Radio,
  FormInstance,
} from 'antd';
import { useIntl, FormattedMessage } from 'react-intl';
import { registerFormFields } from '@/validation/patient/registerSchema';
import NumberWithUnit from '@/components/NumberWithUnit';

const genderOptions = [
  {
    value: 'male',
    label: (
      <FormattedMessage
        id="register.gender.male"
        defaultMessage="register.gender.male"
      />
    ),
  },
  {
    value: 'female',
    label: (
      <FormattedMessage
        id="register.gender.female"
        defaultMessage="register.gender.female"
      />
    ),
  },
];

const pregnancyStatusOptions = [
  {
    value: 'yes',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.yes"
        defaultMessage="register.pregnancyStatus.yes"
      />
    ),
  },
  {
    value: 'no',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.no"
        defaultMessage="register.pregnancyStatus.no"
      />
    ),
  },
  {
    value: 'na',
    label: (
      <FormattedMessage
        id="register.pregnancyStatus.na"
        defaultMessage="register.pregnancyStatus.na"
      />
    ),
  },
];

interface BasicInfoFormProps {
  style?: React.CSSProperties;
  form?: FormInstance;
}
const BasicInfoForm: React.FC<BasicInfoFormProps> = ({ style, form }) => {
  const patient_age = Form.useWatch('patient_age', form);
  React.useEffect(() => {
    console.log('patient_age 变化了:', patient_age); // 每次 NumberWithUnit onChange 都会触发
  }, [patient_age]);

  const intl = useIntl();
  return (
    <Form form={form} layout="vertical" style={style} className="px-2">
      <Form.Item
        label={
          <FormattedMessage
            id="register.accessionNumber"
            defaultMessage="register.accessionNumber"
          />
        }
        name="accession_number"
        required={registerFormFields.accession_number.required}
        validateTrigger={registerFormFields.accession_number.trigger}
        rules={registerFormFields.accession_number.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.accessionNumber.placeholder',
            defaultMessage: 'register.accessionNumber.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientId"
            defaultMessage="register.patientId"
          />
        }
        name="patient_id"
        required={registerFormFields.patient_id.required}
        validateTrigger={registerFormFields.patient_id.trigger}
        rules={registerFormFields.patient_id.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientId.placeholder',
            defaultMessage: 'register.patientId.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientName"
            defaultMessage="register.patientName"
          />
        }
        name="patient_name"
        required={registerFormFields.patient_name.required}
        validateTrigger={registerFormFields.patient_name.trigger}
        rules={registerFormFields.patient_name.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientName.placeholder',
            defaultMessage: 'register.patientName.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientSize"
            defaultMessage="register.patientSize"
          />
        }
        name="patient_size"
        required={registerFormFields.patient_size.required}
        validateTrigger={registerFormFields.patient_size.trigger}
        rules={registerFormFields.patient_size.validation}
        initialValue="Medium"
      >
        <Select
          placeholder={intl.formatMessage({
            id: 'register.patientSize.placeholder',
            defaultMessage: 'register.patientSize.placeholder',
          })}
          defaultValue="Medium"
        >
          <Select.Option value="Large">Large</Select.Option>
          <Select.Option value="Medium">Medium</Select.Option>
          <Select.Option value="Small">Small</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage id="register.age" defaultMessage="register.age" />
        }
        name="patient_age"
        required={registerFormFields.patient_age.required}
        validateTrigger={registerFormFields.patient_age.trigger}
        rules={registerFormFields.patient_age.validation}
        initialValue={{ number: 0, unit: 'Y' }}
      >
        <NumberWithUnit
          align="baseline"
          defaultUnit="Y"
          defaultNumber={0}
          unitClassName="w-full"
          numberClassName="w-full"
          className="w-full"
          options={[
            { label: '天', value: 'D' },
            { label: '月', value: 'M' },
            { label: '年', value: 'Y' },
          ]}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.dateOfBirth"
            defaultMessage="register.dateOfBirth"
          />
        }
        name="patient_dob"
        required={registerFormFields.patient_dob.required}
        validateTrigger={registerFormFields.patient_dob.trigger}
        rules={registerFormFields.patient_dob.validation}
      >
        <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.gender"
            defaultMessage="register.gender"
          />
        }
        name="patient_sex"
        required={registerFormFields.patient_sex.required}
        validateTrigger={registerFormFields.patient_sex.trigger}
        rules={registerFormFields.patient_sex.validation}
      >
        <Select options={genderOptions} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.sexNeutered"
            defaultMessage="register.sexNeutered"
          />
        }
        name="sex_neutered"
        required={registerFormFields.sex_neutered.required}
        validateTrigger={registerFormFields.sex_neutered.trigger}
        rules={registerFormFields.sex_neutered.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.sexNeutered.placeholder',
            defaultMessage: 'register.sexNeutered.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.pregnancyStatus"
            defaultMessage="register.pregnancyStatus"
          />
        }
        name="pregnancy_status"
        required={registerFormFields.pregnancy_status.required}
        validateTrigger={registerFormFields.pregnancy_status.trigger}
        rules={registerFormFields.pregnancy_status.validation}
      >
        <Radio.Group
          options={pregnancyStatusOptions}
          optionType="button"
          buttonStyle="solid"
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.chipNumber"
            defaultMessage="register.chipNumber"
          />
        }
        name="chip_number"
        required={registerFormFields.chip_number.required}
        validateTrigger={registerFormFields.chip_number.trigger}
        rules={registerFormFields.chip_number.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.chipNumber.placeholder',
            defaultMessage: 'register.chipNumber.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.variety"
            defaultMessage="register.variety"
          />
        }
        name="variety"
        required={registerFormFields.variety.required}
        validateTrigger={registerFormFields.variety.trigger}
        rules={registerFormFields.variety.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.variety.placeholder',
            defaultMessage: 'register.variety.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.patientType"
            defaultMessage="register.patientType"
          />
        }
        name="patient_type"
        required={registerFormFields.patient_type.required}
        validateTrigger={registerFormFields.patient_type.trigger}
        rules={registerFormFields.patient_type.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.patientType.placeholder',
            defaultMessage: 'register.patientType.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.referringPhysician"
            defaultMessage="register.referringPhysician"
          />
        }
        name="ref_physician"
        required={registerFormFields.ref_physician.required}
        validateTrigger={registerFormFields.ref_physician.trigger}
        rules={registerFormFields.ref_physician.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.referringPhysician.placeholder',
            defaultMessage: 'register.referringPhysician.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.operatorId"
            defaultMessage="register.operatorId"
          />
        }
        name="operator_id"
        required={registerFormFields.operator_id.required}
        validateTrigger={registerFormFields.operator_id.trigger}
        rules={registerFormFields.operator_id.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.operatorId.placeholder',
            defaultMessage: 'register.operatorId.placeholder',
          })}
        />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.weight"
            defaultMessage="register.weight"
          />
        }
        name="weight"
        required={registerFormFields.weight.required}
        validateTrigger={registerFormFields.weight.trigger}
        rules={registerFormFields.weight.validation}
      >
        <InputNumber min={0} addonAfter="kg" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.thickness"
            defaultMessage="register.thickness"
          />
        }
        name="thickness"
        required={registerFormFields.thickness.required}
        validateTrigger={registerFormFields.thickness.trigger}
        rules={registerFormFields.thickness.validation}
      >
        <InputNumber min={0} addonAfter="cm" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.height"
            defaultMessage="register.height"
          />
        }
        name="length"
        required={registerFormFields.length.required}
        validateTrigger={registerFormFields.length.trigger}
        rules={registerFormFields.length.validation}
      >
        <InputNumber min={0} addonAfter="cm" style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item
        label={
          <FormattedMessage
            id="register.comment"
            defaultMessage="register.comment"
          />
        }
        name="comment"
        required={registerFormFields.comment.required}
        validateTrigger={registerFormFields.comment.trigger}
        rules={registerFormFields.comment.validation}
      >
        <Input
          placeholder={intl.formatMessage({
            id: 'register.comment.placeholder',
            defaultMessage: 'register.comment.placeholder',
          })}
        />
      </Form.Item>
    </Form>
  );
};

export default BasicInfoForm;