一、约定

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

二、属性（Attributes）

组件props传入参数

无

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	attachFileList	ref	附件文件列表	[]	--
2	accept	ref	接受的文件类型	".jpg,.png,.pdf,.docx,.doc,.xls,.xlsx,.zip,.7z,.rar"	--
3	uploadHeaders	ref	上传请求头	{token: getToken()}	--
4	loading	ref	加载状态	false	true,false
5	updateData	ref	更新数据	null	--
6	dialogVisible	ref	预览弹窗显示状态	false	true,false
7	showImgPreview	ref	图片预览显示状态	false	true,false
8	imgPreviewList	ref	图片预览列表	[]	--
9	modelValue	ref	PDF预览地址	""	--
10	currenttType	string	当前类型	route.query.type或''	--
11	isEdit	computed	是否编辑模式	根据route.query.id判断	true,false
12	getFormTitle	computed	表单标题	根据route.query.type判断	'下载附件'/'附件上传'

三、组件管理

（一）组件事件

组件自身提供的功能

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

附件列表展示

附件预览（PDF/图片）

单个附件下载

批量附件下载

附件类型图标显示

（二）子组件

使用子组件提供功能

表单标题展示

PDF文件预览

图片预览

弹窗展示

1. formTitle组件

提供表单标题功能

父→子组件传参

title: 标题文本

class: 样式类名

show-line: 是否显示分割线

子→父事件上报

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

2. VueOfficePdf组件

提供PDF预览功能

父→子组件传参

src: PDF文件地址

子→父事件上报

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

3. el-image-viewer组件

提供图片预览功能

父→子组件传参

url-list: 图片地址列表

子→父事件上报

上报通知	用途	执行内部事件
close	关闭预览	closeImgPreview

4. el-dialog组件

提供弹窗功能

父→子组件传参

v-model: 弹窗显示状态

close-on-press-escape: 是否可通过ESC关闭

close-on-click-modal: 是否可通过点击遮罩关闭

title: 弹窗标题

width: 弹窗宽度

子→父事件上报

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

四、事件方法

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

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

根据文件名获取文件扩展名

2. getAttachFileList() 获取附件列表

整理请求参数

调用loadList接口获取附件列表

处理文件类型

更新附件列表数据

3. setAttachFileList(data) 设置附件列表

整理请求参数

调用saveOne接口保存附件信息

操作成功后刷新附件列表

4. deleteAttachment(item) 删除附件

弹出确认对话框

调用deleteOne接口删除附件

操作成功后刷新附件列表

5. downloadAttachment(item) 下载单个附件

显示加载提示

根据环境处理文件URL

获取文件Blob数据

创建下载链接并触发下载

6. updateAttachment(item) 更新附件

调用updateOne接口更新附件信息

操作成功后刷新附件列表

7. previewFn(item) 预览附件

根据文件类型选择预览方式

PDF文件：打开PDF预览弹窗

图片文件：打开图片预览

8. closeImgPreview() 关闭图片预览

隐藏图片预览

清空图片预览列表

9. getFileTypeImg(type) 获取文件类型图标

根据文件类型返回对应的图标路径

10. getAction() 获取上传接口地址

根据环境变量构建上传接口地址

11. beforeUploadFn(file) 上传前验证

验证文件扩展名是否符合要求

12. uploadSuccess(res) 上传成功回调

处理上传成功的响应

调用setAttachFileList方法保存附件信息

13. setUpdateData(item) 设置更新数据

保存当前操作的附件数据

14. againUploadSuccess(res) 再次上传成功回调

处理再次上传成功的响应

整理更新数据

调用updateAttachment方法更新附件信息

15. downloadAttachments() 批量下载附件

显示加载提示

整理请求参数

发送下载请求

处理响应数据并触发下载

五、生命周期钩子

1. onBeforeRouteLeave

离开路由前清除事件监听

2. onActivated

组件激活时注册事件监听

监听暂存和保存事件

download 组件

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

1. formTitle组件#

2. VueOfficePdf组件#

3. el-image-viewer组件#

4. el-dialog组件#

四、事件方法#

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

2. getAttachFileList() 获取附件列表#

3. setAttachFileList(data) 设置附件列表#

4. deleteAttachment(item) 删除附件#

5. downloadAttachment(item) 下载单个附件#

6. updateAttachment(item) 更新附件#

7. previewFn(item) 预览附件#

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

9. getFileTypeImg(type) 获取文件类型图标#

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

11. beforeUploadFn(file) 上传前验证#

12. uploadSuccess(res) 上传成功回调#

13. setUpdateData(item) 设置更新数据#

14. againUploadSuccess(res) 再次上传成功回调#

15. downloadAttachments() 批量下载附件#

五、生命周期钩子#

1. onBeforeRouteLeave#

2. onActivated#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

1. formTitle组件

2. VueOfficePdf组件

3. el-image-viewer组件

4. el-dialog组件

四、事件方法

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

2. getAttachFileList() 获取附件列表

3. setAttachFileList(data) 设置附件列表

4. deleteAttachment(item) 删除附件

5. downloadAttachment(item) 下载单个附件

6. updateAttachment(item) 更新附件

7. previewFn(item) 预览附件

8. closeImgPreview() 关闭图片预览

9. getFileTypeImg(type) 获取文件类型图标

10. getAction() 获取上传接口地址

11. beforeUploadFn(file) 上传前验证

12. uploadSuccess(res) 上传成功回调

13. setUpdateData(item) 设置更新数据

14. againUploadSuccess(res) 再次上传成功回调

15. downloadAttachments() 批量下载附件

五、生命周期钩子

1. onBeforeRouteLeave

2. onActivated