一、约定

标题	内容
路由地址	http://ip:port/attachmentUpload
路由页面	src\views\attachmentUpload\index.vue
操作权限	无限制
API调用约定	当前组件进行API调用集中管理、内置组件仅做展现层控制。

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	必填	说明	示例

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	currenttType	string	当前页面类型	--	--
2	modelValue	string	预览pdf地址	--	--
3	isDisabled	Boolean	是否禁用	--	--
4	attachFileList	array	文件数据	--	--
5	accept	string	可上传文件类型	--	--
6	uploadHeaders	object	上传文件请求头	--	--
7	loading	Boolean	上传loading	--	--
8	dialogVisible	Boolean	预览pdf弹窗	--	--
9	showImgPreview	Boolean	是否显示图片预览	--	--
10	imgPreviewList	array	预览图片数据	--	--

三、组件管理

（一）组件事件

组件自身提供的功能

核心功能点，执行的事件关系

1、获取附件内容

执行getAttachFileList（）

2、注册bus总线事件

注册暂存与保存事件

3、销毁bus总线事件

销毁暂存与保存事件

（二）子组件

使用 XX 子组件提供 MMM 功能

对子组件的传参赋值

子组件上报事件的接收处理

1. formTitle组件（表单标题）

实现表单标题内容显示

父→子组件传参

title：标题内容

子→父事件上报

上报通知	用途	执行内部事件

2. el-upload

实现文件上传功能

父→子组件传参

action：上传地址

headers：富文本高度

accept：文件类型

子→父事件上报

上报通知	用途	执行内部事件
@on-success	文件上传成功	uploadSuccess()
@on-error	文件上传失败	uploadError()
@before-upload	文件上传前校验	beforeUploadFn()

四、事件方法

核心事件，含数据处理、API调用、事件管理管理等

1. getTypeByName() 获取文件类型

格式化传入的文件名称，根据.分隔返回最后一位。为文件类型

2. getAttachFileList() 获取申报书附件

调用（/expertAchievement/loadListByUserId）专家的附件内容列表查询获取申报书附件数据

调用getTypeByName方法，修改接口返回数据中的type为文件类型

修改attachFileList值为接口返回数据

3. setAttachFileList() 保存附件

调用（/expertAchievement/saveOne）专家的附件内容保存一个对象保存上传的文件

保存成功后执行getAttachFileList（）

4. deleteAttachment() 删除附件

弹出二次确认弹窗

二次确认后执行（/expertAchievement/deleteOne）专家的附件内容删除一个对象接口删除附件

删除成功后执行getAttachFileList（）

5. downloadAttachment() 下载附件

创建一个a标签

开启loading

将文件地址中的 "https://intelvechdeclare.oss-cn-beijing.aliyuncs.com"替换为 "/pdfApi"

解析文件地址为文件blob，再将文件blob生成为一个临时的下载地址

通过a 标签进行下载

6. updateAttachment() 更新附件

执行（/expertAchievement/updateOne）专家的附件内容更新一个对象接口更新附件

更新成功后执行getAttachFileList（）

7. previewFn() 预览附件

判断当前传入的文件类型是否为pdf

如是则开启loading

将文件地址中的 "https://intelvechdeclare.oss-cn-beijing.aliyuncs.com"替换为 "/pdfApi"

开启预览pdf弹窗

如果当前传入的文件不是pdf

则修改imgPreviewList值为方法传入的数据

开启图片预览弹窗

8. closeImgPreview() 预览图片关闭事件

修改showImgPreview值为false

清空imgPreviewList中数据

9. getFileTypeImg() 获取文件类型icon

根据当前方法传入的文件类型，返回对应的icon

10. getAction() 获取上传地址

根据当前环境（开发环境/线上环境）返回不同的请求地址

11. beforeUploadFn() 上传前校验文件类型

判断当前上传的文件类型是否存在在accept中

如不存在则提示‘文件格式错误，请上传正确的文件格式’

12. uploadSuccess() 文件上传成功

判断传入的code是否为200

如是则执行setAttachFileList（）

13. againUploadSuccess() 更换附件上传成功事件

判断传入的code是否为200

如是格式化请求数据

执行updateAttachment（）

attachments组件（附件上传）

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

1、获取附件内容#

2、注册bus总线事件#

3、销毁bus总线事件#

（二）子组件#

1. formTitle组件（表单标题）#

2. el-upload#

四、事件方法#

1. getTypeByName() 获取文件类型#

2. getAttachFileList() 获取申报书附件#

3. setAttachFileList() 保存附件#

4. deleteAttachment() 删除附件#

5. downloadAttachment() 下载附件#

6. updateAttachment() 更新附件#

7. previewFn() 预览附件#

8. closeImgPreview() 预览图片关闭事件#

9. getFileTypeImg() 获取文件类型icon#

10. getAction() 获取上传地址#

11. beforeUploadFn() 上传前校验文件类型#

12. uploadSuccess() 文件上传成功#

13. againUploadSuccess() 更换附件上传成功事件#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

1、获取附件内容

2、注册bus总线事件

3、销毁bus总线事件

（二）子组件

1. formTitle组件（表单标题）

2. el-upload

四、事件方法

1. getTypeByName() 获取文件类型

2. getAttachFileList() 获取申报书附件

3. setAttachFileList() 保存附件

4. deleteAttachment() 删除附件

5. downloadAttachment() 下载附件

6. updateAttachment() 更新附件

7. previewFn() 预览附件

8. closeImgPreview() 预览图片关闭事件

9. getFileTypeImg() 获取文件类型icon

10. getAction() 获取上传地址

11. beforeUploadFn() 上传前校验文件类型

12. uploadSuccess() 文件上传成功

13. againUploadSuccess() 更换附件上传成功事件