import {
|
createHealthPopularization,
|
getHealthPopularizationDetail,
|
updateHealthPopularization,
|
uploadHealthPopularizationImage,
|
} from './service';
|
import BraftEditorCom from '@/components/BraftEditor';
|
import { PlusOutlined } from '@ant-design/icons';
|
import { history, useAccess } from '@umijs/max';
|
import { Button, Form, Image, Input, InputNumber, Switch, Upload, message } from 'antd';
|
import React, { useEffect, useMemo, useState } from 'react';
|
import './style.less';
|
|
const HealthPopularizationManagePage: React.FC = () => {
|
const access = useAccess();
|
const [form] = Form.useForm();
|
const [loading, setLoading] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
const [uploadingCover, setUploadingCover] = useState(false);
|
const [coverImg, setCoverImg] = useState('');
|
const pathname = history.location.pathname;
|
const isCreate = pathname.endsWith('/create');
|
const listPagePath = '/live/promotion/health-popularization';
|
const recordId = useMemo(() => {
|
if (isCreate) {
|
return '';
|
}
|
const segments = pathname.split('/');
|
return segments[segments.length - 2] || '';
|
}, [isCreate, pathname]);
|
const canAccess = isCreate ? access['live:health-popularization:add'] : access['live:health-popularization:edit'];
|
|
useEffect(() => {
|
if (!canAccess) {
|
history.replace('/Welcome');
|
return;
|
}
|
const bootstrap = async () => {
|
setLoading(true);
|
try {
|
if (isCreate) {
|
setCoverImg('');
|
form.setFieldsValue({
|
title: '',
|
content: '',
|
sort: 0,
|
status: true,
|
isHomeRecommend: true,
|
});
|
return;
|
}
|
const res = await getHealthPopularizationDetail(recordId);
|
const detail = res.data;
|
setCoverImg(detail.coverImg || '');
|
form.setFieldsValue({
|
title: detail.title,
|
coverImg: detail.coverImg,
|
content: detail.content || '',
|
sort: detail.sort ?? 0,
|
status: detail.status === 1,
|
isHomeRecommend: detail.isHomeRecommend === 1,
|
});
|
} finally {
|
setLoading(false);
|
}
|
};
|
bootstrap();
|
}, [canAccess, form, isCreate, recordId]);
|
|
const handleSubmit = async () => {
|
const values = await form.validateFields();
|
const payload = {
|
title: values.title?.trim(),
|
coverImg,
|
contentType: 1,
|
content: values.content,
|
sort: values.sort,
|
status: values.status ? 1 : 0,
|
isHomeRecommend: values.isHomeRecommend ? 1 : 0,
|
};
|
setSubmitting(true);
|
try {
|
if (isCreate) {
|
await createHealthPopularization(payload);
|
message.success('新增成功');
|
} else {
|
await updateHealthPopularization(recordId, payload);
|
message.success('保存成功');
|
}
|
history.replace(`${listPagePath}?refresh=${Date.now()}`);
|
} finally {
|
setSubmitting(false);
|
}
|
};
|
|
return (
|
<div className="health-popularization-page">
|
<div className="health-popularization-page__panel">
|
<div className="health-popularization-page__title">{isCreate ? '添加健康知识' : '编辑健康知识'}</div>
|
<Form form={form} layout="vertical" className="health-popularization-edit-form">
|
<div className="health-popularization-edit-form__section-title">信息</div>
|
<div className="health-popularization-edit-form__grid">
|
<Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
|
<Input placeholder="请输入" maxLength={128} disabled={loading} />
|
</Form.Item>
|
<Form.Item label="视频封面图" className="health-popularization-edit-form__upload" required>
|
<Form.Item name="coverImg" rules={[{ required: true, message: '请上传视频封面图' }]} hidden>
|
<Input />
|
</Form.Item>
|
<Upload
|
accept="image/*"
|
showUploadList={false}
|
customRequest={async (options) => {
|
setUploadingCover(true);
|
try {
|
const res = await uploadHealthPopularizationImage(options.file as File);
|
const url = res.data?.url;
|
if (!url) {
|
throw new Error('upload failed');
|
}
|
setCoverImg(url);
|
form.setFieldsValue({ coverImg: url });
|
options.onSuccess?.(res);
|
} catch (error) {
|
message.error('封面图上传失败');
|
options.onError?.(error as Error);
|
} finally {
|
setUploadingCover(false);
|
}
|
}}
|
>
|
<div className="health-popularization-edit-form__cover-box">
|
{coverImg ? (
|
<Image src={coverImg} width={96} height={96} preview={false} />
|
) : uploadingCover ? (
|
'上传中...'
|
) : (
|
<PlusOutlined />
|
)}
|
</div>
|
</Upload>
|
</Form.Item>
|
<div className="health-popularization-edit-form__switch-group">
|
<div className="health-popularization-edit-form__switch-item">
|
<span className="health-popularization-edit-form__switch-label">是否启用</span>
|
<Form.Item name="status" valuePropName="checked" rules={[{ required: true, message: '请选择是否启用' }]}>
|
<Switch />
|
</Form.Item>
|
</div>
|
<div className="health-popularization-edit-form__switch-item">
|
<span className="health-popularization-edit-form__switch-label">首页推荐</span>
|
<Form.Item
|
name="isHomeRecommend"
|
valuePropName="checked"
|
rules={[{ required: true, message: '请选择是否首页推荐' }]}
|
>
|
<Switch />
|
</Form.Item>
|
</div>
|
</div>
|
<Form.Item label="排序" name="sort" rules={[{ required: true, message: '请输入排序' }]}>
|
<InputNumber min={0} precision={0} placeholder="请输入" style={{ width: '100%' }} disabled={loading} />
|
</Form.Item>
|
<Form.Item
|
label="内容详情"
|
name="content"
|
className="health-popularization-edit-form__editor-item"
|
rules={[{ required: true, message: '请输入科普内容' }]}
|
>
|
<div className="health-popularization-edit-form__editor">
|
<BraftEditorCom
|
data={form.getFieldValue('content') || ''}
|
resultCallback={(html: string) => form.setFieldsValue({ content: html })}
|
/>
|
</div>
|
</Form.Item>
|
</div>
|
<div className="health-popularization-edit-form__footer">
|
<Button onClick={() => history.push(listPagePath)}>取消</Button>
|
<Button type="primary" loading={submitting} onClick={handleSubmit}>
|
保存
|
</Button>
|
</div>
|
</Form>
|
</div>
|
</div>
|
);
|
};
|
|
export default HealthPopularizationManagePage;
|
