fmui-base 2.1.83 → 2.1.85

package/lib/signature/sign.jsx

@@ -0,0 +1,274 @@
+import React from 'react';
+import './sign.less';
+
+import Popup from 'saltui/lib/Popup';
+import TextButton from 'saltui/lib/Button/TextButton';
+import Button from 'saltui/lib/Button';
+import Dialog from 'saltui/lib/Dialog';
+
+import Draw from './draw.js';
+import 'whatwg-fetch';
+
+export default class Page extends React.Component {
+
+    constructor(props) {
+        super(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',
+        }
+    }
+
+    componentDidMount() {
+        // dd.ui.webViewBounce.disable();
+        // this.getHorizontalStyle();
+        // this.initCanvas(90);
+
+    }
+
+    //初始化画布
+    initCanvas(degree) {
+        const canvas = document.querySelector('canvas');
+        this.setState({
+            draw: new Draw(canvas, -degree)
+        })
+    }
+
+    //画布 清空
+    clear() {
+
+        let 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();
+        }
+    }
+
+    download() {
+        let 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((res) => {
+            if (res.ok) {
+                res.json().then(function (obj) {
+                    t.setState({
+                        fileId:obj.data[0].id,
+                    });
+                    t.props.upload(obj.data[0].id);
+                    Popup.hide();
+                })
+            } else if (res.status == 401) {
+                alert("手写签名图片上传报错了");
+            }
+        })
+
+    }
+
+    //旋转
+    degree(val) {
+        let t = this;
+        t.setState({
+            degree: val
+        }, () => {
+            t.getHorizontalStyle();
+        })
+    }
+
+    //现实区域的范围 样式
+    getHorizontalStyle() {
+        let t = this;
+        let degree = t.state.degree;
+        let canvasBox = document.getElementById('canvasBox');
+        let canvasBoxDiv = document.getElementById('canvasBoxDiv');
+        const d = document;
+        const w = window.innerWidth || d.documentElement.clientWidth || d.body.clientWidth;
+        const h = window.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
+        let length = (h - w) / 2;
+        let width = w;
+        let height = h;
+
+        switch (degree) {
+            case -90:
+                length = -length;
+            case 90:
+                width = h;
+                height = w;
+                break;
+            default:
+                length = 0;
+        }
+        let can = document.getElementsByTagName('canvas')[0];
+        if (canvasBoxDiv) {
+            canvasBoxDiv.removeChild(can);
+            var ca = document.createElement('canvas');
+            // canvasBox.prepend(ca);
+            canvasBoxDiv.appendChild(ca);
+            setTimeout(() => {
+                t.initCanvas(degree);
+            }, 200);
+        }
+        let 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';
+
+        let can1 = document.getElementsByTagName('canvas')[0];
+        let divDom = document.getElementById("canvasBoxDiv");
+        let divWidth = divDom.clientWidth||divDom.offsetWidth;
+        let divHeigth = divDom.clientHeight||divDom.offsetHeight;
+        can1.style.width = (divWidth-32) + "px";
+        can1.style.height = (divHeigth-5) + "px";
+
+        setTimeout(() => {
+            // 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");
+    }
+
+    listenCanvas(cav){
+        let 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);
+    }
+
+
+    checkAfter(){
+        let t = this;
+        let imageUrl = t.state.baseContext + t.state.imageUrl;
+        let divStyle = {backgroundImage: 'url(' + imageUrl + ')',backgroundSize:'100% 100%'};
+        Popup.show(
+            <div id="canvasBox"  className="t-BCf7">
+                <div className="greet t-P16 t-FAR t-PB12">
+                    <TextButton display="inline" className="dd-write-sign-del" onClick={t.clear.bind(t)}>
+                        <i id="clear_i" className="clear_i iconfont icon-dele2 t-FS18 t-FCddfontblue-30"></i>
+                    </TextButton>
+                    <Button type="secondary" size="small" display="inline" onClick={()=>{Popup.hide()}} className="t-MR10">取消</Button>
+                    <Button className="download_btn" type="secondary" size="small" display="inline" id="download_btn" onClick={t.download.bind(t)}>完成</Button>
+                </div>
+                <div className="can-div dd-write-sign t-ML16 t-MR16" style={divStyle} id="canvasBoxDiv">
+                    <canvas></canvas>
+                </div>
+            </div>, {
+                animationType: 'slide-left',
+            });
+        setTimeout(() => {
+            t.getHorizontalStyle();
+            t.initCanvas(0);
+            t.degree(90);
+        }, 200);
+    }
+
+
+    //弹出签名页面
+    popDraw() {
+
+        let 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((response) => response.json()).then((result) => {
+            if (result.success) {
+                let content = result.content;
+                if (content.featureCheck) {
+                    t.checkAfter();
+                }else{
+                    if (content.isAdmin) {
+                        Dialog.confirm({
+                            title: '提示',
+                            content: '您当前版本为免费版，该功能为医管云标准版功能，建议您升级为标准版',
+                            confirmText:'立即升级',
+                            cancelText:'关闭',
+                            onConfirm() {
+                                let path = 'static/officeding/mobileportal/dist/index.html';
+                                pageSkip(path, '#/hospitalmanage/version');
+                            },
+                            onCancel() {
+                                console.log('confirm cancel');
+                            },
+                        });
+                    }else{
+                        Dialog.alert({
+                            title: '提示',
+                            content: '您当前版本为免费版，该功能为医管云标准版功能，请联系管理员升级',
+                            confirmText:'关闭',
+                            onConfirm() {
+                                console.log('confirm confirm');
+                            },
+                            onCancel() {
+                                console.log('confirm cancel');
+                            },
+                        });
+                    }
+                }
+            }
+        }).catch((error) => {
+            alert("错误："+error);
+        });
+
+
+
+
+
+    }
+
+
+    render() {
+        const t = this;
+
+        return (
+            <div>
+                <div style={{background: '#f2f3f5', height: '35px', padding: '10px 5px'}}>
+                    <span className="t-FCblue"><i className="iconfont icon-back t-rotate-180 t-FS14"></i>{t.props.title}</span>
+                    <span onClick={t.popDraw.bind(t)} className="t-FCblue t-FR">{t.state.fileId==""?"去手写签名":"重写签名"}</span>
+                </div>
+                <div className="img-border" style={{backgroundColor: '#fff'}}>
+                    <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"/>
+                </div>
+            </div>
+        );
+    }
+}