yyuap-ref/dist2/refWithInput/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 _utils = require('../utils');

var _createApiEs = require('../createApi/createApi.es.js');

var _createApiEs2 = _interopRequireDefault(_createApiEs);

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

var _icon2 = _interopRequireDefault(_icon);

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

var _formControl2 = _interopRequireDefault(_formControl);

var _form = require('../bee/form');

var _form2 = _interopRequireDefault(_form);

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

var _select2 = _interopRequireDefault(_select);

require('./style.css');

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 Option = _select2.default.Option;
var OptGroup = _select2.default.OptGroup;

var FormItem = _form2.default.FormItem;

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

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

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

    _this.state = {
      savedData: [],
      savedShow: '',
      isClick: false,
      searchKeyArr: [], // select value 选中的值的 key
      searchList: [], // 下拉列表
      searchData: [], // 默认选中的值  key - value
      // inputValue:'',      // 输入框的值
      searchListRestore: [] // 存储list
    };
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    _this.onSearch = _this.onSearch.bind(_this);
    return _this;
  }

  _createClass(TransferRef, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var showKey = this.props.option.showKey;

      if (this.props.option.checkedArray && this.props.option.ifInputChange) {
        var tempData = this.props.option.checkedArray;
        tempData = tempData.map(function (v) {
          v.key = v.refpk;
          return v;
        });

        var tempShow2 = tempData.map(function (v) {
          return v[showKey];
        });
        this.setState({
          searchData: tempData,
          searchList: tempData,
          searchKeyArr: tempShow2
        });
      }
      this.setState({
        savedShow: this.props.option.showVal || ''
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // const {showKey}=nextProps.option
      // const {option}=nextProps
      // if(option.checkedArray && option.ifInputChange){
      //   var tempData = option.checkedArray
      //   tempData = tempData.map(v=>{
      //     v.key = v.refpk;
      //     return v
      //   })

      //   var tempShow2 = tempData.map(v=>v[showKey])
      //   this.setState({
      //     searchData:tempData,
      //     searchList:tempData,
      //     searchKeyArr:tempShow2
      //   })
      // }
      if (nextProps.option.showVal) {
        this.setState({
          savedShow: nextProps.option.showVal
        });
      }
    }
  }, {
    key: 'handleClick',
    value: function handleClick() {
      var _this2 = this;

      var _state = this.state,
          isClick = _state.isClick,
          searchList = _state.searchList;

      if (this.props.disabled || isClick) {
        return;
      }
      this.setState({ isClick: true });
      var self = this;

      var tempCreateModal = function tempCreateModal() {
        var option = self.props.option;
        var onPropsSave = option.onSave;
        var onPropsCancel = option.onCancel;
        var showKey = _this2.props.option.showKey || 'refname';
        var searchDataNew = self.state.searchData;
        if (searchDataNew) {
          searchDataNew = searchDataNew.map(function (v) {
            v.key = v.refpk;
            return v;
          });
        }
        console.log(self.state.searchData);
        var appendOption = {
          checkedArray: option.ifInputChange ? searchDataNew : self.state.savedData,
          onCancel: function onCancel(p) {
            self.setState({ isClick: false });
            onPropsCancel(p);
          },
          onSave: function onSave(sels) {
            var searchList = self.state.searchList;

            var tempKey = sels.map(function (v) {
              return v[option.searchKey];
            });
            var searchKey = searchList.map(function (v) {
              return v[option.searchKey];
            });

            var tempShow = sels.map(function (v) {
              return v[showKey];
            }).join(';');
            console.log('searchKeyArr' + tempShow);
            self.setState({
              savedData: sels,
              savedShow: tempShow,
              isClick: false,
              searchData: sels,
              searchList: sels,
              searchKeyArr: tempKey
            }, function () {
              onPropsSave(sels, tempShow);
            });
          }
        };
        option = Object.assign({}, option, appendOption);
        (0, _createApiEs2.default)(option);
      };
      var showKey = self.props.option.showKey || 'refname';
      if (this.props.option.checkedArray && this.props.option.checkedArray.length > 0) {
        var tempData = this.props.option.checkedArray;
        tempData = tempData.map(function (v) {
          v.key = v.refpk;
          return v;
        });
        var tempShow = tempData.map(function (v) {
          return v[showKey];
        }).join(';');

        this.setState({
          savedData: tempData,
          savedShow: tempShow

        }, function () {
          tempCreateModal();
        });
      } else if (this.props.option.keyList && this.props.option.keyList.length > 0) {
        var _props$option = this.props.option,
            refCode = _props$option.param.refCode,
            filterRefUrl = _props$option.filterRefUrl;

        var postParamList = this.props.option.keyList.map(function (v) {
          var tempData = {};
          tempData.refCode = refCode, tempData.id = v;
          return tempData;
        });
        (0, _utils.post)(filterRefUrl, postParamList).then(function (response) {
          var tempData = response || [];
          tempData = tempData.map(function (v) {
            v.key = v.refpk;
            return v;
          });
          var tempKey = tempData.map(function (v) {
            return v.key;
          });
          var tempShow = tempData.map(function (v) {
            return v[showKey];
          }).join(';');
          _this2.setState({
            savedData: tempData,
            savedShow: tempShow
          }, function () {
            tempCreateModal();
          });
        }).catch(function () {
          _this2.setState({
            savedData: [],
            savedShow: ''
          }, function () {
            tempCreateModal();
          });
        });
      } else {
        tempCreateModal();
      }
    }
  }, {
    key: 'onRefClick',
    value: function onRefClick(inputid, propForm) {
      var _this3 = this;

      var isClick = this.state.isClick;

      if (this.props.disabled || isClick) {
        return;
      }
      this.setState({ isClick: true });
      var self = this;
      var tempCreateModal = function tempCreateModal() {
        var option = self.props.option;
        var onPropsSave = option.onSave;
        var onPropsCancel = option.onCancel;
        var showKey = self.props.option.showKey || 'refname';
        var appendOption = {
          checkedArray: self.state.savedData,
          onCancel: function onCancel(p) {
            self.setState({ isClick: false });
            onPropsCancel(p);
          },
          onSave: function onSave(sels) {
            self.setState({
              savedData: sels,
              isClick: false
            });
            var tempShow = sels.map(function (v) {
              return v[showKey];
            });
            var showValue = tempShow.join(';');
            var setFieldsValue = propForm.setFieldsValue;

            var obj = {};
            obj[inputid + ""] = showValue;
            setFieldsValue(obj);
            onPropsSave(sels);
          }
        };
        option = Object.assign({}, option, appendOption);
        (0, _createApiEs2.default)(option);
      };
      var showKey = self.props.option.showKey || 'refname';
      if (this.props.option.checkedArray) {
        var tempData = this.props.option.checkedArray;
        tempData = tempData.map(function (v) {
          v.key = v.refpk;
          return v;
        });
        var tempShow = tempData.map(function (v) {
          return v[showKey];
        }).join(';');
        this.setState({
          savedData: tempData,
          savedShow: tempShow
        }, function () {
          tempCreateModal();
        });
      } else {
        var _props$option2 = this.props.option,
            refCode = _props$option2.param.refCode,
            filterRefUrl = _props$option2.filterRefUrl;

        var postParamList = this.props.option.keyList.map(function (v) {
          var tempData = {};
          tempData.refCode = refCode, tempData.id = v;
          return tempData;
        });
        (0, _utils.post)(filterRefUrl, postParamList).then(function (response) {
          var tempData = response;
          tempData = tempData.map(function (v) {
            v.key = v.refpk;
            return v;
          });
          var tempKey = tempData.map(function (v) {
            return v.key;
          });
          var tempShow = tempData.map(function (v) {
            return v[showKey];
          }).join(';');
          _this3.setState({
            savedData: tempData,
            savedShow: tempShow
          }, function () {
            tempCreateModal();
          });
        }).catch(function () {
          _this3.setState({
            savedData: [],
            savedShow: ''
          }, function () {
            tempCreateModal();
          });
        });
      }
    }
  }, {
    key: 'handleChange',
    value: function handleChange(value) {
      console.log('value', value);
      var option = this.props.option;

      typeof value == 'string' ? value = value.split(',') : null;
      var searchList = this.state.searchList;

      if (option.multiple) {
        if (value.length > 1) {
          value = value[1];
        }
      } else {}
      var searchData = searchList.filter(function (item) {
        return value.includes(item[option.searchKey]);
      });
      console.log('searchData', searchData);
      this.setState({
        searchData: searchData,
        searchKeyArr: value,
        searchList: searchData
      });
      this.props.searchChange && this.props.searchChange(searchData);
    }
  }, {
    key: 'getSearchList',
    value: function getSearchList(value) {
      var _this4 = this;

      if (value === '') {
        var _searchData = this.state.searchData;

        this.setState({
          searchList: _searchData
        });
        return;
      }
      var option = this.props.option;
      var searchData = this.state.searchData;

      (0, _utils.get)(option.refModelUrl.SearchListUrl, Object.assign({}, option.param, { size: option.searchPageSize || 10, content: value })).then(function (response) {
        var data = response.data;


        var dataKey = data.map(function (v) {
          return v[option.searchKey];
        });
        console.log('dataKey', dataKey);
        searchData.forEach(function (item) {
          if (!dataKey.includes(item[option.searchKey])) {
            data.push(item);
          }
        });
        console.log('data', data);
        _this4.setState({
          searchList: data
        });
      });
    }
  }, {
    key: 'onSearch',
    value: function onSearch(value) {
      this.getSearchList(value);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this5 = this;

      var _state2 = this.state,
          savedShow = _state2.savedShow,
          searchList = _state2.searchList,
          searchKeyArr = _state2.searchKeyArr;


      var searchshowvalue = void 0;
      var _props = this.props,
          disabled = _props.disabled,
          option = _props.option;

      if (this.props.option.verification) {
        var _props$form = this.props.form,
            getFieldProps = _props$form.getFieldProps,
            getFieldError = _props$form.getFieldError,
            getFieldDecorator = _props$form.getFieldDecorator;
        var _props$option3 = this.props.option,
            verKey = _props$option3.verKey,
            verVal = _props$option3.verVal;
      }
      if (option.ifInputChange && option.searchshowKey) {
        searchshowvalue = function searchshowvalue(item) {
          console.log(item);
          var data = option.searchshowKey.map(function (v) {
            return item[v];
          }).join(" ");
          return data;
        };
      } else {
        searchshowvalue = function searchshowvalue(item) {

          return item[option.showKey];
        };
      }

      if (this.props.option.verification && !this.props.option.ifInputChange) {
        return _react2.default.createElement(
          'div',
          { className: 'yyuapRef refInputWrap' },
          _react2.default.createElement(
            FormItem,
            null,
            _react2.default.createElement(_formControl2.default, _extends({ disabled: true, className: !disabled ? "formInput" : "formInput formDisable", placeholder: '', value: ''
            }, getFieldProps(verKey, {
              initialValue: verVal,
              validateTrigger: 'onBlur',
              rules: [{
                required: true, type: 'string', message: option.verShowMessage || '请选择相关参照'
              }]
            }))),
            _react2.default.createElement(_icon2.default, { type: 'uf-navmenu', key: "icon", className: 'refIconStyle', onClick: function onClick() {
                return _this5.onRefClick(verKey, _this5.props.form);
              } }),
            _react2.default.createElement(
              'span',
              { className: 'error' },
              getFieldError(verKey)
            )
          )
        );
      } else if (this.props.option.ifInputChange) {
        var _option = this.props.option;

        return _react2.default.createElement(
          'div',
          { className: 'yyuapRef' },
          _react2.default.createElement(
            'div',
            { className: 'refSelectWrap' },
            _react2.default.createElement(
              _select2.default,
              {
                multiple: true,
                style: { width: "97%" },
                searchPlaceholder: '',
                onChange: this.handleChange,
                value: searchKeyArr,
                onSearch: this.onSearch,
                filterOption: false,
                notFoundContent: 'no data'
              },
              searchList.map(function (item) {
                return _react2.default.createElement(
                  Option,
                  { key: item[_option.searchKey] },
                  searchshowvalue(item)
                );
              })
            ),
            _react2.default.createElement(_icon2.default, { className: 'refIconStyle', type: 'uf-symlist', onClick: this.handleClick.bind(this) })
          )
        );
      } else {
        return _react2.default.createElement(
          'div',
          { className: 'yyuapRef refInputWrap' },
          _react2.default.createElement('input', { value: savedShow, disabled: disabled }),
          _react2.default.createElement(_icon2.default, { className: 'refIconStyle', type: 'uf-symlist', onClick: this.handleClick.bind(this) })
        );
      }
    }
  }]);

  return TransferRef;
}(_react.Component);

TransferRef.defaultProps = {
  option: {
    keyList: [],
    filterRef: '/filterRef',
    param: {
      refCode: 'common_ref'
    },
    searchPageSize: 10
  }
};
exports.default = _form2.default.createForm()(TransferRef);
module.exports = exports['default'];