fe_portal_manage_frontend/src/pages/noticeManage/NoticeManageForm.tsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Tabs, message, Button } from 'antd';
import { useIntl } from 'umi';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { TopStatus, EnglishSetting } from '@/dicts/noticeManageDict';
import { addNotice, updateNotice, getNoticeDetail } from '@/servers/api/notice';
import styles from './noticeManage.less';

const { TabPane } = Tabs;

interface NoticeManageFormProps {
  id?: string;
  isEdit: boolean;
  onSuccess: () => void;
}

const NoticeManageForm: React.FC<NoticeManageFormProps> = ({ id, isEdit, onSuccess }) => {
  const intl = useIntl();
  const [form] = Form.useForm();
  const [activeTabKey, setActiveTabKey] = useState<string>('zh');
  const [loading, setLoading] = useState<boolean>(false);

  // 获取详情数据
  useEffect(() => {
    const fetchNoticeDetail = async (noticeId: string) => {
      setLoading(true);
      try {
        const response = await getNoticeDetail(noticeId);
        if (response && response.success) {
          const detail = response.data;
          form.setFieldsValue({
            isTop: detail.isTop === TopStatus.YES,
            titleZh: detail.title,
            titleEn: detail.titleEn,
            contentZh: detail.content,
            contentEn: detail.contentEn,
            settingEn: detail.settingEn === '1',
          });
        } else {
          message.error(response.message || '获取详情失败');
        }
      } catch (error) {
        console.error('获取通知详情失败:', error);
        message.error('获取详情失败');
      } finally {
        setLoading(false);
      }
    };

    if (isEdit && id) {
      fetchNoticeDetail(id);
    }
  }, [isEdit, id, form]);

  // 处理Tab切换
  const handleTabChange = (key: string) => {
    setActiveTabKey(key);
  };

  // 提交表单
  const handleSubmit = async () => {
    setLoading(true);
    try {
      // 一次性验证所有表单项
      try {
        await form.validateFields();
      } catch (error: any) {
        console.log(error);
        // 如果有验证错误，自动切换到相应Tab
        if (error.errorFields && error.errorFields.length > 0) {
          // 获取第一个错误字段
          const firstError = error.errorFields[0];
          const fieldName = firstError.name[0];

          // 根据字段名判断应该切换到哪个Tab
          if (fieldName === 'titleZh' || fieldName === 'contentZh') {
            setActiveTabKey('zh');
          } else if (fieldName === 'titleEn' || fieldName === 'contentEn') {
            setActiveTabKey('en');
          }
        }

        message.error(intl.formatMessage({ id: 'notice.message.validate.fail' }));
        throw error;
      }

      // 获取所有表单值
      const values = form.getFieldsValue();

      // 转换表单数据为API需要的格式
      const requestData = {
        title: values.titleZh,
        titleEn: values.titleEn || '',
        content: values.contentZh,
        contentEn: values.contentEn || '',
        isTop: values.isTop ? TopStatus.YES : TopStatus.NO,
        settingEn: values.settingEn ? EnglishSetting.YES : EnglishSetting.NO,
      };

      let response;
      if (isEdit && id) {
        response = await updateNotice(id, requestData);
      } else {
        response = await addNotice(requestData);
      }

      if (response && response.success) {
        message.success(intl.formatMessage({
          id: isEdit ? 'notice.message.update.success' : 'notice.message.add.success'
        }));
        onSuccess(); // 回调父组件
      } else {
        message.error(response.message || intl.formatMessage({
          id: isEdit ? 'notice.message.update.fail' : 'notice.message.add.fail'
        }));
      }
    } catch (error: any) {
      console.error('表单验证或提交失败:', error);
      // 错误已在前面处理
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Form form={form} layout="vertical" name="noticeForm" preserve={false}>
        <Form.Item name="isTop" label={intl.formatMessage({ id: 'notice.field.isTop' })} valuePropName="checked">
          <Switch />
        </Form.Item>

        <Form.Item name="settingEn" label={intl.formatMessage({ id: 'notice.field.settingEn' })} valuePropName="checked">
          <Switch />
        </Form.Item>

        <Tabs activeKey={activeTabKey} onChange={handleTabChange}>
          <TabPane tab={intl.formatMessage({ id: 'notice.tab.chinese' })} key="zh" forceRender={true}>
            <Form.Item
              name="titleZh"
              label={intl.formatMessage({ id: 'notice.field.title' })}
              rules={[{ required: true, message: intl.formatMessage({ id: 'notice.form.title.required' }) }]}
            >
              <Input placeholder={intl.formatMessage({ id: 'notice.form.title.placeholder' })} />
            </Form.Item>

            <Form.Item
              name="contentZh"
              label={intl.formatMessage({ id: 'notice.field.content' })}
              rules={[{ required: true, message: intl.formatMessage({ id: 'notice.form.content.required' }) }]}
            >
              <WangEditor
                language="zh-CN"
                height="300px"
                placeholder={intl.formatMessage({ id: 'notice.form.content.placeholder' })}
              />
            </Form.Item>
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'notice.tab.english' })} key="en" forceRender={true}>
            <Form.Item
              name="titleEn"
              label={intl.formatMessage({ id: 'notice.field.titleEn' })}
              rules={[{ required: form.getFieldValue('settingEn'), message: intl.formatMessage({ id: 'notice.form.titleEn.required' }) }]}
            >
              <Input placeholder={intl.formatMessage({ id: 'notice.form.titleEn.placeholder' })} />
            </Form.Item>

            <Form.Item
              name="contentEn"
              label={intl.formatMessage({ id: 'notice.field.contentEn' })}
              rules={[{ required: form.getFieldValue('settingEn'), message: intl.formatMessage({ id: 'notice.form.contentEn.required' }) }]}
            >
              <WangEditor
                language="en"
                height="300px"
                placeholder={intl.formatMessage({ id: 'notice.form.contentEn.placeholder' })}
              />
            </Form.Item>
          </TabPane>
        </Tabs>
      </Form>
      <div className={styles.formActions}>
        <Button onClick={() => onSuccess()}>
          {intl.formatMessage({ id: 'notice.button.cancel' })}
        </Button>
        <Button
          type="primary"
          loading={loading}
          onClick={handleSubmit}
        >
          {intl.formatMessage({ id: 'notice.button.submit' })}
        </Button>
      </div>
    </div>
  );
};

export default NoticeManageForm;