yyuap-ref/dist2/RefTreeTable/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 _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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 _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var _Ref2 = _interopRequireDefault(_Ref);

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

var _modal2 = _interopRequireDefault(_modal);

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

require('./index.css');

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

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; }

var op = {
  title: '弹窗标题',
  RefSearch: true,
  isTab: true,
  isTree: true,
  isTable: true,
  RefButton: true,
  tabData: [//tab标签
  { "title": "常用", "key": "commonUse" }, { "title": "全部", "key": "total" }, { "title": "推荐", "key": "recommed" }],
  param: { //url请求参数
    refCode: 'test_treeTable', //test_common||test_grid||test_tree||test_treeTable
    tenantId: 'xxx',
    sysId: 'xxx'
  },
  checkedArray: [{ memo: "page2:用友骨干", refpk: "currPageIndex:248", refcode: "test48", refname: "测试48", key: "currPageIndex:248" }],
  onCancel: function onCancel(p) {
    console.log(p);
  },
  onSave: function onSave(sels) {
    console.log(sels);
  }
};

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

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

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

    _initialiseProps.call(_this);

    var option = _this.props.option;

    _this.state = {
      treeData: [],
      tableData: {}, //存放表格数据
      tabData: {}, //存放tab标签的数据
      selectedArray: option.checkedArray || [], //记录保存的选择项
      tabActiveKey: null, //记录当前激活tab
      originKey: null, //保留tab点击已选择的前一tab的key
      isShowModal: true, //是否显示弹窗
      pageCount: 0, //下拉加载数据使用--请求数据的总页数
      curPage: 0, //下拉加载数据使用--请求数据的当前页
      ifScroll: false, //下拉加载数据使用--控制滚动事件
      refTable: null, //下拉加载数据使用--事件绑定对象
      searchvalue: '',
      option: {},
      treeIdactive: '',
      onAfterAjax: false,
      loadingTree: true,
      loadingTable: false
    };
    return _this;
  }

  //use to refresh table data


  _createClass(RefTreeTable, [{
    key: 'getRefTableData',
    value: function getRefTableData(value) {
      var _this2 = this;

      var option = this.props.option;

      var URL2 = option.refModelUrl.TableBodyUrl;
      var URL = option.refModelUrl.TableBarUrl;
      if (value.activepage && value.activepage > 0) {
        if (!this.props.option.hasPage) {
          (0, _api.getTreeTableData)(URL, URL2, value).then(function (_ref) {
            var _ref2 = _slicedToArray(_ref, 2),
                barData = _ref2[0],
                bodyData = _ref2[1];

            if (_this2.props.option.onAfterAjax && !_this2.state.isAfterAjax) {
              _this2.props.option.onAfterAjax(bodyData);
              _this2.setState({ isAfterAjax: true });
            }
            var tempData = [];
            if (bodyData) {
              tempData = bodyData.data.map(function (v, k) {
                v.key = v.refpk;
                return v;
              });
            }
            _this2.setState(function (prevData) {
              return {
                curPage: prevData.curPage + 1,
                tableData: {
                  listData: prevData.tableData.listData.concat(tempData),
                  cols: prevData.tableData.cols
                },
                ifScroll: false,
                loadingTable: false
              };
            });
          });
        } else {
          (0, _api.getTreeTableData)(URL, URL2, value).then(function (_ref3) {
            var _ref4 = _slicedToArray(_ref3, 2),
                barData = _ref4[0],
                bodyData = _ref4[1];

            if (_this2.props.option.onAfterAjax && !_this2.state.isAfterAjax) {
              _this2.props.option.onAfterAjax(bodyData);
              _this2.setState({ isAfterAjax: true });
            }
            var tempData = [];
            if (bodyData) {
              tempData = bodyData.data.map(function (v, k) {
                v.key = v.refpk;
                return v;
              });
            }
            _this2.setState(function (prevData) {
              return {
                curPage: value.activepage,
                tableData: {
                  listData: tempData,
                  cols: prevData.tableData.cols
                },
                ifScroll: false,
                loadingTable: false
              };
            });
          });
        }
      } else {
        (0, _api.getTreeTableData)(URL, URL2, value).then(function (_ref5) {
          var _ref6 = _slicedToArray(_ref5, 2),
              barData = _ref6[0],
              bodyData = _ref6[1];

          if (_this2.props.option.onAfterAjax && !_this2.state.isAfterAjax) {
            _this2.props.option.onAfterAjax(bodyData);
            _this2.setState({ isAfterAjax: true });
          }
          var nameArr = barData.strFieldName;
          var barArr = barData.strFieldCode;

          var colsArr = barArr.map(function (v, k) {
            return {
              'title': nameArr[k],
              'dataIndex': v,
              'key': v + k,
              'width': 100,
              render: function render(text, record, index) {
                if (v == 'code' && !record.code) {
                  return record.refcode || '';
                } else if (v == 'name' && !record.name) {
                  return record.refname || '';
                } else {
                  return text;
                }
              }
            };
          });
          var listArr = bodyData && bodyData.data && bodyData.data.map(function (v, k) {
            v.key = v.refpk;
            return v;
          });
          _this2.setState({
            tableData: {
              listData: listArr,
              cols: colsArr
            },
            ifScroll: false,
            loadingTable: false,
            curPage: 0,
            pageCount: bodyData.page.pageCount
          });
        });
      }
    }
  }, {
    key: 'onLoadData',
    value: function onLoadData(treeNode) {
      var _this3 = this;

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

          resolve();
        }, 1000);
      });
    }
  }, {
    key: 'getNewTreeData',
    value: function getNewTreeData(treeData, curKey, child) {
      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
      });
    }
  }, {
    key: 'getRefTreeloadData',
    value: function getRefTreeloadData(treeNode) {
      var _this4 = this;

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

      var URL = option.refModelUrl.TreeGridUrl || 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
        });
      }
      var value = Object.assign({}, { param: param });
      (0, _api.getTree)(URL, value).then(function (res) {
        if (res) {
          var data = res.data;

          if (option.treeloadData) {
            data = data.map(function (v) {
              delete v.children;
              return v;
            });
          }
          _this4.getNewTreeData(treeData, treeNode, data);
        } else {
          _this4.setState({
            showError: true
          });
        }
      });
    }
    // 获取树组件数据

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

      var option = this.props.option;
      var activepage = this.state.activepage;

      var URL = option.refModelUrl.TreeGridUrl || option.refModelUrl.TreeUrl;
      var param = option.param;
      param = Object.assign(param, {
        treeNode: "",
        treeloadData: option.treeloadData || false
      });
      var value = Object.assign({}, { param: param }, type);

      (0, _api.getTree)(URL, value).then(function (res) {

        if (res && res.data && res.data.length > 0) {
          if (option.treeloadData) {
            res.data = res.data.map(function (v) {
              delete v.children;
              return v;
            });
          }
          var treeId = res.data[0].id; //默认树第一个id
          if (option.isDefaultSelect == false) {
            treeId = '';
          }
          _this5.setState({
            treeData: res.data,
            loadingTree: false,
            treeIdactive: treeId
          });
          var paramVal = Object.assign({}, { param: option.param }, { activepage: 0, key: treeId });
          _this5.getRefTableData(paramVal);
        }
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        selectedArray: nextProps.option.checkedArray
      });
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var option = this.props.option;

      this.setState({
        option: option,
        tabData: {
          dataSource: option.tabData,
          defaultActiveKey: option.defaultActiveKey

        }
      });
      var activekey = option.tabData && option.tabData[0] && option.tabData[0].key || '';
      this.getRefTreeData({ type: activekey });
    }
    //按钮点击

    //搜索点击发请求

    //搜索输入变化触发

  }, {
    key: 'onExpand',
    value: function onExpand(value) {
      console.log(value);
      this.setState({
        expandedKeys: value
      });
    }
    //选中数组保存回调

  }, {
    key: 'onTabSelect',

    /* tab与table的回调函数 ---start */
    value: function onTabSelect(_ref7) {
      var activeKey = _ref7.activeKey,
          originKey = _ref7.originKey;

      this.setState({
        tabActiveKey: activeKey,
        originKey: originKey
      });
      if (activeKey == '__selected' && this.props.option.hasPage) {
        this.props.option.hasPage = false;
      } else if (activeKey != '__selected' && this.props.option.hasPage != undefined) {
        this.props.option.hasPage = true;
        if (this.props.option.isTable) {
          this.getRefTreeData({ type: originKey || activeKey });
          // this.getRefTreeData({type:(originKey||activeKey)});
        }
      }
    }
    /* tree的回调函数 ---end */

  }, {
    key: 'onDoubleClick',
    value: function onDoubleClick() {}
  }, {
    key: 'onSelect',
    value: function onSelect(selectedKeys, event) {
      var _state2 = this.state,
          searchvalue = _state2.searchvalue,
          treeIdactive = _state2.treeIdactive,
          tabActiveKey = _state2.tabActiveKey;
      var option = this.props.option;

      var pos = event.node.props.pos.split('-');
      if (option.treeSelectLevel && pos.length - 1 != option.treeSelectLevel) {
        return false;
      }
      var treeIdactiveNew = selectedKeys[0] || '';
      console.log(treeIdactiveNew);
      this.setState({
        treeIdactive: treeIdactiveNew
      });
      var paramVal = Object.assign({}, { param: option.param }, { key: treeIdactiveNew, searchvalue: searchvalue });
      this.getRefTableData(paramVal);
    }

    //tree EventHandler

  }, {
    key: 'handlePageSelect',
    value: function handlePageSelect(eventKey) {
      var _state3 = this.state,
          treeIdactive = _state3.treeIdactive,
          curPage = _state3.curPage,
          originKey = _state3.originKey,
          tabActiveKey = _state3.tabActiveKey,
          searchvalue = _state3.searchvalue;
      var option = this.props.option;

      curPage = eventKey - 1;
      var value = Object.assign({}, { param: option.param }, { key: treeIdactive, activepage: curPage, searchvalue: searchvalue });
      this.getRefTableData(value);
    }
  }, {
    key: 'onSendData',
    value: function onSendData(refTable) {
      var _this6 = this;

      this.setState({ refTable: refTable });
      var initScroll = function initScroll() {
        var _state4 = _this6.state,
            pageCount = _state4.pageCount,
            curPage = _state4.curPage,
            ifScroll = _state4.ifScroll,
            originKey = _state4.originKey,
            tabActiveKey = _state4.tabActiveKey,
            treeIdactive = _state4.treeIdactive,
            searchvalue = _state4.searchvalue;
        var option = _this6.props.option;

        if (ifScroll) return;
        var scrollerscrollHeight = refTable.scrollHeight; // 容器滚动总高度
        var scrollerHeight = refTable.getBoundingClientRect().height; // 容器滚动可见高度
        var scrollerTop = refTable.scrollTop; //滚过的高度
        if (scrollerscrollHeight - scrollerHeight - scrollerTop <= 10) {
          if (curPage + 1 < pageCount) {
            _this6.setState({ ifScroll: true });
            var paramVal = Object.assign({}, { param: option.param }, { activepage: curPage + 1, key: treeIdactive, searchvalue: searchvalue });
            _this6.getRefTableData(paramVal);
          } else {
            // scrollerLoading = true;
          }
        }
      };
      refTable.addEventListener('scroll', initScroll, false);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this7 = this;

      var _props = this.props,
          option = _props.option,
          _props$modalOptions = _props.modalOptions,
          modalOptions = _props$modalOptions === undefined ? {} : _props$modalOptions;
      var _state5 = this.state,
          isShowModal = _state5.isShowModal,
          treeIdactive = _state5.treeIdactive,
          _state5$expandedKeys = _state5.expandedKeys,
          expandedKeys = _state5$expandedKeys === undefined ? [] : _state5$expandedKeys,
          loadingTree = _state5.loadingTree,
          loadingTable = _state5.loadingTable;

      console.log(option);
      return _react2.default.createElement(
        'div',
        null,
        isShowModal ? _react2.default.createElement(
          _modal2.default,
          _extends({
            show: true, className: option.className + ' yyuap-ref OnlyTreeTable',
            backdrop: option.backdrop,
            enforceFocus: false,
            onHide: function onHide() {
              return _this7.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',
                { className: 'TreeTable' },
                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 || ""
                  // onGetSearchResult={this.onSearchGetResult}
                  // url={'www.baidu.com'}
                }) : _react2.default.createElement('div', null),
                option.isTab ? _react2.default.createElement('div', { is: 'Tab',
                  data: this.state.tabData,
                  selectedArray: this.state.selectedArray,
                  ifNeedSelect: 'true',
                  ifOnlyNeedSelect: 'false',
                  onTabSelect: this.onTabSelect.bind(this),
                  tabActiveKey: this.state.tabActiveKey,
                  originKey: this.state.originKey,
                  language: option.param.locale || ""
                }) : _react2.default.createElement('div', null),
                option.isTree ? _react2.default.createElement('div', { is: 'Tree',
                  data: this.state.treeData //
                  , multiple: false //是否允许选择多个树节点
                  , checkable: false //是否支持添加在树节点前添加Checkbox
                  , defaultExpandAll: option.defaultExpandAll //默认是否展开所有节点
                  , onSelect: this.onSelect.bind(this) //
                  , expandedKeysList: expandedKeys,
                  onExpand: this.onExpand.bind(this),
                  showLine: option.showLine,
                  loading: loadingTree,
                  openIconClassName: this.props.option.openIconClassName,
                  closeIconClassName: this.props.option.closeIconClassName,
                  defaultSelectedKeys: treeIdactive,
                  treeloadData: this.props.option.treeloadData,
                  onDoubleClick: this.onDoubleClick.bind(this),
                  onLoadData: this.onLoadData.bind(this),
                  language: option.param.locale || ""
                }) : _react2.default.createElement('div', null),
                option.isTable ? _react2.default.createElement('div', { is: 'RefTable',
                  data: this.state.tableData,
                  isRadio: option.isRadio || false,
                  onTableSelect: this.RefSelectedChecked.bind(this),
                  onSendData: this.onSendData.bind(this),
                  tabActiveKey: this.state.tabActiveKey,
                  selectedArray: this.state.selectedArray,
                  loading: loadingTable,
                  hasPage: option.hasPage || false,
                  pageCount: this.state.pageCount,
                  curPage: this.state.curPage,
                  paginationOption: option.paginationOption,
                  handlePageSelect: this.handlePageSelect.bind(this),
                  onClickBtn: this.onClickBtn.bind(this),
                  language: option.param.locale || ""
                }) : _react2.default.createElement('div', null),
                option.RefButton ? _react2.default.createElement('div', { is: 'RefButton', language: option.param.locale || "", ishasemptyBtn: option.emptyBtn, buttonText: option.buttonText, hasPage: option.hasPage || false, onClickBtn: this.onClickBtn.bind(this) }) : _react2.default.createElement('div', null)
              )
            )
          )
        ) : null
      );
    }
  }]);

  return RefTreeTable;
}(_react.Component);

// ReactDOM.render(
//   (
//     <RefTreeTable option={op}/>
//   ),
//   document.getElementById('root'),
// );


var _initialiseProps = function _initialiseProps() {
  var _this8 = this;

  this.onClickBtn = function (type) {
    //console.log(type,this.state.RefListSelectArray)
    switch (type) {
      case 'save':
        console.log(_this8.state.selectedArray);
        _this8.props.option.onSave(_this8.state.selectedArray);
        _this8.setState({
          isShowModal: false
        });
        break;
      case 'cancel':
        _this8.setState({
          selectedArray: [],
          isShowModal: false
        }, function () {
          console.log('取消了');
          _this8.props.option.onCancel(_this8.state.selectedArray);
        });
        break;
      case 'empty':
        _this8.setState({
          selectedArray: []
        }, function () {});
        break;
      default:
        _this8.setState({ selectedArray: [] }, function () {
          console.log(_this8.state.selectedArray);
          //this.props.options.onSave(this.state.RefListSelectArray)
        });
    }
    //this.props.options.onSave(this.state.RefListSelectArray)
    _this8.props.option.destory();
  };

  this.onSearchClick = function (value) {
    console.log(value);
    var _state6 = _this8.state,
        treeIdactive = _state6.treeIdactive,
        activepage = _state6.activepage,
        option = _state6.option;

    _this8.setState({
      searchvalue: value
    });
    var paramVal = Object.assign({}, { param: option.param }, { searchvalue: value, key: treeIdactive });
    _this8.getRefTableData(paramVal);
  };

  this.onSearchChange = function (value) {
    console.log(value);
    _this8.setState({ searchvalue: value });
  };

  this.RefSelectedChecked = function (selectedArray, autoSave) {
    if (_this8.state.tabActiveKey == '__selected') {
      _this8.setState({
        selectedArray: selectedArray
      });
      return;
    }
    var tableData = _this8.state.tableData.listData || [];
    var oldSelected = _this8.state.selectedArray;
    var judgeInData = function judgeInData(v) {
      for (var i = 0; i < tableData.length; i++) {
        if (tableData[i].refpk == v) {
          return false;
        }
      }
      return true;
    };
    var dataNotInData = _this8.state.selectedArray.filter(function (v, k) {
      return judgeInData(v.refpk);
    });
    if (_this8.props.option.isRadio) {
      _this8.setState({
        selectedArray: selectedArray
      }, function () {
        if (autoSave && autoSave === 'isRadio') {
          _this8.onClickBtn('save');
        }
      });
    } else {
      _this8.setState({
        selectedArray: selectedArray.concat(dataNotInData)
      });
    }
  };
};

exports.default = RefTreeTable;
module.exports = exports['default'];