2021-01-18

king

2021-01-18 38b5297cbfbe3d61ee2e800b51e8324ee163f43e

2021-01-18

 src/components/editor/index.jsx

@@ -1,14 +1,25 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import 'braft-extensions/dist/table.css'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/output.css'
import Table from 'braft-extensions/dist/table'
import SparkMD5 from 'spark-md5'
import moment from 'moment'

import Api from '@/api'
import './index.scss'

BraftEditor.use(Table())

let service = ''
if (process.env.NODE_ENV === 'production') {
  service = document.location.origin + '/' + window.GLOB.service
} else {
  service = window.GLOB.location + '/' + window.GLOB.service
}

class NormalEditor extends Component {
  static propTpyes = {
@@ -16,23 +27,188 @@
    value: PropTypes.any,    // 条码值
  }

  state = {
    editorState: ''
  }

  UNSAFE_componentWillMount () {
    let initVal = null

    if (this.props['data-__meta']) {
      initVal = this.props['data-__meta'].initialValue || null
    }
    
    this.setState({editorState: BraftEditor.createEditorState(initVal)})
  }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps))
  }

  handleEditorChange = () => {

  handleEditorChange = (editorState) => {
    this.setState({ editorState })
    if (this.props.onChange) {
      this.props.onChange(editorState.toHTML())
    }
  }

  submitContent = () => {
  shardupload = (params, param) => {
    let _param = params.chunks.shift()
    let form = new FormData()

    form.append('file', _param.binary)
    form.append('fileMd5', params.file.fileMd5)
    form.append('shardingMd5', _param.chunkMd5)
    form.append('baseDomain', service)
    form.append('rootPath', 'Content/images/upload/')
    form.append('fileName', params.file.fileName)
    form.append('fileExt', params.file.fileType)
    form.append('shardingCnt', _param.chunks)
    form.append('shardingNo', _param.chunk)

    Api.getLargeFileUpload(form).then(res => {
      if (res.status) {
        if (params.chunks.length > 0) {
          param.progress(Math.floor(100 * (_param.chunk / _param.chunks)))
          this.shardupload(params, param)
        } else {
          if (res.urlPath) {
            param.success({
              url: res.urlPath
            })
          } else {
            param.error({
              url: '上传失败！'
            })
          }
        }
      } else {
        param.error({
          url: '上传失败！'
        })
      }
    })
  }

  getuuid = () => {
    let uuid = []
    let _options = '0123456789abcdefghigklmnopqrstuv'
    for (let i = 0; i < 19; i++) {
      uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
    }
    uuid = uuid.join('')
    return uuid
  }

  handleUpload(param) {
    const file = param.file

    let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
    let chunkSize = 1024 * 1024 * 2                // 切片每次2M
    let chunks = Math.ceil(file.size / chunkSize)  // 切片总数
    let currentChunk = 0                           // 当前上传的chunk
    let spark = new SparkMD5.ArrayBuffer()         // 对arrayBuffer数据进行md5加密，产生一个md5字符串
    let chunkFileReader = new FileReader()         // 用于计算出每个chunkMd5
    let totalFileReader = new FileReader()         // 用于计算出总文件的fileMd5
    let params = {chunks: [], file: {}}            // 用于上传所有分片的md5信息

    params.file.fileName = file.name.replace(/\.{1}[^.]*$/ig, '')  // 文件名（去除后缀名）
    params.file.fileType = file.name.replace(/^.*\.{1}/ig, '')     // 文件类型
    params.file.fileSize = file.size                               // 文件大小
    params.file.fileChunks = chunks                                // 记录所有chunks的长度

    if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) {            // 文件名称含有英文及数字之外字符时，名称系统生成
      params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
    }

    totalFileReader.readAsArrayBuffer(file)
    totalFileReader.onload = (e) => {   // 对整个totalFile生成md5
      spark.append(e.target.result)
      params.file.fileMd5 = spark.end() // 计算整个文件的fileMd5

      let _param = new FormData()
      _param.append('fileMd5', params.file.fileMd5)
      
      Api.getFilePreUpload(_param).then(res => {
        if (res.status && res.urlPath) {
          param.success({
            url: res.urlPath
          })
        } else if (res.shardings && res.shardings.length > 0) {
          res.shardings.forEach(shard => {
            if (shard.shardingNo && parseInt(shard.shardingNo) > currentChunk) {
              currentChunk = parseInt(shard.shardingNo)
            }
          })
          loadNext()
        } else {
          loadNext()
        }
      })
    }

    chunkFileReader.onload = (e) => {
      spark.append(e.target.result)      // 对每一片分片进行md5加密
      
      params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 添加切片md5
      
      currentChunk++  // 每一次分片onload,currentChunk都需要增加，以便来计算分片的次数

      if (currentChunk < chunks) { // 当前切片总数没有达到总数时
        loadNext()
      } else {
        this.shardupload(params, param)
      }
    }

    chunkFileReader.onerror = () => {
      param.error({
        url: '上传失败！'
      })
      console.warn('File reading failed.')
    }
    totalFileReader.onerror = () => {
      param.error({
        url: '上传失败！'
      })
    }

    let loadNext = () => {
      let start = currentChunk * chunkSize              // 计算分片的起始位置
      let end = Math.min(file.size, start + chunkSize)  // 计算分片的结束位置

      let obj = {                                       // 每一个分片需要包含的信息
        chunk: currentChunk + 1,
        binary: file.slice(start, end),
        start: start,
        end: end,
        chunks
      }

      params.chunks.push(obj)
      chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
  }

  render() {
    const { editorState } = this.state

    return (
      <div className="normal-braft-editor">
        <BraftEditor value={'<p></p>'} onChange={this.handleEditorChange} onSave={this.submitContent}/>
        <BraftEditor
          value={editorState}
          onChange={this.handleEditorChange}
          media={{
            uploadFn: (param) => {
              this.handleUpload(param)
            },
            validate: () => {
              return true
            },
            onInsert: () => {

            }
          }}
        />
      </div>
    )
  }

 src/components/editor/index.scss

@@ -0,0 +1,20 @@
.normal-braft-editor {
  .bf-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .bf-content::-webkit-scrollbar {
    width: 7px;
  }
  .bf-content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .bf-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}

 src/tabviews/scriptmanage/actionList/index.scss

@@ -27,8 +27,8 @@
    padding-bottom: 35px;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    width: 7px;
    height: 7px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;

 src/tabviews/subtable/index.scss

@@ -96,7 +96,7 @@
      position: absolute;
      right: 5px;
      top: -22px;
      z-index: 10;
      z-index: 1;
    }
  }
  .ant-table-fixed-left, .ant-table-fixed-right {

 src/tabviews/verupmanage/actionList/index.scss

@@ -27,8 +27,8 @@
    padding-bottom: 35px;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    width: 7px;
    height: 7px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;

 src/tabviews/verupmanage/subtabtable/index.scss

@@ -41,7 +41,7 @@
      position: absolute;
      right: 5px;
      top: -22px;
      z-index: 10;
      z-index: 1;
    }
  }
}

 src/tabviews/zshare/actionList/index.scss

@@ -28,6 +28,7 @@
.action-modal {
  .ant-modal {
    max-width: 95vw;
    top: 70px;
  }
  .ant-modal-body {
    max-height: calc(100vh - 235px);
@@ -36,8 +37,8 @@
    padding-bottom: 35px;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    width: 7px;
    height: 7px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;

 src/tabviews/zshare/fileupload/index.jsx

@@ -5,7 +5,6 @@
import { Upload, Button, Icon, Progress, notification } from 'antd'
import SparkMD5 from 'spark-md5'
import Api from '@/api'
import Utils from '@/utils/utils.js'
import './index.scss'

let service = ''
@@ -122,6 +121,16 @@
    })
  }

  getuuid = () => {
    let uuid = []
    let _options = '0123456789abcdefghigklmnopqrstuv'
    for (let i = 0; i < 19; i++) {
      uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
    }
    uuid = uuid.join('')
    return uuid
  }

  beforeUpload = (file) => {
    const { accept } = this.props

@@ -165,7 +174,7 @@
    params.file.fileChunks = chunks                                // 记录所有chunks的长度

    if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) {            // 文件名称含有英文及数字之外字符时，名称系统生成
      params.file.fileName = moment().format('YYYYMMDDHHmmss') + Utils.getuuid().substr(14)
      params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
    }

    totalFileReader.readAsArrayBuffer(file)

 src/tabviews/zshare/mutilform/index.jsx

@@ -18,7 +18,7 @@
const CustomSwitch = asyncComponent(() => import('./customSwitch'))
const FileUpload = asyncComponent(() => import('../fileupload'))
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
// const Editor = asyncComponent(() => import('@/components/editor'))
const Editor = asyncComponent(() => import('@/components/editor'))

class MainSearch extends Component {
  static propTpyes = {
@@ -121,7 +121,7 @@
      }

      let _fieldlen = item.fieldlength || 50
      if (item.type === 'textarea' || item.type === 'fileupload' || item.type === 'multiselect') {
      if (item.type === 'textarea' || item.type === 'fileupload' || item.type === 'multiselect' || item.type === 'brafteditor') {
        _fieldlen = item.fieldlength || 512
      } else if (item.type === 'number') {
        _fieldlen = item.decimal ? item.decimal : 0
@@ -1186,6 +1186,33 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'brafteditor') {
        let _max = item.fieldlength || 512

        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.field, {
                initialValue: item.initval || null,
                rules: [
                  {
                    required: item.required === 'true',
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  },
                  {
                    max: _max,
                    message: formRule.input.formMessage.replace('@max', _max)
                  }
                ]
              })(<Editor />)}
            </Form.Item>
          </Col>
        )
      }
    })
    
@@ -1373,7 +1400,6 @@
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
        <Row className={'cols' + cols} gutter={24}>{this.getFields()}</Row>
        {/* <Editor /> */}
      </Form>
    )
  }

 src/tabviews/zshare/mutilform/index.scss

@@ -81,6 +81,11 @@
      min-width: 100px;
    }
  }
  .normal-braft-editor {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    overflow-x: hidden;
  }
  p {
    color: #1890ff;
    border-bottom: 1px solid #d9d9d9;

 src/templates/modalconfig/dragelement/card.jsx

@@ -81,6 +81,9 @@
      labelCol = 'ant-col-sm-2'
      wrapCol = 'ant-col-sm-22'
    }
    if (card.hidelabel === 'true') {
      wrapCol = 'ant-col-sm-24'
    }
  }

  let formItem = null
@@ -146,11 +149,11 @@
      <div className="page-card" style={{ opacity: opacity}}>
        <div ref={node => drag(drop(node))}>
          {<div className="ant-row ant-form-item">
            <div className={'ant-col ant-form-item-label ant-col-xs-24 ' + labelCol}>
            {card.hidelabel !== 'true' ? <div className={'ant-col ant-form-item-label ant-col-xs-24 ' + labelCol}>
              {card.label ? <label className={card.required === 'true' ? 'required' : ''}>{card.tooltip ? 
                <Icon type="question-circle" /> : null}
                {card.label}</label> : null}
            </div>
            </div> : null}
            <div className={'ant-col ant-form-item-control-wrapper ant-col-xs-24 ' + wrapCol}>
              {formItem}
              {showField ? card.field : ''}