From 8d24b2559c9929814b31c0615bdcf915669350af Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Sat, 16 May 2020 13:49:11 +0800
Subject: [PATCH] 加入下载链接
---
src/components/page/DocumentEditPage/index.jsx | 108 ++++++++++++++++++++++-------------------------------
1 files changed, 45 insertions(+), 63 deletions(-)
diff --git a/src/components/page/DocumentEditPage/index.jsx b/src/components/page/DocumentEditPage/index.jsx
index 8e58a85..8543d5c 100644
--- a/src/components/page/DocumentEditPage/index.jsx
+++ b/src/components/page/DocumentEditPage/index.jsx
@@ -7,13 +7,15 @@
/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Card, Row, Col, Select, Button, Input, Upload, Icon, Spin, message } from 'antd';
-import E from 'wangeditor';
-import './index.scss';
+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 { BASE_URL } from '../../../api/httpurl';
+import { emoveTAG } from '../../../utils/utils';
const param = [{ value: 'DT00002', name: '通知公告' }, { value: 'DT00001', name: '规章制度' }]
export default class DocumentEditPage extends Component {
@@ -27,35 +29,19 @@
saveData: {},//表单提交数据
fileList: [],//附件列表
disabled: false,
- editorContent: null//富文本编辑内容
+ editorContent: '',//富文本编辑内容
+ editorState: BraftEditor.createEditorState(null)
};
}
componentWillMount() { }
componentDidMount() {
- this.initEditor();
this.loadData()
}
- initEditor = () => {
- const elem = this.refs.editorElem
- const editor = new E(elem);
- // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
- editor.customConfig.onchange = html => {
- this.setState({
- editorContent: html,
- })
- }
- editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
- editor.customConfig.showLinkImg = true; // 隐藏“网络图片”tab
- editor.create();
-
- }
loadData = () => {
const { id } = this.props.match.params;
- console.log(this.props)
- console.log(id)
let _this = this;
_this.setState({
loading: true,
@@ -67,18 +53,18 @@
id: id || 'new'
}
}).then(res => {
- console.log(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, })) || []
- });
+ 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 }) => ({
@@ -90,12 +76,12 @@
}
submit = () => {
- const { saveData, editorContent } = this.state;
- console.log(saveData)
+ let { saveData, editorContent } = this.state;
+ // editorContent = emoveTAG(editorContent);
if (!saveData.documentTitle) {
return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
}
- if (!editorContent) {
+ if (!emoveTAG(editorContent)) {
return message.warning('通知内容不能为空');
}
let _this = this;
@@ -110,14 +96,14 @@
documentContent: editorContent
}
}).then(res => {
- console.log(res)
_this.setState({
iconLoading: false,
});
- message.success("提交成功！");
- this.props.history.push("/index/rules")
+ if (res) {
+ message.success("提交成功！");
+ this.props.history.push(this.switchWordByType(saveData.documentType).href);
+ }
});
-
}
cancle = () => {
@@ -135,14 +121,21 @@
case 'DT00002':
return {
title: '通知',
- associateId: 1001
+ associateId: 1001,
+ href: '/index/workbench/announcement'
};
case 'DT00001':
return {
title: '规章制度',
- associateId: 1002
+ associateId: 1002,
+ href: '/index/rules'
}
}
+ }
+
+ handleChange = (editorState) => {
+ console.log('htnl', editorState.toHTML())
+ this.setState({ editorState, editorContent: editorState.toHTML() })
}
render() {
@@ -168,28 +161,16 @@
window.open(file.url);
},
showUploadList: { showPreviewIcon: true, showDownloadIcon: false, showRemoveIcon: disabled ? false : true }
- // onDownload: (file) => {
- // console.log(file)
- // Fetch.attachmentDownload(file.uid)
- // .then(res => {
- // message.success("下载成功！");
- // });
- // },
- // 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,
- // };
- // });
- // }
};
+
+ //指定编辑器工具栏的控件列表
+ 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">
@@ -230,9 +211,10 @@
通知内容：
</Col>
</Row>
-
+ {/*
<div ref="editorElem" className="marginTB">
- </div>
+ </div> */}
+ <BraftEditor value={this.state.editorState} onChange={this.handleChange} controls={controls} className="marginTB BraftEditor-style" />
<Row gutter={16}>
<Col className="gutter-row marginTop">
--
Gitblit v1.8.0