From 38b5297cbfbe3d61ee2e800b51e8324ee163f43e Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 18 一月 2021 12:24:50 +0800
Subject: [PATCH] 2021-01-18

---
 src/tabviews/zshare/actionList/index.scss       |    5 
 src/tabviews/zshare/mutilform/index.jsx         |   32 +++++
 src/tabviews/verupmanage/subtabtable/index.scss |    2 
 src/tabviews/subtable/index.scss                |    2 
 src/tabviews/verupmanage/actionList/index.scss  |    4 
 src/components/editor/index.scss                |   20 ++++
 src/tabviews/zshare/fileupload/index.jsx        |   13 ++
 src/tabviews/zshare/mutilform/index.scss        |    5 +
 src/components/editor/index.jsx                 |  186 ++++++++++++++++++++++++++++++++++++-
 src/templates/modalconfig/dragelement/card.jsx  |    7 +
 src/tabviews/scriptmanage/actionList/index.scss |    4 
 11 files changed, 260 insertions(+), 20 deletions(-)

diff --git a/src/components/editor/index.jsx b/src/components/editor/index.jsx
index 58bfb60..b7745fe 100644
--- a/src/components/editor/index.jsx
+++ b/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                           // 褰撳墠涓婁紶鐨刢hunk
+    let spark = new SparkMD5.ArrayBuffer()         // 瀵筧rrayBuffer鏁版嵁杩涜md5鍔犲瘑锛屼骇鐢熶竴涓猰d5瀛楃涓�
+    let chunkFileReader = new FileReader()         // 鐢ㄤ簬璁$畻鍑烘瘡涓猚hunkMd5
+    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                                // 璁板綍鎵�鏈塩hunks鐨勯暱搴�
+
+    if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) {            // 鏂囦欢鍚嶇О鍚湁鑻辨枃鍙婃暟瀛椾箣澶栧瓧绗︽椂锛屽悕绉扮郴缁熺敓鎴�
+      params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid()
+    }
+
+    totalFileReader.readAsArrayBuffer(file)
+    totalFileReader.onload = (e) => {   // 瀵规暣涓猼otalFile鐢熸垚md5
+      spark.append(e.target.result)
+      params.file.fileMd5 = spark.end() // 璁$畻鏁翠釜鏂囦欢鐨刦ileMd5
+
+      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)      // 瀵规瘡涓�鐗囧垎鐗囪繘琛宮d5鍔犲瘑
+      
+      params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 娣诲姞鍒囩墖md5
+      
+      currentChunk++  // 姣忎竴娆″垎鐗噊nload,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>
     )
   }
diff --git a/src/components/editor/index.scss b/src/components/editor/index.scss
index e69de29..1eb137c 100644
--- a/src/components/editor/index.scss
+++ b/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);
+  }
+}
\ No newline at end of file
diff --git a/src/tabviews/scriptmanage/actionList/index.scss b/src/tabviews/scriptmanage/actionList/index.scss
index 3ed2c30..2b7b17b 100644
--- a/src/tabviews/scriptmanage/actionList/index.scss
+++ b/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;
diff --git a/src/tabviews/subtable/index.scss b/src/tabviews/subtable/index.scss
index 76f5e85..9f855e4 100644
--- a/src/tabviews/subtable/index.scss
+++ b/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 {
diff --git a/src/tabviews/verupmanage/actionList/index.scss b/src/tabviews/verupmanage/actionList/index.scss
index e1a1938..2681842 100644
--- a/src/tabviews/verupmanage/actionList/index.scss
+++ b/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;
diff --git a/src/tabviews/verupmanage/subtabtable/index.scss b/src/tabviews/verupmanage/subtabtable/index.scss
index 7159b95..e2964c1 100644
--- a/src/tabviews/verupmanage/subtabtable/index.scss
+++ b/src/tabviews/verupmanage/subtabtable/index.scss
@@ -41,7 +41,7 @@
       position: absolute;
       right: 5px;
       top: -22px;
-      z-index: 10;
+      z-index: 1;
     }
   }
 }
diff --git a/src/tabviews/zshare/actionList/index.scss b/src/tabviews/zshare/actionList/index.scss
index ad2d2bb..844e480 100644
--- a/src/tabviews/zshare/actionList/index.scss
+++ b/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;
diff --git a/src/tabviews/zshare/fileupload/index.jsx b/src/tabviews/zshare/fileupload/index.jsx
index 925ef09..e42c173 100644
--- a/src/tabviews/zshare/fileupload/index.jsx
+++ b/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                                // 璁板綍鎵�鏈塩hunks鐨勯暱搴�
 
     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)
diff --git a/src/tabviews/zshare/mutilform/index.jsx b/src/tabviews/zshare/mutilform/index.jsx
index ce1485e..ba0cddb 100644
--- a/src/tabviews/zshare/mutilform/index.jsx
+++ b/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>
     )
   }
diff --git a/src/tabviews/zshare/mutilform/index.scss b/src/tabviews/zshare/mutilform/index.scss
index ac212f9..384c310 100644
--- a/src/tabviews/zshare/mutilform/index.scss
+++ b/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;
diff --git a/src/templates/modalconfig/dragelement/card.jsx b/src/templates/modalconfig/dragelement/card.jsx
index 8c78e29..75afee1 100644
--- a/src/templates/modalconfig/dragelement/card.jsx
+++ b/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 : ''}

--
Gitblit v1.8.0