更新时间:2022-09-30 GMT+08:00
分享

文档编辑

描述

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

开放能力

文本编辑为组件资产,提供文本编辑组件,如图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 预览

相关文档