235 lines
8.4 KiB
TypeScript
235 lines
8.4 KiB
TypeScript
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;
|