yyuap-ref/dist2/RefTree/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 _Error = require('../components/ref/Error');

var _Error2 = _interopRequireDefault(_Error);

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);
          onSave(_this.state.selectedArray);
          _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,
      expandedKeys: [],
      onSaveCheckItems: [],
      isAfterAjax: false,
      loading: true,
      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,
        onSaveCheckItems: nextProps.option.checkedArray
      });
    }
  }, {
    key: 'loopSpliceArray',

    // onSearchChange = (value) => {
    //   this.getRefTreeData(value);
    // };
    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) {
      console.log(value, ob.expanded, ob.node.props.eventKey);
      value = this.loopSpliceArray(value, ob);
      console.log(value);
      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();
    }

    //  tree EventHandler

  }, {
    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;
          // if(option.treeloadData){
          //   data = data.map((v)=>{
          //     delete v.children;
          //     return v
          //   })
          // }

          _this3.setState({
            treeData: data,
            loading: false
          });
          // if (data[0].id) {
          //   this.setState({
          //     expandedKeys: [data[0].id],
          //   });
          // }
          _this3.calcCheckedKeys(checkedArray);
        } else {
          _this3.setState({
            showError: true,
            treeData: [],
            loading: false
          });
        }
      });
    }
  }, {
    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 = [];
      var checkedKeys = this.state.checkedKeys;

      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;
        //checkedKeys.concat(checkedKeysData)

        checkedKeys = checkedKeys.concat(checkedKeysData);
        onSaveCheckItems = onSaveCheckItems.concat(onSaveCheckItemsData);
        var obj = {};
        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: 'getNewTreeData',
    value: function getNewTreeData(treeData, curKey, child) {
      var _this5 = 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 () {
        _this5.calcCheckedKeys(_this5.props.option.checkedArray);
      });
    }
  }, {
    key: 'onLoadData',
    value: function onLoadData(treeNode) {
      var _this6 = this;

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

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

      var option = this.props.option;
      var param = option.param;
      var _state2 = this.state,
          tabActiveKey = _state2.tabActiveKey,
          treeData = _state2.treeData,
          searchValue = _state2.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;


          _this7.getNewTreeData(treeData, treeNode, data);
        }
      });
    }
  }, {
    key: 'MergeArray',
    value: function MergeArray(arr1, arr2) {
      var _arr = new Array();
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i]);
      }
      for (var i = 0; i < arr2.length; i++) {
        var flag = true;
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[i].id == arr1[j].id) {
            flag = false;
            break;
          }
        }
        if (flag) {
          _arr.push(arr2[i]);
        }
      }
      return _arr;
    }
  }, {
    key: 'checkAllchildrenFun',
    value: function checkAllchildrenFun(value, checkid, load) {
      console.log(checkid);
      var self = this;
      var _state3 = this.state,
          treeData = _state3.treeData,
          checkedKeys = _state3.checkedKeys,
          onSaveCheckItems = _state3.onSaveCheckItems,
          selectedArray = _state3.selectedArray;

      var onSaveCheckItemsData = [];
      //合并去重
      onSaveCheckItems = this.MergeArray(this.props.option.checkedArray, onSaveCheckItems);
      var keyitem = void 0;
      // if(!load){
      //   onSaveCheckItems.forEach((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 {
            item.isChildNode = false;
            checkedKeys = self.removeByValue(checkedKeys, item.id);
            item.parentNodeDisableCheck = false;
            item.checkAllChildren = 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;
              onSaveCheckItems.forEach(function (item, index) {
                if (item.id == checkid) {
                  onSaveCheckItems.splice(index, 1);
                }
              });
              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;
              // if (checkedKeys.indexOf(checkid) > -1) {
              //   checkedKeys = self.removeByValue(checkedKeys, checkid)
              // }
              // onSaveCheckItems.forEach((item2, index2) => {
              //   if (item2.id == v.id) {
              //     onSaveCheckItemsData = self.removeByValue(onSaveCheckItemsData, item2)
              //     onSaveCheckItems.splice(index2, 1)
              //     item2.checkAllChildren = false

              //   }
              // })
            }
          } else {
            if (v.children) {
              loopParentData(v.children);
            }
          }
        });
      };
      loopParentData(treeData);

      console.log(onSaveCheckItems);
      this.props.option.checkedArray = onSaveCheckItems;

      if (!load) {
        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 _this8 = this;

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

      var tabSheet = {
        flex: 1,
        width: 100
      };
      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 ' + ifOnlyTree,
            backdrop: option.backdrop,
            enforceFocus: false,
            onHide: function onHide() {
              return _this8.onClickBtn('cancel');
            }
          }, modalOptions),
          _react2.default.createElement(_modal2.default.Header, { closeButton: true }),
          _react2.default.createElement(
            _modal2.default.Body,
            null,
            _react2.default.createElement(
              _Ref2.default,
              null,
              _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('div', {
                  is: 'RefSearch',
                  onSearch: this.onSearchClick,
                  onChange: this.onSearchChange,
                  searchPlaceholder: option.searchPlaceholder,
                  language: option.param.locale || ""
                }) : _react2.default.createElement('div', null),
                _react2.default.createElement(
                  'div',
                  { className: 'treebox' },
                  _react2.default.createElement(
                    'div',
                    { className: 'c-tree' },
                    option.isTab ? _react2.default.createElement('div', {
                      style: tabSheet,
                      is: 'Tab',
                      data: tabData,
                      selectedArray: option.selectedArray,
                      ifNeedSelect: 'false',
                      ifOnlyNeedSelect: 'false',
                      onTabSelect: this.onTabSelect.bind(this),
                      tabActiveKey: tabActiveKey,
                      originKey: this.state.originKey
                    }) : _react2.default.createElement('div', null),
                    option.isTree && treeData.length ? _react2.default.createElement('div', {
                      is: 'Tree',
                      data: this.state.treeData,
                      defaultExpandAll: defaultExpandAll
                      // checkable={this.state.checkable}
                      , expandedKeysList: expandedKeys,
                      onExpand: this.onExpand.bind(this),
                      checkable: this.props.option.multiple,
                      openIconClassName: this.props.option.openIconClassName,
                      closeIconClassName: this.props.option.closeIconClassName,
                      multiple: this.props.option.multiple,
                      checkAllChildren: this.props.option.checkAllChildren,
                      onCheck: this.onCheck.bind(this),
                      onSelect: this.onSelect.bind(this),
                      onDoubleClick: this.onDoubleClick.bind(this),
                      checkedKeys: checkedKeys,
                      defaultCheckedKeys: checkedKeys,
                      selectedKeys: checkedKeys,
                      checkStrictly: true,
                      loading: loading,
                      showLine: option.showLine,
                      treeloadData: this.props.option.treeloadData,
                      checkAllchildrenFun: this.checkAllchildrenFun.bind(this),
                      onLoadData: this.onLoadData.bind(this),
                      parentNodeDisableCheck: parentNodeDisableCheck,
                      language: option.param.locale || ""
                    }) : _react2.default.createElement(_Error2.default, { show: showError, language: option.param.locale || "" })
                  ),
                  option.multiple ?
                  // <TreeCheckedList
                  //   selectedArray={selectedArray}
                  //   clearAll={this.clearAll.bind(this)}
                  //   removeOne={this.removeOne.bind(this)}
                  // /> 
                  _react2.default.createElement('div', null) : _react2.default.createElement('div', null)
                ),
                option.RefButton ? _react2.default.createElement('div', { is: 'RefButton', 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: 'glxzzz',
      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'];