forked from Gitlink/forgeplus-react
131 lines
3.6 KiB
JavaScript
131 lines
3.6 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import { WhiteBack } from "../css/layout";
|
||
import Title from "./Title";
|
||
import { Modal, Button, Input , notification, message } from "antd";
|
||
import Nodata from "../Nodata";
|
||
import axios from 'axios';
|
||
|
||
const TextArea = Input.TextArea;
|
||
export default (({ content , operation ,plateId }) => {
|
||
const [word, setWord] = useState(undefined);
|
||
const [editWord, setEditWord] = useState(undefined);
|
||
const [show, setShow] = useState(false);
|
||
const [visible, setVisible] = useState(false);
|
||
const [AnnModalType, setAnnModalType] = useState(1); //默认为1：查看，否则为编辑
|
||
|
||
let child = document.getElementById("annWords") && document.getElementById("annWords").offsetHeight;
|
||
useEffect(() => {
|
||
if (content) {
|
||
setWord(content.notice);
|
||
}
|
||
}, [content]);
|
||
|
||
useEffect(() => {
|
||
changeShow();
|
||
}, [word, child , content]);
|
||
|
||
// 保存公告
|
||
function saveAnn() {
|
||
setWord(editWord);
|
||
setVisible(false);
|
||
// 调用保存接口
|
||
if(editWord){
|
||
const url = `/forum_sections/${plateId}/edit_notice.json`;
|
||
axios.post(url,{
|
||
content:editWord
|
||
}).then(result=>{
|
||
if(result && result.data){
|
||
notification.open({message:"提示",description:result.data.message});
|
||
changeShow();
|
||
}
|
||
}).catch(error=>{
|
||
console.log(error);
|
||
})
|
||
}
|
||
}
|
||
|
||
function changeShow(){
|
||
let p = document.getElementById("annContent")&& document.getElementById("annContent").offsetHeight;
|
||
let c = document.getElementById("annWords") &&document.getElementById("annWords").offsetHeight;
|
||
if (c > p) {
|
||
setShow(true);
|
||
}else{
|
||
setShow(false);
|
||
}
|
||
}
|
||
// 取消编辑公告
|
||
function cancelAnn() {
|
||
setEditWord(word);
|
||
setVisible(false);
|
||
}
|
||
|
||
// 查看(1)或者编辑(2)
|
||
function changeAnnModalType(type) {
|
||
setAnnModalType(type);
|
||
setVisible(true);
|
||
setEditWord(word);
|
||
}
|
||
|
||
function changeText(e) {
|
||
setEditWord(e.target.value);
|
||
}
|
||
return (
|
||
<WhiteBack>
|
||
<Modal
|
||
visible={visible}
|
||
title="公告"
|
||
closable={true}
|
||
onCancel={()=>setVisible(false)}
|
||
footer={
|
||
AnnModalType === 1 ? false : <div>
|
||
<Button onClick={cancelAnn}>取消</Button>
|
||
<Button onClick={saveAnn} type={"primary"}>
|
||
发布
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
{AnnModalType === 1 ? (
|
||
<p style={{ maxHeight: "100px", overflowY: "auto" }}>{word}</p>
|
||
) : (
|
||
<TextArea
|
||
placeholder="填写公告，1～600字"
|
||
value={editWord}
|
||
rows={5}
|
||
onChange={changeText}
|
||
/>
|
||
)}
|
||
</Modal>
|
||
<Title>
|
||
<span>公告</span>
|
||
{
|
||
operation ?
|
||
<a onClick={() => changeAnnModalType(2)}>
|
||
<i className="iconfont icon-bianji3 grey-9"></i>
|
||
</a>:""
|
||
}
|
||
</Title>
|
||
<div style={{ padding: "10px 30px" }} className="pr">
|
||
{word ? (
|
||
<React.Fragment>
|
||
<div id="annContent" className="annContent">
|
||
<p id="annWords" className="annWords">
|
||
{word}
|
||
</p>
|
||
</div>
|
||
<span className="grey-8">版主：{content.name}</span>
|
||
</React.Fragment>
|
||
) : (
|
||
<Nodata _html={"暂无公告"} />
|
||
)}
|
||
{
|
||
word && show === true ?
|
||
<a className="annBtn" onClick={() => changeAnnModalType(1)}>
|
||
…<span className="green ml4">查看</span>
|
||
</a> : ""
|
||
}
|
||
</div>
|
||
</WhiteBack>
|
||
);
|
||
});
|