yyuap-ref/dist2/RefTable/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,
  isTable: true,
  RefButton: true,
  tabData: [//tab标签
  { "title": "常用", "key": "commonUse" }, { "title": "全部", "key": "total" }, { "title": "推荐", "key": "recommed" }],
  param: { //url请求参数
    refCode: 'test_common', //test_common||test_grid||test_tree||test_treeTable
    tenantId: 'xxx',
    sysId: 'xxx'
  },
  checkedArray: [{ memo: "page2:用友骨干", refremark: "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 RefTable = function (_Component) {
  _inherits(RefTable, _Component);

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

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

    _initialiseProps.call(_this);

    var option = _this.props.option;

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

  //use to refresh tab data


  _createClass(RefTable, [{
    key: 'getRefTabData',
    value: function getRefTabData(value) {
      this.setState({
        tabData: {
          dataSource: this.props.option.tabData,
          defaultActiveKey: this.props.option.defaultActiveKey
        }
      });
    }

    //use to refresh table dat

  }, {
    key: 'getRefTableData',
    value: function getRefTableData(value) {
      var _this2 = this;

      var _props$option$refMode = this.props.option.refModelUrl,
          TableBodyUrl = _props$option$refMode.TableBodyUrl,
          TableBarUrl = _props$option$refMode.TableBarUrl;

      if (value.activepage && value.activepage > 0) {
        if (!this.props.option.hasPage) {
          (0, _api.getTableData)(TableBarUrl, TableBodyUrl, 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,
                loading: false
              };
            });
          });
        } else {
          (0, _api.getTableData)(TableBarUrl, TableBodyUrl, 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,
                loading: false
              };
            });
          });
        }
      } else {
        (0, _api.getTableData)(TableBarUrl, TableBodyUrl, 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 barArr = ['code','name','memo','memo','memo','memo']
          // var nameArr = ['code','name','memo','memo','memo','memo']
          var colsArr = barArr.map(function (v, k) {
            return {
              'title': nameArr[k],
              'dataIndex': v,
              'key': v + k,
              'width': 150,
              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,
            loading: false,
            curPage: 0,
            pageCount: bodyData && bodyData.page.pageCount
          });
        });
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        selectedArray: nextProps.option.checkedArray
      });
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var option = this.props.option;
      var activepage = this.state.activepage;

      if (option.RefList) {
        this.getRefList();
      }
      if (option.isTab) {
        this.getRefTabData();
      }
      if (option.isTable) {
        var activekey = option.tabData && option.tabData[0] && option.tabData[0].key || '';
        var value = Object.assign({}, { param: option.param }, { activepage: 0, activekey: activekey });
        this.getRefTableData(value);
      }
      if (option.isTree) {
        this.getRefTreeData();
      }
    }
    //按钮点击

    //搜索输入变化触发

    //选中数组保存回调

  }, {
    key: 'onTabSelect',


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

      this.setState({
        tabActiveKey: activeKey,
        originKey: originKey
      });
      var _state = this.state,
          searchvalue = _state.searchvalue,
          curPage = _state.curPage;

      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 (option.isTable) {
          if (!option.hasPage) {
            this.state.refTable.scrollTop = 0;
          }
          var value = Object.assign({}, { param: option.param }, { activepage: curPage, activekey: originKey || activeKey, searchvalue: searchvalue });
          this.getRefTableData(value);
          console.log(originKey || activeKey);
        }
      }
    }
  }, {
    key: 'handlePageSelect',
    value: function handlePageSelect(eventKey) {
      var _state2 = this.state,
          pageCount = _state2.pageCount,
          curPage = _state2.curPage,
          originKey = _state2.originKey,
          tabActiveKey = _state2.tabActiveKey,
          searchvalue = _state2.searchvalue;
      var option = this.props.option;

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

      this.setState({ refTable: refTable });
      var initScroll = function initScroll() {
        var _state3 = _this3.state,
            pageCount = _state3.pageCount,
            curPage = _state3.curPage,
            ifScroll = _state3.ifScroll,
            originKey = _state3.originKey,
            tabActiveKey = _state3.tabActiveKey,
            searchvalue = _state3.searchvalue;
        var option = _this3.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) {
            _this3.setState({ ifScroll: true });
            var value = Object.assign({}, { param: option.param }, { activepage: curPage + 1, activekey: originKey || tabActiveKey, searchvalue: searchvalue });
            _this3.getRefTableData(value);
          } else {
            // scrollerLoading = true;
          }
        }
      };
      refTable.addEventListener('scroll', initScroll, false);
    }
    /* tree的回调函数 ---end */

  }, {
    key: 'onCheck',
    value: function onCheck(selectedKeys, event) {

      this.setState({
        selectedArray: selectedKeys
      });
    }
  }, {
    key: 'onSelect',
    value: function onSelect(selectedKeys, event) {

      this.setState({
        selectedArray: selectedKeys
      });
    }
    //tree EventHandler

  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props = this.props,
          option = _props.option,
          _props$modalOptions = _props.modalOptions,
          modalOptions = _props$modalOptions === undefined ? {} : _props$modalOptions;
      var isShowModal = this.state.isShowModal;

      return _react2.default.createElement(
        'div',
        null,
        isShowModal ? _react2.default.createElement(
          _modal2.default,
          _extends({
            show: true, className: option.className + ' yyuap-ref onlyRefTable',
            backdrop: option.backdrop,
            enforceFocus: false,
            onHide: function onHide() {
              return _this4.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: 'yyuap-ref-Table' },
                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),
                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.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,
                  hasPage: option.hasPage || false,
                  pageCount: this.state.pageCount,
                  curPage: this.state.curPage,
                  loading: this.state.loading,
                  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 RefTable;
}(_react.Component);

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


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

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

  this.onSearchClick = function (value) {
    console.log(value);
    var option = _this5.props.option;
    var curPage = _this5.state.curPage;

    _this5.setState({
      searchvalue: value,
      curPage: 0
    });
    var value = Object.assign({}, { param: option.param }, { searchvalue: value, activepage: 0 });
    _this5.getRefTableData(value);
  };

  this.onSearchChange = function (value) {
    console.log(value);
  };

  this.RefSelectedChecked = function (selectedArray, autoSave) {
    if (_this5.state.tabActiveKey == '__selected') {
      _this5.setState({
        selectedArray: selectedArray
      });
      return;
    }

    var tableData = _this5.state.tableData.listData || [];
    var oldSelected = _this5.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 = _this5.state.selectedArray.filter(function (v, k) {
      return judgeInData(v.refpk);
    });
    if (_this5.props.option.isRadio) {
      _this5.setState({
        selectedArray: selectedArray
      }, function () {
        if (autoSave && autoSave === 'isRadio') {
          _this5.onClickBtn('save');
        }
      });
    } else {
      _this5.setState({
        selectedArray: selectedArray.concat(dataNotInData)
      });
    }
  };
};

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