yyuap-ref/dist2/RefMultipleTable/component/expandTable.js

cloud os fe ref project which is based on tinper

'use strict';

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

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 _table = require('../../bee/table');

var _table2 = _interopRequireDefault(_table);

var _checkbox = require('../../bee/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _pagination = require('../../bee/pagination');

var _pagination2 = _interopRequireDefault(_pagination);

var _select = require('../../bee/select');

var _select2 = _interopRequireDefault(_select);

var _formControl = require('../../bee/form-control');

var _formControl2 = _interopRequireDefault(_formControl);

var _datepicker = require('../../bee/datepicker');

var _datepicker2 = _interopRequireDefault(_datepicker);

var _zh_CN = require('rc-calendar/lib/locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

var _en_US = require('rc-calendar/lib/locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

require('./expandTable.css');

var _expandTable = {
  'filterWrap': 'filterWrap__expandTable___2Clhe',
  'filterInfoStyle': 'filterInfoStyle__expandTable___2tLCY',
  'filterInfoStyleDiv': 'filterInfoStyleDiv__expandTable___3RwBo',
  'filterInfoStyleDivSpan': 'filterInfoStyleDivSpan__expandTable___1fS9C',
  'filterInfoStyleDatePicker': 'filterInfoStyleDatePicker__expandTable___1Xe4R',
  'filterBtnWrap': 'filterBtnWrap__expandTable___2PP4j',
  'filterBtnWrap2': 'filterBtnWrap2__expandTable___27iHh',
  'filterResetBtnStyle': 'filterResetBtnStyle__expandTable___13f9d',
  'filterSearchBtnStyle': 'filterSearchBtnStyle__expandTable___2lwf9',
  'filterSaveBtnStyle': 'filterSaveBtnStyle__expandTable___3j1cx',
  'filterCancelBtnStyle': 'filterCancelBtnStyle__expandTable___I0PfC',
  'tableWrap': 'tableWrap__expandTable___3HjUK',
  'paginationWrap': 'paginationWrap__expandTable___15zGO',
  'paginationChooseWrap': 'paginationChooseWrap__expandTable___Rl3tx',
  'paginationSetWrap': 'paginationSetWrap__expandTable___1KT0B',
  'paginationInputWrap': 'paginationInputWrap__expandTable___1rT6J',
  'paginationInputGoStyle': 'paginationInputGoStyle__expandTable___2f4sC'
};

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 format = "YYYY-MM-DD";

var dateInputPlaceholder = "选择日期";

//在assets中对下拉框z-index做处理

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

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

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

    _this.onAllCheckChange = function () {
      var self = _this;
      var _this$props = _this.props,
          tableData = _this$props.tableData,
          checkedArray = _this$props.checkedArray;


      var chooseAllFlag = tableData.every(function (v, k) {
        return checkedArray.some(function (v1, k1) {
          return v1.key === v.key;
        });
      });

      var filterCheckedArray = [];
      if (chooseAllFlag) {
        filterCheckedArray = checkedArray.filter(function (v, k) {
          return !tableData.some(function (v1, k1) {
            return v.key === v1.key;
          });
        });
      } else {
        filterCheckedArray = checkedArray.concat();
        tableData.forEach(function (v, k) {
          if (!checkedArray.some(function (v1, k1) {
            return v1.key === v.key;
          })) {
            filterCheckedArray.push(v);
          }
        });
      }
      self.props.setCheckedArray(filterCheckedArray);
    };

    _this.onCheckboxChange = function (text, record, index) {
      var self = _this;
      var _this$props2 = _this.props,
          tableData = _this$props2.tableData,
          checkedArray = _this$props2.checkedArray;

      var choosed = checkedArray.some(function (v) {
        return v.key == record.key;
      });

      var filterCheckedArray = checkedArray;
      if (choosed) {

        if (!self.props.multiple) {
          filterCheckedArray = checkedArray.filter(function (v, k) {
            return v.key != record.key;
          });
        }
      } else {
        if (self.props.multiple) {
          filterCheckedArray = [record];
        } else {
          filterCheckedArray.push(record);
        }
      }
      self.props.setCheckedArray(filterCheckedArray);
    };

    _this.state = {
      tableData: [],
      totalTableData: [],
      selectedRowIndex: -1,
      checkedAll: false, //是否全部选中
      checkedArray: props.checkedArray, //保存选中数据
      totalPage: 1, //总页数
      pageSize: '10', //每页数据数
      activePage: 0, //激活页码
      showPage: 1, //用来显示跳转到第几页 回车之后跟激活页码一样
      firstload: true,
      filterInfo: {}, //过滤信息
      oriTableData: [] //原始数据
    };
    _this.setPagination = _this.setPagination.bind(_this);
    _this.keyDown = _this.keyDown.bind(_this);
    return _this;
  }

  _createClass(ExpandTable, [{
    key: 'componentWillMount',
    value: function componentWillMount() {

      this.setState({
        columnsData: this.props.columnsData,
        tableData: this.props.tableData

      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      console.log(nextProps);
      this.setState({
        columnsData: nextProps.columnsData,
        tableData: nextProps.tableData,
        selectedRowIndexlast: nextProps.selectedRowIndexlast

        // selectedRowIndex:nextProps.selectedRowIndex
      });
    }

    //pagination

  }, {
    key: 'handleSelect',
    value: function handleSelect(eventKey) {
      this.props.handlePagination(eventKey);
    }
    //调至第几页(1)

  }, {
    key: 'setPagination',
    value: function setPagination(v) {
      this.setState({
        showPage: v
      });
    }
    //调至第几页(2)

  }, {
    key: 'keyDown',
    value: function keyDown(e) {
      if (e.keyCode === 13) {
        //数据判断
        var v = this.state.showPage;
        var totalPage = this.props.totalPage;
        if (v === null || v === '') {
          v = 1;
        }
        v = Number.parseInt(v);
        if (isNaN(v) || v > totalPage) {
          v = 1;
        }
        this.setState({
          showPage: v
        });
        this.props.handlePagination(v);
      }
    }
  }, {
    key: 'goToPage',
    value: function goToPage() {
      this.keyDown({ keyCode: 13 });
    }
    //每页size

  }, {
    key: 'handleSizeChange',
    value: function handleSizeChange(value) {
      this.props.handlePageSize(value);
    }
  }, {
    key: 'onRowClick',
    value: function onRowClick(record, index, text) {
      var _state = this.state,
          tableData = _state.tableData,
          selectedRowIndexlast = _state.selectedRowIndexlast;
      var multiple = this.props.multiple;

      if (multiple) {
        if (selectedRowIndexlast != undefined) {
          tableData[selectedRowIndexlast].selectedRowIndex = false;
        }
        this.setState({
          selectedRowIndex: index,
          tableData: tableData
        });
      }

      // if(multiple){
      this.onCheckboxChange(text, record, index);
      // }
    }
  }, {
    key: 'rowClassName',
    value: function rowClassName(record, index, indent) {}
  }, {
    key: 'searchBtn',
    value: function searchBtn() {
      this.props.searchFilterInfo();
    }
  }, {
    key: 'resetBtn',
    value: function resetBtn() {
      this.props.setFilterInfo({});
      this.props.searchFilterInfo();
    }
  }, {
    key: 'saveBtn',
    value: function saveBtn() {
      this.props.onSave();
    }
  }, {
    key: 'cancelBtn',
    value: function cancelBtn() {
      this.props.onCancel();
    }
  }, {
    key: 'ondateFilterInfo',
    value: function ondateFilterInfo(key, d) {
      console.log(key, d.format(format));
      var filterInfo = this.props.filterInfo;

      filterInfo[key] = d.format(format);
      this.props.setFilterInfo(filterInfo);
    }
  }, {
    key: 'setFilterInfo',
    value: function setFilterInfo(key, event) {
      var filterInfo = this.props.filterInfo;

      filterInfo[key] = event.target.value;
      this.props.setFilterInfo(filterInfo);
    }

    //全选/全不选

    //对某一个checkbox的点击事件

  }, {
    key: 'renderColumnsMultiSelect',
    value: function renderColumnsMultiSelect(columns) {
      var self = this;
      var _props = this.props,
          tableData = _props.tableData,
          checkedArray = _props.checkedArray,
          multiple = _props.multiple;


      var chooseAllFlag = tableData.every(function (v, k) {
        return checkedArray.some(function (v1, k1) {
          return v1.key === v.key;
        });
      });

      var checkedKeyList = tableData.map(function (v, k) {
        return checkedArray.some(function (v1, k1) {
          return v1.key === v.key;
        });
      });
      var indeterminate_bool = false;
      var i = checkedKeyList.length - 1;
      while (i >= 0) {
        if (checkedKeyList[i]) {
          indeterminate_bool = true;
          break;
        }
        i--;
      } //判断是否有部分选中
      var defaultColumns = [{
        title: _react2.default.createElement(_checkbox2.default, {
          className: 'table-checkbox',
          checked: chooseAllFlag,
          indeterminate: indeterminate_bool && !chooseAllFlag,
          onChange: this.onAllCheckChange
        }),
        key: "checkbox",
        dataIndex: "checkbox",
        width: "5%",
        render: function render(text, record, index) {
          return _react2.default.createElement(_checkbox2.default, {
            className: 'table-checkbox',
            checked: checkedKeyList[index],
            onChange: self.onCheckboxChange.bind(this, text, record, index),
            onClick: function onClick(e) {
              return e.stopPropagation();
            }
          });
        }
      }];
      if (tableData.length > 0 && !multiple) {
        columns = defaultColumns.concat(columns);
      }
      return columns;
    }
  }, {
    key: 'ondateSelect',
    value: function ondateSelect(d) {
      console.log(d);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var showPage = this.state.showPage;
      var _props2 = this.props,
          tableData = _props2.tableData,
          columnsData = _props2.columnsData,
          buttonText = _props2.buttonText;
      var _props3 = this.props,
          filterKey = _props3.filterKey,
          totalPage = _props3.totalPage,
          activePage = _props3.activePage,
          pageSize = _props3.pageSize,
          filterInfo = _props3.filterInfo;

      var saveButton = "确定";
      var cancelButton = "取消";
      if (buttonText) {
        saveButton = buttonText.ok;
        cancelButton = buttonText.cancel;
      }
      if (filterKey) {
        var filterList = filterKey.map(function (v, k) {
          var filterInfoInput = filterInfo[v.key] || '';
          if (v.type === 'date') {
            return _react2.default.createElement(
              'div',
              { key: k, className: 'RefFilterInfoStyleDiv ' + _expandTable.filterInfoStyleDiv },
              _react2.default.createElement(
                'span',
                { className: 'RefFilterInfoStyleDivSpan ' + _expandTable.filterInfoStyleDivSpan },
                v.title,
                ':'
              ),
              _react2.default.createElement(_datepicker2.default, {
                format: format,
                showTime: true,
                onSelect: _this2.ondateFilterInfo.bind(_this2, v.key),
                onChange: _this2.ondateSelect,
                locale: _zh_CN2.default
                // defaultValue={moment()}
                , placeholder: dateInputPlaceholder,
                className: 'RefFilterInfoStyleDatePicker ' + _expandTable.filterInfoStyleDatePicker
              })
            );
          } else {
            return _react2.default.createElement(
              'div',
              { key: k, className: 'RefFilterInfoStyleDiv ' + _expandTable.filterInfoStyleDiv },
              _react2.default.createElement(
                'span',
                { className: 'RefFilterInfoStyleDivSpan ' + _expandTable.filterInfoStyleDivSpan },
                v.title,
                ':'
              ),
              _react2.default.createElement('input', { value: filterInfoInput, onChange: _this2.setFilterInfo.bind(_this2, v.key) })
            );
          }
        });
      } else {
        var filterList = columnsData.map(function (v, k) {
          var filterInfoInput = filterInfo[v.key] || '';
          return _react2.default.createElement(
            'div',
            { key: k, className: 'RefFilterInfoStyleDiv ' + _expandTable.filterInfoStyleDiv },
            _react2.default.createElement(
              'span',
              { className: 'RefFilterInfoStyleDivSpan ' + _expandTable.filterInfoStyleDivSpan },
              v.title,
              ':'
            ),
            _react2.default.createElement('input', { value: filterInfoInput, onChange: _this2.setFilterInfo.bind(_this2, v.key) })
          );
        });
      }
      var columns = this.renderColumnsMultiSelect(columnsData);
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { className: 'RefFilterWrap ' + _expandTable.filterWrap },
          _react2.default.createElement(
            'div',
            { className: 'RefFilterInfoStyle ' + _expandTable.filterInfoStyle },
            filterList
          ),
          _react2.default.createElement(
            'div',
            { className: 'RefFilterBtnWrap ' + _expandTable.filterBtnWrap },
            _react2.default.createElement(
              'button',
              { className: 'RefFilterResetBtnStyle ' + _expandTable.filterResetBtnStyle, onClick: this.resetBtn.bind(this) },
              '\u91CD\u7F6E'
            ),
            _react2.default.createElement(
              'button',
              { className: 'RefFilterSearchBtnStyle ' + _expandTable.filterSearchBtnStyle, onClick: this.searchBtn.bind(this) },
              '\u67E5\u8BE2'
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'RefTableWrap ' + _expandTable.tableWrap },
          _react2.default.createElement(_table2.default, {
            scroll: { y: 400 },
            emptyText: function emptyText() {
              return '对不起，无后台数据！';
            },
            style: { 'height': 438 },
            columns: columns,
            data: tableData,
            onRowClick: function onRowClick(record, index, indent) {
              return _this2.onRowClick(record, index, indent, _this2);
            },
            rowClassName: function rowClassName(record, index, indent) {
              if (_this2.state.selectedRowIndex == index || record.selectedRowIndex) {
                return 'selected';
              } else {
                return '';
              }
            }
          })
        ),
        _react2.default.createElement(
          'div',
          { className: 'RefPaginationWrap ' + _expandTable.paginationWrap },
          _react2.default.createElement(
            'div',
            { className: 'RefPaginationChooseWrap ' + _expandTable.paginationChooseWrap },
            _react2.default.createElement(_pagination2.default, {
              prev: true,
              next: true,
              boundaryLinks: true,
              size: 'sm',
              items: totalPage,
              maxButtons: 5,
              activePage: activePage + 1,
              onSelect: this.handleSelect.bind(this)
            })
          ),
          _react2.default.createElement(
            'div',
            { className: 'RefPaginationSetWrap ' + _expandTable.paginationSetWrap, style: { marginTop: '11px' } },
            '10\u6761/\u9875'
          ),
          _react2.default.createElement(
            'div',
            { className: 'RefPaginationInputWrap ' + _expandTable.paginationInputWrap },
            '\u8DF3\u81F3',
            _react2.default.createElement(_formControl2.default, { type: 'text',
              value: showPage,
              onChange: this.setPagination,
              onKeyDown: this.keyDown
            }),
            '\u9875',
            _react2.default.createElement(
              'button',
              { onClick: this.goToPage.bind(this), className: 'RefPaginationInputGoStyle ' + _expandTable.paginationInputGoStyle },
              '\u786E\u5B9A'
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'RefFilterBtnWrap2 ' + _expandTable.filterBtnWrap2 },
          _react2.default.createElement(
            'button',
            { className: 'RefFilterSaveBtnStyle ' + _expandTable.filterSaveBtnStyle, onClick: this.saveBtn.bind(this) },
            saveButton
          ),
          _react2.default.createElement(
            'button',
            { className: 'RefFilterCancelBtnStyle ' + _expandTable.filterCancelBtnStyle, onClick: this.cancelBtn.bind(this) },
            cancelButton
          )
        )
      );
    }
  }]);

  return ExpandTable;
}(_react.Component);

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