dlt-for-react 1.0.1

package/lib/components/NHSelector/resultview/index.js

@@ -0,0 +1,371 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.ResultView = undefined;
+
+var _tooltip = require('antd/lib/tooltip');
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+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);
+
+require('antd/lib/tooltip/style');
+
+require('antd/lib/icon/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var _NHFetch = require('../utils/NHFetch');
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+var _index = require('../ListSort/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _NHCore = require('../utils/NHCore');
+
+require('../../../../assets/selector/resultview/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ResultView = exports.ResultView = function (_React$Component) {
+    (0, _inherits3.default)(ResultView, _React$Component);
+
+    function ResultView(props) {
+        (0, _classCallCheck3.default)(this, ResultView);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (ResultView.__proto__ || (0, _getPrototypeOf2.default)(ResultView)).call(this, props));
+
+        _this.initValues = function (initValues, initParams) {
+            if (initValues && initValues.length > 0) {
+                var params = {};
+                params.initValues = initValues;
+                params.params = initParams;
+                params.pagination = { page: 1, pageSize: 10000000 };
+                params.sign = _this.props.sign;
+                params.keyField = _this.props.keyField;
+                if (_this.props.mode !== 'tree') {
+                    params.sqlParams = _this.props.sqlParams;
+                }
+                (0, _NHFetch2.default)(_this.props.url, 'POST', params).then(function (res) {
+                    if (res && res.data) {
+                        var selectRows = [];
+                        var selectRowKeys = [];
+                        var data = [];
+
+                        if (_this.props.mode === 'tree') {
+                            data = res.data;
+                        } else {
+                            data = res.data.list;
+                        }
+                        if (data && data.length > 0) {
+                            for (var i = 0; i < data.length; i++) {
+                                if (data[i].selectFlag !== '0' && data[i].selectFlag !== 0) {
+                                    selectRowKeys.push(data[i][_this.props.keyField]);
+                                    selectRows.push(data[i]);
+                                }
+                            }
+                            _this.props.updateSelectValues(selectRowKeys, selectRows);
+                        }
+                    }
+                });
+            }
+        };
+
+        _this.showFooter = function () {
+            var count = _this.props.selectRows.length;
+            if (_this.props.footerRender) {
+                return _react2.default.createElement(
+                    'div',
+                    { style: { height: '40px', lineHeight: '40px', float: 'right', paddingRight: '16px', fontSize: '15px' } },
+                    _this.props.footerRender(count)
+                );
+            } else {
+                return _react2.default.createElement(
+                    'div',
+                    { style: { height: '40px', lineHeight: '40px', float: 'right', paddingRight: '16px', fontSize: '15px' } },
+                    '\u603B\u8BA1\uFF1A',
+                    count,
+                    '\u4EBA'
+                );
+            }
+        };
+
+        _this.getTextLength = function () {
+            var width = _this.props.width - 50;
+            return parseInt(width / 12, 10);
+        };
+
+        _this.showRows = function (row, seq) {
+            var title = row[_this.props.titleField] ? row[_this.props.titleField] : '';
+            var key = row[_this.props.keyField] ? row[_this.props.keyField] : '';
+            var len = _this.getTextLength();
+            if (_this.props.rowRender) {
+                return _react2.default.createElement(
+                    'li',
+                    { key: key },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'xgui-selector-resultview-showDiv' },
+                        _this.props.rowRender(key, title, row, len, seq),
+                        _react2.default.createElement(_icon2.default, { type: 'info-circle-o', className: 'xgui-selector-resultview-close', onClick: function onClick() {
+                                return _this.handleClose(row[_this.props.keyField], seq);
+                            }, style: { color: 'rgba(0, 0, 0, 0.45)' } })
+                    )
+                );
+            } else {
+                return _react2.default.createElement(
+                    'li',
+                    { key: key },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'xgui-selector-resultview-showDiv' },
+                        _react2.default.createElement(
+                            'div',
+                            { className: 'xgui-selector-resultview-showContentDiv' },
+                            title.length < len ? title : _react2.default.createElement(
+                                _tooltip2.default,
+                                { title: title },
+                                title.substring(0, len - 1) + '...'
+                            )
+                        ),
+                        _react2.default.createElement(_icon2.default, { type: 'info-circle-o', className: 'xgui-selector-resultview-close', onClick: function onClick() {
+                                return _this.handleClose(row[_this.props.keyField], seq);
+                            }, style: { color: 'rgba(0, 0, 0, 0.45)' } })
+                    )
+                );
+            }
+        };
+
+        _this.buildRightTig = function (selectRows) {
+            return selectRows.map(function (item, index) {
+                return _this.showRows(item, index);
+            });
+        };
+
+        _this.showBottomCode = function () {
+            //如果存在选中数据
+            if (_this.props.selectRows && _this.props.selectRows.length > 0) {
+                if (_this.props.singerBottomShowRender) {
+                    return _react2.default.createElement(
+                        'span',
+                        { key: (0, _NHCore.createUuid)() },
+                        _react2.default.createElement(
+                            'font',
+                            { className: 'xgui-selector-resultview-bottomBt' },
+                            '\u5F53\u524D\u5DF2\u9009\uFF1A'
+                        ),
+                        _react2.default.createElement(
+                            'font',
+                            null,
+                            _this.props.singerBottomShowRender(_this.props.selectRows[0])
+                        )
+                    );
+                } else {
+                    var title = _this.props.selectRows[0][_this.props.titleField];
+                    return _react2.default.createElement(
+                        'span',
+                        { key: (0, _NHCore.createUuid)() },
+                        _react2.default.createElement(
+                            'font',
+                            { className: 'xgui-selector-resultview-bottomBt' },
+                            '\u5F53\u524D\u5DF2\u9009\uFF1A'
+                        ),
+                        _react2.default.createElement(
+                            'font',
+                            { className: 'xgui-selector-resultview-bottomResult' },
+                            title
+                        )
+                    );
+                }
+            } else {
+                return _react2.default.createElement(
+                    'span',
+                    { key: (0, _NHCore.createUuid)() },
+                    _react2.default.createElement(
+                        'font',
+                        { className: 'xgui-selector-resultview-bottomBt' },
+                        '\u5F53\u524D\u5DF2\u9009\uFF1A'
+                    ),
+                    _react2.default.createElement(
+                        'font',
+                        { className: 'xgui-selector-resultview-bottomNoSelect' },
+                        '\u60A8\u8FD8\u672A\u9009\u62E9\u6570\u636E'
+                    )
+                );
+            }
+        };
+
+        _this.handleClose = function (key) {
+            var selectRows = [];
+            var selectRowKeys = [];
+            for (var i = 0; i < _this.props.selectRows.length; i++) {
+                if (_this.props.selectRowKeys[i] !== key) {
+                    selectRows.push(_this.props.selectRows[i]);
+                    selectRowKeys.push(_this.props.selectRowKeys[i]);
+                }
+            }
+            if (_this.props.updateSelectValues) {
+                _this.props.updateSelectValues(selectRowKeys, selectRows);
+            }
+        };
+
+        _this.handleSortChange = function (list) {
+            var selectRowsMap = {};
+            for (var i = 0; i < _this.props.selectRows.length; i++) {
+                selectRowsMap[_this.props.selectRowKeys[i]] = _this.props.selectRows[i];
+            }
+            var selectRowKeys = [];
+            var selectRows = [];
+            list.map(function (item, index) {
+                selectRowKeys.push(item.key);
+                selectRows.push(selectRowsMap[item.key]);
+                return item;
+            });
+            //改变的数据回写给上级组件
+            if (_this.props.updateSelectValues) {
+                _this.props.updateSelectValues(selectRowKeys, selectRows);
+            }
+        };
+
+        _this.state = {};
+        return _this;
+    }
+
+    /**
+     * 初始化数据
+     */
+
+
+    //设置可以传递参数的默认值
+
+
+    /**
+     * 显示尾部的信息
+     */
+
+
+    /**
+     * 显示每一条的数据
+     */
+
+
+    /**
+     * 显示在下部分的代码
+     */
+
+
+    /**
+     * 删除一个数据
+     */
+
+
+    /**
+     * 排序改变
+     */
+
+
+    (0, _createClass3.default)(ResultView, [{
+        key: 'render',
+        value: function render() {
+            //如果是单选，且结果展示在下方
+            if (this.props.isSinger === true && this.props.singerBottomShowFlag === true) {
+                return _react2.default.createElement(
+                    'div',
+                    { key: (0, _NHCore.createUuid)(), className: 'xgui-selector-resultview-bottomShowDiv' },
+                    this.showBottomCode()
+                );
+            } else {
+                return _react2.default.createElement(
+                    'div',
+                    null,
+                    _react2.default.createElement(
+                        'div',
+                        { style: { height: this.props.height - 40 + 'px', width: this.props.width } },
+                        this.props.isSinger === true ? _react2.default.createElement(
+                            'div',
+                            { style: { padding: '10px' } },
+                            _react2.default.createElement(
+                                'ul',
+                                null,
+                                this.buildRightTig(this.props.selectRows)
+                            )
+                        ) : '',
+                        this.props.isSinger !== true ? _react2.default.createElement(
+                            _reactCustomScrollbars.Scrollbars,
+                            { autoHide: true, style: { flex: '0 0 ' + this.props.width + 'px', height: this.props.height - 40 } },
+                            _react2.default.createElement(
+                                'div',
+                                { style: { padding: '10px' } },
+                                _react2.default.createElement(
+                                    _index2.default,
+                                    {
+                                        component: 'ul',
+                                        dragClassName: 'list-drag-selected',
+                                        appearAnim: { type: ['right', 'left'], leaveReverse: true },
+                                        onChange: this.handleSortChange
+                                    },
+                                    this.buildRightTig(this.props.selectRows)
+                                )
+                            )
+                        ) : ''
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { style: { height: '40px', width: this.props.width } },
+                        this.showFooter()
+                    )
+                );
+            }
+        }
+    }]);
+    return ResultView;
+}(_react2.default.Component);
+
+ResultView.defaultProps = {
+    sign: undefined,
+    width: undefined, //宽度
+    height: undefined, //高度
+    footerRender: undefined, //底部渲染方法
+    rowRender: undefined, //每行数据渲染的方法,参数：key,title,row,len,seq
+    selectRows: undefined, //需要显示的结果数据
+    selectRowKeys: undefined, //选中的数据的主键列表
+    titleField: 'title', //title字段名
+    keyField: 'key', //title字段名
+    url: undefined, //初始化查询数据的url
+    mode: undefined,
+    updateSelectValues: function updateSelectValues() {}, //删除方法
+    isSinger: undefined, //是否单选
+    singerBottomShowFlag: undefined, //单选时，结果是否显示在下方
+    singerBottomShowRender: undefined //单选时，结果显示在下方的数据展示渲染的回调方法
+};
+exports.default = ResultView;

package/lib/components/NHSelector/selectormodal/index.js

@@ -0,0 +1,251 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.SelectorModal = undefined;
+
+var _modal = require('antd/lib/modal');
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _divider = require('antd/lib/divider');
+
+var _divider2 = _interopRequireDefault(_divider);
+
+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 _layout = require('antd/lib/layout');
+
+var _layout2 = _interopRequireDefault(_layout);
+
+require('antd/lib/modal/style');
+
+require('antd/lib/button/style');
+
+require('antd/lib/divider/style');
+
+require('antd/lib/layout/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _NHCore = require('../utils/NHCore');
+
+require('../../../../assets/selector/selectormodal/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Sider = _layout2.default.Sider;
+
+var SelectorModal = exports.SelectorModal = function (_React$Component) {
+    (0, _inherits3.default)(SelectorModal, _React$Component);
+
+    function SelectorModal(props) {
+        (0, _classCallCheck3.default)(this, SelectorModal);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (SelectorModal.__proto__ || (0, _getPrototypeOf2.default)(SelectorModal)).call(this, props));
+
+        _this.show = function () {
+            _this.setState({ visible: true });
+        };
+
+        _this.close = function () {
+            _this.setState({ visible: false, confirmLoading: false });
+        };
+
+        _this.hideLoading = function () {
+            _this.setState({ confirmLoading: false });
+        };
+
+        _this.handleOk = function () {
+            _this.props.onOk();
+        };
+
+        _this.handleClear = function () {
+            _this.props.onClear && _this.props.onClear();
+        };
+
+        _this.handleCancel = function () {
+            _this.close();
+            _this.props.onCancel();
+        };
+
+        _this.state = {
+            visible: false, //默认不可见
+            confirmLoading: false, //确定按钮 loading
+            width: '',
+            height: _this.props.height ? _this.props.height : '500px'
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(SelectorModal, [{
+        key: 'componentWillMount',
+        value: function componentWillMount() {
+            if (this.props.isSinger === true && this.props.singerBottomShowFlag === true) {
+                this.setState({ width: parseInt(this.props.treeWidth, 10) + parseInt(this.props.tableWidth, 10) });
+            } else {
+                this.setState({ width: parseInt(this.props.treeWidth, 10) + parseInt(this.props.tableWidth, 10) + parseInt(this.props.resultWidth, 10) });
+            }
+        }
+
+        //显示
+
+
+        //关闭
+
+
+        //隐藏加载动画
+
+
+        //确认
+
+
+        //清空
+
+
+        //取消
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _state = this.state,
+                visible = _state.visible,
+                confirmLoading = _state.confirmLoading;
+            var title = this.props.title;
+
+            var width = this.state.width;
+            var height = this.state.height;
+            var dividerWidth = this.props.mode === 'treeAndTable' ? 2 : 1;
+            width = parseInt(width, 10) + dividerWidth;
+
+            var list = [];
+            if (this.props.mode === 'tree' || this.props.mode === 'treeAndTable') {
+                list.push(_react2.default.createElement(
+                    Sider,
+                    { key: 11010001, width: this.props.treeWidth, style: { height: height, overflow: 'hidden', backgroundColor: '#fff' } },
+                    this.props.treeRender()
+                ));
+                list.push(_react2.default.createElement(_divider2.default, { key: 11010002, type: 'vertical', style: { height: height, margin: '0px', paddingLeft: '1px' } }));
+            }
+            if (this.props.mode === 'table' || this.props.mode === 'treeAndTable') {
+                list.push(_react2.default.createElement(
+                    Sider,
+                    { key: 11010003, width: this.props.tableWidth, style: { height: height, overflow: 'hidden', backgroundColor: '#fff' } },
+                    this.props.tableRender()
+                ));
+                list.push(_react2.default.createElement(_divider2.default, { key: 11010004, type: 'vertical', style: { height: height, margin: '0px', paddingLeft: '1px' } }));
+            }
+            if (this.props.isSinger !== true || this.props.singerBottomShowFlag !== true) {
+                list.push(_react2.default.createElement(
+                    Sider,
+                    { key: 11010005, width: this.props.resultWidth, style: { height: height, overflow: 'hidden', backgroundColor: '#fff' } },
+                    this.props.resultRender ? this.props.resultRender() : undefined
+                ));
+            }
+            var buttons = [];
+            if (this.props.isSinger === true && this.props.singerBottomShowFlag === true && this.props.resultRender) {
+                buttons.push(_react2.default.createElement(
+                    'div',
+                    { key: 11010006 },
+                    this.props.resultRender()
+                ));
+            }
+            buttons.push(_react2.default.createElement(
+                _button2.default,
+                { key: (0, _NHCore.createUuid)(), type: 'primary', onClick: this.handleOk },
+                '\u4FDD\u5B58'
+            ));
+            buttons.push(_react2.default.createElement(
+                _button2.default,
+                { key: (0, _NHCore.createUuid)(), type: 'primary', ghost: true, onClick: this.handleClear },
+                '\u6E05\u7A7A'
+            ));
+            buttons.push(_react2.default.createElement(
+                _button2.default,
+                { key: (0, _NHCore.createUuid)(), type: 'primary', ghost: true, onClick: this.handleCancel },
+                '\u53D6\u6D88'
+            ));
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    _modal2.default,
+                    {
+                        title: title,
+                        visible: visible,
+                        width: width,
+                        onCancel: this.handleCancel,
+                        wrapClassName: 'xgui-selector-vertical-center-modal',
+                        confirmLoading: confirmLoading,
+                        maskClosable: false,
+                        footer: buttons
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { style: { height: height } },
+                        _react2.default.createElement(
+                            _layout2.default,
+                            null,
+                            list
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return SelectorModal;
+}(_react2.default.Component);
+
+SelectorModal.defaultProps = {
+    title: "标题",
+    mode: 'treeAndTable', //模式：tree:只存在树，table:只存在列表，treeAndTable：存在树和列表
+    treeWidth: 0, //树宽度,250
+    tableWidth: 0, //列表宽度,600
+    resultWidth: 0, //结果区域宽度,150
+    treeRender: undefined,
+    tableRender: undefined,
+    resultRender: undefined,
+    onOk: function onOk() {},
+    onCancel: function onCancel() {},
+    onClear: function onClear() {},
+    isSinger: undefined, //是否单选
+    singerBottomShowFlag: undefined //单选时，结果是否显示在下方
+};
+
+SelectorModal.propTypes = {
+    title: _propTypes2.default.string, //对话框标题
+    onOk: _propTypes2.default.func, //保存事件回调方法
+    onCancel: _propTypes2.default.func, //返回事件回调方法
+    onClear: _propTypes2.default.func //清空回调事件
+};
+
+exports.default = SelectorModal;