dlt-for-react 1.0.2 → 1.0.4

package/lib/components/KyPreview/index.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _spin = require('antd/lib/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _pagination = require('antd/lib/pagination');
+
+var _pagination2 = _interopRequireDefault(_pagination);
+
+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/spin/style');
+
+require('antd/lib/pagination/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactFileViewer = require('react-file-viewer');
+
+var _reactFileViewer2 = _interopRequireDefault(_reactFileViewer);
+
+var _reactPdfJs = require('react-pdf-js');
+
+var _reactPdfJs2 = _interopRequireDefault(_reactPdfJs);
+
+var _reactViewer = require('react-viewer');
+
+var _reactViewer2 = _interopRequireDefault(_reactViewer);
+
+require('../../../assets/components/KyPreview/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 科研附件预览组件
+ */
+
+//react预览image文件插件
+
+/**
+ * react-file-viewer:文件预览支持
+ * Images: png, jpeg, gif, bmp, including 360-degree images
+ * pdf
+ * csv
+ * xslx
+ * docx
+ * Video: mp4, webm
+ * Audio: mp3
+ */
+var KyPreview = function (_React$Component) {
+  (0, _inherits3.default)(KyPreview, _React$Component);
+
+  function KyPreview(props) {
+    (0, _classCallCheck3.default)(this, KyPreview);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (KyPreview.__proto__ || (0, _getPrototypeOf2.default)(KyPreview)).call(this, props));
+
+    _this.closeFile = function () {
+      _this.props.onCancel && _this.props.onCancel();
+    };
+
+    _this.onDocumentComplete = function (pages) {
+      _this.setState({ page: 1, pages: pages });
+    };
+
+    _this.handleChange = function (page) {
+      _this.setState({ page: page });
+    };
+
+    _this.getComponent = function (fileType) {
+      var _this$props = _this.props,
+          height = _this$props.height,
+          visible = _this$props.visible,
+          previewFile = _this$props.previewFile,
+          fileUid = _this$props.fileUid;
+      var _this$state = _this.state,
+          page = _this$state.page,
+          pages = _this$state.pages;
+
+      var component = null;
+      var fileViewerList = ['csv', 'docx', 'xlsx']; ///Office文档
+      var imageList = ['png', 'jpeg', 'jpg', 'gif', 'bmp']; //图片格式
+      if (!previewFile) return '请传入预览文件源';
+      if (fileType === 'pdf') {
+        component = _react2.default.createElement(
+          _spin2.default,
+          { spinning: Boolean(!pages), tip: '\u52A0\u8F7D\u4E2D...' },
+          _react2.default.createElement(
+            'div',
+            { className: 'filePdf', style: { minHeight: 300 + 'px' } },
+            _react2.default.createElement(_reactPdfJs2.default, { file: previewFile, onDocumentComplete: _this.onDocumentComplete, page: page })
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'filePdfFooter' },
+            _react2.default.createElement(_pagination2.default, { current: page, onChange: _this.handleChange, total: pages * 10 })
+          )
+        );
+      } else if (imageList.includes(fileType)) {
+        component = _react2.default.createElement(_reactViewer2.default, {
+          visible: visible,
+          loop: false,
+          onClose: _this.closeFile,
+          images: [{ src: previewFile, alt: '' }],
+          changeable: false
+        });
+      } else if (fileViewerList.includes(fileType)) {
+        component = _react2.default.createElement(
+          'div',
+          { className: 'fileContent', style: { height: height + 'px' } },
+          _react2.default.createElement(_reactFileViewer2.default, {
+            fileType: fileType //文件类型
+            , filePath: previewFile //文件地址
+          })
+        );
+      } else {
+        component = fileType + '\u6587\u4EF6\u683C\u5F0F\u6682\u4E0D\u652F\u6301\u9884\u89C8';
+      }
+      return component;
+    };
+
+    _this.state = {
+      page: 1,
+      pages: null
+    };
+    return _this;
+  }
+  //获取所有页
+
+
+  (0, _createClass3.default)(KyPreview, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          fileType = _props.fileType,
+          visible = _props.visible,
+          height = _props.height;
+
+      return _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        _react2.default.createElement(
+          'div',
+          { style: { display: visible ? 'block' : 'none' }, className: 'KyPreview' },
+          this.getComponent(fileType)
+        ),
+        _react2.default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n            .react-grid-Grid {\n              min-height: ' + height * 0.9 + 'px !important;\n            }\n          '
+        )
+      );
+    }
+  }]);
+  return KyPreview;
+}(_react2.default.Component);
+
+/**
+ * 默认属性
+ */
+
+//react预览pdf文件插件
+
+
+exports.default = KyPreview;
+KyPreview.defaultProps = {
+  previewFile: null, //文件源[文件url/文件对象/base64]
+  fileType: 'xlsx', //预览类型
+  fileUid: '', //附件id
+  visible: false, //默认展示
+  height: 500,
+  onCancel: function onCancel() {}
+};
+
+/**
+ * 属性检查
+ */
+KyPreview.propTypes = {
+  onCancel: _propTypes2.default.func //返回事件回调方法
+};

package/lib/components/KyTable/AddFieldsModal.js

@@ -0,0 +1,360 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _modal = require('antd/lib/modal');
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _checkbox = require('antd/lib/checkbox');
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _input = require('antd/lib/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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);
+
+require('antd/lib/modal/style');
+
+require('antd/lib/checkbox/style');
+
+require('antd/lib/input/style');
+
+require('antd/lib/icon/style');
+
+require('antd/lib/message/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _isEqual = require('lodash/isEqual');
+
+var _isEqual2 = _interopRequireDefault(_isEqual);
+
+var _debounce = require('lodash/debounce');
+
+var _debounce2 = _interopRequireDefault(_debounce);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+require('../../../assets/components/KyTable/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 高级搜索-添加搜索字段
+ */
+var currentLine = 0;
+
+var AddFieldsModal = function (_Component) {
+  (0, _inherits3.default)(AddFieldsModal, _Component);
+
+  function AddFieldsModal(props) {
+    (0, _classCallCheck3.default)(this, AddFieldsModal);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (AddFieldsModal.__proto__ || (0, _getPrototypeOf2.default)(AddFieldsModal)).call(this, props));
+
+    _this.debounceSearch = function (value) {
+      _this.setState({ searchValue: value }, function () {
+        _this.changeItem();
+      });
+      // 搜索字段为空，重置currentLine
+      if (value == '') {
+        currentLine = 0;
+      }
+    };
+
+    _this.handleSearchChange = function (e) {
+      var value = e.target.value;
+
+      _this.debounceSearch(value);
+    };
+
+    _this.onChange = function (checkedList) {
+      var data = _this.props.data;
+
+      _this.setState({
+        checkedList: checkedList,
+        indeterminate: !!checkedList.length && checkedList.length < data.length,
+        checkAll: checkedList.length === data.length
+      });
+    };
+
+    _this.onCheckAllChange = function (e) {
+      var data = _this.props.data;
+
+      _this.setState({
+        checkedList: e.target.checked ? data.map(function (item) {
+          return item.dataIndex;
+        }) : [],
+        indeterminate: false,
+        checkAll: e.target.checked
+      });
+    };
+
+    _this.handleOk = function () {
+      var _this$props = _this.props,
+          data = _this$props.data,
+          onOk = _this$props.onOk;
+      var checkedList = _this.state.checkedList;
+
+      if (!checkedList || checkedList.length < 1) {
+        _message3.default.info('请至少选择一个字段');
+        return;
+      }
+      var result = [];
+      data.forEach(function (item) {
+        if (checkedList.includes(item.dataIndex)) {
+          var nitem = (0, _extends3.default)({}, item);
+          nitem.defaultSearch = true;
+          result.push(nitem);
+        }
+      });
+      onOk && onOk(result);
+    };
+
+    _this.handleCancel = function () {
+      var onCancel = _this.props.onCancel;
+
+      _this.setState({
+        searchValue: ''
+      });
+      onCancel && onCancel();
+    };
+
+    _this.handleKeyUp = function (e) {
+      // Enter键盘事件
+      if (e.keyCode == 13) {
+        _this.changeItem();
+      }
+    };
+
+    _this.changeItem = function () {
+      var elements = document.getElementById('' + _this.listID).getElementsByClassName('textHighLight');
+      if (elements.length) {
+        // 最后一个高亮
+        if (currentLine === elements.length) {
+          currentLine = 0;
+        }
+        // 清除高亮
+        for (var index = 0; index < elements.length; index++) {
+          var element = elements[index];
+          element.classList.remove('active');
+        }
+        // 添加高亮
+        elements[currentLine].classList.add('active');
+        // currentLine + 1
+        currentLine++;
+      }
+    };
+
+    _this.listID = 'fields-' + Math.random().toString(36);
+    _this.state = {
+      searchValue: '', // 搜索字段
+      checkedList: _this.props.checkedList || [], // 选中项
+      indeterminate: false, // 控制全选样式状态
+      checkAll: false // 是否全选
+    };
+    _this.debounceSearch = (0, _debounce2.default)(_this.debounceSearch, 500);
+    return _this;
+  }
+
+  (0, _createClass3.default)(AddFieldsModal, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if ('checkedList' in nextProps && !(0, _isEqual2.default)(nextProps.checkedList, this.props.checkedList)) {
+        var checkedList = nextProps.checkedList,
+            data = nextProps.data;
+
+        this.setState({
+          checkedList: checkedList,
+          checkAll: checkedList.length === data.length,
+          indeterminate: !!checkedList.length && checkedList.length < data.length
+        });
+      }
+    }
+
+    // 搜索
+
+
+    // 单个选择
+
+
+    // 全选
+
+
+    // 保存
+
+
+    // Enter键切换高亮
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          wrapClassName = _props.wrapClassName,
+          visible = _props.visible,
+          width = _props.width,
+          title = _props.title,
+          data = _props.data,
+          colNum = _props.colNum,
+          onCancel = _props.onCancel;
+      var _state = this.state,
+          searchValue = _state.searchValue,
+          indeterminate = _state.indeterminate,
+          checkAll = _state.checkAll,
+          checkedList = _state.checkedList;
+
+      var reg = new RegExp(searchValue, 'ig');
+      return _react2.default.createElement(
+        _modal2.default,
+        {
+          wrapClassName: (0, _classnames2.default)(wrapClassName, 'addSearchFieldsModal'),
+          width: width,
+          title: title,
+          okText: '\u4FDD\u5B58',
+          visible: visible,
+          onCancel: this.handleCancel,
+          onOk: this.handleOk
+        },
+        _react2.default.createElement(
+          'div',
+          { className: 'searchBox' },
+          _react2.default.createElement(_input2.default, {
+            placeholder: '\u641C\u7D22\u5B57\u6BB5',
+            prefix: _react2.default.createElement(_icon2.default, { type: 'search', style: { color: '#999' } }),
+            onChange: this.handleSearchChange,
+            onKeyUp: this.handleKeyUp,
+            style: { width: 280 }
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'checkAllBox' },
+          _react2.default.createElement(
+            _checkbox2.default,
+            {
+              indeterminate: indeterminate,
+              onChange: this.onCheckAllChange,
+              checked: checkAll
+            },
+            _react2.default.createElement(
+              'b',
+              null,
+              '\u5168\u9009'
+            )
+          ),
+          _react2.default.createElement(
+            'span',
+            { className: 'tip' },
+            '\u5DF2\u9009\u62E9\uFF1A',
+            _react2.default.createElement(
+              'span',
+              { className: 'num' },
+              checkedList.length
+            )
+          )
+        ),
+        _react2.default.createElement(
+          _reactCustomScrollbars.Scrollbars,
+          { style: { height: 300 }, autoHide: true },
+          _react2.default.createElement(
+            _checkbox2.default.Group,
+            { style: { width: '100%' }, value: checkedList, onChange: this.onChange },
+            _react2.default.createElement(
+              'table',
+              { id: this.listID },
+              _react2.default.createElement(
+                'tbody',
+                null,
+                data.map(function (row, i) {
+                  if (i % colNum === 0) {
+                    return _react2.default.createElement(
+                      'tr',
+                      { key: i },
+                      data.slice(i, i % colNum === 0 ? i + colNum : i % colNum).map(function (item, j) {
+                        var _label = item.title;
+                        // 对label做高亮匹配
+                        if (searchValue) {
+                          var match = _label && _label.match(reg) || [];
+                          _label = _label && _label.split(reg).map(function (_it, _idx) {
+                            return _idx > 0 ? [_react2.default.createElement(
+                              'span',
+                              { key: _idx, className: 'textHighLight' },
+                              match[0]
+                            ), _it] : _it;
+                          });
+                        }
+                        return _react2.default.createElement(
+                          'td',
+                          { key: j },
+                          _react2.default.createElement(
+                            _checkbox2.default,
+                            { value: item.dataIndex },
+                            _label
+                          )
+                        );
+                      })
+                    );
+                  } else {
+                    return null;
+                  }
+                })
+              )
+            )
+          )
+        )
+      );
+    }
+  }]);
+  return AddFieldsModal;
+}(_react.Component);
+
+AddFieldsModal.defaultProps = {
+  visible: false,
+  width: 900, // 默认模态框宽度900
+  title: '添加搜索字段',
+  data: [], // 可供添加的字段列表
+  colNum: 6 // 默认一行显示6列
+};
+exports.default = AddFieldsModal;