fmui-base 1.0.0

package/lib/signature/sign.js

@@ -0,0 +1,359 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = undefined;
+
+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);
+
+require('./sign.less');
+
+var _Popup = require('saltui/lib/Popup');
+
+var _Popup2 = _interopRequireDefault(_Popup);
+
+var _TextButton = require('saltui/lib/Button/TextButton');
+
+var _TextButton2 = _interopRequireDefault(_TextButton);
+
+var _Button = require('saltui/lib/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Dialog = require('saltui/lib/Dialog');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _draw = require('./draw.js');
+
+var _draw2 = _interopRequireDefault(_draw);
+
+require('whatwg-fetch');
+
+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 Page = function (_React$Component) {
+    _inherits(Page, _React$Component);
+
+    function Page(props) {
+        _classCallCheck(this, Page);
+
+        var _this = _possibleConstructorReturn(this, (Page.__proto__ || Object.getPrototypeOf(Page)).call(this, props));
+
+        var baseContext = document.getElementById('context').value;
+        var token = document.getElementById('token').value;
+        var fileId = _this.props.fileId == null || _this.props.fileId == '' || _this.props.fileId == undefined ? "" : _this.props.fileId;
+        _this.state = {
+            token: token,
+            draw: null,
+            degree: 0,
+            baseContext: baseContext,
+            fileId: fileId,
+            disabled: true,
+            imageUrl: '/static/fmui/images/signArea.png'
+        };
+        return _this;
+    }
+
+    _createClass(Page, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {}
+        // dd.ui.webViewBounce.disable();
+        // this.getHorizontalStyle();
+        // this.initCanvas(90);
+
+        //初始化画布
+
+    }, {
+        key: 'initCanvas',
+        value: function initCanvas(degree) {
+            var canvas = document.querySelector('canvas');
+            this.setState({
+                draw: new _draw2.default(canvas, -degree)
+            });
+        }
+
+        //画布 清空
+
+    }, {
+        key: 'clear',
+        value: function clear() {
+
+            var t = this;
+            var disabled = document.getElementById('clear_i').getAttribute("disabled");
+            if (!disabled) {
+                document.getElementById('clear_i').removeAttribute("class");
+                document.getElementById('clear_i').setAttribute("class", 'iconfont icon-dele2 t-FS18 t-FCddfontblue-30');
+                document.getElementsByClassName('download_btn')[0].setAttribute("disabled", true);
+                document.getElementsByClassName('can-div')[0].removeAttribute("style");
+                document.getElementsByClassName('can-div')[0].setAttribute("style", "background:url(" + t.state.baseContext + t.state.imageUrl + ");background-size: 100% 100%;");
+                this.state.draw.clear();
+            }
+        }
+    }, {
+        key: 'download',
+        value: function download() {
+            var t = this;
+            var formData = new FormData();
+
+            var disabled = document.getElementsByClassName('download_btn')[0].getAttribute("disabled");
+            if (disabled) {
+                return;
+            }
+            formData.append("dir", "draw");
+            var date = new Date();
+            var time = date.getTime();
+            formData.append("file", t.state.draw.dataURLtoBlob(t.state.draw.getPNGImage()), time + ".png");
+            var url = t.state.baseContext + "/api/cmp/attachment/upload?token=" + t.state.token;
+            fetch(url, {
+                method: "POST",
+                body: formData
+            }).then(function (res) {
+                if (res.ok) {
+                    res.json().then(function (obj) {
+                        t.setState({
+                            fileId: obj.data[0].id
+                        });
+                        t.props.upload(obj.data[0].id);
+                        _Popup2.default.hide();
+                    });
+                } else if (res.status == 401) {
+                    alert("手写签名图片上传报错了");
+                }
+            });
+        }
+
+        //旋转
+
+    }, {
+        key: 'degree',
+        value: function degree(val) {
+            var t = this;
+            t.setState({
+                degree: val
+            }, function () {
+                t.getHorizontalStyle();
+            });
+        }
+
+        //现实区域的范围 样式
+
+    }, {
+        key: 'getHorizontalStyle',
+        value: function getHorizontalStyle() {
+            var t = this;
+            var degree = t.state.degree;
+            var canvasBox = document.getElementById('canvasBox');
+            var canvasBoxDiv = document.getElementById('canvasBoxDiv');
+            var d = document;
+            var w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
+            var h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
+            var length = (h - w) / 2;
+            var width = w;
+            var height = h;
+
+            switch (degree) {
+                case -90:
+                    length = -length;
+                case 90:
+                    width = h;
+                    height = w;
+                    break;
+                default:
+                    length = 0;
+            }
+            var can = document.getElementsByTagName('canvas')[0];
+            if (canvasBoxDiv) {
+                canvasBoxDiv.removeChild(can);
+                var ca = document.createElement('canvas');
+                // canvasBox.prepend(ca);
+                canvasBoxDiv.appendChild(ca);
+                setTimeout(function () {
+                    t.initCanvas(degree);
+                }, 200);
+            }
+            var transform = 'rotate(' + degree + 'deg) translate(' + length + 'px,' + -length + 'px)';
+            canvasBox.style.transform = transform;
+            canvasBox.style.width = width + "px";
+            canvasBox.style.height = height + "px";
+            canvasBox.style.transformOrigin = 'center center';
+
+            var can1 = document.getElementsByTagName('canvas')[0];
+            var divDom = document.getElementById("canvasBoxDiv");
+            var divWidth = divDom.clientWidth || divDom.offsetWidth;
+            var divHeigth = divDom.clientHeight || divDom.offsetHeight;
+            can1.style.width = divWidth - 32 + "px";
+            can1.style.height = divHeigth - 5 + "px";
+
+            setTimeout(function () {
+                // document.getElementsByTagName('canvas')[0].style.border = '0.5px solid #ccc';
+                document.getElementsByTagName('canvas')[0].style.background = 'rgb(255, 255, 255,.4)';
+                document.getElementsByClassName('download_btn')[0].setAttribute("disabled", true);
+                t.listenCanvas(document.getElementsByTagName('canvas')[0]);
+                //t-BCf
+                // document.getElementsByTagName('canvas')[0].class = 't-BCf t-ML16 t-MR16';
+            }, 220);
+
+            // $(can).addClass("aa");
+        }
+    }, {
+        key: 'listenCanvas',
+        value: function listenCanvas(cav) {
+            var t = this;
+            cav.addEventListener('touchstart', function (e) {
+                document.getElementById('clear_i').removeAttribute("class");
+                document.getElementById('clear_i').setAttribute("class", 'iconfont icon-dele2 t-FS18 t-FCddfontblue-60');
+                document.getElementsByClassName('download_btn')[0].removeAttribute("disabled");
+
+                document.getElementsByClassName('can-div')[0].removeAttribute("style");
+                document.getElementsByClassName('can-div')[0].setAttribute("style", "background:#fff");
+            }, false);
+        }
+    }, {
+        key: 'checkAfter',
+        value: function checkAfter() {
+            var t = this;
+            var imageUrl = t.state.baseContext + t.state.imageUrl;
+            var divStyle = { backgroundImage: 'url(' + imageUrl + ')', backgroundSize: '100% 100%' };
+            _Popup2.default.show(_react2.default.createElement(
+                'div',
+                { id: 'canvasBox', className: 't-BCf7' },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'greet t-P16 t-FAR t-PB12' },
+                    _react2.default.createElement(
+                        _TextButton2.default,
+                        { display: 'inline', className: 'dd-write-sign-del', onClick: t.clear.bind(t) },
+                        _react2.default.createElement('i', { id: 'clear_i', className: 'clear_i iconfont icon-dele2 t-FS18 t-FCddfontblue-30' })
+                    ),
+                    _react2.default.createElement(
+                        _Button2.default,
+                        { type: 'secondary', size: 'small', display: 'inline', onClick: function onClick() {
+                                _Popup2.default.hide();
+                            }, className: 't-MR10' },
+                        '\u53D6\u6D88'
+                    ),
+                    _react2.default.createElement(
+                        _Button2.default,
+                        { className: 'download_btn', type: 'secondary', size: 'small', display: 'inline', id: 'download_btn', onClick: t.download.bind(t) },
+                        '\u5B8C\u6210'
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: 'can-div dd-write-sign t-ML16 t-MR16', style: divStyle, id: 'canvasBoxDiv' },
+                    _react2.default.createElement('canvas', null)
+                )
+            ), {
+                animationType: 'slide-left'
+            });
+            setTimeout(function () {
+                t.getHorizontalStyle();
+                t.initCanvas(0);
+                t.degree(90);
+            }, 200);
+        }
+
+        //弹出签名页面
+
+    }, {
+        key: 'popDraw',
+        value: function popDraw() {
+
+            var t = this;
+            var url = t.state.baseContext + "/client/system/freeLimit/featureCheck?token=" + t.state.token + "&feature=signaturePicture";
+            fetch(url, {
+                method: "GET",
+                mode: "cors",
+                headers: {
+                    'Accept': 'application/json, text/plain, */*',
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                }
+            }).then(function (response) {
+                return response.json();
+            }).then(function (result) {
+                if (result.success) {
+                    var content = result.content;
+                    if (content.featureCheck) {
+                        t.checkAfter();
+                    } else {
+                        if (content.isAdmin) {
+                            _Dialog2.default.confirm({
+                                title: '提示',
+                                content: '您当前版本为免费版，该功能为医管云标准版功能，建议您升级为标准版',
+                                confirmText: '立即升级',
+                                cancelText: '关闭',
+                                onConfirm: function onConfirm() {
+                                    var path = 'static/officeding/mobileportal/dist/index.html';
+                                    pageSkip(path, '#/hospitalmanage/version');
+                                },
+                                onCancel: function onCancel() {
+                                    console.log('confirm cancel');
+                                }
+                            });
+                        } else {
+                            _Dialog2.default.alert({
+                                title: '提示',
+                                content: '您当前版本为免费版，该功能为医管云标准版功能，请联系管理员升级',
+                                confirmText: '关闭',
+                                onConfirm: function onConfirm() {
+                                    console.log('confirm confirm');
+                                },
+                                onCancel: function onCancel() {
+                                    console.log('confirm cancel');
+                                }
+                            });
+                        }
+                    }
+                }
+            }).catch(function (error) {
+                alert("错误：" + error);
+            });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var t = this;
+
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(
+                    'div',
+                    { style: { background: '#f2f3f5', height: '35px', padding: '10px 5px' } },
+                    _react2.default.createElement(
+                        'span',
+                        { className: 't-FCddblue' },
+                        _react2.default.createElement('i', { className: 'iconfont icon-back t-rotate-180 t-FS14' }),
+                        t.props.title
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        { onClick: t.popDraw.bind(t), className: 't-FCddblue t-FR' },
+                        t.state.fileId == "" ? "去手写签名" : "重写签名"
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: 'img-border', style: { backgroundColor: '#fff' } },
+                    _react2.default.createElement('img', { src: t.state.fileId == "" ? t.state.baseContext + '/static/fmui/images/no_signpic.png' : t.state.baseContext + '/dingisv/api/common/viewImage?fid=' + t.state.fileId + "&token=" + t.state.token, className: 't-W100' })
+                )
+            );
+        }
+    }]);
+
+    return Page;
+}(_react2.default.Component);
+
+exports.default = Page;

package/lib/signature/sign.less

@@ -0,0 +1,73 @@
+.page-demo {
+  color:#666;
+}
+
+
+#canvasBox {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.greet {
+  padding: 20px;
+  font-size: 20px;
+  user-select: none;
+}
+.greet a {
+  cursor: pointer;
+}
+.greet select {
+  font-size: 18px;
+}
+canvas {
+  flex: 1;
+  //border: 0.5px solid #ccc;
+  cursor: crosshair;
+}
+
+
+
+
+@media screen and (orientation: portrait) {
+  .dd-write-sign-page {
+    position: absolute;
+    width: 100vh;
+    height: 100vw;
+    top: 0;
+    left: 100vw;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    transform-origin: 0% 0%;
+  }
+}
+
+@media screen and (orientation: landscape) {
+  .dd-write-sign-page {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0)
+  }
+}
+
+.dd-write-sign {
+  height: calc(~"100% - 83px");
+}
+
+.dd-write-sign-del.t-text-button {
+  height: 32px;
+  line-height: 32px;
+
+  .iconfont {
+    height: 32px;
+  }
+}
+.img-border{
+  border:1px solid #ccc;
+
+}
+
+
+

package/lib/signature//346/211/213/345/206/231/347/255/276/345/220/215/344/275/277/347/224/250/346/226/207/346/241/243.md

@@ -0,0 +1,12 @@
+# 手写签名使用文档
+
+1. 安装fmui 0.0.36-ygy以上的版本
+2. 引用： import Sign from 'fmui/lib/signature';
+3. 写标签 
+```
+<Sign upload={(val)=>{alert(val)}}/>
+```
+4. 参数 
+	- upload ： (必填项)回调方法，返回参数为生成手写签名图片的id
+	- title : (必填项)显示的输入框标题
+	- fileId : 初始化签名图片文件id

package/lib/upload/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _upload = require('./upload');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_upload).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }