ecology9流程表单附件实现直接打开到浏览器，方便打印

东枫落定

已于 2023-04-26 09:14:02 修改

阅读量921

点赞数

分类专栏： ECOLOGY工作笔记文章标签： javascript

于 2023-04-06 14:29:36 首次发布

本文链接：https://blog.csdn.net/dycp125/article/details/129988375

版权

ECOLOGY工作笔记专栏收录该内容

21 篇文章 42 订阅

订阅专栏

文章描述了一个针对财务人员的流程表单改进需求，当前附件（包括图片和PDF）需要下载后才能打印，带来不便。为解决这个问题，提出了直接在附件上添加浏览按钮，通过重写Ecode中的上传组件，使得附件能在浏览器中打开并直接打印。实现方法包括检查特定流程ID，添加查看按钮，并处理附件链接以支持在线预览。

摘要由CSDN通过智能技术生成

由于流程表单中的附件只支持图片在线打开，但是没有打印功能，只能先下载下来才能打印。同样的PDF文件也是，需要先下载再打印。做为财务人员来说很麻烦，先下载，再打印，然后打印好的文件再删除。

所以有了以下需求，直接在附件上增加一个浏览按钮，点击后自动将附件打开到浏览器中，在浏览器上直接打印。具体实现如下：

在Ecode中全局模式重写上传组件，代码如下：

ecodeSDK.overwritePropsFnQueueMapSet('WeaUpload', {
  fn: (newProps) => {
    if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html#/main/workflow/req')) return;
    if (!newProps.uploadId || newProps.listType == 'img') return;
    if (!WfForm) return; //表单sdk加载完成

    let workflowid = "-1";
    if (WfForm.getBaseInfo()) {
      workflowid = WfForm.getBaseInfo().workflowid;
    }
    //如果流程路径id不在array数组中，则不执行下面逻辑
    var array = [176,170,221,165]; //需要开启此功能的流程workflowid
    var index = array.indexOf(workflowid);
    if (index == -1) return;
    if (typeof NodeList.prototype.forEach !== 'function') {
      NodeList.prototype.forEach = Array.prototype.forEach;
    }
    
    newProps.className = `${newProps.className} wea-upload-add-more-button wea-upload-add-more-button-${newProps.uploadId}`
    const querycls = `.wea-upload-add-more-button-${newProps.uploadId} .wea-upload-list-item`;
    let dom = document.querySelectorAll(querycls);
    const fun = (dom) => {
      if (dom.length == 0) {
        setTimeout(() => {
          let doms = document.querySelectorAll(querycls);
          fun(doms)
        }, 1000)

      } else {
        let i = 0;
        dom.forEach((item, key) => {
          if (item.className.indexOf('gu-mirror') !== -1) {
            i += 1
          }
          key = key - i;
          if (key < newProps.datas.length) {
            if (newProps.datas.length > 0 && newProps.datas[key] && item.className.indexOf('gu-mirror') == -1) {
              // 添加查看按钮
              const oldDom = item.querySelectorAll('#wea-upload-openbutton' + newProps.datas[key].fileid);
              if (oldDom.length == 0) {
                const i = document.createElement("i"); 
                i.setAttribute("id","wea_upload_openbutton" + newProps.datas[key].fileid);
                i.setAttribute("class","anticon anticon-search"); //给i标签设成 放大镜图标。
                i.setAttribute("style","float: right; font-size: 15px; margin: 7px 6px 0px 3px;cursor:pointer;");
                i.setAttribute("title", "打开附件");
                var reg = new RegExp("&download=1","g");  //将下载地址中的下载标识去除
                const filelink = newProps.datas[key].loadlink.replace(reg,''); //下载地址替换为查看地址
                i.onclick = () =>{
                  openFullWindowHaveBar(filelink);
                }
                item.querySelector("i").after(i); //在item元素向下查找<i>标签元素,在<i>标签元素后面添加自定义的<i>标签。
              }
            }
          }

        })
      }
    }
    fun(dom)
    return newProps;
  }
})

备注：一定要注意要将代码文件设置为前置加载发布后才能生效。