Merge branch 'feature/add_att_preview' into 'wrdp'

增加附件预览

See merge request o2oa/o2oa!3397

o2web/source/o2_core/o2/lp/zh-cn.js

@@ -305,6 +305,7 @@ o2.LP.widget = {
     "uploadTitle": "上传文件",
     "uploadInfor": "请选择要上传的文件",
     "delete": "删除",
+    "previewAtt" : "预览",
     "replace": "替换",
     "select": "选择",
 

o2web/source/o2_core/o2/widget/AttachmentController.js

@@ -13,6 +13,7 @@ o2.widget.AttachmentController = o2.widget.ATTER  = new Class({
         "isDelete": true,
         "isReplace": true,
         "isDownload": true,
+        "isPreviewAtt": true,
         "isSizeChange": true,
         "readonly": false,
         "availableListStyles" : ["list","seq","icon","preview"],
@@ -1116,9 +1117,11 @@ o2.widget.AttachmentController = o2.widget.ATTER  = new Class({
             this.doFormDataUploadAttachment(obj, action, invokeUrl, parameter, callback, multiple, accept, accept, size);
         }
     },
-
-
-
+    previewAttachment: function(e, node){
+        if (this.selectedAttachments.length){
+            if (this.module) this.module.previewAttachment(this.selectedAttachments);
+        }
+    },
     downloadAttachment: function(e, node){
         if (this.selectedAttachments.length){
             if (this.module) this.module.downloadAttachment(e, node, this.selectedAttachments);

o2web/source/o2_lib/viewer/viewer.css

+/*!
+ * Viewer.js v1.3.5
+ * https://fengyuanchen.github.io/viewerjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-07-04T11:00:13.705Z
+ */
+
+.viewer-zoom-in::before,
+.viewer-zoom-out::before,
+.viewer-one-to-one::before,
+.viewer-reset::before,
+.viewer-prev::before,
+.viewer-play::before,
+.viewer-next::before,
+.viewer-rotate-left::before,
+.viewer-rotate-right::before,
+.viewer-flip-horizontal::before,
+.viewer-flip-vertical::before,
+.viewer-fullscreen::before,
+.viewer-fullscreen-exit::before,
+.viewer-close::before {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC');
+    background-repeat: no-repeat;
+    background-size: 280px;
+    color: transparent;
+    display: block;
+    font-size: 0;
+    height: 20px;
+    line-height: 0;
+    width: 20px;
+}
+
+.viewer-zoom-in::before {
+    background-position: 0 0;
+    content: 'Zoom In';
+}
+
+.viewer-zoom-out::before {
+    background-position: -20px 0;
+    content: 'Zoom Out';
+}
+
+.viewer-one-to-one::before {
+    background-position: -40px 0;
+    content: 'One to One';
+}
+
+.viewer-reset::before {
+    background-position: -60px 0;
+    content: 'Reset';
+}
+
+.viewer-prev::before {
+    background-position: -80px 0;
+    content: 'Previous';
+}
+
+.viewer-play::before {
+    background-position: -100px 0;
+    content: 'Play';
+}
+
+.viewer-next::before {
+    background-position: -120px 0;
+    content: 'Next';
+}
+
+.viewer-rotate-left::before {
+    background-position: -140px 0;
+    content: 'Rotate Left';
+}
+
+.viewer-rotate-right::before {
+    background-position: -160px 0;
+    content: 'Rotate Right';
+}
+
+.viewer-flip-horizontal::before {
+    background-position: -180px 0;
+    content: 'Flip Horizontal';
+}
+
+.viewer-flip-vertical::before {
+    background-position: -200px 0;
+    content: 'Flip Vertical';
+}
+
+.viewer-fullscreen::before {
+    background-position: -220px 0;
+    content: 'Enter Full Screen';
+}
+
+.viewer-fullscreen-exit::before {
+    background-position: -240px 0;
+    content: 'Exit Full Screen';
+}
+
+.viewer-close::before {
+    background-position: -260px 0;
+    content: 'Close';
+}
+
+.viewer-container {
+    bottom: 0;
+    direction: ltr;
+    font-size: 0;
+    left: 0;
+    line-height: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    -webkit-tap-highlight-color: transparent;
+    top: 0;
+    -ms-touch-action: none;
+    touch-action: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.viewer-container::-moz-selection,
+.viewer-container *::-moz-selection {
+    background-color: transparent;
+}
+
+.viewer-container::selection,
+.viewer-container *::selection {
+    background-color: transparent;
+}
+
+.viewer-container img {
+    display: block;
+    height: auto;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+}
+
+.viewer-canvas {
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.viewer-canvas > img {
+    height: auto;
+    margin: 15px auto;
+    max-width: 90% !important;
+    width: auto;
+}
+
+.viewer-footer {
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    text-align: center;
+}
+
+.viewer-navbar {
+    background-color: rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+
+.viewer-list {
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 50px;
+    margin: 0;
+    overflow: hidden;
+    padding: 1px 0;
+}
+
+.viewer-list > li {
+    color: transparent;
+    cursor: pointer;
+    float: left;
+    font-size: 0;
+    height: 50px;
+    line-height: 0;
+    opacity: 0.5;
+    overflow: hidden;
+    -webkit-transition: opacity 0.15s;
+    transition: opacity 0.15s;
+    width: 30px;
+}
+
+.viewer-list > li:hover {
+    opacity: 0.75;
+}
+
+.viewer-list > li + li {
+    margin-left: 1px;
+}
+
+.viewer-list > .viewer-loading {
+    position: relative;
+}
+
+.viewer-list > .viewer-loading::after {
+    border-width: 2px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    width: 20px;
+}
+
+.viewer-list > .viewer-active,
+.viewer-list > .viewer-active:hover {
+    opacity: 1;
+}
+
+.viewer-player {
+    background-color: #000;
+    bottom: 0;
+    cursor: none;
+    display: none;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.viewer-player > img {
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.viewer-toolbar > ul {
+    display: inline-block;
+    margin: 0 auto 5px;
+    overflow: hidden;
+    padding: 3px 0;
+}
+
+.viewer-toolbar > ul > li {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    cursor: pointer;
+    float: left;
+    height: 24px;
+    overflow: hidden;
+    -webkit-transition: background-color 0.15s;
+    transition: background-color 0.15s;
+    width: 24px;
+}
+
+.viewer-toolbar > ul > li:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.viewer-toolbar > ul > li::before {
+    margin: 2px;
+}
+
+.viewer-toolbar > ul > li + li {
+    margin-left: 1px;
+}
+
+.viewer-toolbar > ul > .viewer-small {
+    height: 18px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    width: 18px;
+}
+
+.viewer-toolbar > ul > .viewer-small::before {
+    margin: -1px;
+}
+
+.viewer-toolbar > ul > .viewer-large {
+    height: 30px;
+    margin-bottom: -3px;
+    margin-top: -3px;
+    width: 30px;
+}
+
+.viewer-toolbar > ul > .viewer-large::before {
+    margin: 5px;
+}
+
+.viewer-tooltip {
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 10px;
+    color: #fff;
+    display: none;
+    font-size: 12px;
+    height: 20px;
+    left: 50%;
+    line-height: 20px;
+    margin-left: -25px;
+    margin-top: -10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 50px;
+}
+
+.viewer-title {
+    color: #ccc;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 1;
+    margin: 0 5% 5px;
+    max-width: 90%;
+    opacity: 0.8;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-transition: opacity 0.15s;
+    transition: opacity 0.15s;
+    white-space: nowrap;
+}
+
+.viewer-title:hover {
+    opacity: 1;
+}
+
+.viewer-button {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    cursor: pointer;
+    height: 80px;
+    overflow: hidden;
+    position: absolute;
+    right: -40px;
+    top: -40px;
+    -webkit-transition: background-color 0.15s;
+    transition: background-color 0.15s;
+    width: 80px;
+}
+
+.viewer-button:focus,
+.viewer-button:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.viewer-button::before {
+    bottom: 15px;
+    left: 15px;
+    position: absolute;
+}
+
+.viewer-fixed {
+    position: fixed;
+}
+
+.viewer-open {
+    overflow: hidden;
+}
+
+.viewer-show {
+    display: block;
+}
+
+.viewer-hide {
+    display: none;
+}
+
+.viewer-backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.viewer-invisible {
+    visibility: hidden;
+}
+
+.viewer-move {
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.viewer-fade {
+    opacity: 0;
+}
+
+.viewer-in {
+    opacity: 1;
+}
+
+.viewer-transition {
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+@-webkit-keyframes viewer-spinner {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes viewer-spinner {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.viewer-loading::after {
+    -webkit-animation: viewer-spinner 1s linear infinite;
+    animation: viewer-spinner 1s linear infinite;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-left-color: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    content: '';
+    display: inline-block;
+    height: 40px;
+    left: 50%;
+    margin-left: -20px;
+    margin-top: -20px;
+    position: absolute;
+    top: 50%;
+    width: 40px;
+    z-index: 1;
+}
+
+@media (max-width: 767px) {
+    .viewer-hide-xs-down {
+        display: none;
+    }
+}
+
+@media (max-width: 991px) {
+    .viewer-hide-sm-down {
+        display: none;
+    }
+}
+
+@media (max-width: 1199px) {
+    .viewer-hide-md-down {
+        display: none;
+    }
+}
\ No newline at end of file

o2web/source/x_component_process_FormDesigner/Module/Attachment/attachment.html

@@ -147,6 +147,13 @@
                     <input class="editTableRadio" name="isUpload" text{($.isUpload=='n')?'checked':''} type="radio" value="n"/>不允许
                 </td>
             </tr>
+            <tr>
+                <td class="editTableTitle">允许预览:</td>
+                <td class="editTableValue">
+                    <input class="editTableRadio" name="isPreviewAtt" text{($.isReplace=='y')?'checked':''} type="radio" value="y"/>允许
+                    <input class="editTableRadio" name="isPreviewAtt" text{($.isReplace=='n')?'checked':''} type="radio" value="n"/>不允许<br/>
+                </td>
+            </tr>
             <tr>
                 <td class="editTableTitle">允许下载:</td>
                 <td class="editTableValue">

o2web/source/x_component_process_Xform/Attachment.js

@@ -4,6 +4,7 @@ MWF.xApplication.process.Xform.AttachmentController = new Class({
     Extends: MWF.widget.ATTER,
     "options": {
         "officeFiles": ["doc", "docx", "dotx", "dot", "xls", "xlsx", "xlsm", "xlt", "xltx", "pptx", "ppt", "pot", "potx", "potm", "pdf"],
+        "allowPreviewExtension" : ["zip","pdf", "ofd", "png", "jpg", "bmp", "jpeg", "gif", "js", "css", "java", "json", "xml", "php", "html", "htm", "xhtml", "log", "md", "txt"],
         "checkTextEnable": true
     },
     checkAttachmentDeleteAction: function () {
@@ -139,6 +140,31 @@ MWF.xApplication.process.Xform.AttachmentController = new Class({
             // }
         }
     },
+    checkPreviewAttAction: function () {
+        if (!this.options.isPreviewAtt){
+            this.setActionDisabled(this.previewAttAction);
+            //this.setActionDisabled(this.min_downloadAction);
+        }else{
+            if (this.selectedAttachments.length){
+                var flag = false;
+                for (var i = 0; i < this.selectedAttachments.length; i++) {
+                    var att = this.selectedAttachments[i];
+                    if (this.options.allowPreviewExtension.contains(att.data.extension)) {
+                        flag = true;
+                        break;
+                    }
+                }
+                if(flag){
+                    this.setActionEnabled(this.previewAttAction);
+                    //this.setActionEnabled(this.min_downloadAction);
+                }
+
+            }else{
+                this.setActionDisabled(this.previewAttAction);
+                //this.setActionDisabled(this.min_downloadAction);
+            }
+        }
+    },
     isAttDeleteAvailable: function (att) {
         if (this.options.readonly) return false;
         if (this.options.toolbarGroupHidden.contains("edit")) return false;
@@ -413,6 +439,7 @@ MWF.xApplication.process.Xform.AttachmentController = new Class({
         this.checkUploadAction();
         this.checkDeleteAction();
         this.checkReplaceAction();
+        this.checkPreviewAttAction();
         //this.checkOfficeAction();
         this.checkDownloadAction();
         this.checkSizeAction();
@@ -511,7 +538,9 @@ MWF.xApplication.process.Xform.AttachmentController = new Class({
         this.deleteAction = this.createAction(this.editActionsGroupNode, "delete", o2.LP.widget["delete"], function (e, node) {
             this.deleteAttachment(e, node);
         }.bind(this));
-
+        this.previewAttAction = this.createAction(this.editActionsGroupNode, "previewAtt", o2.LP.widget["previewAtt"], function (e, node) {
+            this.previewAttachment(e, node);
+        }.bind(this));
         if (!this.options.isReplaceHidden) {
             this.replaceAction = this.createAction(this.editActionsGroupNode, "replace", o2.LP.widget.replace, function (e, node) {
                 this.replaceAttachment(e, node);
@@ -1147,6 +1176,7 @@ MWF.xApplication.process.Xform.Attachment = MWF.APPAttachment = new Class(
             "isDelete": (this.json.isDelete === "y" || this.json.isDelete === "true"),
             "isReplace": (this.json.isReplace === "y" || this.json.isReplace === "true"),
             "isDownload": (this.json.isDownload === "y" || this.json.isDownload === "true"),
+            "isPreviewAtt": (this.json.isPreviewAtt === "y" || this.json.isPreviewAtt === "true"),
             "isSizeChange": (this.json.isSizeChange === "y" || this.json.isSizeChange === "true"),
             "readonly": (this.json.readonly === "y" || this.json.readonly === "true" || this.json.isReadonly ),
             "availableListStyles": this.json.availableListStyles ? this.json.availableListStyles : ["list", "seq", "icon", "preview"],
@@ -1410,6 +1440,10 @@ MWF.xApplication.process.Xform.Attachment = MWF.APPAttachment = new Class(
             this.close();
         }, null, null, this.form.json.confirmStyle);
     },
+    previewAttachment: function (attachments) {
+        var att = attachments[0].data;
+        new MWF.xApplication.process.Xform.AttachmenPreview(att,this);
+    },
     deleteAttachment: function (attachment) {
         this.fireEvent("delete", [attachment.data]);
         var id = attachment.data.id;
@@ -1896,7 +1930,217 @@ MWF.xApplication.process.Xform.Attachment = MWF.APPAttachment = new Class(
     }
 
 });
+MWF.xApplication.process.Xform.AttachmenPreview = new Class({
+    Implements: [Options, Events],
+
+    initialize : function(att,app ){
+        this.att = att;
+        this.app = app;
+        this.load();
+    },
+    load:function(){
+
+        var extension = this.att.extension;
+        if(extension === "ofd"){
+            this.previewOfd();
+        }
+        if(extension === "zip"){
+            this.previewZip();
+        }
+        if(extension === "pdf"){
+            this.previewPdf();
+        }
+        if(["png","jpg","bmp","jpeg","gif"].contains(extension)){
+            this.previewImage();
+        }
+        if(extension === "js"){
+            this.previewAce("javascript");
+        }
+        if(extension === "css"){
+            this.previewAce("css");
+        }
+        if(extension === "java"){
+            this.previewAce("java");
+        }
+        if(extension === "json"){
+            this.previewAce("json");
+        }
+        if(extension === "xml"){
+            this.previewAce("xml");
+        }
+        if(extension === "php"){
+            this.previewAce("php");
+        }
+        if(["html","htm","xhtml"].contains(extension)){
+            this.previewAce("html");
+        }
+        if(["log","md","txt"].contains(extension)){
+            this.previewAce("text");
+        }
+    },
+    previewZip : function (){
+        //zip压缩包预览
+        var _self = this;
+        var zipViewNode = new Element("div.ztree").inject(document.body);
+        o2.load("/o2_lib/zipjs/zip-fs.js",function(){
+
+            this.app.form.workAction.getAttachmentUrl(this.att.id, this.app.form.businessData.work.id, function (url) {
+                var cookie = Cookie.read("x-token");
+                url = url + "?x-token=" + cookie;
+                unzip().catch(error => console.error(error));
+                async function unzip() {
+                    zip.configure({ chunkSize: 128 });
+                    let zipFs = new zip.fs.FS();
+                    let directory = zipFs.addDirectory("import");
+                    await directory.importHttpContent(url);
+
+                    o2.loadCss("/o2_lib/zTree/zTreeStyle.css",function(){
+                        o2.load(["/o2_lib/jquery/jquery.min.js","/o2_lib/zTree/jquery.ztree.core.min.js"], {"sequence": true}, function(){
+                            jQuery = jQuery.noConflict(true); //避免js框架冲突
+                            var nodes = [];
+                            loadNodes(directory,nodes);
+                            jQuery.fn.zTree.init(jQuery(zipViewNode), {}, nodes);
+
+                            var dlg = o2.DL.open({
+                                "title": _self.att.name,
+                                "width": "660px",
+                                "height": "510px",
+                                "mask": true,
+                                "content": zipViewNode,
+                                "container": null,
+                                "positionNode": document.body,
+                                "onQueryClose": function () {
+                                    zipViewNode.destroy();
+                                },
+                                "buttonList": [
+                                    {
+                                        "text": "关闭",
+                                        "action": function () {
+                                            dlg.close();
+                                        }
+                                    }
+                                ],
+                                "onPostShow": function () {
+                                    dlg.reCenter();
+                                }
+                            });
+
 
+                        }.bind(this));
+                    })
+                }
+
+                function loadNodes(directory,nodes){
+                    var folderList = [];
+                    var fileList = [];
+                    directory.children.each(function(file){
+                        if(file.directory){
+                            folderList.push(file)
+                        }
+                    })
+                    directory.children.each(function(file){
+                        if(!file.directory){
+                            fileList.push(file)
+                        }
+                    })
+                    folderList.append(fileList);
+                    folderList.each(function(file){
+                        var node = {
+                            name : file.name
+                        }
+                        if(nodes.children){
+                            nodes.children.push(node);
+                        }else{
+                            nodes.push(node);
+                        }
+                        if(file.directory){
+                            node.children = [];
+                            loadNodes(file,node);
+                        }
+                    })
+                }
+            }.bind(this));
+        }.bind(this));
+    },
+    previewPdf : function(){
+        this.app.form.workAction.getAttachmentUrl(this.att.id, this.app.form.businessData.work.id, function (url) {
+            window.open("../o2_lib/pdfjs/web/viewer.html?file=" + url)
+        });
+    },
+    previewOfd : function(){
+        this.app.form.workAction.getAttachmentUrl(this.att.id, this.app.form.businessData.work.id, function (url) {
+            window.open("../o2_lib/ofdjs/index.html?file=" + url)
+        });
+    },
+    previewImage : function(){
+        this.app.form.workAction.getAttachmentUrl(this.att.id, this.app.form.businessData.work.id, function (url) {
+            var imgNode = new Element("img",{"src":url,"alt":this.att.name}).inject(document.body).hide();
+            o2.loadCss("../m_app/yunFile/css/viewer.css", document.body,function(){
+                o2.load("../m_app/yunFile/js/viewer.js", function(){
+                    this.viewer = new Viewer(imgNode,{
+                        navbar : false,
+                        toolbar : false,
+                        hidden : function(){
+                            imgNode.destroy();
+                            this.viewer.destroy();
+                        }.bind(this)
+                    });
+                    this.viewer.show();
+                }.bind(this));
+            }.bind(this));
+        }.bind(this));
+    },
+    previewAce:function(type){
+        this.app.form.workAction.getAttachmentUrl(this.att.id, this.app.form.businessData.work.id, function (url) {
+            o2.require("o2.widget.ace", null, false);
+            var fileRequest = new Request({
+                url: url,
+                method: 'get',
+                withCredentials: true,
+                onSuccess: function(responseText){
+                    var editorNode = new Element("div",{"style":"padding:10px"});
+                    editorNode.set("text",responseText);
+
+                    o2.widget.ace.load(function(){
+                        o2.load("../o2_lib/ace/src-min-noconflict/ext-static_highlight.js", function(){
+                            var highlight = ace.require("ace/ext/static_highlight");
+                            highlight(editorNode, {mode: "ace/mode/"+ type , theme: "ace/theme/tomorrow", "fontSize": 30,"showLineNumbers":true});
+                        }.bind(this));
+
+                    }.bind(this));
+                    var dlg = o2.DL.open({
+                        "title": this.att.name,
+                        "width": "960px",
+                        "height": "610px",
+                        "mask": true,
+                        "content": editorNode,
+                        "container": null,
+                        "positionNode": document.body,
+                        "onQueryClose": function () {
+                            editorNode.destroy();
+                        }.bind(this),
+                        "buttonList": [
+                            {
+                                "text": "关闭",
+                                "action": function () {
+                                    dlg.close();
+                                }.bind(this)
+                            }
+                        ],
+                        "onPostShow": function () {
+                            dlg.reCenter();
+                        }.bind(this)
+                    });
+                }.bind(this),
+                onFailure: function(){
+                    console.log('text', 'Sorry, your request failed :(');
+                }
+            });
+            fileRequest.send();
+        }.bind(this));
+
+    },
+});
 MWF.xApplication.process.Xform.AttachmentDg = MWF.APPAttachmentDg = new Class({
     Extends: MWF.APPAttachment,
     loadAttachmentController: function () {