fmui-base 2.2.52 → 2.2.54

package/README.md

@@ -3,6 +3,8 @@
 ---npm publish
 
 ## 更新日志 
+- 2.2.54: 手写签名样式调整
+- 2.2.53: 表单字段支持手写签名
 - 2.2.52: 时间字段宏值赋值不生效
 - 2.2.51: 北京CA跳转小程序
 - 2.2.50: 上传组件查看图片功能适配桌端

package/lib/form/form.js

@@ -97,6 +97,10 @@ var _invoice = require('../invoice/invoice');
 
 var _invoice2 = _interopRequireDefault(_invoice);
 
+var _sign = require('../signature/sign');
+
+var _sign2 = _interopRequireDefault(_sign);
+
 require('./form.less');
 
 var _db = require('../db/db');
@@ -1157,6 +1161,8 @@ var PageHome = function (_React$Component) {
         } else {
           itemParam.canDownload = "0";
         }
+        itemParam.imagetype = imagetype;
+        console.log("imagetype===" + imagetype);
       } else if (itemType == 'poppage') {
         //弹出选择
 
@@ -1473,7 +1479,7 @@ var PageHome = function (_React$Component) {
               this.refs['selectMember_' + key].initSelectData();
             }
           }
-          if (itemType == 'upload' || itemType == 'image' || itemType == 'weboffice') {
+          if (itemType == 'upload' || itemType == 'image' && itemParam.imagetype != '1' || itemType == 'weboffice') {
             this.refs["upload_" + t.state.itemParam.tableName + "_" + t.state.itemParam.key].initData();
           }
           if (itemType == 'note') {
@@ -3642,6 +3648,33 @@ var PageHome = function (_React$Component) {
               t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
             )
           )
+        ) : this.state.itemParam.itemType == 'image' && this.state.itemParam.imagetype == '1' ? _react2.default.createElement(
+          'div',
+          { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },
+          _react2.default.createElement(
+            _Group2.default.List,
+            { borderTopNone: true },
+            _react2.default.createElement(
+              'div',
+              { className: 't-W100', id: t.state.prefixName + "_" + t.state.itemParam.key },
+              _react2.default.createElement(
+                _Field2.default,
+                { label: t.state.itemParam.title, required: t.state.itemParam.required, layout: 'h', multiLine: true },
+                _react2.default.createElement(_sign2.default, {
+                  ref: "upload_" + t.state.itemParam.tableName + "_" + t.state.itemParam.key,
+                  fileId: t.state.itemParam.initIds,
+                  readOnly: t.state.itemParam.readOnly,
+                  dir: t.state.module,
+                  uploadType: 'image',
+                  title: '\u624B\u5199\u7B7E\u6279',
+                  onChange: function onChange(value) {
+                    t.handleChangePic(t.state.itemParam.key, value);
+                  }
+                })
+              ),
+              t.state.itemParam.isVerifySing == "1" ? _react2.default.createElement('i', { className: 'iconfont icon-checked t-PT10', style: { color: 'green' } }) : t.state.itemParam.isVerifySing == "2" ? _react2.default.createElement('i', { className: 'iconfont icon-close t-PT10', style: { color: 'red' } }) : ""
+            )
+          )
         ) : this.state.itemParam.itemType == 'image' ? _react2.default.createElement(
           'div',
           { className: t.state.itemParam.fieldId, style: t.state.itemParam.formStyleObj.contentStyle },
@@ -3798,7 +3831,7 @@ var PageHome = function (_React$Component) {
                 { flex: 1, className: 't-PR' },
                 _react2.default.createElement(
                   'span',
-                  { className: "t-ML16", style: { color: t.state.itemParam.formStyleObj.contentStyle.color }, onClick: this.noticeClick.bind(this, t.state.itemParam.explainUrl) },
+                  { style: { color: t.state.itemParam.formStyleObj.contentStyle.color }, onClick: this.noticeClick.bind(this, t.state.itemParam.explainUrl) },
                   t.state.itemParam.explain
                 )
               ),

package/lib/signature/draw.js

@@ -26,7 +26,7 @@ function Draw(canvas, degree) {
 
   width = parseFloat(width);
   // height = parseFloat(height);
-  height = width / 2;
+  height = width / 2 - 30;
 
   // debugger;
   this.canvas = canvas;

package/lib/signature/sign.js

@@ -51,9 +51,10 @@ var Page = function (_React$Component) {
 
         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 baseContext = document.getElementById("context").value;
+        var token = getLoginUserInfo().token;
         var fileId = _this.props.fileId == null || _this.props.fileId == '' || _this.props.fileId == undefined ? "" : _this.props.fileId;
+        var readOnly = _this.props.readOnly || false;
         _this.state = {
             token: token,
             draw: null,
@@ -61,7 +62,8 @@ var Page = function (_React$Component) {
             baseContext: baseContext,
             fileId: fileId,
             disabled: true,
-            imageUrl: '/static/fmui/images/signArea.png'
+            imageUrl: '/static/fmui/images/signArea.png',
+            readOnly: readOnly
         };
         return _this;
     }
@@ -91,10 +93,10 @@ var Page = function (_React$Component) {
         value: function clear() {
 
             var t = this;
-            var disabled = document.getElementById('clear_i').getAttribute("disabled");
+            var disabled = document.getElementsByClassName('clear_i')[0].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.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%;");
@@ -111,27 +113,51 @@ var Page = function (_React$Component) {
             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
+
+            // 获取原始 dataURL，然后在临时 canvas 上绘制白色背景并合并原图，再导出新的 dataURL 上传
+            var origDataURL = t.state.draw.getPNGImage();
+            var img = new Image();
+            img.onload = function () {
+                var tmpCanvas = document.createElement('canvas');
+                tmpCanvas.width = img.width;
+                tmpCanvas.height = img.height;
+                var ctx = tmpCanvas.getContext('2d');
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
+                ctx.drawImage(img, 0, 0);
+
+                var newDataURL = tmpCanvas.toDataURL('image/png');
+
+                formData.append("dir", "draw");
+                var date = new Date();
+                var time = date.getTime();
+                formData.append("file", t.state.draw.dataURLtoBlob(newDataURL), time + ".png");
+                var url = t.state.baseContext + "/api/m/plugin/attachment/mobile/createFile?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.onChange(obj.data);
                         });
-                        t.props.upload(obj.data[0].id);
                         _Popup2.default.hide();
-                    });
-                } else if (res.status == 401) {
-                    alert("手写签名图片上传报错了");
-                }
-            });
+                    } else if (res.status == 401) {
+                        alert("手写签名图片上传报错了");
+                    } else {
+                        alert("手写签名图片上传失败");
+                    }
+                }).catch(function (error) {
+                    alert("手写签名图片上传接口报错了");
+                });
+            };
+            img.onerror = function () {
+                alert("生成带白色背景的图片失败");
+            };
+            img.src = origDataURL;
         }
 
         //旋转
@@ -188,22 +214,21 @@ var Page = function (_React$Component) {
             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";
+            can1.style.width = divWidth - 10 + "px";
+            can1.style.height = divHeigth - 30 + "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.getElementsByTagName('canvas')[0].style.background = '#fff';
                 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);
+            }, 120);
 
             // $(can).addClass("aa");
         }
@@ -212,12 +237,12 @@ var Page = function (_React$Component) {
         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.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");
+                // document.getElementsByClassName('can-div')[0].setAttribute("style","background:#fff");
             }, false);
         }
     }, {
@@ -231,11 +256,11 @@ var Page = function (_React$Component) {
                 { id: 'canvasBox', className: 't-BCf7' },
                 _react2.default.createElement(
                     'div',
-                    { className: 'greet t-P16 t-FAR t-PB12' },
+                    { className: 'greet t-P16 t-FAL 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' })
+                        _Button2.default,
+                        { id: 'clear_i', className: 't-MR10 clear_i', type: 'danger', size: 'small', display: 'inline', onClick: t.clear.bind(t) },
+                        '\u6E05\u9664'
                     ),
                     _react2.default.createElement(
                         _Button2.default,
@@ -262,64 +287,7 @@ var Page = function (_React$Component) {
                 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);
-            });
+            }, 100);
         }
     }, {
         key: 'render',
@@ -331,23 +299,17 @@ var Page = function (_React$Component) {
                 null,
                 _react2.default.createElement(
                     'div',
-                    { style: { background: '#f2f3f5', height: '35px', padding: '10px 5px' } },
-                    _react2.default.createElement(
-                        'span',
-                        { className: 't-FCblue' },
-                        _react2.default.createElement('i', { className: 'iconfont icon-back t-rotate-180 t-FS14' }),
-                        t.props.title
-                    ),
+                    { style: { height: '25px' } },
                     _react2.default.createElement(
                         'span',
-                        { onClick: t.popDraw.bind(t), className: 't-FCblue t-FR' },
+                        { onClick: t.checkAfter.bind(t), className: t.state.readOnly ? 't-DN' : "t-FCblue 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' })
+                    _react2.default.createElement('img', { src: t.state.fileId == "" ? '' : t.state.baseContext + '/api/m/plugin/attachment/mobile/viewImage?fid=' + t.state.fileId + "&token=" + t.state.token, className: 't-W100' })
                 )
             );
         }

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

@@ -1,7 +1,7 @@
 # 手写签名使用文档
 
 1. 安装fmui 0.0.36-ygy以上的版本
-2. 引用： import Sign from 'fmui/lib/signature';
+2. 引用： import Sign from 'fmui-base/lib/signature';
 3. 写标签 
 ```
 <Sign upload={(val)=>{alert(val)}}/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fmui-base",
-  "version": "2.2.52",
+  "version": "2.2.54",
   "title": "fmui-base",
   "description": "fmui移动端组件",
   "main": "lib/index.js",