文档首页> ISDP> 开发中心> 资产使用指南> 资产说明> 组件资产> 文档编辑
更新时间：2022-09-30 GMT+08:00
查看PDF
分享

文档编辑

描述

文档编辑组件提供了文档在线编辑功能，在需要使用在线文档编辑，设置段落，增加富文本描述，增加表格引入等时可以使用此组件快速应用或者二次扩展。

开放能力

文本编辑为组件资产，提供文本编辑组件，如图1所示。

图1 文本编辑组件示例

文档编辑组件提供的能力：

  • 分左右模块，右侧封面支持首页图标配置、标题、副标题、编制单位、编制人、编制时间配置。
  • 左侧支持目录编辑，目录可新增、删除、修改、移动。
  • 新增目录弹窗提示，支持新增目录类型：富文本、附件、表格。
  • 提供附件相关适配器，适配器入参文档路径，配置适配器的前提下附件上传保存后调用适配器（内部逻辑不实现，仅提供脚本入口）。
  • 提供文本保存适配器，配置适配器的情况下按目录内容调用脚本（内部逻辑不实现，仅提供脚本入口）。

如何使用资产

  1. 订购并下载文档编辑组件资产（方案编辑组件：assetTemplate.zip）。

    相关操作请参见如何订购&部署资产。

  2. 进入AppCube开发环境，如图2所示，选择“管理 > 应用管理 > 页面资产管理 > 组件”，进入“组件”页面。

    图2 进入组件页面

  3. 在“组件”页面，如图3所示，单击“提交新组件”，进入“提交新组件”页面。

    图3 进入提交新组件页面

  4. 如图4所示，填写组件相关信息，上传下载的文档编辑组件资产（assetTemplate.zip），单击“提交”。

    图4 提交新组件

  5. 在开发环境首页的“项目”页签单击“行业应用”，再单击“创建行业应用”。
  6. 如图5所示，输入标签和名称，选择分类，单击“创建”，创建后，页面跳转到应用开发页面。

    图5 创建行业应用

  7. 在应用的开发页面，如图6所示，单击应用右侧的，选择“目录”。

    图6 创建目录

  8. 在弹出的“添加目录”页面，如图7所示，输入目录名称（Page），单击“保存”。

    图7 添加目录

  9. 如图8所示，单击规划存放页面目录Page右侧的，选择“高级页面”。

    图8 创建高级页面

  10. 在弹出的“添加高级页面”页面，如图9所示，选择“空白”模板，输入页面的“标签”为“test”，“名称”为“test”，“布局类型”勾选“流式布局”，单击“添加”。

    图9 添加高级页面
    • 绝对布局：可指定Widget出现在画布的任意位置，支持Widget的层叠放置。
    • 流式布局：页面中Widget可以根据页面的分辨率进行自动的位置调整，支持Widget与Widget之间的响应式。

    页面创建完成后，自动进入编辑页面，如图10所示。

    图10 编辑页面

  11. 如图11所示，选择自定义组件（assetTemplate），拖入到页面内容区域。

    图11 选择组件

  12. 如图12所示，在页面内容区域，选中组件，右侧展示该组件的属性设置区域，在“组件属性配置”的“属性”页签，设置组件的基本信息，如边框、背景等信息。

    图12 设置“属性”

  13. 单击“数据”页签，进入“数据”页签，如图13所示。

    图13 “数据”页签

  14. 在“数据”页签中，设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据。

    1. 根据组件提供的配置项，在应用中开发后台服务（脚本或服务编排）。

      各配置项API入参/出参格式要求如下：

      • 获取所有关联审批流：出参格式请参见assetTemplate.zip包中associatingApprovalData.json
      • 获取风险表格：出参格式请参见assetTemplate.zip包中risksIntroduced.json
      • 获取许可票表格以及许可票编码下拉框：出参格式请参见assetTemplate.zip包中permissionsData.json
      • 获取所有业务主管：出参格式请参见assetTemplate.zip包中businessDirectorData.json
      图14 assetTemplate.zip
      • 新建方案获取编制人和编制单位：

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
        "appcubeId": "10gg000000uMMkPIR0Do",
        "flag": 0,
        "orgId": 259696,
        "organizationName": "综采一队",
        "preparation": "张三",
        "userId": 141693
  }
}
      • 获取工作负责人列表：

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "userlist": [
      {
        "appcubeId": "10gg000000nkGzniiaKO",
        "userId": "130135",
        "userName": "张三"
      },
      {
        "appcubeId": "10gg000000vdyCEMB1iC",
        "userId": "402899",
        "userName": "李四"
      }
    ]
  }
}
      • 获取编制单位

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "organization": [
      {
        "hasSubNode": true,
        "id": 1221,
        "orgId": 1221,
        "orgLevel": 1,
        "orgName": "ISDP+体验租户",
        "orgNo": "SaasTenant1299",
        "value": "ISDP+体验租户"
      }
    ]
  }
}
      • 上传文件

        入参格式样例：

        {
    "attachmentData": "iVBORw0KGgoAAAANSUhEUgAAADwAAAA7CAIAAACo......",         //文件流
    "types": "-1.46_ai_fig_006.png"                                             //文件类型
}

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "endpoint": "/special_solution/ss1659580958002-1.46_ai_fig_006.png"       //文件地址
  }
}
      • 上传大于5M文件（分段上传创建分段任务接口）

        入参格式样例：

        {
    "types": "-1.46_ai_fig_006.png"      //文件类型
}
        出参格式样例： 
        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "endpoint": "/special_solution/ss1659581211096-1.46_ai_fig_006.png",           //文件地址
    "uploadId": "0000018266BFA25392C7885E65270D3C"                                 //分段id
  }
}
      • 分段上传（分段上传文件流接口）

        入参格式：

        {
  "$data": "string"     //文件
}

        样例：

        {
    "attachmentData": "iVBORw0KGgoAAAANSUhEUgAAADwAAAA7CAIAAACo......",      //流数据
    "endpoint": "/special_solution/ss1659581211096-1.46_ai_fig_006.png",     //文件名称
    "partNumber": 1,                                                         //分段数字
    "uploadId": "0000018266BFA25392C7885E65270D3C"                           //分段id
}

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "completedPart": {
      "eTag": "\"bc2faddbacc73889ea2bc19865d41a67\"",
      "partNumber": 1
    }
  }
}
      • 合并分段上传

        入参格式样例：

        {   
  "completedPart": [                                                                //分段信息
    {
      "eTag": "\"bc2faddbacc73889ea2bc19865d41a67\"",
      "partNumber": 1                                                                   
    }
  ],
  "endpoint": "/special_solution/ss1659581211096-1.46_ai_fig_006.png",             //文件名称
  "uploadId": "0000018266BFA25392C7885E65270D3C"                                   //分段id
}

        出参格式样例：

        {  
  "resCode":"0",
  "resMsg":"成功",
  "result": {}
}
      • 获取上传的文件

        出参格式说明：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "out": {
      "contentLength": 28114,
      "contentType": "image/jpeg",
      "data": "/9j/4AAQSkZJRgABAQEA3ADcAAD/2wBDAAMCAgMCAgMDAwMEA......"
    }
  }
}
      • 删除文件

        入参格式样例：

        {
  "attachmentAddress": "/special_solution/ss1659581211096-1.46_ai_fig_006.png"        //文件绝对路径
}

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "endpoint": null
  }
}
      • 创建修改方案模板
        入参格式样例： 
        {
  "currSSModelStat": 0,                    //当前方案模板状态, 0-草稿，1-已发布
  "detailModelInfos": [                    //内容模板章节数据
    {
      "detailDesc": "string",                  //方案内容描述               
      "detailModelName": "string",             //方案内容模板名称
      "detailRelModel": {
        "appendixPath": [                      //附件路径
          "string"
        ],
        "sceneidList": [                       //任务场景ID
          0
        ]
      },
      "detailTitle": "string",                //方案内容标题
      "detailType": "string"                  //方案内容类型
    }
  ],
  "operation": "string",                       //操作方式 -提交，-保存
  "solutionModelInfo": {                       //方案模板数据
    "appcubeID": "string",                         //方案编制人appcubeID                              
    "bdId": "string",                              //业务主管ID
    "bdLabel": "string",                           //业务主管标签
    "bdName": "string",                            //业务主管名称
    "logoID": "string",                            //方案模板图标路径
    "modelCoverPic": "string",                     //方案封面图路径
    "orgID": "string",                             //组织ID
    "orgName": "string",                            //组织组织名称
    "processVersion": "string",                     //审批流版本号
    "reviewProccessID": "string",                   //审批流ID
    "reviewProccessLab": "string",                  //审批流标签
    "ssCreateName": "string",                      //方案模板编制人名称
    "ssCreaterID": 0,                               //方案模板编制人ID
    "ssModCreatDate": "string",                     //方案模板编制时间
    "ssModelCode": "string",                        //方案模板编号
    "ssModelId": 0,                                 //方案模板ID
    "ssModelName": "string",                        //方案模板名称
    "ssScene": "string",                            //作业场景
    "tenantID": "string",                        //租户ID
    "workLocation": 0                               //作业地点
  },
  "workTicketModelInfos": [                      //许可模板数据
    {
      "createName": "string",                        //创建人名字
      "createTimestamp": 0,                          //创建时间戳
      "createdBy": "string",                         //创建人id
      "orgID": "string",                             //组织单元ID
      "orgName": "string",                           //组织单元名称
      "sceneID": 0,                                  //任务场景ID
      "ticketCode": "string",                        //许可场景编码
      "ticketName": "string",                        //许可场景名称
      "ticketRemark": "string",                      //许可场景描述
      "ticketVer": "string"                          //许可场景版本
    }
  ]
}

        出参格式样例：

        {
  "resCode": "0",
  "resMsg": "成功",
  "result": {
    "result": "0",
    "ssModelId": 10015000
  }
}
      • 查看审批流下是否有业务主管

        出参格式样例：

        {
    "resCode": "0",
    "resMsg": "成功",
    "result":  {
      "reviewProcessInfos": [
        {
            "ISDP__CREATED_By__CST": null,
            "ISDP__CREATE_NAME__CST": null,
            "ISDP__CREATION_Date__CST": "2022-05-10T01:19:16.000Z",
            "ISDP__Review_Process_Desc__CST": "队长→业务主管→通防部→机电部→机电运输中心→生产技术中心→调度指挥中心→安全管理中心→总工办→机电副总经理→总工程师",
            "ISDP__Review_Process_ID__CST": "ISDP__adjustOperatingFrequenc",
            "ISDP__Review_Process_Label__CST": "调整主通风机电机运转频率安全技术措施",
            "id": "cHdw000000tO5swIUguQ",
            "owner": "10gd000000nMynLdugro",
            "owner.__objectType": "User",
            "owner.name": "ISDPPlus"
        },
        {
            "ISDP__CREATED_By__CST": null,
            "ISDP__CREATE_NAME__CST": null,
            "ISDP__CREATION_Date__CST": "2022-05-10T01:19:16.000Z",
            "ISDP__Review_Process_Desc__CST": "队长→业务主管→地测防治水部→生产部→通防部→生产技术中心→调度指挥中心→安全管理中心→总工办→生产副总经理→总工程师",
            "ISDP__Review_Process_ID__CST": "ISDP__uncoveringCoalSafetyRisk_healingFace",
            "ISDP__Review_Process_Label__CST": "掘进工作面揭煤工作面揭煤安全技术措施",
            "id": "cHdw000000tO5swJd5Ph",
            "owner": "10gd000000nMynLdugro",
            "owner.__objectType": "User",
            "owner.name": "ISDPPlus"
        }
    ]
  }
}
    1. 将14.a中创建的数据脚本或服务编排封装成新的URL地址，方便调用。
    2. 在“数据”页签中，配置各个配置项数据。

  15. 配置完成后，如图15所示，单击页面上方保存按钮，保存配置，单击发布，发布页面，最后单击释放锁按钮，退出编辑状态。

    如果需要再次编辑，需要单击，获取锁在进行编辑。

    图15 保存，发布并释放锁

  16. 如图16所示，单击页面上方预览按钮，即可看到页面配置效果。

    图16 预览

父主题： 组件资产
分享：

    相关文档

    相关产品