dlt-for-react 2.2.0 → 2.2.1

package/lib/components/HqUeditor/img/EditForm.js

@@ -0,0 +1,310 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _input = require('antd/lib/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _upload = require('antd/lib/upload');
+
+var _upload2 = _interopRequireDefault(_upload);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _row = require('antd/lib/row');
+
+var _row2 = _interopRequireDefault(_row);
+
+var _inputNumber = require('antd/lib/input-number');
+
+var _inputNumber2 = _interopRequireDefault(_inputNumber);
+
+var _col = require('antd/lib/col');
+
+var _col2 = _interopRequireDefault(_col);
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _tabs = require('antd/lib/tabs');
+
+var _tabs2 = _interopRequireDefault(_tabs);
+
+require('antd/lib/input/style');
+
+require('antd/lib/upload/style');
+
+require('antd/lib/icon/style');
+
+require('antd/lib/row/style');
+
+require('antd/lib/input-number/style');
+
+require('antd/lib/col/style');
+
+require('antd/lib/message/style');
+
+require('antd/lib/tabs/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _NHCore = require('../../../utils/NHCore');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TabPane = _tabs2.default.TabPane;
+
+var EditInitForm = function (_React$Component) {
+    (0, _inherits3.default)(EditInitForm, _React$Component);
+
+    function EditInitForm(props) {
+        (0, _classCallCheck3.default)(this, EditInitForm);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (EditInitForm.__proto__ || (0, _getPrototypeOf2.default)(EditInitForm)).call(this, props));
+
+        _this.validateFields = function (callback) {
+            var _this$state = _this.state,
+                err = _this$state.err,
+                formData = _this$state.formData;
+
+            if (formData.activeKey == 'src_tab') {
+                if (!formData.src) {
+                    err = true;
+                    _message3.default.error("链接地址不能为空！");
+                }
+            } else {
+                if (!formData.attachmentId) {
+                    err = true;
+                    _message3.default.error("请上传图片！");
+                }
+            }
+            if (callback) {
+                callback(err, formData);
+            }
+        };
+
+        _this.changeNumber = function (name, value) {
+            var formData = _this.state.formData;
+            formData[name] = value;
+            _this.setState(formData);
+        };
+
+        _this.handleChange = function (_ref) {
+            var fileList = _ref.fileList;
+
+            console.log(fileList);
+            var formData = _this.state.formData;
+            if (fileList && fileList.length == 1 && fileList[0].response && fileList[0].response.data && fileList[0].response.meta.statusCode == 200) {
+                formData["attachmentId"] = fileList[0].response.data.ssbh;
+                _this.setState({
+                    formData: formData,
+                    fileList: fileList
+                });
+            } else {
+                formData["attachmentId"] = undefined;
+                _this.setState({
+                    formData: formData,
+                    fileList: fileList
+                });
+            }
+        };
+
+        _this.beforeUpload = function (file) {
+            if (file.type == "") {
+                if (file.name.indexOf(".png") == -1 && file.name.indexOf(".PNG") == -1 && file.name.indexOf(".jpg") == -1 && file.name.indexOf(".JPG") == -1 && file.name.indexOf(".bpm") == -1 && file.name.indexOf(".BPM") == -1 && file.name.indexOf(".gif") == -1 && file.name.indexOf(".GIF") == -1) {
+                    _message3.default.error('只能上传图片文件！');
+                    return false;
+                } else {
+                    return true;
+                }
+            } else {
+                var valid = file.type.indexOf('image') != -1;
+                if (!valid) {
+                    _message3.default.error('只能上传图片文件！');
+                }
+                return valid;
+            }
+        };
+
+        _this.state = {
+            previewVisible: false,
+            previewImage: '',
+            fileList: [],
+            err: false,
+            formData: {
+                activeKey: 'img_tab',
+                src: undefined,
+                attachmentId: undefined,
+                width: undefined,
+                height: undefined
+            }
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(EditInitForm, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _state = this.state,
+                previewVisible = _state.previewVisible,
+                previewImage = _state.previewImage,
+                fileList = _state.fileList;
+            var imgUploadUrl = this.props.imgUploadUrl;
+
+            var uploadProps = {
+                name: 'file',
+                // action: 'api/docrepo/upload',
+                action: imgUploadUrl + '/upload',
+                beforeUpload: this.beforeUpload,
+                data: { uuid: (0, _NHCore.createUuid)(), type: '1' },
+                accept: 'image/*'
+            };
+            var footerDiv = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    _row2.default,
+                    { style: { marginBottom: 20 } },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 8, style: { textAlign: 'right' } },
+                        '\u56FE\u7247\u5BBD\u5EA6\uFF1A'
+                    ),
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 12 },
+                        _react2.default.createElement(_inputNumber2.default, { value: this.state.formData.width, onChange: function onChange(value) {
+                                _this2.changeNumber("width", value);
+                            } })
+                    )
+                ),
+                _react2.default.createElement(
+                    _row2.default,
+                    { style: { marginBottom: 20 } },
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 8, style: { textAlign: 'right' } },
+                        '\u56FE\u7247\u9AD8\u5EA6\uFF1A'
+                    ),
+                    _react2.default.createElement(
+                        _col2.default,
+                        { span: 12 },
+                        _react2.default.createElement(_inputNumber2.default, { value: this.state.formData.height, onChange: function onChange(value) {
+                                _this2.changeNumber("height", value);
+                            } })
+                    )
+                )
+            );
+            return _react2.default.createElement(
+                _tabs2.default,
+                { activeKey: this.state.formData.activeKey, onChange: function onChange(activeKey) {
+                        _this2.changeNumber("activeKey", activeKey);
+                    } },
+                _react2.default.createElement(
+                    TabPane,
+                    { tab: '\u672C\u5730\u4E0A\u4F20', key: 'img_tab' },
+                    _react2.default.createElement(
+                        _row2.default,
+                        { style: { marginBottom: 20 } },
+                        _react2.default.createElement(
+                            _col2.default,
+                            { span: 8, style: { textAlign: 'right' } },
+                            _react2.default.createElement(
+                                'font',
+                                { color: 'red' },
+                                '*'
+                            ),
+                            '\u4E0A\u4F20\u56FE\u7247\uFF1A'
+                        ),
+                        _react2.default.createElement(
+                            _col2.default,
+                            { span: 12 },
+                            _react2.default.createElement(
+                                _upload2.default,
+                                (0, _extends3.default)({}, uploadProps, { fileList: fileList,
+                                    onChange: this.handleChange }),
+                                fileList.length > 0 ? null : _react2.default.createElement(
+                                    'div',
+                                    { style: {
+                                            textAlign: 'center', border: '1px solid #D9D9D9',
+                                            width: '80px', height: '84px', lineHeight: '38px', cursor: 'pointer'
+                                        } },
+                                    _react2.default.createElement(_icon2.default, { type: 'plus' }),
+                                    _react2.default.createElement(
+                                        'div',
+                                        null,
+                                        '\u4E0A\u4F20'
+                                    )
+                                )
+                            )
+                        )
+                    ),
+                    footerDiv
+                ),
+                _react2.default.createElement(
+                    TabPane,
+                    { tab: '\u56FE\u7247\u94FE\u63A5', key: 'src_tab' },
+                    _react2.default.createElement(
+                        _row2.default,
+                        { style: { marginBottom: 20 } },
+                        _react2.default.createElement(
+                            _col2.default,
+                            { span: 8, style: { textAlign: 'right' } },
+                            _react2.default.createElement(
+                                'font',
+                                { color: 'red' },
+                                '*'
+                            ),
+                            '\u56FE\u7247\u94FE\u63A5\uFF1A'
+                        ),
+                        _react2.default.createElement(
+                            _col2.default,
+                            { span: 12 },
+                            _react2.default.createElement(_input2.default, { value: this.state.formData.src, onChange: function onChange(e) {
+                                    _this2.changeNumber("src", e.target.value);
+                                } })
+                        )
+                    ),
+                    footerDiv
+                )
+            );
+        }
+    }]);
+    return EditInitForm;
+}(_react2.default.Component);
+
+exports.default = EditInitForm;

package/lib/components/HqUeditor/img/index.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../KyModal/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _EditForm = require('./EditForm');
+
+var _EditForm2 = _interopRequireDefault(_EditForm);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Img = function (_React$Component) {
+    (0, _inherits3.default)(Img, _React$Component);
+
+    function Img(props) {
+        (0, _classCallCheck3.default)(this, Img);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (Img.__proto__ || (0, _getPrototypeOf2.default)(Img)).call(this, props));
+
+        _this.initBtn = function () {
+            var obj = _this;
+            var UE = _this.props.UE;
+            UE.registerUI('nhImg', function (editor, uiName) {
+                //注册按钮执行时的command命令，使用命令默认就会带有回退操作
+                editor.registerCommand(uiName, {
+                    execCommand: function execCommand() {
+                        alert('execCommand:' + uiName);
+                    }
+                });
+                //创建一个button
+                var btn = new UE.ui.Button({
+                    //按钮的名字
+                    name: uiName,
+                    //提示
+                    title: '单图上传',
+                    //添加额外样式，指定icon图标，这里默认使用一个重复的icon
+                    cssRules: 'background-position: -380px 0;',
+                    //点击时执行的命令
+                    onclick: function onclick() {
+                        /* editor.execCommand( 'insertimage', {
+                              src:'http://www.hnit.edu.cn/upfile/2018/2018424165944293.jpg',
+                              width:'100',
+                              height:'100'
+                          } ); */
+                        obj.setState({ editor: editor }, function () {
+                            obj.refs.nhModal.show();
+                        });
+                    }
+                });
+                //当点到编辑内容上时，按钮要做的状态反射
+                editor.addListener('selectionchange', function () {
+                    btn.setDisabled(false);
+                });
+                //因为你是添加button,所以需要返回这个button
+                return btn;
+            });
+        };
+
+        _this.handleSave = function (stopLoading) {
+            var imgShowUrl = _this.props.imgShowUrl;
+
+            var obj = _this;
+            _this.refs.nhForm.validateFields(function (err, formData) {
+                if (err) {
+                    stopLoading();
+                    return;
+                }
+                // 'http://www.hnit.edu.cn/upfile/2018/2018424165944293.jpg'
+                // this.state.editor.execCommand('insertimage', {
+                //     src: formData.src ? formData.src : `anonymity/docrepo/download/file?attachmentId=${formData.attachmentId}`,
+                //     width: formData.width ? formData.width : undefined,
+                //     height: formData.height ? formData.height : undefined,
+                //     style:"max-width:100%;"
+                // });
+
+                var url = formData.activeKey === "src_tab" ? formData.src : imgShowUrl + '/download/file?attachmentId=' + formData.attachmentId;
+                _this.state.editor.execCommand('inserthtml', '<img style="max-width:100%" src="' + url + '" width="' + (formData.width ? formData.width : undefined) + '" height="' + (formData.height ? formData.height : undefined) + '" />');
+                obj.refs.nhModal.close();
+            });
+        };
+
+        _this.state = {
+            content: undefined,
+            editor: undefined
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(Img, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.initBtn();
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {}
+    }, {
+        key: 'render',
+        value: function render() {
+            var imgUploadUrl = this.props.imgUploadUrl;
+
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    NHModal,
+                    { ref: 'nhModal',
+                        title: '\u4E0A\u4F20\u56FE\u7247',
+                        onOk: this.handleSave
+                    },
+                    _react2.default.createElement(_EditForm2.default, { ref: 'nhForm', content: this.state.content, imgUploadUrl: imgUploadUrl })
+                )
+            );
+        }
+    }]);
+    return Img;
+}(_react2.default.Component);
+
+Img.defaultProps = {};
+exports.default = Img;

package/lib/components/HqUeditor/index.js

@@ -0,0 +1,239 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+require('../../../assets/components/HqUeditor/ueditor/ueditor.config.js');
+
+require('../../../assets/components/HqUeditor/ueditor/ueditor.all.min.js');
+
+require('../../../assets/components/HqUeditor/ueditor/lang/zh-cn/zh-cn.js');
+
+require('../../../assets/components/HqUeditor/ueditor.css');
+
+var _index = require('./link/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _index3 = require('./img/index');
+
+var _index4 = _interopRequireDefault(_index3);
+
+var _index5 = require('./file/index');
+
+var _index6 = _interopRequireDefault(_index5);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var HqUeditor = function (_React$Component) {
+    (0, _inherits3.default)(HqUeditor, _React$Component);
+
+    function HqUeditor(props) {
+        (0, _classCallCheck3.default)(this, HqUeditor);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HqUeditor.__proto__ || (0, _getPrototypeOf2.default)(HqUeditor)).call(this, props));
+
+        _this.getContent = function () {
+            return UE.getEditor(_this.props.id).getContent();
+        };
+
+        _this.getContentTxt = function () {
+            return UE.getEditor(_this.props.id).getContentTxt();
+        };
+
+        _this.triggerChange = function (value) {
+            // Should provide an event to pass value to Form.
+            var onChange = _this.props.onChange;
+            if (onChange) {
+                onChange(value);
+            }
+        };
+
+        _this.setContent = function (html) {
+            var _this$props = _this.props,
+                id = _this$props.id,
+                value = _this$props.value;
+
+            var ueEditor = UE.getEditor(id);
+            // 等编辑器实例创建好后再执行set操作
+            if (ueEditor.isReady === 1) {
+                ueEditor.setContent(html || value);
+            } else {
+                ueEditor.ready(function (ueditor) {
+                    _this.setContent(html);
+                });
+            }
+        };
+
+        _this.state = {
+            width: _this.props.width ? _this.props.width : '800px',
+            height: _this.props.height ? _this.props.height : '400px',
+            imgUploadUrl: _this.props.imgUploadUrl || 'api/docrepo', //图片上传路径
+            imgShowUrl: _this.props.imgShowUrl || 'anonymity/docrepo', //图片展示路径
+            fileUploadUrl: _this.props.fileUploadUrl || 'zuul/docrepo', //附件上传路径
+            fileDownloadUrl: _this.props.fileDownloadUrl || 'anonymity/docrepo', //附件下载路径
+            toolbars: _this.props.toolbars ? _this.props.toolbars : undefined //富文本编辑器 定制工具栏
+        };
+
+        return _this;
+    }
+
+    (0, _createClass3.default)(HqUeditor, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var getContent = this.props.getContent;
+
+            this.initEditor();
+            if (getContent) {
+                getContent(this.getContent);
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            // 组件卸载后，清除放入库的id
+            // 组件如果在FormItem中，是不可以对其组件内部的父元素进行条件判断，请选择display-none的方法
+            UE.delEditor(this.props.id);
+        }
+    }, {
+        key: 'initEditor',
+        value: function initEditor() {
+            var _this2 = this;
+
+            var _props = this.props,
+                id = _props.id,
+                Editor = _props.Editor,
+                autoFloatEnabled = _props.autoFloatEnabled,
+                autoHeightEnabled = _props.autoHeightEnabled,
+                value = _props.value,
+                toolbars = _props.toolbars;
+
+            //配置参数
+
+            var config = {
+                autoFloatEnabled: autoFloatEnabled === true ? true : false, //是否保持toolbar的位置不动,默认false
+                autoHeightEnabled: autoHeightEnabled === false ? false : true, //是否自动长高,默认true
+                serverUrl: 'jsp/controller.jsp', //粘贴时候图片的上传路径,这个暂时还没有实现
+                textarea: id,
+                initialContent: value
+            };
+            if (toolbars) {
+                config.toolbars = toolbars; //定制工具栏;
+            }
+
+            var ueEditor = UE.getEditor(id, config);
+            var self = this;
+
+            ueEditor.ready(function (ueditor) {
+                if (!ueditor) {
+                    UE.delEditor(id);
+                    self.initEditor();
+                }
+                if (Editor) {
+                    Editor(ueEditor);
+                }
+                ueEditor.addListener('selectionchange', function () {
+                    var value = _this2.getContent();
+                    _this2.triggerChange(value);
+                });
+            });
+        }
+
+        //提供onChange回调方法给Form表单，表明这是一个自定义表单受控组件
+
+
+        /**
+         * @description: 设置富文本内容，设置回调和默认值都可以使用
+         * @param {*} html 参数格式为字符串
+         * @return {*}  
+         */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _state = this.state,
+                fileUploadUrl = _state.fileUploadUrl,
+                fileDownloadUrl = _state.fileDownloadUrl,
+                imgShowUrl = _state.imgShowUrl,
+                imgUploadUrl = _state.imgUploadUrl;
+
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('div', { id: this.props.id, name: 'content', type: 'text/plain', style: { width: this.state.width, height: this.state.height } }),
+                _react2.default.createElement(_index2.default, {
+                    UE: UE
+                }),
+                _react2.default.createElement(_index4.default, {
+                    UE: UE,
+                    imgShowUrl: imgShowUrl,
+                    imgUploadUrl: imgUploadUrl
+                }),
+                _react2.default.createElement(_index6.default, {
+                    UE: UE,
+                    fileUploadUrl: fileUploadUrl,
+                    fileDownloadUrl: fileDownloadUrl
+                })
+            );
+        }
+    }]);
+    return HqUeditor;
+}(_react2.default.Component);
+//属性检查
+
+// import './ueditor/themes/default/css/ueditor.css';
+/*
+ * @Author: your name
+ * @Date: 2020-06-18 15:03:48
+ * @LastEditTime: 2024-08-02 15:47:22
+ * @LastEditors: jiangzhongxin
+ * @Description: In User Settings Edit
+ * @FilePath: \xgui-for-react\src\components\HqUeditor\index.js
+ */
+
+
+HqUeditor.defaultProps = {
+    id: 'content',
+    Content: '', // 废弃
+    value: '', //父类传进来的值,这里需要配合Form默认配置key设置为value
+    getContent: undefined //通过该方法把 this.getContent传给父类
+};
+HqUeditor.propTypes = {
+    getContent: _propTypes2.default.func, //父级获取富文本的获取内容方法
+    getContentTxt: _propTypes2.default.func, // 获取富文本文字方法
+    value: _propTypes2.default.string, // 传入的初始值,配合表单做初始化
+    width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+    height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
+};
+
+exports.default = HqUeditor;