dlt-for-react 1.0.12 → 1.0.13

package/README.md

@@ -8,7 +8,7 @@ npm publish
 
 ## 前端 dlt-for-react 依赖包版本更新记录
 
-##### 当前最新版本：1.0.12
+##### 当前最新版本：1.0.13
 
 ##### 安装依赖
 
@@ -16,6 +16,10 @@ npm publish
 
 ##### 版本修改记录
 
+#### V1.0.13—2023 年 10 月 24 日
+
+1. 补充 KyTree 组件
+
 #### V1.0.11—2023 年 10 月 23 日
 
 1. 优化 NHFetch 支持文件上传模式兼容请求头配置 FormData

package/assets/components/KyTree/index.less

@@ -0,0 +1,129 @@
+:global {
+  .Ky_tree {
+    position: relative;
+    // float: left;
+    margin-right: 20px;
+    background: transparent;
+    border-right: 1px solid #ddd;
+    .ant-input-search .ant-input {
+      margin-left: 4px;
+      border: 0px;
+      box-shadow: none;
+    }
+    // 滚动组件
+    .Ky_scroll {
+      & > div:nth-child(1) {
+        margin-bottom: 15px !important;
+        overflow-x: auto !important;
+        overflow-y: scroll !important;
+      }
+
+      & > div:nth-child(2) {
+        display: none;
+      }
+
+      .ant-tree {
+        padding-bottom: 16px;
+        ul,
+        li {
+          // overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        li {
+          .ant-tree-node-content-wrapper {
+            display: inline-block;
+          }
+          // 子菜单
+          ul {
+            margin: 0;
+            padding: 0 16px;
+          }
+        }
+      }
+    }
+    // 搜索框
+    .Ky_tree_headerBox {
+      width: 100%;
+      padding: 3px, 0, 0, 8px;
+      line-height: 40px;
+      text-align: right;
+      // 隐藏搜索框右边图标
+      .ant-input-affix-wrapper .ant-input-suffix {
+        display: none;
+      }
+      .Ky_tree_searchInput {
+        margin: 0 5px;
+        padding: 0;
+        text-indent: 10px;
+        border: none;
+        border-bottom: 1px solid #ccc;
+        border-radius: 0;
+        box-shadow: none;
+        transition: all linear 0.5s;
+        .Ky_tree_search_icon {
+          // color: rgba(0, 0, 0, 0.8);
+          cursor: pointer;
+        }
+        input {
+          // margin-left: -8px;
+          border-width: 0px;
+          &:active,
+          &:focus,
+          &:hover {
+            border: none;
+            // border-bottom: 1px solid #ccc;
+            border-radius: 0;
+            box-shadow: none;
+          }
+        }
+      }
+      // 添加图标
+      .Ky_tree_addBtn {
+        margin-right: 8px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    }
+    // 切换栏按钮
+    .Ky_tree_btn {
+      position: absolute;
+      top: 48%;
+      right: -18px;
+      width: 18px;
+      height: 36px;
+      line-height: 36px;
+      background-color: #f1f2f6;
+      border-radius: 0 36px 36px 0;
+      cursor: pointer;
+      .trigger {
+        color: #1890ff;
+        font-size: 12px;
+        transition: color 0.3s;
+      }
+      &:hover {
+        background-color: #1890ff;
+        .trigger {
+          color: #fff;
+        }
+      }
+    }
+    // 右键弹出栏
+    .Ky_tree_menu {
+      list-style: none;
+      a {
+        padding: 5px 10px;
+        cursor: pointer;
+        &:hover {
+          background: #e6f7ff;
+        }
+      }
+    }
+    // 侧边栏关闭时的样式
+    &.ant-layout-sider-collapsed {
+      flex: 0 0 0px !important;
+      width: 0px !important;
+      min-width: 0px !important;
+      max-width: 0px !important;
+    }
+  }
+}

package/lib/components/KyTree/index.js

@@ -0,0 +1,840 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _hasAuth2 = require("xgui-for-react/lib/utils/hasAuth");
+
+var _hasAuth3 = _interopRequireDefault(_hasAuth2);
+
+var _stringify = require("babel-runtime/core-js/json/stringify");
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _NHFetch2 = require("xgui-for-react/lib/utils/NHFetch");
+
+var _NHFetch3 = _interopRequireDefault(_NHFetch2);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _tooltip = require("antd/lib/tooltip");
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _icon = require("antd/lib/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _assign = require("babel-runtime/core-js/object/assign");
+
+var _assign2 = _interopRequireDefault(_assign);
+
+var _popover = require("antd/lib/popover");
+
+var _popover2 = _interopRequireDefault(_popover);
+
+var _createUuid2 = require("xgui-for-react/lib/utils/createUuid");
+
+var _createUuid3 = _interopRequireDefault(_createUuid2);
+
+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/tooltip/style");
+
+require("antd/lib/icon/style");
+
+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 _reactCustomScrollbars = require("react-custom-scrollbars");
+
+var _reactDom = require("react-dom");
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var _equalsObj = require("../../utils/equalsObj");
+
+var _equalsObj2 = _interopRequireDefault(_equalsObj);
+
+require("../../../assets/components/KyTree/index.less");
+
+var _one = require("../../../assets/components/KyTree/image/one.png");
+
+var _one2 = _interopRequireDefault(_one);
+
+var _one_a = require("../../../assets/components/KyTree/image/one_a.png");
+
+var _one_a2 = _interopRequireDefault(_one_a);
+
+var _two = require("../../../assets/components/KyTree/image/two.png");
+
+var _two2 = _interopRequireDefault(_two);
+
+var _two_a = require("../../../assets/components/KyTree/image/two_a.png");
+
+var _two_a2 = _interopRequireDefault(_two_a);
+
+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; //扩展菜单-未激活
+//扩展菜单-激活
+//子菜单-未激活
+//子菜单-激活
+
+/**
+ * 树选择器
+ * sql语句基础字段：key(value值),title:(显示的值)、select_flag(是否可以选择，1：可以选择，0或null,不能选择)、fid(父Key)、icon（图标、1：扩展菜单，2：子菜单）
+ *
+ */
+var MAXNUM = 50; // 支持实时搜索的最大条数
+
+var KyTree = function (_React$Component) {
+  (0, _inherits3.default)(KyTree, _React$Component);
+
+  function KyTree(props) {
+    (0, _classCallCheck3.default)(this, KyTree);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (KyTree.__proto__ || (0, _getPrototypeOf2.default)(KyTree)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    _this.state = {
+      checkedKeys: props.checkedKeys ? props.checkedKeys : [], //选中的值
+      selectedKeys: props.selectedKeys ? props.selectedKeys : [], //选中节点的数据
+      expandedKeys: [],
+      searchValue: "",
+      autoExpandParent: true,
+      data: [], //树数据
+      dataList: [], //树列表数据,主要在过滤的时候使用
+      singerDataMap: {}, //单选时可以选择的数据，主要在选中数据的时候获取key所对应的完整的值
+      multiDataMap: {}, //多选时可以选择的数据，主要在选中数据的时候获取key所对应的完整的值
+      collapsed: props.collapsed ? props.collapsed : false, //展开、关闭标识
+      tempValue: "" //用于点击图标搜索缓存值
+    };
+    return _this;
+  }
+  //设置可以传递参数的默认值
+
+
+  (0, _createClass3.default)(KyTree, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.ansysParams();
+      this.loadData();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      // 当父组件的checkedKeys改变时，改变树选择的数据
+      if ("checkedKeys" in nextProps && !(0, _equalsObj2.default)(this.props.checkedKeys, nextProps.checkedKeys)) {
+        this.setState({
+          checkedKeys: nextProps.checkedKeys
+        });
+      }
+      if ("selectedKeys" in nextProps && !(0, _equalsObj2.default)(this.props.selectedKeys, nextProps.selectedKeys)) {
+        this.setState({
+          selectedKeys: nextProps.selectedKeys
+        });
+      }
+      if ("collapsed" in nextProps && !(0, _equalsObj2.default)(this.props.collapsed, nextProps.collapsed)) {
+        this.setState({
+          collapsed: nextProps.collapsed
+        });
+      }
+    }
+
+    /**
+     * 查询数据
+     */
+
+
+    /**
+     * 获取数据最上一个节点的父节点
+     */
+
+
+    /**
+     * 转换数据的格式
+     */
+
+
+    //获取所有节点数据
+
+
+    //多选时个数据select属性不能是0(0表示不能选择)
+
+
+    //单选时数据select属性不能是false(false表示不能选择)
+
+    //搜索输入变化事件
+
+
+    //字段限制返回
+
+
+    //树字段限制
+
+
+    //单选，选中了数据
+
+    //多选，选中了选择框
+
+
+    //渲染tree
+
+
+    //右击事件
+
+  }, {
+    key: "renderRightMenu",
+
+
+    //右击菜单
+    value: function renderRightMenu(e, rightMenuList) {
+      if (this.popover) {
+        _reactDom2.default.unmountComponentAtNode(this.cmContainer);
+        this.popover = null;
+      }
+      var content = _react2.default.createElement(
+        "ul",
+        { className: "Ky_tree_menu" },
+        rightMenuList.map(function (item) {
+          return _react2.default.createElement(
+            "a",
+            {
+              style: { display: "block", color: "inherit" },
+              key: (0, _createUuid3.default)(),
+              onClick: function onClick() {
+                return item.onClick(e.node.props.dataRef, e.node.props.eventKey, e);
+              }
+            },
+            " ",
+            item.name
+          );
+        })
+      );
+      this.popover = _react2.default.createElement(_popover2.default, {
+        placement: "bottom",
+        content: content,
+        trigger: "hover",
+        defaultVisible: true
+      });
+
+      var container = this.getContainer();
+      (0, _assign2.default)(this.cmContainer.style, {
+        position: "absolute",
+        left: e.event.pageX + "px",
+        top: e.event.pageY + "px"
+      });
+
+      _reactDom2.default.render(this.popover, container);
+    }
+  }, {
+    key: "getContainer",
+    value: function getContainer() {
+      if (!this.cmContainer) {
+        this.cmContainer = document.createElement("div");
+
+        document.body.appendChild(this.cmContainer);
+      }
+      return this.cmContainer;
+    }
+
+    /**
+     * 是否存在加号新增按钮
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          collapsed = _state.collapsed,
+          expandedKeys = _state.expandedKeys,
+          autoExpandParent = _state.autoExpandParent,
+          checkedKeys = _state.checkedKeys,
+          selectedKeys = _state.selectedKeys,
+          data = _state.data,
+          dataList = _state.dataList,
+          tempValue = _state.tempValue;
+      var _props = this.props,
+          collapseShow = _props.collapseShow,
+          search = _props.search,
+          width = _props.width,
+          height = _props.height,
+          showIcon = _props.showIcon,
+          checkable = _props.checkable,
+          defaultExpandAll = _props.defaultExpandAll;
+
+      var nHeight = search || this.isExistsAddBtn() ? parseInt(height, 10) - 43 : parseInt(height, 10);
+      var reduceWidth = this.isExistsAddBtn() ? 50 : 20;
+      return _react2.default.createElement(
+        Sider,
+        {
+          style: { height: nHeight },
+          className: "Ky_tree",
+          theme: "light",
+          trigger: null,
+          collapsible: true,
+          collapsed: collapsed,
+          width: width
+        },
+        !collapsed && (search || this.isExistsAddBtn()) && _react2.default.createElement(
+          "div",
+          { className: "Ky_tree_headerBox" },
+          _react2.default.createElement(
+            _tooltip2.default,
+            {
+              placement: "top",
+              title: this.state.dataList.length > MAXNUM ? "\u8D85\u8FC7" + MAXNUM + "\u6761\u6570\u636E\uFF0C\u9700\u8981\u70B9\u51FB\u56DE\u8F66\u952E\u8FDB\u884C\u641C\u7D22" : null
+            },
+            _react2.default.createElement(Search, {
+              className: "Ky_tree_searchInput",
+              placeholder: "\u8BF7\u8F93\u5165\u67E5\u8BE2\u6761\u4EF6",
+              prefix: _react2.default.createElement(_icon2.default, {
+                type: "search",
+                className: "Ky_tree_search_icon",
+                onClick: function onClick() {
+                  _this2.onSearch(tempValue);
+                }
+              }),
+              onChange: this.onChange,
+              onSearch: this.onSearch,
+              ref: function ref(node) {
+                _this2.input = node;
+              },
+              style: { width: width - reduceWidth, float: "left" }
+            })
+          ),
+          this.isExistsAddBtn() && _react2.default.createElement(_icon2.default, {
+            type: "plus",
+            className: "Ky_tree_addBtn",
+            onClick: this.handleAdd
+          })
+        ),
+        collapseShow && _react2.default.createElement(
+          "div",
+          {
+            className: "Ky_tree_btn",
+            onClick: function onClick() {
+              _this2.setState({ collapsed: !collapsed });
+            }
+          },
+          _react2.default.createElement(_icon2.default, { className: "trigger", type: collapsed ? "right" : "left" })
+        ),
+        dataList && dataList.length > 0 && _react2.default.createElement(
+          _reactCustomScrollbars.Scrollbars,
+          {
+            className: "Ky_scroll",
+            style: { width: "100%", height: "100%" }
+          },
+          _react2.default.createElement(
+            _tree2.default,
+            (0, _extends3.default)({}, this.props, {
+              showIcon: showIcon,
+              checkable: checkable,
+              onExpand: this.onExpand,
+              expandedKeys: expandedKeys,
+              autoExpandParent: autoExpandParent,
+              onCheck: this.onCheck,
+              checkedKeys: checkedKeys //选中复选框的数据
+              , selectedKeys: selectedKeys //选中节点的数据
+              , onSelect: this.onSelect,
+              onRightClick: this.onRightClick,
+              defaultExpandAll: defaultExpandAll
+            }),
+            this.loop(data, 1)
+          )
+        )
+      );
+    }
+  }]);
+  return KyTree;
+}(_react2.default.Component);
+
+KyTree.defaultProps = {
+  sign: undefined, //标志
+  showIcon: false, //是否显示树图标
+  url: undefined, //查询数据的url,如果不给的话，则使用通用的查询数据的路径
+  checkable: true, //默认开启多选框
+  width: undefined, //树的宽度
+  height: undefined, //树的高度
+  onSelect: undefined, //选中数据的回调方法
+  params: {}, //查询条件
+  sqlParams: {}, //用于sql语句中的查询条件
+  search: true, //加搜索框
+  buttons: [], //鼠标右键点击事件回调type，name，onClick(item,key),isShow(),auth
+  addBtn: undefined, //加号触发事件方法（）=>{}
+  addBtnAuth: undefined, //加号的权限控制标志
+  expandedKeys: [], //展开指定的树节点,如果设置了展开的节点，则使用此属性，如果没有设置则默认展开第一个节点
+  disabled: false, //是否禁用树
+  baseUrl: undefined, //请求路径的前缀，可通过改参数控制访问的后端服务，如果不设置，则会去访问当前前端服务对应的后端服务，例如：api/sm-bpm-expansion
+  defaultExpandAll: false, //默认展开所有树节， 默认为false
+  collapseShow: true //默认使用切换开关栏
+};
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.loadData = function () {
+    var obj = _this3;
+    var baseUrl = _this3.props.baseUrl;
+    var url = _this3.props.url ? _this3.props.url : (baseUrl || window.baseUrl || "") + "/proData/getTreeList";
+    (0, _NHFetch3.default)(url, "POST", {
+      params: _this3.props.params,
+      sqlParams: _this3.props.sqlParams,
+      sign: _this3.props.sign
+    }).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: _this3.props.expandedKeys.length > 0 ? _this3.props.expandedKeys : [key],
+          // expandedKeys: this.props.expandedKeys,
+          dataList: dataList,
+          singerDataMap: singerDataMap,
+          multiDataMap: multiDataMap
+        });
+      }
+    });
+  };
+
+  this.ansysParams = function () {
+    //先从缓存中获取配置信息，如果再缓存中没有配置信息则说明配置时在前端书写
+    var paramsStr = sessionStorage.getItem("nhParams");
+    var params = undefined;
+    if (paramsStr != undefined) {
+      var params1 = JSON.parse(paramsStr);
+      if (params1.tree !== undefined && params1.tree[_this3.props.sign]) {
+        params = params1.tree[_this3.props.sign];
+      }
+      if (params === undefined && _this3.props.rowKey === undefined && _this3.props.baseUrl) {
+        var treeStr = sessionStorage.getItem(_this3.props.sign);
+        if (treeStr) {
+          var treeParam = JSON.parse(treeStr);
+          params = treeParam;
+        } else {
+          var t = new Date().getTime();
+          (0, _NHFetch3.default)(_this3.props.baseUrl + "/proData/queryAllConfig", "GET", t).then(function (res) {
+            if (res && res.code === 200) {
+              var _treeParam = res.data.tree[_this3.props.sign];
+              if (_treeParam) {
+                sessionStorage.setItem(_this3.props.sign, (0, _stringify2.default)(_treeParam));
+                _this3.ansysParams();
+              } else {
+                console.warn("无法获取" + _this3.props.sign + "配置");
+              }
+            }
+          });
+          return;
+        }
+      }
+    }
+  };
+
+  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;
+      var key = data[i].KEY || data[i].key;
+      if (fid === parentKey) {
+        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, fid) {
+    var dataList = [];
+    if (!data || !data.length) {
+      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: fid });
+      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 mapKey = data[i].KEY || data[i].key;
+      if (selectFlag !== "0" && selectFlag !== 0) {
+        var value = _this3.copyMap(data[i]);
+        map[mapKey] = 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;
+      var mapKey = data[i].KEY || data[i].key;
+      if (selectFlag !== "0" && selectFlag !== 0) {
+        var value = _this3.copyMap(data[i]);
+        map[mapKey] = value;
+      }
+      if (data[i].children && data[i].children.length > 0) {
+        var childrenMap = _this3.getSingerDataMap(data[i].children);
+        for (var key in childrenMap) {
+          map[key] = childrenMap[key];
+        }
+      }
+    }
+    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 (_this3.state.dataList && _this3.state.dataList.length > MAXNUM) {
+      if (!value || value.trim()) return _this3.onSearch(value);
+      _this3.setState({ tempValue: value ? value.trim() : "" });
+      return;
+    }
+    _this3.onSearch(value);
+  };
+
+  this.onSearch = function (value) {
+    value = value ? value.trim() : "";
+    var expandedKeys = _this3.state.dataList.map(function (item) {
+      if (item.title.indexOf(value) > -1) {
+        return item.fid ? item.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) {
+        var key = _this3.state.data[0].KEY || _this3.state.data[0].key;
+        expandedKeys = [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) {
+    var singerDataMap = _this3.state.singerDataMap;
+    var _props2 = _this3.props,
+        checkable = _props2.checkable,
+        onSelect = _props2.onSelect;
+
+    if (!checkable) {
+      var selectKeys = [];
+      var selectNodes = [];
+      var checkedKey = checkedKeys[0];
+      if (singerDataMap[checkedKey]) {
+        selectKeys.push(checkedKey);
+        selectNodes.push(singerDataMap[checkedKey]);
+      }
+      if (onSelect) 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 (Number(icon) === 1) {
+      return _react2.default.createElement("img", { alt: "", style: { marginBottom: "4px" }, src: _one2.default });
+    } else if (Number(icon) === 2) {
+      return _react2.default.createElement("img", { alt: "", style: { marginBottom: "4px" }, src: _two2.default });
+    }
+    return _react2.default.createElement("img", { alt: "", style: { marginBottom: "4px" }, src: _one2.default });
+  };
+
+  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 || item.children) {
+        return _react2.default.createElement(
+          TreeNode,
+          {
+            key: key,
+            icon: _this3.handleTreeIcon,
+            title: title,
+            dataRef: item,
+            disabled: _this3.props.disabled
+          },
+          _this3.loop(item.CHILDREN || 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
+    });
+  };
+
+  this.onRightClick = function (e) {
+    //先过滤没有权限的菜单
+    var rightMenuList = _this3.props.buttons;
+    if (rightMenuList && rightMenuList.length > 0) {
+      var newMenuList = [];
+      rightMenuList.map(function (item, index) {
+        //是否满足显示这个按钮的要求
+        if (item.isShow === undefined || item.isShow(e.node.props.dataRef, e.node.props.eventKey, e)) {
+          //是否满足权限的要求
+          if (item.auth === undefined || (0, _hasAuth3.default)(item.auth)) {
+            newMenuList.push(item);
+          }
+        }
+        return item;
+      });
+      if (newMenuList.length > 0) {
+        _this3.renderRightMenu(e, newMenuList);
+      }
+    } else {
+      return false;
+    }
+  };
+
+  this.isExistsAddBtn = function () {
+    //TODO:测试：先不要权限控制
+    // return this.props.addBtn && (!this.props.addBtnAuth || hasAuth(this.props.addBtnAuth));
+    return Boolean(_this3.props.addBtn);
+  };
+
+  this.handleAdd = function () {
+    var addBtn = _this3.props.addBtn;
+
+    if (addBtn) return addBtn();
+  };
+};
+
+exports.default = KyTree;

package/lib/index.js

@@ -229,6 +229,15 @@ Object.defineProperty(exports, 'HqLsrySelector', {
     }
 });
 
+var _KyTree = require('./components/KyTree');
+
+Object.defineProperty(exports, 'KyTree', {
+    enumerable: true,
+    get: function get() {
+        return _interopRequireDefault(_KyTree).default;
+    }
+});
+
 var _getSize = require('./utils/getSize.js');
 
 Object.defineProperty(exports, 'getSize', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlt-for-react",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "dlt for react",
   "main": "lib/index.js",
   "scripts": {