o2oa-cairong/o2web/source/x_component_process_Xform/WritingBoard.js

MWF.xDesktop.requireApp("process.Xform", "$Module", null, false);
/** @class WritingBoard 手写板组件。
 * @o2cn 手写板
 * @example
 * //可以在脚本中获取该组件
 * //方法1：
 * var writingBoard = this.form.get("name"); //获取组件
 * //方法2
 * var writingBoard = this.target; //在组件事件脚本中获取
 * @extends MWF.xApplication.process.Xform.$Module
 * @o2category FormComponents
 * @o2range {Process|CMS}
 * @hideconstructor
 */
MWF.xApplication.process.Xform.WritingBoard = MWF.APPWritingBoard = new Class(
    /** @lends MWF.xApplication.process.Xform.WritingBoard# */
    {
        Implements: [Events],
        Extends: MWF.APP$Module,
        options: {
            "moduleEvents": ["load", "queryLoad", "postLoad","change"]
        },
        initialize: function (node, json, form, options) {
            this.node = $(node);
            this.node.store("module", this);
            this.json = json;
            this.form = form;
            this.field = true;
            this.fieldModuleLoaded = false;
        },
        _loadUserInterface: function () {
            this.field = true;
            this.node.empty();

            if (!this.isReadonly()) {

                var actionNode = new Element("div").inject(this.node);
                actionNode.set({
                    //"id": this.json.id,
                    "text": this.json.name || this.json.id,
                    "styles": this._parseStyles(this.json.actionStyles || {})
                });
                actionNode.addEvent("click", function () {
                    this.validationMode();
                    var d = this._getBusinessData();
                    if (layout.mobile) {
                        window.setTimeout(function () {
                            this.handwriting(d);
                        }.bind(this), 100)
                    } else {
                        this.handwriting(d);
                    }
                }.bind(this));
            }


            var data = this._getBusinessData();
            if (data) {
                var img = new Element("img", {
                    src: MWF.xDesktop.getImageSrc(data)
                });
                if (this.json.imageStyles) {
                    img.setStyles(this._parseStyles(this.json.imageStyles));
                }
                if( !this.json.imageStyles || !this.json.imageStyles["max-width"] ){
                    img.setStyles({
                        "max-width": "90%"
                    })
                }
                img.inject(this.node);
            }

            this.fieldModuleLoaded = true;
        },
        getTextData: function () {
            var value = this._getBusinessData() || "";
            return {"value": [value], "text": [value]};
        },
        /**
         * @summary 判断组件值是否为空.
         * @example
         * if( this.form.get('fieldId').isEmpty() ){
         *     this.form.notice('请进行手写', 'warn');
         * }
         * @return {Boolean} 值是否为空.
         */
        isEmpty: function () {
            return !this.getData();
        },
        /**
         * 获取手写图片的ID。
         * @summary 获取手写图片的ID。
         * @example
         * var id = this.form.get('fieldId').getData(); //获取手写图片的ID
         * var url = MWF.xDesktop.getImageSrc( id ); //获取图片的url
         */
        getData: function (data) {
            return this._getBusinessData() || "";
        },
        setData: function (data) {
            this._setBusinessData(data);
            var img = this.node.getElement("img");
            if( !data ){
                if(img)img.destroy();
                return;
            }
            if (img){
                img.set("src", MWF.xDesktop.getImageSrc(data))
            }else{
                img = new Element("img", {
                    src: MWF.xDesktop.getImageSrc(data)
                }).inject(this.node);
            }
            if (this.json.imageStyles) {
                img.setStyles(this._parseStyles(this.json.imageStyles));
            }
            if( !this.json.imageStyles || !this.json.imageStyles["max-width"] ){
                img.setStyles({
                    "max-width": "90%"
                })
            }
        },
        /**
         * @summary 弹出手写板.
         * @example
         * this.form.get("fieldId").handwriting();
         */
        handwriting: function () {
            if (!this.handwritingNode) this.createHandwriting();
            this.handwritingNode.show();
            if (layout.mobile) {
                this.handwritingNode.setStyles({
                    "top": "0px",
                    "left": "0px"
                });

            } else {
                this.handwritingNode.position({
                    "relativeTo": this.form.app.content || this.form.container,
                    "position": "center",
                    "edge": "center"
                });
                //var p = this.handwritingNode.getPosition(this.form.app.content);
                var p = this.handwritingNode.getPosition(this.handwritingNode.getOffsetParent());
                var top = p.y;
                var left = p.x;
                if (p.y < 0) top = 10;
                if (p.x < 0) left = 10;
                this.handwritingNode.setStyles({
                    "top": "" + top + "px",
                    "left": "" + left + "px"
                });
            }

        },
        createHandwriting: function () {
            /**
             * @summary 手写板容器.
             * @member {Element}
             */
            this.handwritingNode = new Element("div", {"styles": this.form.css.handwritingNode}).inject(this.node, "after");
            var x, y;
            if(layout.mobile){
                var bodySize = $(document.body).getSize();
                x = bodySize.x;
                y = bodySize.y;
                this.json.tabletWidth = 0;
                this.json.tabletHeight = 0;
            }else{
                var size = this.node.getSize();
                x = Math.max(this.json.tabletWidth || size.x, 600);
                this.json.tabletWidth = x;
                y = Math.max(this.json.tabletHeight ? (parseInt(this.json.tabletHeight) + 110) : size.y, 320);
            }

            var zidx = this.node.getStyle("z-index").toInt() || 0;
            zidx = (zidx < 1000) ? 1000 : zidx;
            this.handwritingNode.setStyles({
                "height": "" + y + "px",
                "width": "" + x + "px",
                "z-index": zidx + 1
            });
            if (layout.mobile) {
                this.handwritingNode.addEvent('touchmove', function (e) {
                    e.preventDefault();
                });
                this.handwritingNode.setStyles({
                    "top": "0px",
                    "left": "0px"
                }).inject($(document.body));
            } else {
                this.handwritingNode.position({
                    "relativeTo": this.node,
                    "position": "center",
                    "edge": "center"
                });
            }
            this.handwritingAreaNode = new Element("div", {"styles": this.form.css.handwritingAreaNode}).inject(this.handwritingNode);
            if( !layout.mobile ){
                this.handwritingActionNode = new Element("div", {
                    "styles": this.form.css.handwritingActionNode,
                    "text": MWF.xApplication.process.Work.LP.saveWrite
                }).inject(this.handwritingNode);
                var h = this.handwritingActionNode.getSize().y + this.handwritingActionNode.getStyle("margin-top").toInt() + this.handwritingActionNode.getStyle("margin-bottom").toInt();
                h = y - h;
                this.handwritingAreaNode.setStyle("height", "" + h + "px");
            }else{
                this.handwritingAreaNode.setStyle("height", "" + y + "px");
            }

            this.handwritingFile = {};
            MWF.require("MWF.widget.Tablet", function () {
                var id = this.getData();
                var opt = {
                    "style": "default",
                    "imageSrc": id ? MWF.xDesktop.getImageSrc( id ) : "",
                    "toolHidden": this.json.toolHidden || [],
                    "contentWidth": this.json.tabletWidth || 0,
                    "contentHeight": this.json.tabletHeight || 0,
                    "onSave": function (base64code, base64Image, imageFile) {
                        this.handwritingNode.hide();

                        if( this.tablet.isBlank() ){
                            this.setData("");
                            this.validation();
                            this.fireEvent("change");
                        }else{
                            this.upload(function (json) {
                                var data = json.data;
                                this.setData(data ? data.id : "");
                                this.validation();
                                this.fireEvent("change");
                            }.bind(this));
                        }


                    }.bind(this),
                    "onCancel": function () {
                        this.handwritingNode.hide();
                    }.bind(this)
                };
                if (layout.mobile) {
                    opt.tools = [
                        "save", "|",
                        "undo",
                        "redo", "|",
                        "reset", "|",
                        "cancel"
                    ]
                }

                /**
                 * @summary 手写板组件.
                 * @member {o2.widget.Tablet}
                 * @example
                 * var tablet = this.form.get("fieldId").tablet; //获取手写板
                 * tablet.cancel(); //关闭手写板
                 */
                this.tablet = new MWF.widget.Tablet(this.handwritingAreaNode, opt, null);
                this.tablet.load();
            }.bind(this));

            if(this.handwritingActionNode){
                this.handwritingActionNode.addEvent("click", function () {
                    //this.handwritingNode.hide();
                    if (this.tablet) this.tablet.save();
                }.bind(this));
            }
        },
        upload: function( callback ){
            var img = this.tablet.getImage( null, true );
            if(img)Promise.resolve( img ).then(function( image ){
                Promise.resolve( this.tablet.getFormData(image) ).then(function (formData) {
                    var fileName = "handwriting"+"_"+new Date().getTime();
                    if( image.type && image.type.contains("/") ) {
                        image.name = fileName + "." + image.type.split("/")[1];
                    }
                    o2.xDesktop.uploadImageByScale(
                        this.form.businessData.work.job,
                        "processPlatformJob",
                        0, //maxSize
                        formData,
                        image,
                        function (json) {
                            if (callback) callback(json);
                        }.bind(this),
                        function () {

                        }.bind(this)
                    );
                }.bind(this))
            }.bind(this))
        },
        createErrorNode: function (text) {
            var node = new Element("div");
            var iconNode = new Element("div", {
                "styles": {
                    "width": "20px",
                    "height": "20px",
                    "float": "left",
                    "background": "url(" + "../x_component_process_Xform/$Form/default/icon/error.png) center center no-repeat"
                }
            }).inject(node);
            var textNode = new Element("div", {
                "styles": {
                    "line-height": "20px",
                    "margin-left": "20px",
                    "color": "red",
                    "word-break": "keep-all"
                },
                "text": text
            }).inject(node);
            return node;
        },
        notValidationMode: function (text) {
            if (!this.isNotValidationMode) {
                this.isNotValidationMode = true;
                this.node.store("borderStyle", this.node.getStyles("border-left", "border-right", "border-top", "border-bottom"));
                this.node.setStyle("border", "1px solid red");

                this.errNode = this.createErrorNode(text).inject(this.node, "after");
                this.showNotValidationMode(this.node);
                if (!this.errNode.isIntoView()) this.errNode.scrollIntoView(false);
            }
        },
        showNotValidationMode: function (node) {
            var p = node.getParent("div");
            if (p) {
                if (p.get("MWFtype") == "tab$Content") {
                    if (p.getParent("div").getStyle("display") == "none") {
                        var contentAreaNode = p.getParent("div").getParent("div");
                        var tabAreaNode = contentAreaNode.getPrevious("div");
                        var idx = contentAreaNode.getChildren().indexOf(p.getParent("div"));
                        var tabNode = tabAreaNode.getLast().getFirst().getChildren()[idx];
                        tabNode.click();
                        p = tabAreaNode.getParent("div");
                    }
                }
                this.showNotValidationMode(p);
            }
        },
        validationMode: function () {
            if (this.isNotValidationMode) {
                this.isNotValidationMode = false;
                this.node.setStyles(this.node.retrieve("borderStyle"));
                if (this.errNode) {
                    this.errNode.destroy();
                    this.errNode = null;
                }
            }
        },
        validationConfigItem: function (routeName, data) {
            var flag = (data.status == "all") ? true : (routeName == data.decision);
            if (flag) {
                var n = this.getData();
                var v = (data.valueType == "value") ? n : n.length;
                switch (data.operateor) {
                    case "isnull":
                        if (!v) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "notnull":
                        if (v) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "gt":
                        if (v > data.value) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "lt":
                        if (v < data.value) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "equal":
                        if (v == data.value) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "neq":
                        if (v != data.value) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "contain":
                        if (v.indexOf(data.value) != -1) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                    case "notcontain":
                        if (v.indexOf(data.value) == -1) {
                            this.notValidationMode(data.prompt);
                            return false;
                        }
                        break;
                }
            }
            return true;
        },
        validationConfig: function (routeName, opinion) {
            if (this.json.validationConfig) {
                if (this.json.validationConfig.length) {
                    for (var i = 0; i < this.json.validationConfig.length; i++) {
                        var data = this.json.validationConfig[i];
                        if (!this.validationConfigItem(routeName, data)) return false;
                    }
                }
                return true;
            }
            return true;
        },
        validation: function (routeName, opinion) {
            if( !this.isReadonly() ){
                if (!this.validationConfig(routeName, opinion)) return false;

                if (!this.json.validation) return true;
                if (!this.json.validation.code) return true;
                this.currentRouteName = routeName;
                var flag = this.form.Macro.exec(this.json.validation.code, this);
                this.currentRouteName = "";
                if (!flag) flag = MWF.xApplication.process.Xform.LP.notValidation;
                if (flag.toString() != "true") {
                    this.notValidationMode(flag);
                    return false;
                }
            }
            return true;
        },
        _parseStyles: function (styles) {
            Object.each(styles, function (value, key) {
                if ((value.indexOf("x_processplatform_assemble_surface") != -1 || value.indexOf("x_portal_assemble_surface") != -1 || value.indexOf("x_cms_assemble_control") != -1)) {
                    var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
                    var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
                    var host3 = MWF.Actions.getHost("x_cms_assemble_control");
                    if (value.indexOf("/x_processplatform_assemble_surface") !== -1) {
                        value = value.replace("/x_processplatform_assemble_surface", host1 + "/x_processplatform_assemble_surface");
                    } else if (value.indexOf("x_processplatform_assemble_surface") !== -1) {
                        value = value.replace("x_processplatform_assemble_surface", host1 + "/x_processplatform_assemble_surface");
                    }
                    if (value.indexOf("/x_portal_assemble_surface") !== -1) {
                        value = value.replace("/x_portal_assemble_surface", host2 + "/x_portal_assemble_surface");
                    } else if (value.indexOf("x_portal_assemble_surface") !== -1) {
                        value = value.replace("x_portal_assemble_surface", host2 + "/x_portal_assemble_surface");
                    }
                    if (value.indexOf("/x_cms_assemble_control") !== -1) {
                        value = value.replace("/x_cms_assemble_control", host3 + "/x_cms_assemble_control");
                    } else if (value.indexOf("x_cms_assemble_control") !== -1) {
                        value = value.replace("x_cms_assemble_control", host3 + "/x_cms_assemble_control");
                    }
                    value = o2.filterUrl(value);
                }
            }.bind(this));

            return styles;
        }

    });