引用braft-editor富文本

Mr Ke

2020-04-29 8d69f8151ef345d37dbf41e05f4a5a8082513710

 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)
    };
  }

@@ -53,38 +57,34 @@
    }).then(res => {
      console.log(res)
      _this.setState({
        savedate: {
        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);
    console.log(saveData)
    if (!saveData.documentTitle) {
      return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
    }
    if (!emoveTAG(editorContent)) {
      return message.warning('通知内容不能为空');
    }
    let _this = this;
    _this.setState({
@@ -93,88 +93,98 @@
    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.goBack()
      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(editorState, 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,
      // 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,
      //     };
      //   });
      // }
      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" >
              <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>
@@ -184,64 +194,79 @@
              </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}>
                    <Button disabled={disabled}>
                  <Upload {...props} >
                    <Button disabled={disabled} style={{ display: disabled ? 'none' : 'inline-block' }}>
                      <Icon type="upload" />上传文件</Button>
                  </Upload>
                </Col>
              </Row>
            }
            {
              savedate.documentType == 'DT00001' &&
              saveData.documentType == 'DT00001' &&
              <Row gutter={16} style={{ marginTop: '12px' }}>
                <Col className="gutter-row" >
                  通知范围：
@@ -249,20 +274,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>