dlt-for-react 2.0.16 → 2.1.0

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

@@ -0,0 +1,408 @@
+"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 _reactCustomScrollbarsPatched = require("react-custom-scrollbars-patched");
+
+var _index = require("../ListSort/index");
+
+var _index2 = _interopRequireDefault(_index);
+
+var _index3 = require("../../../index");
+
+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, _index3.NHFetch)(_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 unit = _this.props.unit;
+
+      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,
+          unit
+        );
+      }
+    };
+
+    _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: "dlt-selector-resultview-showDiv" },
+            _this.props.rowRender(key, title, row, len, seq),
+            _react2.default.createElement(_icon2.default, {
+              type: "info-circle-o",
+              className: "dlt-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: "dlt-selector-resultview-showDiv" },
+            _react2.default.createElement(
+              "div",
+              { className: "dlt-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: "dlt-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, _index3.createUuid)() },
+            _react2.default.createElement(
+              "font",
+              { className: "dlt-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, _index3.createUuid)() },
+            _react2.default.createElement(
+              "font",
+              { className: "dlt-selector-resultview-bottomBt" },
+              "\u5F53\u524D\u5DF2\u9009\uFF1A"
+            ),
+            _react2.default.createElement(
+              "font",
+              { className: "dlt-selector-resultview-bottomResult" },
+              title
+            )
+          );
+        }
+      } else {
+        return _react2.default.createElement(
+          "span",
+          { key: (0, _index3.createUuid)() },
+          _react2.default.createElement(
+            "font",
+            { className: "dlt-selector-resultview-bottomBt" },
+            "\u5F53\u524D\u5DF2\u9009\uFF1A"
+          ),
+          _react2.default.createElement(
+            "font",
+            { className: "dlt-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, _index3.createUuid)(),
+            className: "dlt-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(
+              _reactCustomScrollbarsPatched.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,303 @@
+"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 _index = require("../../../index");
+
+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 _props = this.props,
+          title = _props.title,
+          zIndex = _props.zIndex,
+          wrapClassName = _props.wrapClassName,
+          className = _props.className;
+
+      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, _index.createUuid)(), type: "primary", onClick: this.handleOk },
+        "\u4FDD\u5B58"
+      ));
+      buttons.push(_react2.default.createElement(
+        _button2.default,
+        {
+          key: (0, _index.createUuid)(),
+          type: "primary",
+          ghost: true,
+          onClick: this.handleClear
+        },
+        "\u6E05\u7A7A"
+      ));
+      buttons.push(_react2.default.createElement(
+        _button2.default,
+        {
+          key: (0, _index.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: "dlt-selector-vertical-center-modal " + wrapClassName,
+            confirmLoading: confirmLoading,
+            maskClosable: false,
+            footer: buttons,
+            zIndex: zIndex,
+            className: className
+          },
+          _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;