【移动端】附件字段

# 变更记录 | **产品版本** | **更新内容** | **更新日期** | | --- | --- | --- | | V5.0.011 | 1、移动端附件支持整体折叠和查看更多
2、移动端附件面板，支持配置上传按钮位置
3、移动端附件字段权限控制交互优化 | 2023-04-13 | | V5.0.024 | 新增了移动端附件支持调用app客户端的上传接口上传文的功能，满足了用户使用APP接口上传文件的需求 | 2023-07-14 | | V5.0.025 | 新增了移动端附件通过链接下载的功能，满足了客户希望在移动端下载附件需求 | 2023-07-27 | | V6.0.1 | 1、移动端附件标题字体样式可配
2、移动端附件字段支持图片缩略图的格式 | 2023-10-18 | | V6.0.9 | 新增云之家app附件预览时，切换成苍穹的默认预览方式 | 2024-04-24 | | V6.0.12 | 优化了移动端附件预览功能，支持自定义预览文件类型，满足用户预览zip等格式文件的需求 | 2024-5-28 | | V6.0.13 | 优化了移动端附件上传图片功能，支持设置图片压缩阈值，当图片大小超过已设置的阈值时，对图片进行压缩，提升用户体验 | 2024-6-11 | | V7.0.1 | 1、优化了移动附件下载，支持了附件在云之家、钉钉，点击下载直接跳转到浏览器下载 ；支持了附件在企业微信、飞书、welink点击下载提示点击右上角，打开浏览器下载；支持了附件在其他App及浏览器，点击下载自动复制下载链接到剪切板，需要用户自己打开浏览器下载，提升用户体验
2、增加了附件自定义排序功能，解决客户需要自定义附件顺序问题，提升用户体验 | 2024-10-24 | # 1 功能介绍 附件字段，用于文件上传与展示。 # 2 控件对象 ``` kd.bos.form.field.AttachmentEdit ``` # 3 视觉展示  # 4 属性说明 ## 4.1 通用属性 通用属性包含字段和控件的一些公有的属性，如宽高，帮助文本等等。请参考[通用属性](https://vip.kingdee.com/article/215559076720798976) ## 4.2 样式属性 样式属性是每个控件在设计器右侧样式栏可以设置的属性，请参考[样式属性](https://vip.kingdee.com/article/252017936767406336) ## 4.3 业务属性 | **属性名** | **类型** | **默认值** | **说明** | 版本要求 | | --- | --- | --- | --- | --- | | 扩展名 | 文本 | - | 配置可上传文件扩展名，例：zip,rar，详见4.3.1 | | | 最大附件大小 | 整数 | 20 | 设置单个可上传文件大小，在系统参数中可设置服务器最大附件的大小，优先级比设计器属性要高， | | | 最大附件数 | 整数 | 0 | 设置附件可上传的文件数量，超出限制则不可上传 | | | 排序字段 | 下拉 | 上传时间 | 上传附件成功后，按排序字段进行排序，可排序的字段分为上传时间、文件名称、文件大小，详见4.3.2 | | | 排序方式 | 下拉 | 顺序 | 设置排序的方式，分为顺序和倒序 | | | 文件来源 | 下拉 | 金蝶云盘、相册、拍照 | 设置附件字段的文件来源，可选值为金蝶云盘、相册、拍照、本地文件、录像。详见4.3.3 | | | 上传按钮位置 | 下拉 | 顶部显示 | 设置附件字段上传按钮位置 | V5.0.011 | | 图片显示缩略图 | 复选框 | false | 设置附件字段文件为图片时，是否展示缩略图 | V6.0.1 | | 图片压缩阈值 | 整数 | 0 | 设置附件上传图片的压缩阈值，单位为MB，上传的图片大小超过阈值时，启动图片上传压缩。值为0时，默认图片超过4M以上时，进行压缩。 | V6.0.013 | | 拖拽排序 | 复选框 | false | 拖拽排序开启时，排序字段属性不在生效，以用户拖拽的排序为准。关闭时，生效排序字段属性。注：拖拽排序开启目前只支持pc拖拽排序，移动还不支持。 | V7.0.1 | ### 4.3.1 扩展名 扩展名用于设置附件字段允许上传的文件格式，如.webp,.webp等，多个文件格式使用英文逗号进行分隔 ### 4.3.2 排序字段 排序字段用于指定附件的排序条件和顺序，可选择的属性有附件名称、上传时间和附件大小，根据排序字段指定顺序或者是逆序排序。 ### 4.3.3 文件来源 文件来源用于设置上传附件时的文件来源，可选值为金蝶云盘、相册、拍照、本地文件、录像。云之家app中默认支持这些选项，其他app有需要可以选择接入这些接口，详情见6.1。如不接入则调用手机自带的文件资源管理器，上传附件。 # 5 插件示例 ```java **public** **void** **afterCreateNewData**(EventObject e){ *//案例需求：将某个已存在附件字段上的附件，设置到当前页面的附件字段上。* Object[] attachmentIds = **new** Object[1]; *//实体bd_attachment的主键，可通过查询bd_attachment实体获取。* attachmentIds[0] = 607079090620535808L; *//第一个参数为附件字段的key* **this**.getModel().setValue("attachmentfield", attachmentIds); } ``` 详情请参考：[附件绑定单据接口](https://vip.kingdee.com/article/126693402527067136) # 6 功能介绍 ## 6.1 支持调用app客户端的上传接口上传文件 在苍穹移动端单据的开发过程中，会遇到需要调用APP提供的文件上传接口的场景，如选择文件、选择图片、选择相机等。开发者可以重写平台附件的方法，在重写方法中调用APP提供的接口完成文件上传。 支持重写的方法如下表，重写的方法对应下图的选项，用户点击选项后将调用对应方法。 | **方法名** | **选项名** | | --- | --- | | selectAttachmentFile | 金蝶云盘 | | choosePhotoImage | 相册 | | chooseCarmeaImage | 相机 | | video_startRecord | 录像 |  开发者可以在扩展js中，重写附件的选择文件、相册、相机、录像方法。用户在点击对应选项后，平台会自动调用上述方法，开发者只需将需要的数据传入callback中即可,平台接收到callback中的数据后，会将数据上传至服务器。扩展js使用请参考：[苍穹前端扩展能力之一，快来学习](https://vip.kingdee.com/article/235427929415677696) ### selectAttachmentFile(金蝶云盘) 一、如果需要引入外部js桥文件，如jsbridge.js，引入方式如下： ``` // index.js (function () { /**二开扩展PC端js * 注意：扩展的js默认是在平台的js前运行，如需扩展的js在平台的js后运行，需要在写在window.afterLoaded中，如下 * window.afterLoaded = function (){ * // your code * } */ window.initKDPlugin = function ({ loadjs, releaseResource }, callback) { // load插件需要的js桥文件 loadjs('jsbridge.js', () => { window.KDPluginExtend = { selectAttachmentFile: function (data = {}, callback) { // ...调用app的api后返回result数据 const result = [{ downloadUrl: "https://xxx/", fileExt: "doc", fileId: "6497fe85354fc40001c2c28b", fileName: "test.doc", fileSize: 573952, fileTime: 1687682693642, }] callback(result) } } callback({ success: true })//插件安装成功回调{success:false, error:'error info'} }) //如果要支持额外多个平台不支持的app,需要根据window.navigator.userAgent类型来设置最终window.KDPlugin的值 } })(); ``` 如果不需要引入外部js桥文件，则直接重写附件方法即可。 ``` // index.js (function () { /**二开扩展PC端js * 注意：扩展的js默认是在平台的js前运行，如需扩展的js在平台的js后运行，需要在写在window.afterLoaded中，如下 * window.afterLoaded = function (){ * // your code * } */ // 这个场景不需要在平台js运行后执行，可以直接写在这里 window.KDPluginExtend = { selectAttachmentFile: function (data = {}, callback) { // ...调用app的api后返回result数据 const result = [{ downloadUrl: "https://xxx/", fileExt: "doc", fileId: "abc123", fileName: "test.doc", fileSize: 573952, fileTime: 1687682693642, }] callback(result) } } })(); ``` **参数说明** | **参数** | **类型** | **是否必传** | **说明** | | --- | --- | --- | --- | | downloadUr