forked from Gitlink/forgeplus-react
373 lines
12 KiB
JavaScript
373 lines
12 KiB
JavaScript
import React, { useCallback, useState, useEffect, forwardRef } from "react";
|
||
import { Banner, WhiteBack, AlignCenter, Greenback } from "./css/layout";
|
||
import { Form, Input, Select, Radio, Button, notification, Spin } from "antd";
|
||
import MDEditor from "../modules/tpm/challengesnew/tpm-md-editor";
|
||
import Uplaod from "../forge/Upload/Index";
|
||
import UplaodCover from "../forge/Upload/Cover";
|
||
import Attachments from '../forge/Upload/attachment';
|
||
import "./css/All.scss";
|
||
import axios from "axios";
|
||
|
||
const Option = Select.Option;
|
||
|
||
// forum_id: values.forum_id, //大主题版块的id, int类型 （必填）
|
||
// attachment_id: ImgInfo.attachment_id, //上传的封面id
|
||
// children_forum_id: values.children_forum_id, //小主题版块的id，int类型
|
||
// attachments, //上传的附件id数组
|
||
// memo: {
|
||
// //帖子的相关内容
|
||
// subject: values.subject, // 帖子的标题 （必填）
|
||
// content, //帖子的内容 （必填）
|
||
// tag_id: values.tag_id, //帖子的标签，1为交流，2为求助（必填）
|
||
// is_original: values.is_original, //是否原创，默认为true，（必填）
|
||
// reprint_link: values.reprint_link, //转载链接，仅当is_original为false时，出现
|
||
// }
|
||
function New(props, ref) {
|
||
const {
|
||
form: { getFieldDecorator, validateFields, setFieldsValue },
|
||
} = props;
|
||
const [parentPlate, setParentPlate] = useState(undefined); //父版块
|
||
const [childPlate, setChildPlate] = useState(undefined); //子版块
|
||
const [content, setContent] = useState(""); //内容
|
||
const [ImgInfo, setImgInfo] = useState(undefined); //封面图信息
|
||
const [attachments, setAttachments] = useState(undefined); //上传附件的id数组
|
||
const [spinning, setSpining] = useState(false);
|
||
|
||
const [ fileList ,setFileList ] = useState(undefined);
|
||
|
||
const [ originalType , setOriginalType ] = useState(2);
|
||
|
||
let forumId = props.match.params.forumId;
|
||
|
||
useEffect(() => {
|
||
setFieldsValue({
|
||
tag_id: 1,
|
||
is_original: 0,
|
||
});
|
||
getPlate();
|
||
}, []);
|
||
|
||
function getDetail(plate){
|
||
if(forumId){
|
||
const url = `/memos/${forumId}/edit.json`;
|
||
axios.get(url).then(result=>{
|
||
if(result){
|
||
setContent(result.data.content);
|
||
|
||
let forum_id = result.data.forum_section && result.data.forum_section.forum_id;
|
||
let child = plate && plate.filter((item) => item.id === forum_id);
|
||
let memo_original = result.data.is_original ? 1 : 0
|
||
setChildPlate(child && child.length>0 && child[0].children_tags);
|
||
setOriginalType(memo_original)
|
||
setFieldsValue({
|
||
...result.data,
|
||
forum_id,
|
||
tag_id: result.data.tag_id,
|
||
children_forum_id: result.data.children_forum_section && result.data.children_forum_section.children_forum_id ? result.data.forum_section_id : undefined,
|
||
is_original: memo_original
|
||
});
|
||
let attachments_url = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
|
||
return({
|
||
title:item.title,
|
||
...item
|
||
})
|
||
});
|
||
let array = result.data.attachments_url && result.data.attachments_url.map((item,key)=>{
|
||
return item.id
|
||
})
|
||
setAttachments(array);
|
||
setFileList(attachments_url);
|
||
setImgInfo(result.data.memo_image_info);
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
}
|
||
|
||
// 获取所有版块
|
||
function getPlate() {
|
||
setSpining(true);
|
||
|
||
const url = `/forum_sections.json`;
|
||
axios.get(url)
|
||
.then((result) => {
|
||
if (result && result.data) {
|
||
setParentPlate(result.data.forum_sections);
|
||
setFieldsValue({
|
||
forum_id: 0,
|
||
});
|
||
if(forumId){
|
||
getDetail(result.data.forum_sections);
|
||
}
|
||
setSpining(false);
|
||
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
// 切换主题版块
|
||
function changeParent(e) {
|
||
let child = parentPlate.filter((item) => item.id === e);
|
||
if (child && child.length === 1) {
|
||
setChildPlate(child[0].children_tags);
|
||
setFieldsValue({
|
||
children_forum_id:
|
||
child[0].children_tags && child[0].children_tags.length > 0
|
||
? child[0].children_tags[0].id
|
||
: "",
|
||
});
|
||
} else {
|
||
setChildPlate(undefined);
|
||
setFieldsValue({
|
||
children_forum_id: "",
|
||
});
|
||
}
|
||
}
|
||
|
||
const helper = useCallback(
|
||
(label, name, rules, widget, isRequired) => (
|
||
<React.Fragment>
|
||
<span className={isRequired ? "lables must" : "lables"}>{label}</span>
|
||
<Form.Item>
|
||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||
</Form.Item>
|
||
</React.Fragment>
|
||
),
|
||
[]
|
||
);
|
||
|
||
// 修改内容
|
||
function onContentChange(e) {
|
||
setContent(e);
|
||
}
|
||
|
||
// 上传的图片
|
||
function UploadFunc(e) {
|
||
attachments && attachments.length>0 && attachments.map((item,key)=>{
|
||
return e.push(item && item.id)
|
||
});
|
||
setAttachments(e);
|
||
}
|
||
|
||
// 获取封面图片
|
||
function getImageUrl(imgId) {
|
||
setImgInfo(imgId);
|
||
}
|
||
|
||
// 返回
|
||
function returnNew() {
|
||
props.history.goBack();
|
||
}
|
||
// 提交
|
||
function sureNew() {
|
||
validateFields((error, values) => {
|
||
if (!error) {
|
||
setSpining(true);
|
||
let params = {
|
||
forum_id: values.forum_id,
|
||
attachment_id: ImgInfo && ImgInfo.id,
|
||
children_forum_id: values.children_forum_id,
|
||
attachments,
|
||
memo: {
|
||
subject: values.subject,
|
||
content,
|
||
tag_id: values.tag_id,
|
||
is_original: values.is_original,
|
||
reprint_link: values.reprint_link,
|
||
}
|
||
}
|
||
if(forumId){
|
||
// 编辑保存
|
||
const url = `/memos/${forumId}.json`;
|
||
axios.put(url, params).then((result) => {
|
||
if (result && result.data) {
|
||
notification.open({
|
||
message: "提示",
|
||
description: result.data.message,
|
||
});
|
||
if(result.data.status === 1){
|
||
props.history.push(`/forums/${forumId}/detail`);
|
||
}
|
||
setSpining(false);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
setSpining(true);
|
||
console.log(error);
|
||
});
|
||
}else{
|
||
// 新建提交
|
||
const url = `/memos.json`;
|
||
console.log("params", params)
|
||
|
||
axios.post(url, params).then((result) => {
|
||
if (result && result.data) {
|
||
notification.open({
|
||
message: "提示",
|
||
description: result.data.message,
|
||
});
|
||
|
||
if(result.data.status === 1){
|
||
props.history.push(`/forums/${result.data.memo_id}/detail`);
|
||
}
|
||
setSpining(false);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
setSpining(false);
|
||
console.log(error);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function showNotification(description){
|
||
notification.open({
|
||
message:"提示",
|
||
description
|
||
})
|
||
}
|
||
|
||
function changeOriginal(e){
|
||
setOriginalType(e.target.value);
|
||
}
|
||
// 编辑删除附件时获取删除后剩余的数组
|
||
function deleteFunc(id){
|
||
let team = attachments && attachments.length>0 && attachments.filter(item=>item!==id);
|
||
setAttachments(team);
|
||
}
|
||
return (
|
||
<div className="educontent pt20 pb30">
|
||
<WhiteBack>
|
||
<Banner>{ forumId ? "编辑" : "新建"}</Banner>
|
||
<Spin spinning={spinning}>
|
||
<Form className="formStyle">
|
||
{helper(
|
||
"标题",
|
||
"subject",
|
||
[{ required: true, message: "请输入标题" }],
|
||
<Input placeholder="请输入标题" maxLength={200} />,
|
||
true
|
||
)}
|
||
{helper(
|
||
"内容",
|
||
"content",
|
||
[{ required: true, message: "请输入内容" }],
|
||
<MDEditor
|
||
placeholder={"请输入描述信息"}
|
||
watch={true}
|
||
height={250}
|
||
mdID={"oj-description"}
|
||
initValue={content}
|
||
onChange={onContentChange}
|
||
></MDEditor>,
|
||
true
|
||
)}
|
||
<div className="mb20">
|
||
<Uplaod
|
||
className="UploadStyle"
|
||
isComplete={true}
|
||
load={UploadFunc}
|
||
content={
|
||
<div>
|
||
<span className="green">上传附件</span>
|
||
<span className="grey-9">（单个文件50M以内）</span>
|
||
</div>
|
||
}
|
||
size={100}
|
||
></Uplaod>
|
||
{forumId && fileList && fileList.length > 0 ? (
|
||
<Attachments
|
||
attachments={fileList}
|
||
showNotification={showNotification}
|
||
canDelete={true}
|
||
deleteFunc={deleteFunc}
|
||
/>
|
||
) : (
|
||
""
|
||
)}
|
||
</div>
|
||
<p>
|
||
<span className="lables must">主题板块</span>
|
||
</p>
|
||
<div className="inlineEnd">
|
||
{helper(
|
||
"",
|
||
"forum_id",
|
||
[{ required: true, message: "请选择主题板块" }],
|
||
<Select onChange={changeParent}>
|
||
<Option value={0}>请选择主题板块</Option>
|
||
{parentPlate &&
|
||
parentPlate.length > 0 &&
|
||
parentPlate.map((item, key) => {
|
||
return <Option value={item.id}>{item.name}</Option>;
|
||
})}
|
||
</Select>
|
||
)}
|
||
{helper(
|
||
"",
|
||
"children_forum_id",
|
||
[],
|
||
<Select>
|
||
{childPlate &&
|
||
childPlate.length > 0 &&
|
||
childPlate.map((item, key) => {
|
||
return <Option value={item.id}>{item.title}</Option>;
|
||
})}
|
||
</Select>
|
||
)}
|
||
</div>
|
||
<AlignCenter className="clearfix mt20 mb10">
|
||
<span className="lables fl">上传封面：</span>
|
||
<span className="grey-9">
|
||
(只支持JPG、PNG、JPEG大小不超过2M建议尺寸4:3)
|
||
</span>
|
||
</AlignCenter>
|
||
<UplaodCover
|
||
imageUrl={ImgInfo && ImgInfo.url}
|
||
getImageUrl={getImageUrl}
|
||
/>
|
||
{helper(
|
||
"帖子标签",
|
||
"tag_id",
|
||
[{ required: true, message: "请选择帖子标签" }],
|
||
<Select style={{ width: "260px" }}>
|
||
<Option value={1}>交流</Option>
|
||
<Option value={2}>求助</Option>
|
||
</Select>,
|
||
true
|
||
)}
|
||
{helper(
|
||
"是否原创",
|
||
"is_original",
|
||
[],
|
||
<Radio.Group onChange={changeOriginal}>
|
||
<Radio value={1}>是</Radio>
|
||
<Radio value={0}>否</Radio>
|
||
</Radio.Group>,
|
||
true
|
||
)}
|
||
{ originalType !==1? helper(
|
||
"转载自",
|
||
"reprint_link",
|
||
[],
|
||
<Input style={{ width: "260px" }} placeholder="转载链接"/>
|
||
) :""}
|
||
</Form>
|
||
</Spin>
|
||
</WhiteBack>
|
||
<div className="mt20">
|
||
<Button onClick={returnNew}>返回</Button>
|
||
<Greenback onClick={sureNew} className="ml20">
|
||
{ forumId ? "保存" : "提交"}
|
||
</Greenback>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
export default Form.create()(forwardRef(New));
|