ming-demo3/lib/components/basic/sigCanvas.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _baseui = require("@mdf/baseui");

var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));

var _yardformdata = _interopRequireDefault(require("yardformdata"));

var _label = _interopRequireDefault(require("./label"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var SigCanvas = function (_Component) {
  (0, _inherits2["default"])(SigCanvas, _Component);

  function SigCanvas(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, SigCanvas);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SigCanvas).call(this, props));
    _this.url;
    var proxy = cb.rest.DynamicProxy.create({
      getFileServerUrl: {
        url: '/pub/fileupload/getFileServerUrl',
        method: 'GET',
        options: {
          token: true
        }
      }
    });
    proxy.getFileServerUrl({}, function (err, result) {
      if (!err) this.url = result;
    }, (0, _assertThisInitialized2["default"])(_this));
    _this.state = _objectSpread({}, props, {
      sigurl: '',
      readOnly: false
    });
    return _this;
  }

  (0, _createClass2["default"])(SigCanvas, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.model) this.props.model.addListener(this);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.model) this.props.model.removeListener(this);
    }
  }, {
    key: "handleLoad",
    value: function handleLoad() {
      var _this2 = this;

      var tempSrc = this.sigCanvas.toDataURL("image/jpeg");
      localStorage.setItem("savedImageData", tempSrc);

      var data = _yardformdata["default"].toFormData(tempSrc, 'signature.jpeg');

      var context = cb.rest.AppContext;
      var action = '/upload?token=' + context.token;
      fetch(action, {
        method: 'POST',
        body: data
      }).then(function (response) {
        return response.json();
      })["catch"](function (error) {
        return console.error('Error:', error);
      }).then(function (response) {
        _this2.setState({
          sigurl: _this2.url + response.data
        });

        if (_this2.props.model) {
          _this2.props.model.setValue(_this2.state.sigurl, true);
        }

        cb.utils.alert("签名保存成功", 'success');
      });
    }
  }, {
    key: "handleClick",
    value: function handleClick() {
      this.sigCanvas.clear();
    }
  }, {
    key: "handleReadOnly",
    value: function handleReadOnly() {
      this.setState({
        readOnly: true
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var cShowCaption = this.props.cShowCaption;
      var title = !this.state.readOnly && this.state.bIsNull === false && cShowCaption ? _react["default"].createElement("label", null, _react["default"].createElement(Icon, {
        type: "star"
      }), cShowCaption) : _react["default"].createElement("label", null, cShowCaption);
      var control = cShowCaption ? _react["default"].createElement(_label["default"], {
        title: title
      }) : null;
      if (this.state.readOnly) return _react["default"].createElement("div", null, _react["default"].createElement("img", {
        id: "copySig",
        src: this.state.sigurl
      }));else return _react["default"].createElement("div", {
        className: "sig-wrapper"
      }, control, _react["default"].createElement("br", null), _react["default"].createElement("div", {
        className: "sig-pad"
      }, _react["default"].createElement(_reactSignatureCanvas["default"], {
        ref: function ref(_ref) {
          _this3.sigCanvas = _ref;
        },
        penColor: "black",
        backgroundColor: "#999999",
        canvasProps: {
          width: 470,
          height: 200,
          className: 'sig-canvas'
        }
      })), _react["default"].createElement("div", {
        className: "sig-handle"
      }, _react["default"].createElement("span", {
        className: "sig-clear"
      }, _react["default"].createElement(_baseui.Button, {
        onClick: function onClick() {
          return _this3.handleClick();
        }
      }, "\u6E05\u9664")), _react["default"].createElement("span", {
        className: "sig-save"
      }, _react["default"].createElement(_baseui.Button, {
        type: "primary",
        onClick: function onClick() {
          return _this3.handleLoad();
        }
      }, "\u4FDD\u5B58"))), _react["default"].createElement("p", {
        className: "sig-warn"
      }, "\u8BF7\u6838\u5BF9\u4EE5\u4E0A\u4FE1\u606F\u662F\u5426\u6B63\u786E\uFF0C\u5E76\u786E\u8BA4\u623F\u95F4\u5185\u8BBE\u5907\u662F\u5426\u5B8C\u597D\uFF0C\u914D\u5957\u7269\u54C1\u8BF7\u52FF\u5E26\u8D70\uFF01\u82E5\u65E0\u95EE\u9898\u8BF7\u7B7E\u5B57\u786E\u8BA4\uFF0C\u8C22\u8C22\uFF01"));
    }
  }]);
  return SigCanvas;
}(_react.Component);

var _default = SigCanvas;
exports["default"] = _default;
//# sourceMappingURL=sigCanvas.js.map