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