yyuap-ref/dist2/RefTree2/index.js

cloud os fe ref project which is based on tinper

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Ref = require('../components/ref/Ref');

var _Ref2 = _interopRequireDefault(_Ref);

var _modal = require('../bee/modal');

var _modal2 = _interopRequireDefault(_modal);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

require('../assets/index.css');

var _api = require('./api');

var _RefSearch = require('../components/ref/RefSearch');

var _RefSearch2 = _interopRequireDefault(_RefSearch);

var _RefButton = require('../components/ref/RefButton');

var _RefButton2 = _interopRequireDefault(_RefButton);

var _Tree = require('../components/ref/Tree');

var _Tree2 = _interopRequireDefault(_Tree);

require('./index.css');

var _Language = require('../components/ref/Language');

var _Language2 = _interopRequireDefault(_Language);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function noop() {}

var RefTree = function (_Component) {
  _inherits(RefTree, _Component);

  function RefTree(props) {
    _classCallCheck(this, RefTree);

    var _this = _possibleConstructorReturn(this, (RefTree.__proto__ || Object.getPrototypeOf(RefTree)).call(this, props));

    _this.onClickBtn = function (type) {
      var _this$props$option = _this.props.option,
          onCancel = _this$props$option.onCancel,
          onSave = _this$props$option.onSave;

      switch (type) {
        case 'save':
          console.log(_this.state.selectedArray);
          var selected = Array.from(new Set(_this.state.selectedArray));
          onSave(selected);
          _this.setState({
            isShowModal: false
          });
          break;
        case 'cancel':
          _this.setState({
            selectedArray: [],
            isShowModal: false
          }, function () {
            onCancel();
          });
          break;
        case 'empty':
          _this.setState({
            selectedArray: [],
            checkedKeys: []
          }, function () {});
          break;
        default:
          _this.setState({ selectedArray: [] }, function () {
            console.log(_this.state.selectedArray);
          });
      }
      _this.props.option.destory();
    };

    _this.onSearchClick = function (value) {
      _this.setState({
        expandedKeys: [],
        searchValue: value
      });
      _this.getRefTreeData(value);
    };

    var option = props.option;
    var checkedArray = option.checkedArray,
        multiple = option.multiple,
        checkStrictly = option.checkStrictly,
        parentNodeDisableCheck = option.parentNodeDisableCheck,
        defaultExpandAll = option.defaultExpandAll;

    _this.state = {
      isShowModal: true,
      selectedArray: checkedArray || [], //  记录保存的选择项
      tabActiveKey: null, //  记录当前激活tab
      originKey: null, //  保留tab点击已选择的前一tab的key
      tabData: _this.calctabData(option.tabData),
      //  tree state
      treeData: [],
      defaultExpandAll: defaultExpandAll,
      checkable: multiple,
      multiple: multiple,
      checkStrictly: checkStrictly,
      parentNodeDisableCheck: parentNodeDisableCheck,
      checkedKeys: [],
      showError: false,
      loading: true,
      expandedKeys: [],
      onSaveCheckItems: [],
      isAfterAjax: false,
      Language: _Language2.default,
      searchValue: ''
    };
    _this.onClickBtn = _this.onClickBtn.bind(_this);
    return _this;
  }

  _createClass(RefTree, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.getRefTreeData();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        selectedArray: nextProps.option.checkedArray
      });
    }
  }, {
    key: 'loopSpliceArray',
    value: function loopSpliceArray(value, ob) {
      var children = ob.node.props.children;
      var loop = function loop(data) {
        data.forEach(function (item) {
          value.indexOf(item.key) > -1 ? value.splice(value.indexOf(item.key), 1) : null;
          if (item.props.children && item.props.children.length > 0) {
            loop(item.props.children);
          }
        });
      };
      if (!ob.expanded && children.length > 0) {
        loop(children);
      }
      return value;
    }
  }, {
    key: 'onExpand',
    value: function onExpand(value, ob) {
      value = this.loopSpliceArray(value, ob);
      this.setState({
        expandedKeys: value
      });
    }
  }, {
    key: 'onTabSelect',
    value: function onTabSelect(_ref) {
      var activeKey = _ref.activeKey,
          originKey = _ref.originKey;
      var option = this.props.option;
      // console.log('click Tab:' + activeKey);

      this.setState({
        tabActiveKey: activeKey,
        originKey: originKey
      });
      this.getRefTreeData();
    }
  }, {
    key: 'onCheck',
    value: function onCheck(selectedKeys, event) {
      // this.onSelect(selectedKeys,event)
      var _props$option = this.props.option,
          checkAllChildren = _props$option.checkAllChildren,
          multiple = _props$option.multiple;
      var onSaveCheckItems = this.state.onSaveCheckItems;

      var eventKey = event.node.props.eventKey;
      var ishaskey = false;
      var keyIndex = void 0;
      onSaveCheckItems.forEach(function (v, i) {
        if (v.id == eventKey) {
          keyIndex = i;
        }
        if (v.id == eventKey && v.checkAllchildren) {
          ishaskey = true;
          return false;
        }
      });
      if (ishaskey) {
        this.setState({
          checkedKeys: selectedKeys
        });
        return false;
      }

      var arr = {};
      event.checkedNodes.forEach(function (item) {
        if (item.key == eventKey) {
          arr = item.props.paramitem;
        }
      });
      if (multiple) {
        if (selectedKeys.indexOf(eventKey) > -1) {
          onSaveCheckItems.push(arr);
        } else {

          onSaveCheckItems.splice(keyIndex, 1);
        }
      } else {
        onSaveCheckItems = [arr];
      }

      this.setState({
        selectedArray: onSaveCheckItems,
        checkedKeys: selectedKeys,
        onSaveCheckItems: onSaveCheckItems
      });
    }
  }, {
    key: 'onDoubleClick',
    value: function onDoubleClick(selectedKeys, event) {
      var _this2 = this;

      var item = event.node.props;
      var arr = [item.paramitem];
      this.setState({
        selectedArray: arr
      }, function () {
        console.log(_this2.state.selectedArray);
        _this2.onClickBtn('save');
      });
    }
  }, {
    key: 'onSelect',
    value: function onSelect(selectedKeys, event) {
      var _props$option2 = this.props.option,
          checkAllChildren = _props$option2.checkAllChildren,
          multiple = _props$option2.multiple;

      event.checkedNodes = event.selectedNodes;

      if (multiple) {
        return false;
      }
      this.onCheck(selectedKeys, event);
    }

    //   获取树组件数据

  }, {
    key: 'getRefTreeData',
    value: function getRefTreeData(value) {
      var _this3 = this;

      var option = this.props.option;
      var param = option.param,
          checkedArray = option.checkedArray;
      var tabActiveKey = this.state.tabActiveKey;

      var URL = option.refModelUrl.TreeUrl;
      if (option.isTab && option.tabData) {
        param = Object.assign(param, {
          refShowClassCode: tabActiveKey
        });
      }
      param = Object.assign(param, {
        treeNode: "",
        treeloadData: option.treeloadData || false
      });
      (0, _api.getTreeList)(URL, param, value).then(function (res) {
        if (_this3.props.option.onAfterAjax && !_this3.state.isAfterAjax) {
          _this3.props.option.onAfterAjax(res);
          _this3.setState({ isAfterAjax: true });
        }
        if (res && res.data && res.data.length > 0) {
          var data = res.data,
              page = res.page;

          _this3.setState({
            treeData: data,
            loading: false
          });
          // if (data[0].id) {
          //   this.setState({
          //     expandedKeys: [data[0].id],
          //   });
          // }

          _this3.calcCheckedKeys(checkedArray);
        } else {
          _this3.setState({
            showError: true,
            loading: false,
            treeData: []
          });
        }
      });
    }
  }, {
    key: 'removeOne',
    value: function removeOne(c) {
      var selectedArray = this.state.selectedArray;

      var arr = selectedArray.filter(function (item) {
        return item.refpk !== c.refpk;
      });
      var selectedKeys = arr.map(function (item) {
        return item.refpk;
      });
      this.setState({
        selectedArray: arr,
        checkedKeys: selectedKeys
      });
    }
  }, {
    key: 'clearAll',
    value: function clearAll() {
      this.setState({
        selectedArray: [],
        checkedKeys: []
      });
    }
  }, {
    key: 'calcCheckedKeys',
    value: function calcCheckedKeys() {
      var _this4 = this;

      var checkedArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      var checkAllChildren = this.props.option.checkAllChildren;

      var checkedKeysData = [];
      var onSaveCheckItemsData = [];
      if (checkedArray.length) {
        checkedArray.forEach(function (item) {
          if (item.refpk || item.id) {
            if (item.refpk.indexOf('child://') > -1 && checkAllChildren) {
              _this4.checkAllchildrenFun(true, item.refpk.split('child://')[1] || item.id, 'load');
            } else {
              onSaveCheckItemsData.push(item);
              checkedKeysData.push(item.refpk || item.id);
            }
          }
        });
      }
      setTimeout(function () {
        var _state = _this4.state,
            checkedKeys = _state.checkedKeys,
            onSaveCheckItems = _state.onSaveCheckItems;

        var obj = {};
        checkedKeys = checkedKeys.concat(checkedKeysData);
        onSaveCheckItems = onSaveCheckItems.concat(onSaveCheckItemsData);
        onSaveCheckItems = onSaveCheckItems.reduce(function (cur, next) {
          obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
          return cur;
        }, []);
        checkedKeys = Array.from(new Set(checkedKeys));
        _this4.setState({ checkedKeys: checkedKeys, onSaveCheckItems: onSaveCheckItems });
      }, 10);
    }
  }, {
    key: 'calctabData',
    value: function calctabData(tabData) {
      return { dataSource: tabData };
    }
  }, {
    key: 'deletSelectData',
    value: function deletSelectData(item, index) {
      var _state2 = this.state,
          checkedKeys = _state2.checkedKeys,
          selectedArray = _state2.selectedArray,
          onSaveCheckItems = _state2.onSaveCheckItems;
      var option = this.props.option;


      onSaveCheckItems = onSaveCheckItems.filter(function (c) {
        return item.refpk !== c.refpk;
      });
      selectedArray = selectedArray.filter(function (c) {
        return item.refpk !== c.refpk;
      });
      checkedKeys = checkedKeys.filter(function (c) {
        return item.id !== c;
      });

      if (option.checkAllChildren && item.refpk.indexOf('child://') > -1) {
        this.checkAllchildrenFun(false, item.id);
      }
      this.setState({ selectedArray: selectedArray, checkedKeys: checkedKeys, onSaveCheckItems: onSaveCheckItems });
    }
  }, {
    key: 'deletSelectDataAll',
    value: function deletSelectDataAll() {
      var _this5 = this;

      var checkedKeys = this.state.checkedKeys;

      checkedKeys.forEach(function (v, i) {
        _this5.checkAllchildrenFun(false, v);
      });
      this.setState({ selectedArray: [], checkedKeys: [], onSaveCheckItems: [] });
    }
  }, {
    key: 'getNewTreeData',
    value: function getNewTreeData(treeData, curKey, child) {
      var _this6 = this;

      var loop = function loop(data) {
        data.forEach(function (item) {
          if (curKey == item.id) {
            item.children = child;
            return false;
          } else {
            if (item.children) {
              loop(item.children);
            }
          }
        });
      };
      loop(treeData);
      this.setState({
        treeData: treeData
      }, function () {
        _this6.calcCheckedKeys(_this6.props.option.checkedArray);
      });
    }
  }, {
    key: 'onLoadData',
    value: function onLoadData(treeNode) {
      var _this7 = this;

      return new Promise(function (resolve) {
        setTimeout(function () {
          // const treeData = [...this.state.treeData];
          _this7.getRefTreeloadData(treeNode.props.eventKey);

          resolve();
        }, 1000);
      });
    }
  }, {
    key: 'getRefTreeloadData',
    value: function getRefTreeloadData(treeNode) {
      var _this8 = this;

      var option = this.props.option;
      var param = option.param;
      var _state3 = this.state,
          tabActiveKey = _state3.tabActiveKey,
          treeData = _state3.treeData,
          searchValue = _state3.searchValue;

      var URL = option.refModelUrl.TreeUrl;
      if (option.treeloadData) {
        param = Object.assign(param, {
          treeNode: treeNode,
          treeloadData: option.treeloadData || false
        });
      }
      if (option.isTab && option.tabData) {
        param = Object.assign(param, {
          refShowClassCode: tabActiveKey
        });
      }
      (0, _api.getTreeList)(URL, param, '').then(function (res) {
        if (res) {
          var data = res.data;

          _this8.getNewTreeData(treeData, treeNode, data);
        }
      });
    }
  }, {
    key: 'checkAllchildrenFun',
    value: function checkAllchildrenFun(value, checkid, load) {
      console.log(checkid);
      var self = this;
      var _state4 = this.state,
          treeData = _state4.treeData,
          checkedKeys = _state4.checkedKeys,
          onSaveCheckItems = _state4.onSaveCheckItems,
          selectedArray = _state4.selectedArray;

      var onSaveCheckItemsData = [];
      var keyitem = void 0;
      if (!load) {
        onSaveCheckItems.forEach(function (item, index) {
          if (item.id == checkid) {
            keyitem = index;
            onSaveCheckItems.splice(keyitem, 1);
          }
        });
      }
      var loop = function loop(datas) {
        return datas.forEach(function (item) {
          if (item.children && item.children.length) {
            loop(item.children);
          }

          if (value) {
            if (checkedKeys.indexOf(item.id) < 0) {
              checkedKeys.push(item.id);
            }
            item.isChildNode = true;
            item.parentNodeDisableCheck = true;
          } else {
            checkedKeys = self.removeByValue(checkedKeys, item.id);
            item.parentNodeDisableCheck = false;
            item.checkAllChildren = false;
            item.isChildNode = false;
          }
          onSaveCheckItems.forEach(function (item2, index2) {
            if (item2.id == item.id) {
              onSaveCheckItemsData = self.removeByValue(onSaveCheckItemsData, item2);
              onSaveCheckItems.splice(index2, 1);
              item2.checkAllChildren = false;
            }
          });
        });
      };
      var loopParentData = function loopParentData(datas) {
        return datas.forEach(function (v, index) {
          if (v.id == checkid && v.children) {
            loop(v.children);
            v.isChildNode = false;
            if (value) {
              v.checkAllChildren = true;
              if (v.refpk.indexOf('child://') < 0) {
                v.refpk = 'child://' + v.refpk;
              }
              v.parentNodeDisableCheck = true;
              onSaveCheckItemsData.push(v);
              onSaveCheckItems = onSaveCheckItems.concat(onSaveCheckItemsData);

              if (checkedKeys.indexOf(checkid) < 0) {
                checkedKeys.push(checkid);
              }
            } else {
              v.checkAllChildren = false;
              if (v.refpk.indexOf('child://') > -1) {
                v.refpk = v.refpk.split('child://')[1];
              }
              v.parentNodeDisableCheck = false;
              onSaveCheckItemsData = self.removeByValue(onSaveCheckItemsData, v);
              onSaveCheckItems.splice(keyitem, 1);
              if (checkedKeys.indexOf(checkid) > -1) {
                checkedKeys = self.removeByValue(checkedKeys, checkid);
              }
            }
          } else {
            if (v.children) {
              loopParentData(v.children);
            }
          }
        });
      };
      loopParentData(treeData);

      console.log(onSaveCheckItems);
      if (!load) {
        this.props.option.checkedArray = onSaveCheckItems;

        this.setState({
          selectedArray: onSaveCheckItems,
          onSaveCheckItems: onSaveCheckItems
        });
      } else {
        this.setState({
          onSaveCheckItems: selectedArray
        });
      }
      this.setState({
        checkedKeys: checkedKeys,
        treeData: treeData
      });
    }
  }, {
    key: 'removeByValue',
    value: function removeByValue(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
      return arr;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this9 = this;

      var _props = this.props,
          option = _props.option,
          _props$modalOptions = _props.modalOptions,
          modalOptions = _props$modalOptions === undefined ? {} : _props$modalOptions;
      var _state5 = this.state,
          treeData = _state5.treeData,
          showError = _state5.showError,
          isShowModal = _state5.isShowModal,
          tabActiveKey = _state5.tabActiveKey,
          loading = _state5.loading,
          Language = _state5.Language;
      var _state6 = this.state,
          selectedArray = _state6.selectedArray,
          checkable = _state6.checkable,
          checkedKeys = _state6.checkedKeys,
          multiple = _state6.multiple,
          expandedKeys = _state6.expandedKeys,
          checkStrictly = _state6.checkStrictly,
          parentNodeDisableCheck = _state6.parentNodeDisableCheck;
      var defaultExpandAll = this.state.defaultExpandAll;

      var lang = option.param && option.param.locale || 'zh_CN';
      var tabSheet = {
        flex: 1,
        width: 100
      };
      selectedArray = selectedArray.map(function (item) {
        item.key = item.id + 'key';
        return item;
      });
      var loopsTreeSelectData = function loopsTreeSelectData(datas) {
        return datas.map(function (item, index) {

          return _react2.default.createElement(
            'li',
            { key: item.key },
            _react2.default.createElement(
              'span',
              null,
              item.refname
            ),
            _react2.default.createElement('i', { className: 'uf uf-close', onClick: function onClick() {
                _this9.deletSelectData(item, index);
              } })
          );
        });
      };
      if (this.props.option.treeloadData) {
        defaultExpandAll = false;
      }
      var ifOnlyTree = option.multiple ? 'onlyRefTreeModal' : '';

      return _react2.default.createElement(
        'div',
        null,
        isShowModal ? _react2.default.createElement(
          _modal2.default,
          _extends({
            show: true, className: option.className + ' yyuap-ref RefTree2Modal ' + ifOnlyTree,
            backdrop: option.backdrop,
            enforceFocus: false,
            onHide: function onHide() {
              return _this9.onClickBtn('cancel');
            }
          }, modalOptions),
          _react2.default.createElement(_modal2.default.Header, { closeButton: true }),
          _react2.default.createElement(
            _modal2.default.Body,
            { className: '' },
            _react2.default.createElement(
              'div',
              null,
              option.title ? _react2.default.createElement(
                'div',
                { className: 'Reftitle' },
                option.title
              ) : _react2.default.createElement('div', { className: 'Reftitle' }),
              option.RefSearch ? _react2.default.createElement(_RefSearch2.default, {
                onSearch: this.onSearchClick,
                onChange: this.onSearchChange,
                searchPlaceholder: option.searchPlaceholder,
                language: option.param.locale || ""
              }) : _react2.default.createElement('div', null),
              _react2.default.createElement(
                'div',
                { className: 'RefTree2Tab' },
                _react2.default.createElement(
                  'div',
                  { className: 'RefTree2Tab_right' },
                  _react2.default.createElement(
                    'span',
                    null,
                    Language.Alreadychosen[lang],
                    '\uFF08',
                    selectedArray.length,
                    '\uFF09'
                  ),
                  _react2.default.createElement(
                    'em',
                    { onClick: this.deletSelectDataAll.bind(this) },
                    Language.empty[lang]
                  )
                )
              ),
              _react2.default.createElement(
                'div',
                { className: 'treebox' },
                _react2.default.createElement(
                  'div',
                  { className: 'c-tree' },
                  option.isTree ? _react2.default.createElement(_Tree2.default, {
                    data: this.state.treeData,
                    defaultExpandAll: defaultExpandAll
                    // checkable={this.state.checkable}
                    , expandedKeysList: expandedKeys,
                    onExpand: this.onExpand.bind(this),
                    checkable: this.props.option.multiple,
                    multiple: this.props.option.multiple,
                    openIconClassName: this.props.option.openIconClassName,
                    closeIconClassName: this.props.option.closeIconClassName,
                    checkAllChildren: this.props.option.checkAllChildren,
                    onCheck: this.onCheck.bind(this),
                    onSelect: this.onSelect.bind(this),
                    onDoubleClick: this.onDoubleClick.bind(this),
                    checkedKeys: checkedKeys,
                    selectedKeys: checkedKeys,
                    loading: loading,
                    checkStrictly: true,
                    showLine: option.showLine,
                    treeloadData: this.props.option.treeloadData,
                    checkAllchildrenFun: this.checkAllchildrenFun.bind(this),
                    onLoadData: this.onLoadData.bind(this),
                    parentNodeDisableCheck: parentNodeDisableCheck,
                    language: option.param.locale || ""
                  }) : null
                )
              ),
              _react2.default.createElement(
                'div',
                { className: 'RefTree2_Right' },
                _react2.default.createElement(
                  'ul',
                  null,
                  loopsTreeSelectData(selectedArray)
                )
              ),
              option.RefButton ? _react2.default.createElement(_RefButton2.default, { language: option.param.locale || "", ishasemptyBtn: option.emptyBtn, buttonText: option.buttonText, onClickBtn: this.onClickBtn }) : _react2.default.createElement('div', null)
            )
          )
        ) : null
      );
    }
  }]);

  return RefTree;
}(_react.Component);

RefTree.propTypes = {
  option: _propTypes2.default.oneOfType([_propTypes2.default.object])
};
RefTree.defaultProps = {
  option: {
    //  基础设置
    title: '弹窗标题',
    RefSearch: false, //  是否应用搜索 默认 false,
    isTab: false, //  是否应用搜索 默认 false,
    isTree: true, //  是否应用搜索 默认 true,
    RefButton: true, //  是否应用搜索 默认 true,
    tabData: [], //  json数组须指定 title,id 参数   默认为空,且为空时不显示 tab 组件
    multiple: false, //  默认单选
    showLine: false, //  默认单选
    defaultExpandAll: false, // 数默认展开
    checkStrictly: false,
    parentNodeDisableCheck: false,
    checkedArray: [], //  指定已选择数据id
    param: {
      refCode: 'test_treeTable',
      refModelUrl: 'http://d835dxtp.c87e2267-1001-4c70-bb2a-ab41f3b81aa3.app.yyuap.com/basedoc-mc/ref/adminableorg/',
      pk_user: 'f07e2142-482b-448a-a1fd-5cb9a48c5d39',
      tenantId: 'gtzceot7',
      sysId: 'diwork'
    },
    onCancel: noop,
    onSave: noop
  }
};
exports.default = RefTree;
module.exports = exports['default'];