/**
|
* 徐祥健<xuxj@hugeinfo.com.cn>
|
* 2018年8月29日 16:19
|
*
|
*/
|
import React from 'react';
|
|
import { Row, Col, Input, Select, DatePicker, Button, Tag, Tooltip, Modal, Upload, Icon, message, TreeSelect, Breadcrumb } from 'antd';
|
import HeadView from '../view/HeadView';
|
import BusDetailView from '../view/BusDetailView';
|
import AddComView from '../view/AddComView';
|
// 引入编辑器以及编辑器样式
|
import BraftEditor from 'braft-editor'
|
import 'braft-editor/dist/index.css'
|
import Fetch from '../fetch';
|
import moment from 'moment';
|
const Option = Select.Option;
|
const divStyle = {
|
margin: '20px'
|
};
|
const domain = Fetch.domain;
|
const { CheckableTag } = Tag;
|
export default class ArticleEidt extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
dateSource: [],
|
savedate: {},
|
formdata: {},
|
show: false,
|
visible: false,
|
closeKey: Date.now(),
|
selectedRow: [],
|
fileList: [],
|
cover: [],
|
editorState: BraftEditor.createEditorState(null)
|
};
|
}
|
|
componentDidMount() {
|
document.title = '信息发布';
|
const { id } = this.props.match.params;
|
const { formdata } = this.state;
|
Fetch.getArticleDetail(id)
|
.then(res => {
|
this.setState({
|
savedate: res,
|
selectedRow: res.companyList || [],
|
fileList: res.attachments ? res.attachments.map((item, index) => ({ uid: item.uid, id: item.uid, name: item.name, status: 'done', url: domain + `api/v1/attachment/downloadDisk/${item.uid}?online=false` })) : [],
|
cover: res.cover || [],
|
editorState: BraftEditor.createEditorState(res.content),
|
dateSource: res.channelList || []
|
})
|
if (res.channelName == '法律宣传') {
|
this.setState({
|
show: true
|
})
|
} else {
|
this.setState({
|
show: false
|
})
|
}
|
})
|
}
|
saveInputChange = ({ target: { value, name } }) => {
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
[name]: value
|
}
|
}))
|
const { dateSource } = this.state;
|
dateSource.forEach(element => {
|
if (element.value == value) {
|
if (element.title == '法律宣传') {
|
this.setState({
|
show: true
|
})
|
} else {
|
this.setState({
|
show: false
|
})
|
}
|
}
|
});
|
}
|
|
submit = () => {
|
const list = this.state.selectedRow.map(({ id }) => id);
|
const { savedate } = this.state;
|
savedate.list = list;
|
if (!savedate.channelIdd) {
|
message.warning("请选择信息分类");
|
return;
|
}
|
Fetch.saveArticle(savedate)
|
.then(res => {
|
if (res.statuscode === 1) {
|
message.success("提交成功！");
|
this.props.history.push("/articlePublish")
|
} else {
|
message.error('保存失败，请联系管理员', 2)
|
}
|
});
|
}
|
cancle = () => {
|
this.props.history.push("/articlePublish");
|
}
|
handleClose = delid => {
|
const { selectedRow: rows } = this.state;
|
this.setState({ selectedRow: rows.filter(({ id }) => id !== delid) });
|
};
|
|
onChange = (checked) => {
|
this.setState({
|
visible: true,
|
});
|
}
|
|
handleOk = (selectedRow) => {
|
this.setState({
|
selectedRow
|
})
|
}
|
|
handleCancel = () => {
|
this.setState({
|
closeKey: Date.now(),
|
visible: false
|
});
|
}
|
|
uploadFn = (param) => {
|
|
const serverURL = domain + 'api/v1/attachment/upload'
|
const xhr = new XMLHttpRequest
|
const fd = new FormData()
|
const successFn = (response) => {
|
// 假设服务端直接返回文件上传后的地址
|
// 上传成功后调用param.success并传入上传后的文件地址
|
//Pz
|
const res = JSON.parse(xhr.responseText);
|
param.success({
|
url: domain + 'api/v1/attachment/image/' + res[0].id,
|
meta: {
|
id: res[0].id,
|
title: res[0].name,
|
alt: res[0].name,
|
loop: true, // 指定音视频是否循环播放
|
autoPlay: true, // 指定音视频是否自动播放
|
controls: true, // 指定音视频是否显示控制栏
|
poster: domain + 'api/v1/attachment/image/' + res[0].id, // 指定视频播放器的封面
|
}
|
})
|
}
|
|
|
const progressFn = (event) => {
|
// 上传进度发生变化时调用param.progress
|
param.progress(event.loaded / event.total * 100)
|
}
|
|
const errorFn = (response) => {
|
// 上传发生错误时调用param.error
|
param.error({
|
msg: 'unable to upload.'
|
})
|
}
|
xhr.upload.addEventListener("progress", progressFn, false)
|
xhr.addEventListener("load", successFn, false)
|
xhr.addEventListener("error", errorFn, false)
|
xhr.addEventListener("abort", errorFn, false)
|
fd.append('file', param.file)
|
xhr.open('POST', serverURL, true)
|
xhr.send(fd)
|
}
|
|
submitContent = () => {
|
// 在编辑器获得焦点时按下ctrl+s会执行此方法
|
// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
|
const htmlContent = this.state.editorState.toHTML()
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
content: htmlContent
|
}
|
}))
|
}
|
|
handleEditorChange = (editorState) => {
|
this.setState({ editorState })
|
}
|
|
render() {
|
const { dateSource, show, visible, closeKey, selectedRow, savedate, fileList, editorState } = this.state;
|
|
const props = {
|
action: domain + 'api/v1/attachment/materialsDisk?entityId=' + savedate.id,
|
onChange: ({ file, fileList }) => {
|
if (file.status !== 'uploading') {
|
console.log(file);
|
console.log(fileList);
|
|
}
|
this.setState({ fileList });
|
},
|
fileList: fileList,
|
onRemove: (file) => {
|
Fetch.deleteAttachment(file.uid)
|
.then(res => {
|
message.success("移除成功！");
|
});
|
this.setState(({ fileList }) => {
|
const index = fileList.indexOf(file);
|
const newFileList = fileList.slice();
|
newFileList.splice(index, 1);
|
return {
|
fileList: newFileList,
|
};
|
});
|
}
|
};
|
return (
|
<div className="app-page">
|
<HeadView history={this.props.history} />
|
<Breadcrumb style={{ padding: '20px' }}>
|
<Breadcrumb.Item><a href="index.html#/articlePublish">信息发布</a></Breadcrumb.Item>
|
<Breadcrumb.Item>信息公布详情</Breadcrumb.Item>
|
</Breadcrumb>
|
<BusDetailView type='信息添加' >
|
<div style={divStyle}>
|
<Row type="flex" align='middle' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>信息标题</span></Col>
|
<Col span={6} push={0} ><Input placeholder="请输入信息标题" style={{ width: '300px' }} name='title' onChange={this.saveInputChange} value={savedate.title || ""} /></Col>
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>信息分类</span></Col>
|
<Col span={6} push={0} >
|
<TreeSelect
|
style={{ width: 300 }}
|
value={savedate.channelIdd || undefined}
|
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
treeData={dateSource}
|
placeholder="请选择类型"
|
treeDefaultExpandAll
|
onChange={(value) => this.saveInputChange({ target: { name: 'channelIdd', value } })}
|
/>
|
</Col>
|
</Row>
|
</div>
|
|
<div style={divStyle}>
|
<Row type="flex" align='middle' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>发布时间</span></Col>
|
<Col span={18} push={0} >
|
<DatePicker style={{ width: '300px' }} onChange={(_, value) => this.saveInputChange({ target: { name: 'publishTime', value } })} value={moment(savedate.publishTime || Date.now())} /></Col>
|
</Row>
|
</div>
|
<div style={divStyle}>
|
<Row type="flex" align='middle' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>上传附件</span></Col>
|
<Col span={18} push={0} >
|
<Upload {...props}>
|
<Button>
|
<Icon type="upload" /> 上传附件
|
</Button>
|
</Upload>
|
</Col>
|
</Row>
|
</div>
|
<div style={divStyle}>
|
<Row type="flex" align='top' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>信息内容</span></Col>
|
<Col span={18} push={0} style={{ border: 'solid 1px rgba(0, 0, 0, 0.25)', borderRadius: '5PX' }} >
|
<BraftEditor
|
value={editorState}
|
placeholder='请输入文章内容'
|
media={{
|
allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
|
image: true, // 开启图片插入功能
|
video: false, // 开启视频插入功能
|
audio: false, // 开启音频插入功能
|
uploadFn: this.uploadFn
|
}}
|
excludeControls={['emoji']}
|
onChange={this.handleEditorChange}
|
onSave={this.submitContent}
|
onBlur={this.submitContent}
|
/>
|
</Col>
|
</Row>
|
</div>
|
{
|
show == true ?
|
<div style={divStyle}>
|
<Row type="flex" align='top' justify="space-around">
|
<Col span={6} pull={0} style={{ textAlign: 'center' }}><span>推送企业</span></Col>
|
<Col span={18} push={0}>
|
{selectedRow.map(({ companyName: tag, id }, index) => {
|
const isLongTag = tag.length > 20;
|
const tagElem = (
|
<Tag
|
key={tag}
|
closable={true}
|
afterClose={() => this.handleClose(id)}
|
onChange={this.onChange}
|
>
|
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
|
</Tag>
|
);
|
return isLongTag ? (
|
<Tooltip title={tag} key={tag}>
|
{tagElem}
|
</Tooltip>
|
) : (
|
tagElem
|
);
|
})}
|
<CheckableTag onChange={this.onChange} >
|
添加企业
|
</CheckableTag>
|
</Col>
|
</Row>
|
</div>
|
: null
|
}
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<Button style={{ marginRight: '15px', width: '150px' }} type="primary" onClick={this.submit}>提交</Button>
|
<Button style={{ marginLeft: '15px', width: '150px' }} onClick={this.cancle}>取消</Button>
|
</div>
|
</BusDetailView>
|
<Modal
|
key={closeKey}
|
visible={visible}
|
width="62%"
|
onCancel={this.handleCancel}
|
footer={null}
|
>
|
<div className="model-detail-view-main">
|
<div className='model-detail-view-type'><span>选择企业</span></div>
|
<AddComView handleCancel={this.handleCancel} handleOk={this.handleOk} selectedRow={selectedRow} />
|
</div>
|
</Modal>
|
</div>
|
);
|
}
|
|
}
|
