From c0c820559b46f3a5ede6fbd7f66e77d09981829f Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 29 Apr 2020 11:56:31 +0800
Subject: [PATCH] 提升菜单栏体验，升级公共查询表单组件
---
src/components/page/DocumentEditPage/index.jsx | 256 +++++++++++++++++++++++++++-----------------------
1 files changed, 137 insertions(+), 119 deletions(-)
diff --git a/src/components/page/DocumentEditPage/index.jsx b/src/components/page/DocumentEditPage/index.jsx
index 1e4bcc1..4ec5c62 100644
--- a/src/components/page/DocumentEditPage/index.jsx
+++ b/src/components/page/DocumentEditPage/index.jsx
@@ -6,14 +6,16 @@
/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
-// import { Link } from 'react-router-dom';
import { Card, Row, Col, Select, Button, Input, Upload, Icon, Spin, message } from 'antd';
-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 {
@@ -22,11 +24,13 @@
this.config = {
};
this.state = {
- loading: false,
- iconLoading: false,
- savedate: {},
- fileList: [],
+ loading: false,//页面加载loading
+ iconLoading: false,//提交按钮loading
+ saveData: {},//表单提交数据
+ fileList: [],//附件列表
disabled: false,
+ editorContent: '',//富文本编辑内容
+ editorState: BraftEditor.createEditorState(null)
};
}
@@ -38,54 +42,47 @@
loadData = () => {
const { id } = this.props.match.params;
- console.log(this.props)
- console.log(id)
let _this = this;
_this.setState({
loading: true,
disabled: id ? true : false
- })
+ })
fetch({
url: 'api/document/findDetail',
params: {
id: id || 'new'
}
}).then(res => {
- console.log(res)
- _this.setState({
- savedate: {
- ...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(({ savedate }) => ({
- savedate: {
- ...savedate,
+ this.setState(({ saveData }) => ({
+ saveData: {
+ ...saveData,
[name]: value
}
}))
}
submit = () => {
- const { savedate } = this.state;
- console.log(savedate)
- if (savedate.documentType == 'DT00001') {
- if (!savedate.documentTitle) {
- return message.warning('规章制度标题不能为空')
- }
- } else {
- if (!savedate.documentTitle) {
- return message.warning('通知标题不能为空')
- } else if (!savedate.documentContent) {
- return message.warning('通知内容不能为空')
- }
+ 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({
@@ -94,93 +91,99 @@
fetch({
url: 'api/document/saveOrUpdateNotice',
method: 'POST',
- data: savedate
+ data: {
+ ...saveData,
+ documentContent: editorContent
+ }
}).then(res => {
- console.log(res)
_this.setState({
iconLoading: false,
});
- message.success("提交成功！");
- this.props.history.push("/index/rules")
- // this.props.history.goBack()
+ if (res) {
+ message.success("提交成功！");
+ this.props.history.push(this.switchWordByType(saveData.documentType).href);
+ }
});
- // Fetch.savePatrolCom(savedate)
- // .then(res => {
- // if (res.code === 0) {
- // message.success("提交成功！");
- // this.props.history.push("/companyUpd")
- // } else {
- // message.error('保存失败，请联系管理员', 2)
- // }
- // });
}
cancle = () => {
- // this.props.history.push("/index/workbench");
const { id } = this.props.match.params;
if (id) {
this.props.history.goBack()
} else {
this.props.history.push("/index/workbench");
}
- // console.log(this.props)
+ }
+
+ // 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 { savedate, fileList, loading, disabled } = this.state;
+ const { saveData, fileList, loading, disabled } = this.state;
const props = {
- action: BASE_URL + `api/attachment/materials?associateId=${savedate.documentType == 'DT00002' ? 1001 : 1002}&entityId=` + savedate.id,
+ action: BASE_URL + `api/attachment/materials?associateId=${saveData.documentType == 'DT00002' ? 1001 : 1002}&entityId=` + saveData.id,
header: {
Authorization: window.localStorage.getItem('token')
},
onChange: ({ file, fileList }) => {
- if (file.status !== 'uploading') {
- console.log(file);
- console.log(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) => {
- console.log(file)
+ window.open(file.url);
},
- showUploadList: { showPreviewIcon: true, showDownloadIcon: true, 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,
- // };
- // });
- // }
+ 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" >
+ <Col className="gutter-row marginTop" >
文档类型：
</Col>
</Row>
<Row gutter={16}>
- <Col className="gutter-row" style={{ margin: '12px 0' }} >
- <Select disabled={disabled} style={{ width: "300px" }} onChange={(value) => this.saveInputChange({ target: { name: 'documentType', value } })} value={savedate.documentType}>
+ <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>
@@ -190,53 +193,68 @@
</Col>
</Row>
- {
- savedate.documentType == 'DT00002' &&
- <Row gutter={16} style={{ marginTop: '12px' }}>
- <Col className="gutter-row" style={{ marginTop: '12px' }}>
- 通知标题：
- </Col>
- </Row>
- }
- {
- savedate.documentType == 'DT00001' &&
- <Row gutter={16} style={{ marginTop: '12px' }}>
- <Col className="gutter-row" style={{ marginTop: '12px' }}>
- 规章制度标题：
- </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" style={{ margin: '12px 0' }} >
- <Input disabled={disabled} style={{ width: '300px' }} name='documentTitle' onChange={this.saveInputChange} value={savedate.documentTitle || ""} />
+ <Col className="gutter-row marginTB">
+ <Input placeholder="请输入" disabled={disabled} style={{ width: '300px' }} name='documentTitle' onChange={this.saveInputChange} value={saveData.documentTitle || ""} />
</Col>
</Row>
- {
- savedate.documentType == 'DT00002' &&
+ <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" >
+ <Col className="gutter-row marginTop">
通知内容：
- </Col>
- </Row>
- }
- {
- savedate.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={savedate.documentContent || ""} />
</Col>
</Row>
}
{
- savedate.documentType == 'DT00001' &&
+ 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>
}
- {savedate.documentType == 'DT00001' &&
+ {saveData.documentType == 'DT00001' &&
<Row gutter={16} >
<Col className="gutter-row" >
<Upload {...props} >
@@ -247,7 +265,7 @@
</Row>
}
{
- savedate.documentType == 'DT00001' &&
+ saveData.documentType == 'DT00001' &&
<Row gutter={16} style={{ marginTop: '12px' }}>
<Col className="gutter-row" >
通知范围：
@@ -255,20 +273,20 @@
</Row>
}
{
- savedate.documentType == 'DT00002' &&
+ saveData.documentType == 'DT00002' &&
<Row gutter={16} style={{ marginTop: '12px' }}>
<Col className="gutter-row" style={{ margin: '12px 0' }} >
通知范围：
</Col>
</Row>
}
- {savedate.documentType == 'DT00002' &&
+ {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>
--
Gitblit v1.8.0