yyuap-ref/dist2/RefMultipleTable/index.js

cloud os fe ref project which is based on tinper

'use strict';

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

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 _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 _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);

var _icon = require('../bee/icon');

var _icon2 = _interopRequireDefault(_icon);

var _tooltip = require('../bee/tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _utils = require('../utils');

var _expandTable = require('./component/expandTable');

var _expandTable2 = _interopRequireDefault(_expandTable);

require('./style.css');

var _style = {
  'titleStyle': 'titleStyle__style___2mmMc',
  'closeBtnStyle': 'closeBtnStyle__style___3DwyK',
  'contentWrap': 'contentWrap__style___3blJl'
};

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

//refpk
var RefMultipleTable = function (_Component) {
  _inherits(RefMultipleTable, _Component);

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

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

    var option = _this.props.option;

    _this.state = {
      isShowModal: true,
      columnsData: [], //表头数据
      tableData: [], //表格数据
      selectedRowIndex: -1,
      checkedArray: option.checkedArray || [], //保存的数据
      totalPage: 1, //总页数
      pageSize: '10', //每页数据数
      activePage: 0, //激活页码
      filterInfo: {} //过滤信息
    };
    _this.handlePagination = _this.handlePagination.bind(_this);
    _this.handlePageSize = _this.handlePageSize.bind(_this);
    _this.searchFilterInfo = _this.searchFilterInfo.bind(_this);
    _this.setFilterInfo = _this.setFilterInfo.bind(_this);
    _this.setCheckedArray = _this.setCheckedArray.bind(_this);
    return _this;
  }

  _createClass(RefMultipleTable, [{
    key: 'getBarData',
    value: function getBarData(data) {
      var keyList = data.strFieldCode || [];
      var titleList = data.strFieldName || [];
      var colunms = this.props.option.colunms;
      var colunmsList = keyList.map(function (v, k) {
        return {
          key: v,
          dataIndex: v,
          title: titleList[k],
          width: 200,
          render: function render(text, record, index) {
            return _react2.default.createElement(
              _tooltip2.default,
              { inverse: true, overlay: text },
              _react2.default.createElement(
                'span',
                { style: {
                    display: "inline-block",
                    maxWidth: "100px",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    verticalAlign: "middle"
                  } },
                text
              )
            );
          }
        };
      });
      if (colunmsList.length === 0) {
        this.setState({
          columnsData: [{ title: "未传递表头数据", dataIndex: "nodata", key: "nodata" }]
        });
      } else {
        if (colunms) {
          var colunmsListNew = colunmsList.map(function (v, k) {
            return Object.assign(v, colunms[k]);
          });
        } else {
          var colunmsListNew = colunmsList;
        }

        this.setState({
          columnsData: colunmsListNew
        });
      }
    }
  }, {
    key: 'getTableData',
    value: function getTableData(data) {
      var tempData = [];
      var _props$option = this.props.option,
          checkedArray = _props$option.checkedArray,
          multiple = _props$option.multiple;
      var selectedRowIndex = this.state.selectedRowIndex;

      var selectedRowIndexlast;
      if (data) {
        tempData = data.data;
      }
      tempData.map(function (v, k) {
        v.key = v.refpk;
        if (multiple && checkedArray.length > 0 && v.key == checkedArray[0].key) {
          selectedRowIndexlast = k;
          v.selectedRowIndex = true;
        }
        return v;
      });
      this.setState({
        tableData: tempData,
        totalPage: data.page.pageCount,
        selectedRowIndexlast: selectedRowIndexlast
      });
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      var option = this.props.option;

      Promise.all([(0, _utils.get)(this.props.option.refModelUrl.TableBarUrl, this.props.option.param), (0, _utils.get)(this.props.option.refModelUrl.TableBodyUrl, _extends({}, this.props.option.param, { page: 0, 'refClientPageInfo.currPageIndex': 0, 'refClientPageInfo.pageSize': 10 }))]).then(function (_ref) {
        var _ref2 = _slicedToArray(_ref, 2),
            columnsData = _ref2[0],
            bodyData = _ref2[1];

        if (_this2.props.option.onAfterAjax) {
          _this2.props.option.onAfterAjax(bodyData);
        }
        _this2.getBarData(columnsData);
        _this2.getTableData(bodyData);
      });
      this.setState({
        checkedArray: option.checkedArray
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      this.setState({
        checkedArray: this.props.option.checkedArray
      });
    }
  }, {
    key: 'onSave',
    value: function onSave() {
      this.setState({
        isShowModal: false
      });
      var checkedArray = this.state.checkedArray;

      this.props.option.onSave(checkedArray);
      this.props.option.destory();
    }
  }, {
    key: 'onCancel',
    value: function onCancel() {
      this.setState({
        isShowModal: false
      });
      this.props.option.onCancel();
      this.props.option.destory();
    }
  }, {
    key: 'handleBtnCancel',
    value: function handleBtnCancel() {
      this.setState({
        isShowModal: false
      });
      this.props.option.onCancel();
      this.props.option.destory();
    }
  }, {
    key: 'handlePagination',
    value: function handlePagination(index) {
      var _props$option2 = this.props.option,
          TableBodyUrl = _props$option2.refModelUrl.TableBodyUrl,
          param = _props$option2.param;

      index = index - 1;
      this.setState({
        activePage: index
      }, function () {
        var _this3 = this;

        var _state = this.state,
            filterInfo = _state.filterInfo,
            pageSize = _state.pageSize;

        if (Object.keys(filterInfo).length > 0) {
          var paramWithActivePage = Object.assign({}, param, { page: index, pageSize: pageSize, content: filterInfo, 'refClientPageInfo.currPageIndex': index, 'refClientPageInfo.pageSize': pageSize });
        } else {
          var paramWithActivePage = Object.assign({}, param, { page: index, pageSize: pageSize, 'refClientPageInfo.currPageIndex': index, 'refClientPageInfo.pageSize': pageSize });
        }

        (0, _utils.get)(TableBodyUrl, paramWithActivePage).then(function (response) {
          var data = response.data,
              page = response.page;


          var tempData = [];
          tempData = data.map(function (v, k) {
            v.key = v.refpk;
            return v;
          });

          _this3.setState({
            tableData: tempData
          });
        });
      });
    }
  }, {
    key: 'handlePageSize',
    value: function handlePageSize(size) {
      var _props$option3 = this.props.option,
          TableBodyUrl = _props$option3.refModelUrl.TableBodyUrl,
          param = _props$option3.param;

      this.setState({
        activePage: 0,
        pageSize: size
      }, function () {
        var _this4 = this;

        var filterInfo = this.state.filterInfo;

        if (Object.keys(filterInfo).length > 0) {
          var paramWithPageSize = Object.assign({}, param, { page: 0, pageSize: size, content: filterInfo, 'refClientPageInfo.currPageIndex': 0, 'refClientPageInfo.pageSize': size });
        } else {
          var paramWithPageSize = Object.assign({}, param, { page: 0, pageSize: size, 'refClientPageInfo.currPageIndex': 0, 'refClientPageInfo.pageSize': size });
        }

        (0, _utils.get)(TableBodyUrl, paramWithPageSize).then(function (response) {
          var data = response.data,
              page = response.page;

          var tempData = [];
          tempData = data.map(function (v, k) {
            v.key = v.refpk;
            return v;
          });
          _this4.setState({
            tableData: tempData,
            totalPage: page.pageCount
          });
        });
      });
    }

    // tableData:[],//表格数据
    // totalPage:1,//总页数
    // pageSize:'10',//每页数据数
    // activePage:1,//激活页码
    // filterInfo:{},//过滤信息

  }, {
    key: 'setFilterInfo',
    value: function setFilterInfo(filterInfo) {
      this.setState({
        filterInfo: filterInfo
      });
    }
  }, {
    key: 'searchFilterInfo',
    value: function searchFilterInfo() {
      var _props$option4 = this.props.option,
          TableBodyUrl = _props$option4.refModelUrl.TableBodyUrl,
          param = _props$option4.param;

      this.setState({
        activePage: 0
      }, function () {
        var _this5 = this;

        var _state2 = this.state,
            filterInfo = _state2.filterInfo,
            pageSize = _state2.pageSize;

        console.log(filterInfo);
        if (Object.keys(filterInfo).length > 0) {
          var paramWithFilter = Object.assign({}, param, { page: 0, pageSize: pageSize, content: filterInfo, 'refClientPageInfo.currPageIndex': 0, 'refClientPageInfo.pageSize': pageSize });
        } else {
          var paramWithFilter = Object.assign({}, param, { page: 0, pageSize: pageSize, 'refClientPageInfo.currPageIndex': 0, 'refClientPageInfo.pageSize': pageSize });
        }
        (0, _utils.get)(TableBodyUrl, paramWithFilter).then(function (response) {
          var data = response.data,
              page = response.page;

          var tempData = [];
          tempData = data.map(function (v, k) {
            v.key = v.refpk;
            return v;
          });
          _this5.setState({
            tableData: tempData,
            totalPage: page.pageCount
          });
        });
      });
    }
  }, {
    key: 'setCheckedArray',
    value: function setCheckedArray(checkedArray) {
      this.setState({
        checkedArray: checkedArray
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          option = _props.option,
          _props$modalOptions = _props.modalOptions,
          modalOptions = _props$modalOptions === undefined ? {} : _props$modalOptions;
      var _state3 = this.state,
          isShowModal = _state3.isShowModal,
          tableData = _state3.tableData,
          columnsData = _state3.columnsData,
          selectedRowIndexlast = _state3.selectedRowIndexlast;
      var _state4 = this.state,
          totalPage = _state4.totalPage,
          pageSize = _state4.pageSize,
          activePage = _state4.activePage,
          filterInfo = _state4.filterInfo,
          checkedArray = _state4.checkedArray;
      var _props$option$title = this.props.option.title,
          title = _props$option$title === undefined ? '参照默认标题' : _props$option$title;

      return _react2.default.createElement(
        'div',
        null,
        isShowModal ? _react2.default.createElement(
          _modal2.default,
          _extends({
            show: true, className: option.className + ' yyuap-ref ' + _style.contentWrap,
            backdrop: option.backdrop,
            enforceFocus: false
          }, modalOptions),
          _react2.default.createElement(
            _modal2.default.Body,
            null,
            _react2.default.createElement(
              'div',
              null,
              _react2.default.createElement(
                'div',
                { className: _style.titleStyle },
                title
              ),
              _react2.default.createElement(_icon2.default, { onClick: this.handleBtnCancel.bind(this), className: _style.closeBtnStyle, type: 'uf-close-bold' })
            ),
            _react2.default.createElement(_expandTable2.default, {
              filterKey: option.filterKey,
              columnsData: columnsData,
              tableData: tableData,
              selectedRowIndexlast: selectedRowIndexlast,
              onSave: this.onSave.bind(this),
              onCancel: this.onCancel.bind(this),
              multiple: option.multiple,
              checkedArray: checkedArray,
              totalPage: totalPage,
              pageSize: pageSize,
              activePage: activePage,
              filterInfo: filterInfo,
              setCheckedArray: this.setCheckedArray,
              handlePagination: this.handlePagination,
              handlePageSize: this.handlePageSize,
              setFilterInfo: this.setFilterInfo,
              searchFilterInfo: this.searchFilterInfo,
              buttonText: option.buttonText
            })
          )
        ) : null
      );
    }
  }]);

  return RefMultipleTable;
}(_react.Component);

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