/* eslint-disable */
|
/**liuwh
|
* 4/6/2020, 3:53:15 PM
|
* doc comment for the file goes here
|
*/
|
|
/** Happy Coding */
|
import React, { ReactNode, ReactEventHandler, Component } from 'react';
|
import { Card, Row, Col, Select, Button, Input, Upload, Icon, Spin, message } from 'antd';
|
import BraftEditor from 'braft-editor'
|
const Option = Select.Option;
|
const { TextArea } = Input;
|
import './index.scss';
|
import 'braft-editor/dist/index.css'
|
|
import fetch from '../../../api/request';
|
import { BASE_URL } from '../../../api/httpurl';
|
import { emoveTAG } from '../../../utils/utils';
|
|
const param = [{ value: 'DT00002', name: '通知公告' }, { value: 'DT00001', name: '规章制度' }]
|
export default class DocumentEditPage extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {
|
};
|
this.state = {
|
loading: false,//页面加载loading
|
iconLoading: false,//提交按钮loading
|
saveData: {},//表单提交数据
|
fileList: [],//附件列表
|
disabled: false,
|
editorContent: '',//富文本编辑内容
|
editorState: BraftEditor.createEditorState(null)
|
};
|
}
|
|
componentWillMount() { }
|
|
componentDidMount() {
|
this.loadData()
|
}
|
|
loadData = () => {
|
const { id } = this.props.match.params;
|
let _this = this;
|
_this.setState({
|
loading: true,
|
disabled: id ? true : false
|
})
|
fetch({
|
url: 'api/document/findDetail',
|
params: {
|
id: id || 'new'
|
}
|
}).then(res => {
|
if (res) {
|
_this.setState({
|
saveData: {
|
...res,
|
documentType: res.documentType || 'DT00002'
|
},
|
loading: false,
|
fileList: res.attachmentList && res.attachmentList.map((a) => ({ ...a, key: a.id, uid: a.id, name: a.fileName + '.' + a.suffix, })) || []
|
});
|
}
|
});
|
}
|
|
saveInputChange = ({ target: { value, name } }) => {
|
this.setState(({ saveData }) => ({
|
saveData: {
|
...saveData,
|
[name]: value
|
}
|
}))
|
}
|
|
submit = () => {
|
let { saveData, editorContent } = this.state;
|
// editorContent = emoveTAG(editorContent);
|
if (!saveData.documentTitle) {
|
return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
|
}
|
if (!emoveTAG(editorContent)) {
|
return message.warning('通知内容不能为空');
|
}
|
let _this = this;
|
_this.setState({
|
iconLoading: true
|
})
|
fetch({
|
url: 'api/document/saveOrUpdateNotice',
|
method: 'POST',
|
data: {
|
...saveData,
|
documentContent: editorContent
|
}
|
}).then(res => {
|
_this.setState({
|
iconLoading: false,
|
});
|
if (res) {
|
message.success("提交成功！");
|
this.props.history.push(this.switchWordByType(saveData.documentType).href);
|
}
|
});
|
}
|
|
cancle = () => {
|
const { id } = this.props.match.params;
|
if (id) {
|
this.props.history.goBack()
|
} else {
|
this.props.history.push("/index/workbench");
|
}
|
}
|
|
// wen
|
switchWordByType = (type) => {
|
switch (type) {
|
case 'DT00002':
|
return {
|
title: '通知',
|
associateId: 1001,
|
href: '/index/workbench/announcement'
|
};
|
case 'DT00001':
|
return {
|
title: '规章制度',
|
associateId: 1002,
|
href: '/index/rules'
|
}
|
}
|
}
|
|
handleChange = (editorState) => {
|
console.log('htnl', editorState.toHTML())
|
this.setState({ editorState, editorContent: editorState.toHTML() })
|
}
|
|
render() {
|
const { saveData, fileList, loading, disabled } = this.state;
|
const props = {
|
action: BASE_URL + `api/attachment/materials?associateId=${saveData.documentType == 'DT00002' ? 1001 : 1002}&entityId=` + saveData.id,
|
header: {
|
Authorization: window.localStorage.getItem('token')
|
},
|
onChange: ({ file, fileList }) => {
|
fileList = fileList.slice(-2);
|
fileList = fileList.map(file => {
|
if (file.response) {
|
// Component will show file.url as link
|
file.url = file.response.data[0].url;
|
}
|
return file;
|
});
|
this.setState({ fileList });
|
},
|
fileList: fileList,
|
onPreview: (file) => {
|
window.open(file.url);
|
},
|
showUploadList: { showPreviewIcon: true, showDownloadIcon: false, showRemoveIcon: disabled ? false : true }
|
};
|
|
//指定编辑器工具栏的控件列表
|
const controls = ['undo', 'redo', 'separator',
|
'headings', 'separator', 'font-size', 'line-height', 'letter-spacing', 'separator',
|
'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator', 'text-indent', 'text-align', 'separator',
|
'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
|
'link', 'separator', 'hr', 'separator',
|
'media', 'separator', 'remove-styles',
|
'clear'];
|
|
return (
|
<div className="document-edit-page-main">
|
<Spin spinning={loading}>
|
|
<Card style={{ border: 20, margin: 20, padding: 20 }}>
|
<Row gutter={16}>
|
<Col className="gutter-row marginTop" >
|
文档类型：
|
</Col>
|
</Row>
|
<Row gutter={16}>
|
<Col className="gutter-row marginTB">
|
<Select placeholder="请选择" disabled={disabled} style={{ width: "300px" }} onChange={(value) => this.saveInputChange({ target: { name: 'documentType', value } })} value={saveData.documentType}>
|
{
|
param.map((data, key) => (
|
<Option key={key} value={data.value}>{data.name}</Option>
|
))
|
}
|
</Select>
|
</Col>
|
</Row>
|
|
<Row gutter={16} className="marginTop">
|
<Col className="gutter-row marginTop">
|
{saveData.documentType && this.switchWordByType(saveData.documentType).title}标题：
|
</Col>
|
</Row>
|
|
<Row gutter={16}>
|
<Col className="gutter-row marginTB">
|
<Input placeholder="请输入" disabled={disabled} style={{ width: '300px' }} name='documentTitle' onChange={this.saveInputChange} value={saveData.documentTitle || ""} />
|
</Col>
|
</Row>
|
|
<Row gutter={16}>
|
<Col className="gutter-row marginTop">
|
通知内容：
|
</Col>
|
</Row>
|
{/*
|
<div ref="editorElem" className="marginTB">
|
</div> */}
|
<BraftEditor value={this.state.editorState} onChange={this.handleChange} controls={controls} className="marginTB BraftEditor-style" />
|
|
<Row gutter={16}>
|
<Col className="gutter-row marginTop">
|
附件：
|
</Col>
|
</Row>
|
|
<Row gutter={16} >
|
<Col className="gutter-row marginTB" >
|
<Upload {...props} >
|
<Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
|
<Icon type="upload" />上传文件</Button>
|
</Upload>
|
</Col>
|
</Row>
|
|
{/* {
|
saveData.documentType == 'DT00002' &&
|
<Row gutter={16}>
|
<Col className="gutter-row marginTop">
|
通知内容：
|
</Col>
|
</Row>
|
}
|
{
|
saveData.documentType == 'DT00002' &&
|
<Row gutter={16}>
|
<Col className="gutter-row" style={{ margin: '12px 0' }} >
|
<TextArea disabled={disabled} style={{ width: '500px' }} name='documentContent' onChange={this.saveInputChange} value={saveData.documentContent || ""} />
|
</Col>
|
</Row>
|
}
|
{
|
saveData.documentType == 'DT00001' &&
|
<Row gutter={16} style={{ marginTop: '12px' }}>
|
<Col className="gutter-row" style={{ margin: '12px 0' }} >
|
规章制度源文件：
|
</Col>
|
</Row>
|
}
|
{saveData.documentType == 'DT00001' &&
|
<Row gutter={16} >
|
<Col className="gutter-row" >
|
<Upload {...props} >
|
<Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
|
<Icon type="upload" />上传文件</Button>
|
</Upload>
|
</Col>
|
</Row>
|
}
|
{
|
saveData.documentType == 'DT00001' &&
|
<Row gutter={16} style={{ marginTop: '12px' }}>
|
<Col className="gutter-row" >
|
通知范围：
|
</Col>
|
</Row>
|
}
|
{
|
saveData.documentType == 'DT00002' &&
|
<Row gutter={16} style={{ marginTop: '12px' }}>
|
<Col className="gutter-row" style={{ margin: '12px 0' }} >
|
通知范围：
|
</Col>
|
</Row>
|
}
|
{saveData.documentType == 'DT00002' &&
|
<Row gutter={16} >
|
<Col className="gutter-row" >
|
目前仅支持全员通知
|
</Col>
|
</Row>
|
} */}
|
<Row type="flex" gutter={20} style={{ marginTop: '12px' }}>
|
<Col className="gutter-row" ><Button onClick={this.cancle}>返回</Button></Col>
|
<Col className="gutter-row" ><Button disabled={disabled} type="primary" loading={this.state.iconLoading} onClick={this.submit}>发布</Button></Col>
|
</Row>
|
</Card>
|
</Spin>
|
</div>
|
)
|
}
|
}
|
