tplus-pos/dist/components/product/search.js

pos module

'use strict';

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

var _InputGroup3 = require('tinper-bee/dist/InputGroup');

var _InputGroup4 = _interopRequireDefault(_InputGroup3);

var _FormControl2 = require('tinper-bee/dist/FormControl');

var _FormControl3 = _interopRequireDefault(_FormControl2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class;

require('tinper-bee/dist/InputGroup/index.css');

require('tinper-bee/dist/FormControl/index.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _api = require('./api');

var _api2 = _interopRequireDefault(_api);

require('./index.less');

var _tplusComponentsTouch = require('tplus-components-touch');

var _mutantsMicrofx = require('mutants-microfx');

var _mutantsUtil = require('mutants-util');

var _tplusPoslogin = require('tplus-poslogin');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ProductSearch = (0, _mutantsMicrofx.observer)(_class = function (_Component) {
  (0, _inherits3.default)(ProductSearch, _Component);

  function ProductSearch(props, context) {
    (0, _classCallCheck3.default)(this, ProductSearch);

    var _this = (0, _possibleConstructorReturn3.default)(this, (ProductSearch.__proto__ || (0, _getPrototypeOf2.default)(ProductSearch)).call(this, props, context));

    _this.changeKeyboardShowOrHide = function () {
      var _input = _this.refSearch.input;
      var isKeyboardShow = _this.state.isKeyboardShow;

      if (isKeyboardShow == true) {
        _tplusComponentsTouch.Keyboard.close();
        _this.clearKeyboard();
      } else {
        if (!_this.isHorizontalPad) {
          _this.refSearch.input.focus();
        }
        _tplusComponentsTouch.Keyboard.open(function (v) {
          var val = _tplusComponentsTouch.Keyboard.getNewValue(_input, _input.value, v);
          _this.inputChange(val);
        }, function () {
          var value = _this.state.value;

          _this.searchData(value);
          _tplusComponentsTouch.Keyboard.close();
          _this.clearKeyboard();
          _this.setState({ isKeyboardShow: false });
        }, function () {
          _tplusComponentsTouch.Keyboard.close();
          _this.clearKeyboard();
          _this.setState({ isKeyboardShow: false });
        })();
        _this.setState({ isKeyboardShow: true });
      }
    };

    _this.clearKeyboard = function () {
      _this.setState({ isKeyboardShow: false });
    };

    _this.formatNumber = function (number, length) {
      if (number === '' || number === undefined || number === null) {
        number = 0;
      }
      number += '';
      if (length == 0) {
        return parseInt(number);
      }
      if (number.indexOf('.') > 0) {
        number += '0000000000';
      } else {
        number += '.0000000000';
      }
      return number.substring(0, number.indexOf(".") + +length + 1);
    };

    _this.inputChange = function (value) {
      _this.setState({ value: value, finishSearch: false });
    };

    _this.handleClick = function (item) {
      var onClick = _this.props.onClick;

      onClick && onClick(item, 0, 0, null, true);
      _this.closePanel();
      _this.setState({ value: '' });
    };

    _this.openPanel = function () {
      $.clearFocus();
      $.setFocus(_this.downPanel);
      _this.setState({ isShowPanel: true });
    };

    _this.closePanel = function () {
      $.clearFocus();
      $.find('.app', true).setFocus();
      _this.setState({ isShowPanel: false, selectRowIndex: -1, selectRowItem: null });
    };

    _this.triggerFunc = function (event) {
      var isShowPanel = _this.state.isShowPanel;

      var el = event.target;
      if (isShowPanel && el.className !== 'dropdownPanel' && el.id !== 'productPoint' && el.className.indexOf('product-jianpan') == -1) {
        _this.closePanel();
        _this.stopFunc(event);
      }
      _this.controllerEvent('setInventoryFocus');
    };

    _this.stopFunc = function (e) {
      e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    };

    _this.searchData = function (value, iskeyboard) {
      var _this$props = _this.props,
          isReturn = _this$props.isReturn,
          idMember = _this$props.idMember,
          configure = _this$props.configure,
          onClick = _this$props.onClick;

      _api2.default.searchInventory({
        Key: value, // 存货条码录入框输入的值，可以是助记码、存货编码，也可以是条形码
        SearchType: 0, // “0”不指定，1：“条形码” 2：“非条形码”
        IdinventoryClass: -2, // 存货分类Id，-1代表常用分类，-2代表全部分类，其他以数据库的为准
        PageNo: 1, // 当前页号 从1开始
        PageSize: 20, // 每页大小
        isReturn: isReturn,
        Idmember: idMember || '',
        IsSelfCash: _mutantsUtil.platform.isVerticalTouch,
        Idstore: configure.idStore || '',
        posCode: _this.posCode
      }).then(function (_ref) {
        var RetailDetailData = _ref.RetailDetailData,
            InventoryData = _ref.InventoryData,
            TotalCount = _ref.TotalCount,
            IsBarCode = _ref.IsBarCode,
            IsSerialNumber = _ref.IsSerialNumber;

        if (TotalCount == 0) {
          _tplusComponentsTouch.Message.info('无此商品信息', {}, 'warn');
          _this.setState({ value: '' });
        } else if (TotalCount == 1) {
          //只有一个商品
          var fn = _this.props.justOneResultCallBack;
          if (IsBarCode || IsSerialNumber) {
            //条形码、序列号
            fn && fn(RetailDetailData, IsSerialNumber);
          } else {
            if (RetailDetailData) {
              fn && fn(RetailDetailData, IsSerialNumber);
            } else {
              onClick && onClick(InventoryData[0], 0, 0, null, true);
            }
          }
          _this.closePanel();
          _this.setState({ value: '' });
        } else {
          _this.openPanel();
          _this.setState({ data: InventoryData, selectRowIndex: 0, selectRowItem: InventoryData[0] });
        }
      });
    };

    _this.onKeyDown = function (e) {
      var pRowHeight = 32;
      var onClick = _this.props.onClick;
      var _this$state = _this.state,
          isShowPanel = _this$state.isShowPanel,
          finishSearch = _this$state.finishSearch,
          value = _this$state.value,
          data = _this$state.data,
          selectRowIndex = _this$state.selectRowIndex,
          selectRowItem = _this$state.selectRowItem;

      var key = e && e.keyCode;
      switch (key) {
        case 13:
          //回车
          if (value) {
            if (isShowPanel && finishSearch && selectRowIndex > -1 && selectRowItem) {
              onClick && onClick(selectRowItem, 0, 0, null, true);
              _this.closePanel();
              _this.setState({ value: '' });
            } else {
              var stime = _this.keypressStime;
              var etime = Date.parse(new Date());
              var iskeyboard = etime - stime > 300 ? true : false;
              _this.searchData(value, iskeyboard);
              _this.setState({ finishSearch: true });
            }
            _this.keypressStime = null;
          } else {
            _this.keypressStime = null;
            _tplusComponentsTouch.Message.warn('请输入商品编码/条码');
            return;
          }
          break;
        case 38:case 40:
          //上下按键
          _this.keepFocusShake();
          var index = selectRowIndex,
              top = 0;
          if (!isShowPanel || data.length == 0) break;
          if (!(_this.downPanel && _this.downPanel.childNodes && _this.downPanel.childNodes.length > 0)) break;
          if (key == 38 && selectRowIndex == 0) break;
          if (key == 40 && selectRowIndex == data.length - 1) break;
          if (key == 38) {
            index = selectRowIndex - 1;
            top = _this.downPanel.childNodes[selectRowIndex].offsetTop - _this.downPanel.scrollTop < 32 ? _this.downPanel.scrollTop - pRowHeight : _this.downPanel.scrollTop;
          } else if (key == 40) {
            index = selectRowIndex + 1;
            top = _this.downPanel.childNodes[index].offsetTop > 178 ? _this.downPanel.scrollTop + pRowHeight : _this.downPanel.scrollTop;
          }
          _this.downPanel.scrollTop = top;
          _this.setState({ selectRowIndex: index, selectRowItem: data[index] });
          _this.stopFunc(e);
          break;
        default:
          if (!_this.keypressStime && !(key == 8)) {
            _this.keypressStime = Date.parse(new Date());
          }
          break;
      }
    };

    _this.resizePanelWidth = function () {
      var ref = _this.refSearch;
      var panel = document.getElementById('dropdownPatternPanel');
      if (ref && panel) {
        var wh = ref.input.parentNode.clientWidth;
        panel.style.width = wh + "px";
      }
    };

    _this.keepFocusShake = function () {
      if (!_this.refSearch) return;
      var value = _this.state.value;

      var input = _this.refSearch.input;
      var num = value.length;
      setTimeout(function () {
        return input.setSelectionRange(num, num);
      }, 0);
    };

    _this.state = {
      isKeyboardShow: false,
      finishSearch: false,
      value: '',
      isShowPanel: false,
      data: [],
      selectRowIndex: -1,
      selectRowItem: null
    };
    _this.keypressStime = null;

    var _ref2 = _this.props || {},
        controllerEvent = _ref2.controllerEvent;

    _this.controllerEvent = controllerEvent;

    var _ref3 = _mutantsUtil.platform || {},
        isHorizontalPad = _ref3.isHorizontalPad;

    _this.isHorizontalPad = !!isHorizontalPad;
    _this.posCode = _tplusPoslogin.PosInitData && (0, _tplusPoslogin.PosInitData)('posCode');
    return _this;
  }

  (0, _createClass3.default)(ProductSearch, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      this.refSearch.input.onblur = function () {
        _tplusComponentsTouch.Keyboard.close();
        _this2.clearKeyboard();
      };
    }

    /* 查询数据 */


    /* 输入框键盘事件 */


    /* 调整下拉面板宽度 */


    /* 防止input中的光标抖动 */

  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.resizePanelWidth();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var pricePrecision = this.props.pricePrecision;
      var _state = this.state,
          isKeyboardShow = _state.isKeyboardShow,
          isShowPanel = _state.isShowPanel,
          value = _state.value,
          data = _state.data,
          selectRowIndex = _state.selectRowIndex;

      return _react2.default.createElement(
        _InputGroup4.default,
        { simple: true, className: 'keyboard' },
        _react2.default.createElement(_FormControl3.default, {
          type: 'text',
          value: value,
          placeholder: '\u626B\u63CF\u6216\u8F93\u5165\u5546\u54C1\u7F16\u7801/\u6761\u7801',
          id: 'productPoint',
          onChange: this.inputChange,
          onKeyDown: this.onKeyDown,
          ref: function ref(input) {
            return _this3.refSearch = input;
          },
          AUTOCOMPLETE: 'OFF'
        }),
        _react2.default.createElement(
          _InputGroup4.default.Button,
          { shape: 'border' },
          isKeyboardShow ? _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'jianpan2', className: 'product-jianpan', onClick: this.changeKeyboardShowOrHide }) : _react2.default.createElement(_tplusComponentsTouch.Ticon, { type: 'jianpan1', className: 'product-jianpan', onClick: this.changeKeyboardShowOrHide })
        ),
        isShowPanel ? _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'div',
            { className: 'dropdownPanel', id: 'dropdownPatternPanel', target: '1', ref: function ref(el) {
                return _this3.downPanel = el;
              } },
            data && data.length > 0 ? data.map(function (item, index) {
              var Id = item.Id,
                  Code = item.Code,
                  Name = item.Name,
                  RetailPrice = item.RetailPrice,
                  Specification = item.Specification;

              return _react2.default.createElement(
                'div',
                { key: Id, className: selectRowIndex == index ? 'item select' : 'item', onClick: function onClick() {
                    return _this3.handleClick(item);
                  } },
                _react2.default.createElement(
                  'div',
                  { style: { width: '20%' } },
                  Code
                ),
                _react2.default.createElement(
                  'div',
                  { style: { width: '40%' } },
                  Name
                ),
                _react2.default.createElement(
                  'div',
                  { style: { width: '30%' } },
                  Specification
                ),
                _react2.default.createElement(
                  'div',
                  { style: { width: '10%' } },
                  pricePrecision && RetailPrice ? _this3.formatNumber(RetailPrice, pricePrecision) : RetailPrice
                )
              );
            }) : _react2.default.createElement(
              'div',
              { className: 'empty' },
              _react2.default.createElement(
                'span',
                null,
                '\u6682\u65E0\u5546\u54C1~~'
              )
            )
          ),
          _react2.default.createElement('div', { className: 'shade', onClick: this.triggerFunc })
        ) : null
      );
    }
  }]);
  return ProductSearch;
}(_react.Component)) || _class;

exports.default = ProductSearch;
//# sourceMappingURL=search.js.map