文档编辑
描述
文档编辑组件提供了文档在线编辑功能,在需要使用在线文档编辑,设置段落,增加富文本描述,增加表格引入等时可以使用此组件快速应用或者二次扩展。
开放能力
文本编辑为组件资产,提供文本编辑组件,如图1所示。
文档编辑组件提供的能力:
- 分左右模块,右侧封面支持首页图标配置、标题、副标题、编制单位、编制人、编制时间配置。
- 左侧支持目录编辑,目录可新增、删除、修改、移动。
- 新增目录弹窗提示,支持新增目录类型:富文本、附件、表格。
- 提供附件相关适配器,适配器入参文档路径,配置适配器的前提下附件上传保存后调用适配器(内部逻辑不实现,仅提供脚本入口)。
- 提供文本保存适配器,配置适配器的情况下按目录内容调用脚本(内部逻辑不实现,仅提供脚本入口)。
如何使用资产
- 订购并下载文档编辑组件资产(方案编辑组件:assetTemplate.zip)。
相关操作请参见如何订购&部署资产。
- 进入AppCube开发环境,如图2所示,选择“管理 > 应用管理 > 页面资产管理 > 组件”,进入“组件”页面。
- 在“组件”页面,如图3所示,单击“提交新组件”,进入“提交新组件”页面。
- 如图4所示,填写组件相关信息,上传下载的文档编辑组件资产(assetTemplate.zip),单击“提交”。
- 在开发环境首页的“项目”页签单击“行业应用”,再单击“创建行业应用”。
- 如图5所示,输入标签和名称,选择分类,单击“创建”,创建后,页面跳转到应用开发页面。
- 在应用的开发页面,如图6所示,单击应用右侧的,选择“目录”。
- 在弹出的“添加目录”页面,如图7所示,输入目录名称(Page),单击“保存”。
- 如图8所示,单击规划存放页面目录Page右侧的,选择“高级页面”。
- 在弹出的“添加高级页面”页面,如图9所示,选择“空白”模板,输入页面的“标签”为“test”,“名称”为“test”,“布局类型”勾选“流式布局”,单击“添加”。
- 绝对布局:可指定Widget出现在画布的任意位置,支持Widget的层叠放置。
- 流式布局:页面中Widget可以根据页面的分辨率进行自动的位置调整,支持Widget与Widget之间的响应式。
页面创建完成后,自动进入编辑页面,如图10所示。
- 如图11所示,选择自定义组件(assetTemplate),拖入到页面内容区域。
- 如图12所示,在页面内容区域,选中组件,右侧展示该组件的属性设置区域,在“组件属性配置”的“属性”页签,设置组件的基本信息,如边框、背景等信息。
- 单击“数据”页签,进入“数据”页签,如图13所示。
- 在“数据”页签中,设置组件绑定的桥接器,以实现通过桥接器调用后台接口,获取后台数据。
- 根据组件提供的配置项,在应用中开发后台服务(脚本或服务编排)。
各配置项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" } ] } }
- 将14.a中创建的数据脚本或服务编排封装成新的URL地址,方便调用。
- 在“数据”页签中,配置各个配置项数据。
- 根据组件提供的配置项,在应用中开发后台服务(脚本或服务编排)。
- 配置完成后,如图15所示,单击页面上方保存按钮,保存配置,单击发布,发布页面,最后单击释放锁按钮,退出编辑状态。
如果需要再次编辑,需要单击,获取锁在进行编辑。
- 如图16所示,单击页面上方预览按钮,即可看到页面配置效果。