yyuap-ref/dist2/RefTreeTransfer/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 _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 _formControl = require('../bee/form-control');

var _formControl2 = _interopRequireDefault(_formControl);

require('./index.css');

var _index = {
  'contentWrap': 'contentWrap__index___3vxel',
  'modalTitleStyle': 'modalTitleStyle__index___2-8E6',
  'rightSearchStyle': 'rightSearchStyle__index___3TQAA',
  'closeBtnStyle': 'closeBtnStyle__index___2G9j-',
  'leftRect': 'leftRect__index___11sRT',
  'leftRectTitle': 'leftRectTitle__index___10sof',
  'rightRect': 'rightRect__index___3JS5D',
  'rightRectTitle': 'rightRectTitle__index___unIxQ'
};

var _button = require('../bee/button');

var _button2 = _interopRequireDefault(_button);

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

var _icon2 = _interopRequireDefault(_icon);

var _transfer = require('./supportComponents/transfer');

var _transfer2 = _interopRequireDefault(_transfer);

var _leftTree = require('./supportComponents/leftTree');

var _leftTree2 = _interopRequireDefault(_leftTree);

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

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; }
// import '../assets/index.css';

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

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

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

    var option = _this.props.option;

    _this.state = {
      isShowModal: true, //是否显示弹窗
      searchvalue: '',
      treeData: [],
      searchContent: '',
      transferData: [],
      targetKeys: []
    };
    return _this;
  }

  _createClass(RefTreeTransfer, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var checkedArray = nextProps.option.checkedArray;

      var tempKey = checkedArray && checkedArray.map(function (v) {
        return v.refpk;
      });
      this.setState({
        targetKeys: tempKey,
        transferData: checkedArray
      });
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      var option = this.props.option;

      var language = option.param.locale || 'zh_CN';
      (0, _utils.get)(option.refModelUrl.TreeUrl, option.param).then(function (response) {
        if (_this2.props.option.onAfterAjax) {
          _this2.props.option.onAfterAjax(response);
        }
        var data = response.data;

        _this2.setState({
          treeData: data
        });
      });
      var checkedArray = this.props.option.checkedArray;

      var tempKey = checkedArray && checkedArray.map(function (v) {
        return v.refpk;
      });
      this.setState({
        targetKeys: tempKey,
        transferData: checkedArray,
        language: language
      });
    }
  }, {
    key: 'handleTreeSelect',
    value: function handleTreeSelect(data) {
      var _this3 = this;

      var self = this;
      var refpk = data.refpk;
      var TableBodyUrl = this.props.option.refModelUrl.TableBodyUrl;

      (0, _utils.get)(TableBodyUrl, _extends({ condition: refpk }, self.props.option.param)).then(function (response) {
        var data = response.data;
        var _self$state = self.state,
            transferData = _self$state.transferData,
            targetKeys = _self$state.targetKeys;

        var selectedData = transferData.filter(function (v) {
          return targetKeys.some(function (key) {
            return key == v.refpk;
          });
        });
        var temp = data.filter(function (v, k) {
          return selectedData.every(function (v1) {
            return v1.refpk != v.refpk;
          });
        });
        var tempTransferData = temp.concat(selectedData);
        _this3.setState({
          transferData: tempTransferData
        });
      });
    }
  }, {
    key: 'transferSave',
    value: function transferSave(targetKeys, needTransferData) {
      this.setState({
        targetKeys: targetKeys,
        transferData: needTransferData
      });
      this.props.option.onSave(needTransferData);
      this.setState({
        isShowModal: false
      });
      this.props.option.destory();
    }
  }, {
    key: 'transferCancel',
    value: function transferCancel() {
      this.setState({
        isShowModal: false
      });
      this.props.option.onCancel();
      this.props.option.destory();
    }
  }, {
    key: 'setTargetKeys',
    value: function setTargetKeys(targetKeys) {
      this.setState({
        targetKeys: targetKeys
      });
    }
  }, {
    key: 'onSearchrightSearch',
    value: function onSearchrightSearch(e) {
      var _this4 = this;

      var searchvalue = this.state.searchvalue;

      console.log(encodeURI(searchvalue));

      if (e.keyCode === 13) {
        var self = this;
        var TableBodyUrlSearch = this.props.option.refModelUrl.TableBodyUrlSearch;

        (0, _utils.get)(TableBodyUrlSearch, _extends({ content: encodeURI(searchvalue) }, self.props.option.param)).then(function (response) {
          var data = response.data;
          var _self$state2 = self.state,
              transferData = _self$state2.transferData,
              targetKeys = _self$state2.targetKeys;

          var selectedData = transferData.filter(function (v) {
            return targetKeys.some(function (key) {
              return key == v.refpk;
            });
          });
          var temp = data.filter(function (v, k) {
            return selectedData.every(function (v1) {
              return v1.refpk != v.refpk;
            });
          });
          var tempTransferData = temp.concat(selectedData);
          _this4.setState({
            transferData: tempTransferData
          });
        });
      }
    }
  }, {
    key: 'onChangerightSearch',
    value: function onChangerightSearch(value) {
      this.setState({
        searchvalue: value
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          searchContent = _state.searchContent,
          treeData = _state.treeData,
          transferData = _state.transferData,
          targetKeys = _state.targetKeys,
          language = _state.language;
      var _props = this.props,
          option = _props.option,
          _props$modalOptions = _props.modalOptions,
          modalOptions = _props$modalOptions === undefined ? {} : _props$modalOptions;

      var isHasSearch = option.refModelUrl.TableBodyUrlSearch ? true : false;
      var isShowModal = this.state.isShowModal;
      var _option$title = option.title,
          title = _option$title === undefined ? '参照默认标题' : _option$title;
      var _option$textOption = option.textOption,
          textOption = _option$textOption === undefined ? {} : _option$textOption;
      var _textOption$leftTitle = textOption.leftTitle,
          leftTitle = _textOption$leftTitle === undefined ? '默认树标题' : _textOption$leftTitle,
          _textOption$rightTitl = textOption.rightTitle,
          rightTitle = _textOption$rightTitl === undefined ? '默认穿梭框' : _textOption$rightTitl;

      var searchtext = "搜索";
      var nodata = "没有查询到数据";

      switch (language) {
        case "zh_CN":
          searchtext = '搜索';
          nodata = '没有查询到数据';

          break;
        case "en_US":
          searchtext = 'Search';
          nodata = 'No query to data';

          break;
        case "zh_TW":
          searchtext = '搜索';
          nodata = '沒有査詢到數據';

          break;
        case "fr_FR":
          searchtext = 'Recherche';
          nodata = 'Pas de données';

          break;
        case "de_DE":
          searchtext = 'Suche';
          nodata = 'Keine abfrage zu Daten';

          break;
        case "ja_JP":
          searchtext = '検索';
          nodata = 'データが検索されていません';

          break;
        default:
          searchtext = '搜索';
          nodata = '没有查询到数据';

      }
      return _react2.default.createElement(
        'div',
        null,
        isShowModal ? _react2.default.createElement(
          _modal2.default,
          _extends({
            show: true, className: option.className + ' yyuap-ref ' + _index.contentWrap,
            backdrop: option.backdrop,
            enforceFocus: false
          }, modalOptions),
          _react2.default.createElement(
            _modal2.default.Body,
            null,
            _react2.default.createElement(
              'div',
              null,
              _react2.default.createElement(
                'div',
                { className: 'yyuap5-modalTitleStyle ' + _index.modalTitleStyle },
                title
              ),
              _react2.default.createElement(_icon2.default, { onClick: this.transferCancel.bind(this), className: 'yyuap5-closeBtnStyle ' + _index.closeBtnStyle, type: 'uf-close-bold' })
            ),
            _react2.default.createElement(
              'div',
              { className: 'yyuap5-leftRect ' + _index.leftRect },
              _react2.default.createElement(
                'div',
                { className: 'yyuap5-leftRectTitle ' + _index.leftRectTitle },
                leftTitle
              ),
              _react2.default.createElement(_leftTree2.default, { data: treeData, handleTreeSelect: this.handleTreeSelect.bind(this), searchtext: searchtext })
            ),
            _react2.default.createElement(
              'div',
              { className: 'yyuap5-rightRect ' + _index.rightRect },
              _react2.default.createElement(
                'div',
                { className: 'yyuap5-rightRect ' + _index.rightRectTitle },
                rightTitle,
                isHasSearch ? _react2.default.createElement(
                  'div',
                  { className: 'yyuap5-rightRect ' + _index.rightSearchStyle },
                  _react2.default.createElement(_formControl2.default, {
                    onKeyUp: this.onSearchrightSearch.bind(this),
                    onChange: this.onChangerightSearch.bind(this),
                    placeholder: searchtext
                  }),
                  _react2.default.createElement('i', { className: 'uf uf-search' })
                ) : null
              ),
              _react2.default.createElement(_transfer2.default, {
                textOption: textOption,
                transferData: transferData,
                targetKeys: targetKeys,
                showKey: option.showKey,
                setTargetKeys: this.setTargetKeys.bind(this),
                transferSave: this.transferSave.bind(this),
                transferCancel: this.transferCancel.bind(this),
                buttonText: option.buttonText,
                isHasSearch: isHasSearch,
                language: language,
                searchtext: searchtext,
                nodata: nodata
              })
            )
          )
        ) : null
      );
    }
  }]);

  return RefTreeTransfer;
}(_react.Component);

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