228 lines
7.9 KiB
JavaScript
228 lines
7.9 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import { createMemo, getForumSectionList, getMemoByEditor, updateMemo } from "../api";
|
||
import './index.scss';
|
||
import { Divider, Form, Input, Cascader, Select, Breadcrumb, Upload, Button, Icon, Radio, message } from "antd";
|
||
import RichEditor from '../../forge/Component/RichEditor';
|
||
import UploadImage from '../../forge/Team/Component/UploadImage';
|
||
import { httpUrl } from "../fetch";
|
||
const { Option } = Select;
|
||
|
||
function EditForum(props) {
|
||
const { match, form, history, location:{ search } } = props;
|
||
const { id } = match.params;
|
||
const { getFieldDecorator, validateFields, setFieldsValue, getFieldsValue } = form;
|
||
const searchParams = new URLSearchParams(search.substring(1));
|
||
const sec = searchParams.get("sec");
|
||
const [sectionList, setSectionList] = useState([]);
|
||
const [fileList, setFileList] = useState(undefined);
|
||
const [detail, setDetail] = useState(undefined);
|
||
const { is_original } = getFieldsValue();
|
||
|
||
useEffect(() => {
|
||
getForumSectionList().then(res => {
|
||
const processedSections = res.forum_sections.map(item => {
|
||
const section = {
|
||
value: item.id,
|
||
label: item.name,
|
||
};
|
||
if (item.children_tags && !!item.children_tags.length) {
|
||
section.children = item.children_tags.map(ele => ({
|
||
value: ele.id,
|
||
label: ele.title,
|
||
}));
|
||
}
|
||
return section;
|
||
});
|
||
setSectionList(processedSections);
|
||
if(!!sec && !id){
|
||
setFieldsValue({
|
||
// 转成int数组
|
||
forumList: sec.split(",").map(item => parseInt(item))
|
||
})
|
||
}
|
||
})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
if (id) {
|
||
getMemoByEditor(id).then(res => {
|
||
setDetail(res)
|
||
const {subject, forum_section: {forum_id}, children_forum_section: {children_forum_id}, attachments_url=[]} = res;
|
||
document.title = `编辑-${subject}`;
|
||
const files = attachments_url.map(item=>{
|
||
return {
|
||
name: item.title,
|
||
uid: item.id,
|
||
id: item.id
|
||
}
|
||
})
|
||
setFieldsValue({
|
||
...res,
|
||
forumList:[forum_id,children_forum_id],
|
||
is_original: res.is_original? 1 : 0,
|
||
attachments: {fileList: files}
|
||
})
|
||
setFileList(files)
|
||
})
|
||
} else {
|
||
document.title = `新增-论坛交流`;
|
||
setFieldsValue({
|
||
is_original: 1
|
||
})
|
||
}
|
||
}, [])
|
||
|
||
function beforeUpload(file) {
|
||
const isLt100M = file.size / 1024 / 1024 < 100;
|
||
if (!isLt100M) {
|
||
message.error(`文件大小必须小于${100}MB!`);
|
||
}
|
||
return isLt100M;
|
||
}
|
||
|
||
function changeFileList(info) {
|
||
if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
|
||
const fileList = info.fileList || [];
|
||
setFileList(fileList);
|
||
}
|
||
}
|
||
|
||
const submitForm = () => {
|
||
validateFields((error, values) => {
|
||
if (!error) {
|
||
const {attachments} = values;
|
||
const attachmentIdArray = attachments && attachments.fileList.map(item => item.response && item.response.id ? item.response.id : item.id ? item.id : item)
|
||
const params = {
|
||
attachment_id: values.attachment_id,
|
||
attachments: attachmentIdArray,
|
||
children_forum_id: values.forumList[1] || '0',
|
||
forum_id: values.forumList[0],
|
||
id,
|
||
memo: {
|
||
content: values.content,
|
||
is_original: values.is_original,
|
||
reprint_link: values.reprint_link,
|
||
subject: values.subject,
|
||
tag_id: values.tag_id,
|
||
},
|
||
}
|
||
if (id) {
|
||
updateMemo(params).then(ret => {
|
||
message.success(ret.message);
|
||
if(ret.status === 1){
|
||
history.push("/forums/" + id);
|
||
}
|
||
})
|
||
}else {
|
||
createMemo(params).then(ret => {
|
||
message.success(ret.message);
|
||
if(ret.status === 1){
|
||
history.push("/forums/" + ret.memo_id);
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
const layout = {
|
||
labelCol: { span: 2 },
|
||
wrapperCol: { span: 14 },
|
||
};
|
||
|
||
return <div className="forums_edit_box pt30 pb10">
|
||
<div className="width1600 mb20">
|
||
<Breadcrumb separator=">">
|
||
<Breadcrumb.Item href={`/forums`}>论坛交流</Breadcrumb.Item>
|
||
{id && detail && <Breadcrumb.Item href={`/forums/${id}`}>{detail.subject}</Breadcrumb.Item>}
|
||
<Breadcrumb.Item>{id ? '编辑' : '新建'}帖子</Breadcrumb.Item>
|
||
</Breadcrumb>
|
||
</div>
|
||
<div className="width1600 forums_edit_content mb100">
|
||
<h3>{id ? `编辑` : `新增`}</h3>
|
||
<Divider className="mt10" />
|
||
<Form {...layout} className="forum_edit_form">
|
||
<Form.Item label="标题">
|
||
{getFieldDecorator("subject", {
|
||
rules: [{ required: true, message: "请输入标题" }]
|
||
})(
|
||
<Input placeholder="请输入标题" maxLength={500} />
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="主题板块">
|
||
{getFieldDecorator("forumList", {
|
||
rules: [{ required: true, message: "请选择主题板块" }]
|
||
})(
|
||
<Cascader options={sectionList} placeholder="请选择主题板块" ></Cascader>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="帖子标签">
|
||
{getFieldDecorator("tag_id", {
|
||
rules: [{ required: true, message: "请选择帖子标签" }]
|
||
})(
|
||
<Select placeholder="请选择帖子标签" >
|
||
<Option value={1}>交流</Option>
|
||
<Option value={2}>求助</Option>
|
||
<Option value={3}>新闻</Option>
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="是否原创">
|
||
{getFieldDecorator("is_original", {
|
||
rules: [{ required: true, message: "请选择是否原创" }]
|
||
})(
|
||
<Radio.Group>
|
||
<Radio value={1}>是</Radio>
|
||
<Radio value={0}>否</Radio>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
{!is_original && <Form.Item label="转载自">
|
||
{getFieldDecorator("reprint_link")(
|
||
<Input placeholder="请输入转载自" />
|
||
)}
|
||
</Form.Item>}
|
||
<Form.Item label="内容" wrapperCol={{ span: 22 }}>
|
||
{getFieldDecorator("content", {
|
||
rules: [{ required: true, message: "请输入内容" }],
|
||
})(
|
||
<RichEditor uploadUrl={`${httpUrl}/api/attachments.json`} videoUploadUrl={`${httpUrl}/api/attachments.json`} setValue={(value) => { setFieldsValue({ "content": value }) }} />
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="头图" extra="上传png、jpg、jpeg格式的图片">
|
||
{getFieldDecorator("attachment_id")(
|
||
<UploadImage url={detail && detail.memo_image_info ? encodeURI(`${httpUrl}${detail.memo_image_info.url}`) : undefined} maxSize={5} getImageId={(id) => setFieldsValue({ "attachment_id": id })} action={`${httpUrl}/api/attachments.json`} />
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="上传附件">
|
||
{getFieldDecorator('attachments')(
|
||
<Upload.Dragger action={`${httpUrl}/api/attachments.json`} beforeUpload={beforeUpload} onChange={changeFileList} fileList={fileList}>
|
||
<p className="ant-upload-drag-icon">
|
||
<Icon type="inbox" />
|
||
</p>
|
||
<p className="mt10">点击或拖拽文件到此区域上传，文件大小不超过 100MB</p>
|
||
</Upload.Dragger>)}
|
||
</Form.Item>
|
||
<div className="ml100 pt30">
|
||
<Form.Item className="submit_button">
|
||
<Button
|
||
className="mr20"
|
||
onClick={() => {
|
||
history.push("/forums");
|
||
}}
|
||
>
|
||
返回
|
||
</Button>
|
||
<Button type="primary" onClick={submitForm}>
|
||
提交
|
||
</Button>
|
||
</Form.Item>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>;
|
||
}
|
||
|
||
export default Form.create()(EditForum); |