fe_supplier_frontend/src/pages/helpManage/HelpManageForm.tsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Tabs, message, Button, Select } from 'antd';
import { useIntl } from 'umi';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { TopStatus, EnglishSetting, categoryOptions } from '@/dicts/helpManageDict';
import { addHelp, updateHelp, getHelpDetail } from '@/servers/api/help';
import styles from './helpManage.less';

const { TabPane } = Tabs;
const { Option } = Select;

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

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

  // 获取详情数据
  useEffect(() => {
    const fetchHelpDetail = async (helpId: string) => {
      setLoading(true);
      try {
        const response = await getHelpDetail(helpId);
        if (response && response.success) {
          const detail = response.data;
          form.setFieldsValue({
            isTop: detail.isTop === TopStatus.YES,
            type: detail.type,
            titleZh: detail.title,
            titleEn: detail.titleEn,
            contentZh: detail.content,
            contentEn: detail.contentEn,
            answerContentZh: detail.answerContent,
            answerContentEn: detail.answerContentNe,
          });
        } else {
          message.error(response.message || intl.formatMessage({ id: 'helpManage.fetchDetailFailed' }));
        }
      } catch (error) {
        console.error('获取帮助详情失败:', error);
        message.error(intl.formatMessage({ id: 'helpManage.fetchDetailFailed' }));
      } finally {
        setLoading(false);
      }
    };

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

  // 处理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' || fieldName === 'answerContentZh') {
            setActiveTabKey('zh');
          } else if (fieldName === 'titleEn' || fieldName === 'contentEn' || fieldName === 'answerContentEn') {
            setActiveTabKey('en');
          }
        }

        throw error;
      }

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

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

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

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

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

        <Form.Item
          name="type"
          label={intl.formatMessage({ id: 'helpManage.form.category' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'helpManage.form.categoryRequired' }) }]}
        >
          <Select placeholder={intl.formatMessage({ id: 'helpManage.form.categoryPlaceholder' })}>
            {categoryOptions.map(option => (
              <Option key={option.value} value={option.value}>
                {typeof option.label === 'function' ? option.label() : option.label}
              </Option>
            ))}
          </Select>
        </Form.Item>

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

            <Form.Item
              name="contentZh"
              label={intl.formatMessage({ id: 'helpManage.form.contentZh' })}
              rules={[{ required: true, message: intl.formatMessage({ id: 'helpManage.form.contentZhRequired' }) }]}
            >
              <WangEditor
                language="zh-CN"
                height="250px"
                placeholder={intl.formatMessage({ id: 'helpManage.form.contentZhPlaceholder' })}
              />
            </Form.Item>

            <Form.Item
              name="answerContentZh"
              label={intl.formatMessage({ id: 'helpManage.form.answerContentZh' })}
            >
              <WangEditor
                language="zh-CN"
                height="200px"
                placeholder={intl.formatMessage({ id: 'helpManage.form.answerContentZhPlaceholder' })}
              />
            </Form.Item>
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'helpManage.form.englishTab' })} key="en" forceRender={true}>
            <Form.Item
              name="titleEn"
              label={intl.formatMessage({ id: 'helpManage.form.titleEn' })}
              rules={[{ required: true, message: intl.formatMessage({ id: 'helpManage.form.titleEnRequired' }) }]}
            >
              <Input placeholder={intl.formatMessage({ id: 'helpManage.form.titleEnPlaceholder' })} />
            </Form.Item>

            <Form.Item
              name="contentEn"
              label={intl.formatMessage({ id: 'helpManage.form.contentEn' })}
              rules={[{ required: true, message: intl.formatMessage({ id: 'helpManage.form.contentEnRequired' }) }]}
            >
              <WangEditor
                language="en"
                height="250px"
                placeholder={intl.formatMessage({ id: 'helpManage.form.contentEnPlaceholder' })}
              />
            </Form.Item>

            <Form.Item
              name="answerContentEn"
              label={intl.formatMessage({ id: 'helpManage.form.answerContentEn' })}
            >
              <WangEditor
                language="en"
                height="200px"
                placeholder={intl.formatMessage({ id: 'helpManage.form.answerContentEnPlaceholder' })}
              />
            </Form.Item>
          </TabPane>
        </Tabs>
      </Form>
      <div className={styles.formActions}>
        <Button onClick={() => onSuccess()}>
          {intl.formatMessage({ id: 'helpManage.cancel' })}
        </Button>
        <Button
          type="primary"
          loading={loading}
          onClick={handleSubmit}
        >
          {intl.formatMessage({ id: 'helpManage.submit' })}
        </Button>
      </div>
    </div>
  );
};

export default HelpManageForm;