react wangeditor使用
import * as React from 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import E from 'wangeditor'
import iframeIp from '@config/index'
import './index.less'
import bgImg from '../../assets/images/index/home_bg.png'
import HttpClient from '@utils/HttpClient'
import wordIp from '@utils/wordDowload'
const { Header, Sider, Content } = Layout
const confirm = Modal.confirm
export interface IProps extends FormComponentProps {
form: any
}
interface IState {
currentPage: any
pageSize: any
total: any
reportList: any
width: any
collapsed: any
Ind: any
noticeContent: any
isShowNotice: any
uploadFileLists: any
noticeFileList: any
firstDetailId: any
flagFirst: any
isCurrent: any
editorContent: any
required: any
}
class MonthReport extends React.Component<IProps, IState> {
iframe: any
editorElem: any
constructor(props: IProps) {
super(props)
const index = Number(wordIp.getQueryString(window.location.hash, 'index'))
const id = wordIp.getQueryString(window.location.hash, 'id')
this.state = {
editorContent: '',
currentPage: 1,
pageSize: 20,
total: 0,
reportList: [],
noticeFileList: [],
width: 360,
collapsed: 'block',
Ind: index,
noticeContent: '#',
isShowNotice: true,
uploadFileLists: [],
firstDetailId: '0',
flagFirst: false,
isCurrent: id,
required: true
}
this.editorElem = React.createRef()
}
componentWillMount() {
const id = wordIp.getQueryString(window.location.hash, 'id')
if (id) {
// console.log(id, index)
this.getDetailContent(id)
}
}
changePage = (currentPage) => {
// console.log(currentPage)
this.setState({
currentPage
})
const { pageSize } = this.state
const params = {
pageNum: currentPage,
pageSize,
// picturecode
}
this.getMonthNoticeData(params)
}
componentDidMount() {
const params = {
pageNum: 1,
pageSize: 20
}
this.getMonthNoticeData(params)
}
onDelBulletin = (id) => {
// 修改月报审核状态
confirm({
title: '确定要删除该公告吗？',
content: '',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
// const param = {
// noticeId: id,
// }
HttpClient.delete(`/api/notice/${id}`, {}).then((res: any) => {
// console.log(res)
if (res) {
message.success('删除成功')
const { currentPage, pageSize, isCurrent } = this.state
const params = {
pageNum: currentPage,
pageSize,
}
this.getMonthNoticeData(params)
if (isCurrent === id) {
this.setState({
flagFirst: true
})
}
} else {
message.success('删除失败')
}
})
}
})
}
getMonthNoticeData = (params) => {
HttpClient.get(`/api/notice`, params).then((res: any) => {
if (res.code === '0000') {
if (res.data.records.length === 0) {
return
}
this.setState({
reportList: res.data.records,
firstDetailId: res.data.records[0].noticeId,
total: res.data.total
}, () => {
const { firstDetailId, flagFirst } = this.state
if (flagFirst) {
this.setState({
Ind: 0
})
this.getDetailContent(firstDetailId)
}
})
}
})
}
//
// 获取详情内容
getDetailContent = (id) => {
// const param = {
// noticeId: id
// }
HttpClient.get(`/api/notice/${id}`, {}).then((res: any) => {
if (res.code === '0000') {
let data = res.data
if (!data) return
data.noticeFileList.map(file => {
file.uid = file.id
file.name = file.fileName
file.url = `${iframeIp.iframeIp}/${file.filePath}`
})
this.setState({
// noticeContent: res.data.noticeContent,
noticeContent: `${iframeIp.iframeIp}/${res.data.noticeContent}`,
noticeFileList: data.noticeFileList,
flagFirst: false,
isCurrent: id
})
}
})
}
// 点击侧边栏列表
getDetail = (id, index) => {
this.setState({
Ind: index,
isShowNotice: true
}, () => {
this.getDetailContent(id)
})
}
onShowSizeChange = (currentPage, pageSize) => {
this.setState({
currentPage,
pageSize
})
const params = {
pageNum: currentPage,
pageSize,
}
this.getMonthNoticeData(params)
}
toggleWidth = () => {
const {width } = this.state
if (width === 30) {
this.setState({
width: 360,
collapsed: 'block'
})
} else {
this.setState({
width: 30,
collapsed: 'none'
})
}
}
goAddMode = () => {
this.setState({
isShowNotice: false,
flagFirst: false,
required: true,
uploadFileLists: []
}, () => {
const elem = this.editorElem
const editor = new E(elem)
// 使用 onchange 函数监听内容的变化，并实时更新到 state 中
editor.customConfig.uploadImgMaxLength = 1
// 限制图片大小
editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.onchange = html => {
this.setState({
editorContent: html
})
}
editor.create()
})
this.props.form.getFieldsValue()
}
beforeUpload = (file) => {
this.setState(state => ({
uploadFileLists: [...state.uploadFileLists, file],
}))
return false
}
onRemove = file => {
this.setState((state) => {
const index = state.uploadFileLists.indexOf(file)
const newFileList = state.uploadFileLists.slice()
newFileList.splice(index, 1)
return {
uploadFileLists: newFileList,
}
})
}
addNotice = () => {
const { editorContent } = this.state
if (editorContent) {
this.setState({
required: false
}, () => {
this.props.form.validateFields((err, values) => {
if (err) {
return
}
// const modalContent = draftToHtml(convertToRaw((this.state.editorState.getCurrentContent())))
const formData = new FormData()
if (this.state.uploadFileLists.length) {
this.state.uploadFileLists.map((item) => {
formData.append('uploadFile', item)
})
}
formData.append('title', values.title)
formData.append('noticeContent', this.state.editorContent)
HttpClient.post('/api/notice', formData).then((res: any) => {
if (res) {
message.success('新增成功')
this.setState({
isShowNotice: true,
flagFirst: true
})
const { currentPage, pageSize } = this.state
const params = {
pageNum: currentPage,
pageSize,
}
this.getMonthNoticeData(params)
} else {
message.success('新增失败')
}
})
})
})
}
}
render() {
const { pageSize, currentPage, total, reportList, width, collapsed,
Ind, noticeContent, isShowNotice, uploadFileLists, noticeFileList, required } = this.state
const formItemLayout = {
labelCol: { span: 1 },
wrapperCol: { span: 23 },
}
const { getFieldDecorator } = this.props.form
const hasFile = noticeFileList && noticeFileList.length > 0
return (
<div className='MonthReport'>
<img className='bgImg' src={bgImg} />
<Layout className='MonthReportCon'>
<Header className='MonthReportHead'>
<span>系统公告</span>
<Button className='add-notice' onClick={this.goAddMode}>新增公告</Button>
</Header>
<Layout className='MonthReportSec'>
<Sider width={width} className='MonthReportSider'>
<div className='toggleWidthBox'>
{
collapsed === 'block' ? <Icon onClick={this.toggleWidth} className='toggleWidth' type='left-circle' />
: <Icon onClick={this.toggleWidth} className='toggleWidth' type='left-circle' />
}
</div>
<div 100%'}}>
<div className='briefing-content-box'>
<ul className='briefing-content-list'>
{
reportList.map((item, index) => {
return (
<li title={item.title} className={Ind === index ? 'active' : ''} onClick={() => this.getDetail(item.noticeId, index)} key={index}>
<div className='left'>
{item.title}
</div>
<Icon onClick={() => this.onDelBulletin(item.noticeId)} title='删除' type='delete' className='delete-icon' />
</li>
)
})
}
</ul>
<div className='toggle-page'>
<Pagination
size='small'
pageSize={pageSize}
current={currentPage}
total={total}
showTotal={num => `共 ${num} 条数据`}
onChange={this.changePage}
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
/>
</div>
</div>
</div>
</Sider>
<Content className='MonthReportContent'>
{
isShowNotice ?
<div className='MonthReportContent-right'>
<h4>公告内容</h4>
<div className='detail-con'>
<iframe src={noticeContent}></iframe>
</div>
{
hasFile &&
<div className='file-down'>
<p className='title-label'>附件下载</p>
<Upload fileList={noticeFileList} showUploadList={{showRemoveIcon: false}} />
</div>
}
</div> :
<div className='MonthReportContent-right'>
<Form className='create-project-form' {...formItemLayout}>
<Form.Item label='标题'>
{getFieldDecorator('title', {
rules: [
{ required: true, message: '请输入公告标题' },
{ max: 100, message: '不能超过100个字符' }
],
})(
<Input allowClear placeholder='请输入公告标题' />
)}
</Form.Item>
<Form.Item className='ant-form-item-required' label='内容'>
{getFieldDecorator('noticeContent', {
rules: [{ required: required, message: '请输入公告内容' }],
})(
<div className='App'>
<div ref={editorElem => this.editorElem = editorElem} left' }} > // Html代码
</div>
</div>
)}
</Form.Item>
<Form.Item label='附件'>
{getFieldDecorator('uploadFile', {
})(
<Upload
name='file'
fileList={uploadFileLists}
beforeUpload={this.beforeUpload}
onRemove={this.onRemove}
accept='.pdf,.doc,.docx'
>
<Button>
<Icon type='upload' /> 上传附件
</Button>
</Upload>
)}
</Form.Item>
<Form.Item className='summit-btn'>
<Button type='primary' onClick={this.addNotice}>发布</Button>
</Form.Item>
</Form>
</div>
}
</Content>
</Layout>
</Layout>
</div>
)
}
}
export default Form.create<IProps>()(MonthReport)