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