dlt-for-react 1.1.16 → 1.1.18

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

@@ -0,0 +1,554 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _popover = require("antd/lib/popover");
+
+var _popover2 = _interopRequireDefault(_popover);
+
+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 _input = require("antd/lib/input");
+
+var _input2 = _interopRequireDefault(_input);
+
+var _tree = require("antd/lib/tree");
+
+var _tree2 = _interopRequireDefault(_tree);
+
+var _layout = require("antd/lib/layout");
+
+var _layout2 = _interopRequireDefault(_layout);
+
+require("antd/lib/popover/style");
+
+require("antd/lib/input/style");
+
+require("antd/lib/tree/style");
+
+require("antd/lib/layout/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactCustomScrollbarsPatched = require("react-custom-scrollbars-patched");
+
+var _index = require("../../../index");
+
+require("../../../../assets/selector/tree/index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Sider = _layout2.default.Sider;
+
+var TreeNode = _tree2.default.TreeNode;
+var Search = _input2.default.Search;
+var img1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjI1MTMxYjc3LTBkNGMtMTFlOC05MjEwLWU0MTFjYTYzZDcwNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOUI0NEZEQzY3QzIxMUU4OTRGQkVGQUIyRjA5NjQwOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOUI0NEZEQjY3QzIxMUU4OTRGQkVGQUIyRjA5NjQwOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxYzgzNDFhZC1iMGU1LTI1NDYtOGIwNy1jYTM2NDVmZDU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2ZDA1N2MzYS00ZWIwLTExZTgtOGJjNy04YTNlYTNhMzM1YmYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7gtxlMAAAA0klEQVR42mL8//8/A7UAEwMVAQuI+LhE9jiQssAi/x2I3fljHh8mxWUWOOQ5gdiYWJcxgsIM6DJ8AfcDiH/ikFsGdHUWijcJAA4oxga8MMIMCkCuywPiKySE+Q9chj0E4iNAfAiIeYk1DRhEIOok0LsWyEnjFBB7kmIQElBBT2eg5GFGZhI7hm7YCQoMO4Js2C8gfgXEUmQadhjZsPNAbECmQaAYPYtsGCVePA2MyV/ohplSEl7Ihp2iwGWH0Q0DZRceMgy6D8RHUTL6oCwcAQIMAJDpNDqeDoePAAAAAElFTkSuQmCC";
+var img2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjI1MTMxYjc3LTBkNGMtMTFlOC05MjEwLWU0MTFjYTYzZDcwNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFODkxQzQzNDY3QzIxMUU4Qjg4RUQxNzYyQUFEODRBNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFODkxQzQzMzY3QzIxMUU4Qjg4RUQxNzYyQUFEODRBNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxYzgzNDFhZC1iMGU1LTI1NDYtOGIwNy1jYTM2NDVmZDU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2ZDA1N2MzYS00ZWIwLTExZTgtOGJjNy04YTNlYTNhMzM1YmYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6hQI8PAAAA1UlEQVR42mL8//8/A7UAEwMVAU7DKq7l/AFiPkZGRgYYBvLvArEOjI8OGJG9CVIIpFiA+BcQXwViMyD+jaR+AxBnA/FTIP7ToTXlCrJhLGiGX4bSD6H0PCDWQZIHiZcAsQPMMcR4UxqI9wCxKpr4PSA2xBU0LHjEXbCIO+KLAJyGAcPjL7ZALr+azQwKL1IMA8UkSOPApTO6ePMl0JtfcHiTh1SXCUMxVbzJCvTmHxzeZEHLFQQNuwL05gsc3pQg1WXqUExR0vhHgt5/eEuNQVU4AgQYAJwVQ10C8lwZAAAAAElFTkSuQmCC";
+
+var SelectorTree = function (_React$Component) {
+  (0, _inherits3.default)(SelectorTree, _React$Component);
+
+  function SelectorTree(props) {
+    (0, _classCallCheck3.default)(this, SelectorTree);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (SelectorTree.__proto__ || (0, _getPrototypeOf2.default)(SelectorTree)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    _this.state = {
+      checkedKeys: [], //选中的值
+      selectedKeys: [], //选中节点的数据
+      expandedKeys: [],
+      searchValue: "",
+      autoExpandParent: true,
+      data: [], //树数据
+      dataList: [], //树列表数据,主要在过滤的时候使用
+      singerDataMap: {}, //单选时可以选择的数据，主要在选中数据的时候获取key所对应的完整的值
+      multiDataMap: {} //多选时可以选择的数据，主要在选中数据的时候获取key所对应的完整的值
+    };
+    return _this;
+  }
+
+  /**
+   * 查询数据
+   */
+
+  //设置可以传递参数的默认值
+
+
+  /**
+   * 获取数据最上一个节点的父节点
+   */
+
+
+  /**
+   * 装换数据的格式
+   */
+
+
+  //获取所有节点数据
+
+
+  //多选时只能选择最后一级的数据，且这个数据select_flag属性不能是0(0表示不能选择)
+
+
+  //单选时数据select_flag属性不能是0(0表示不能选择)
+
+  //搜索输入变化事件
+
+
+  //字段限制返回
+
+
+  //树字段限制
+
+
+  //单选，选中了数据
+
+  //多选，选中了选择框
+
+
+  //渲染tree
+
+
+  (0, _createClass3.default)(SelectorTree, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return _react2.default.createElement(
+        Sider,
+        {
+          className: "dlt-selector-tree-div",
+          style: { background: "#fff", height: "100%" },
+          width: this.props.width
+        },
+        _react2.default.createElement(
+          "div",
+          {
+            className: "dlt-selector-tree-searchHeader",
+            style: { paddingLeft: 8 }
+          },
+          _react2.default.createElement(Search, {
+            className: "dlt-selector-tree-searchInput",
+            placeholder: "\u8BF7\u8F93\u5165\u67E5\u8BE2\u6761\u4EF6",
+            onChange: this.onChange,
+            ref: function ref(node) {
+              _this2.input = node;
+            },
+            style: { width: this.props.width - 20, marginRight: 10 }
+          })
+        ),
+        this.state.dataList.length === 0 ? _react2.default.createElement(
+          "div",
+          { className: "dlt-selector-tree-load-div" },
+          "\u6B63\u5728\u52A0\u8F7D\u6570\u636E"
+        ) : _react2.default.createElement(
+          _reactCustomScrollbarsPatched.Scrollbars,
+          {
+            autoHide: true,
+            style: {
+              flex: "0 0 " + this.props.width + "px",
+              height: parseInt(this.props.height, 10) - 40
+            }
+          },
+          _react2.default.createElement(
+            _tree2.default,
+            {
+              showIcon: this.props.showIcon,
+              checkable: this.props.checkable,
+              onExpand: this.onExpand,
+              expandedKeys: this.state.expandedKeys,
+              autoExpandParent: this.state.autoExpandParent,
+              onCheck: this.onCheck,
+              checkedKeys: this.state.checkedKeys //选中复选框的数据
+              , selectedKeys: this.state.selectedKeys //选中节点的数据
+              , onSelect: this.onSelect
+            },
+            this.loop(this.state.data, 1)
+          )
+        )
+      );
+    }
+  }]);
+  return SelectorTree;
+}(_react2.default.Component);
+
+SelectorTree.defaultProps = {
+  keyField: undefined, //主键字段
+  sign: undefined, //获取查询语句的标志
+  showIcon: false, //是否显示树图标
+  url: undefined, //查询数据的url
+  checkable: true, //默认开启多选框
+  width: undefined, //树的宽度
+  height: undefined, //树的高度
+  onSelect: undefined, //选中数据的回调方法
+  params: {}, //查询条件
+  sqlParams: undefined //sql语句内的参数
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.getData = function () {
+    var obj = _this3;
+    (0, _index.NHFetch)(_this3.props.url, "POST", {
+      keyField: _this3.props.keyField,
+      params: _this3.props.params,
+      sign: _this3.props.sign,
+      sqlParams: _this3.props.sqlParams
+    }).then(function (res) {
+      if (res && res.data) {
+        var root = _this3.getDataRoot(res.data);
+        var data = _this3.buildData(res.data, root);
+        var dataList = obj.generateList(data);
+        var singerDataMap = obj.getSingerDataMap(data);
+        var multiDataMap = obj.getMultiDataMap(data);
+        var key = data[0].KEY || data[0].key;
+        obj.setState({
+          data: data,
+          expandedKeys: [key],
+          dataList: dataList,
+          singerDataMap: singerDataMap,
+          multiDataMap: multiDataMap
+        });
+      }
+    });
+  };
+
+  this.getDataRoot = function (data) {
+    var keys = {};
+    var parentKeys = [];
+    for (var i = 0; i < data.length; i++) {
+      var key = data[i].KEY || data[i].key;
+      var fid = data[i].FID || data[i].fid;
+      keys[key] = 1;
+      parentKeys.push(fid);
+    }
+    for (var _i = 0; _i < parentKeys.length; _i++) {
+      if (keys[parentKeys[_i]] !== 1) {
+        return parentKeys[_i];
+      }
+    }
+    return "-1";
+  };
+
+  this.buildData = function (data, parentKey) {
+    if (!data || data.length <= 0) {
+      return null;
+    }
+    var resultList = [];
+    for (var i = 0; i < data.length; i++) {
+      var fid = data[i].FID || data[i].fid;
+      if (fid === parentKey) {
+        var key = data[i].KEY || data[i].key;
+        var childrenList = _this3.buildData(data, key);
+        if (childrenList.length > 0) {
+          data[i].children = childrenList;
+        }
+        resultList.push(data[i]);
+      }
+    }
+    return resultList;
+  };
+
+  this.onExpand = function (expandedKeys) {
+    _this3.setState({
+      expandedKeys: expandedKeys,
+      autoExpandParent: false
+    });
+  };
+
+  this.generateList = function (data, parentKey) {
+    var dataList = [];
+    if (data === null || data === undefined || data.length === 0) {
+      return [];
+    }
+    for (var i = 0; i < data.length; i++) {
+      var key = data[i].KEY || data[i].key;
+      var title = data[i].TITLE || data[i].title;
+      dataList.push({ key: key, title: title, fid: parentKey });
+      if (data[i].children && data[i].children.length > 0) {
+        dataList = dataList.concat(_this3.generateList(data[i].children, key));
+      }
+    }
+    return dataList;
+  };
+
+  this.getMultiDataMap = function (data) {
+    var map = {};
+    if (!data || data.length <= 0) {
+      return {};
+    }
+    for (var i = 0; i < data.length; i++) {
+      var selectFlag = data[i].SELECT_FLAG || data[i].selectFlag || data[i].select_flag;
+      var key = data[i].KEY || data[i].key;
+      if ((!data[i].children || data[i].children.length <= 0) && selectFlag !== "0" && selectFlag !== 0) {
+        var value = _this3.copyMap(data[i]);
+        map[key] = value;
+      } else if (data[i].children && data[i].children.length > 0) {
+        var childrenMap = _this3.getMultiDataMap(data[i].children);
+        for (var _key in childrenMap) {
+          map[_key] = childrenMap[_key];
+        }
+      }
+    }
+    return map;
+  };
+
+  this.getSingerDataMap = function (data) {
+    var map = {};
+    if (!data || data.length <= 0) {
+      return {};
+    }
+    for (var i = 0; i < data.length; i++) {
+      var selectFlag = data[i].SELECT_FLAG || data[i].selectFlag || data[i].select_flag;
+      if (selectFlag !== "0" && selectFlag !== 0) {
+        var key = data[i].KEY || data[i].key;
+        var value = _this3.copyMap(data[i]);
+        map[key] = value;
+      }
+      if (data[i].children && data[i].children.length > 0) {
+        var childrenMap = _this3.getSingerDataMap(data[i].children);
+        for (var _key2 in childrenMap) {
+          map[_key2] = childrenMap[_key2];
+        }
+      }
+    }
+    return map;
+  };
+
+  this.copyMap = function (map) {
+    var resultMap = {};
+    for (var key in map) {
+      if (key !== "children") {
+        resultMap[key] = map[key];
+      }
+    }
+    return resultMap;
+  };
+
+  this.onChange = function (e) {
+    var value = e.target.value;
+    if (value) {
+      value = value.trim();
+    }
+    var expandedKeys = _this3.state.dataList.map(function (item) {
+      var title = item.TITLE || item.title;
+      if (title.indexOf(value) > -1) {
+        var fid = item.FID || item.fid;
+        return fid ? fid : null;
+      }
+      return null;
+    }).filter(function (item, i, self) {
+      return item && self.indexOf(item) === i;
+    });
+    if (value === "" || !expandedKeys) {
+      if (_this3.state.data && _this3.state.data.length > 0) {
+        expandedKeys = [_this3.state.data[0].KEY || _this3.state.data[0].key];
+      } else {
+        expandedKeys = [];
+      }
+    }
+    _this3.setState({
+      expandedKeys: expandedKeys,
+      searchValue: value,
+      autoExpandParent: true
+    });
+  };
+
+  this.modifyTextLength = function (str, len) {
+    if (str.length * 2 <= len || len === undefined) {
+      return str;
+    }
+    var strlen = 0;
+    var val = "";
+    for (var i = 0; i < str.length; i++) {
+      val = val + str.charAt(i);
+      if (str.charCodeAt(i) > 128) {
+        strlen = strlen + 2;
+        if (strlen >= len) {
+          return val.substring(0, val.length - 1) + "...";
+        }
+      } else {
+        strlen = strlen + 1;
+        if (strlen >= len) {
+          return val.substring(0, val.length - 2) + "...";
+        }
+      }
+    }
+    return val;
+  };
+
+  this.getTextLength = function (val) {
+    var width = parseInt(_this3.props.width, 10) - (_this3.props.checkable ? 55 : 35);
+    var count = width / 15;
+    count = count + 1 - val;
+    //如果需要显示图标，则能够显示的字减少一个
+    if (_this3.props.showIcon) {
+      count = count - 1;
+    }
+    return parseInt(count, 10) * 2;
+  };
+
+  this.onSelect = function (checkedKeys) {
+    if (_this3.props.checkable !== true) {
+      var selectKeys = [];
+      var selectNodes = [];
+      for (var seq in checkedKeys) {
+        var checkedKey = checkedKeys[seq];
+        if (_this3.state.singerDataMap[checkedKey]) {
+          selectKeys.push(checkedKey);
+          selectNodes.push(_this3.state.singerDataMap[checkedKey]);
+        }
+      }
+      if (_this3.props.onSelect) {
+        _this3.props.onSelect(selectKeys, selectNodes);
+      }
+    }
+    _this3.setState({
+      selectedKeys: checkedKeys
+    });
+  };
+
+  this.onCheck = function (checkedKeys) {
+    _this3.setState({ checkedKeys: checkedKeys });
+    if (_this3.props.checkable === true) {
+      var selectKeys = [];
+      var selectNodes = [];
+      for (var seq in checkedKeys) {
+        var checkedKey = checkedKeys[seq];
+        if (_this3.state.multiDataMap[checkedKey]) {
+          selectKeys.push(checkedKey);
+          selectNodes.push(_this3.state.multiDataMap[checkedKey]);
+        }
+      }
+      if (_this3.props.onSelect) {
+        _this3.props.onSelect(selectKeys, selectNodes);
+      }
+    }
+  };
+
+  this.handleTreeIcon = function (props) {
+    var icon = props.dataRef.ICON || props.dataRef.icon;
+    if (icon === 1 || icon === "1") {
+      return _react2.default.createElement("img", { src: img1, alt: "" });
+    } else if (icon === 2 || icon === "2") {
+      return _react2.default.createElement("img", { src: img2, alt: "" });
+    }
+    return _react2.default.createElement("img", { src: img1, alt: "" });
+  };
+
+  this.loop = function (data, level) {
+    return data.map(function (item) {
+      var searchValue = _this3.state.searchValue;
+
+      var bt = item.TITLE || item.title;
+      var val = _this3.modifyTextLength(bt, _this3.getTextLength(level));
+      var index = val.indexOf(searchValue);
+      var beforeStr = val.substr(0, index);
+      var afterStr = val.substr(index + searchValue.length);
+      var titleContent = _react2.default.createElement(
+        "div",
+        { style: { padding: "5px" } },
+        bt
+      );
+      var title = index > -1 ? _react2.default.createElement(
+        "span",
+        null,
+        beforeStr,
+        _react2.default.createElement(
+          "span",
+          { style: { color: "#f50" } },
+          searchValue
+        ),
+        afterStr
+      ) : _react2.default.createElement(
+        "span",
+        null,
+        val
+      );
+      if (val.indexOf("...") > -1) {
+        title = _react2.default.createElement(
+          _popover2.default,
+          { placement: "right", content: titleContent, trigger: "hover" },
+          title
+        );
+      }
+
+      var key = item.KEY || item.key;
+      if (item.children) {
+        return _react2.default.createElement(
+          TreeNode,
+          {
+            key: key,
+            icon: _this3.handleTreeIcon,
+            title: title,
+            dataRef: item,
+            disabled: _this3.props.disabled
+          },
+          _this3.loop(item.children, level + 1)
+        );
+      }
+      return _react2.default.createElement(TreeNode, {
+        key: key,
+        icon: _this3.handleTreeIcon,
+        title: title,
+        dataRef: item,
+        disabled: _this3.props.disabled
+      });
+    });
+  };
+
+  this.renderTreeNodes = function (data) {
+    return data.map(function (item) {
+      var title = item.TITLE || item.title;
+      var key = item.KEY || item.key;
+      if (item.children) {
+        return _react2.default.createElement(
+          TreeNode,
+          { title: title, key: key, dataRef: item },
+          _this3.renderTreeNodes(item.children)
+        );
+      }
+      return _react2.default.createElement(TreeNode, { dataRef: item });
+    });
+  };
+
+  this.setCheckedKeys = function (checkedKeys) {
+    _this3.setState({
+      checkedKeys: checkedKeys
+    });
+  };
+
+  this.setSelectedKeys = function (selectedKeys) {
+    _this3.setState({
+      selectedKeys: selectedKeys
+    });
+  };
+};
+
+exports.default = SelectorTree;