山东大学项目实训（七）---我的上报-优快云博客

本文链接：https://blog.youkuaiyun.com/L25809/article/details/125121677

本文详细介绍了使用Vue.js和ElementUI构建的上报系统页面，包括待审核、被驳回、已通过三部分的切换展示，一级不良事件查询，分页功能，事件详情查看，浏览器刷新处理及返回操作。通过组件交互和axios请求实现数据展示和功能交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面展示

1、我的上报分为三个部分：待审核、被驳回、已通过（下面统称为三个部分）

一、页面展示

1、我的上报分为三个部分：待审核、被驳回、已通过（下面统称为三个部分）

2、查看上报具体信息的页面展示

二、功能描述和实现

1、我的上报的三部分的切换展示

使用Tabs标签页，进行页面切换的数据绑定，然后绑定tab-click（tab 被选中时触发）事件，通过router-view进行传值，子组件通过props--watch进行传值接收，判断该展示的是哪个页面的数据，发送对应的axios请求，获取数据并展示。

2、不良事件类型查询（一级不良事件）

首先是发送axios请求获取不良事件一级类型的数据，使用el-select---el-option进行数据展示，再添加一个描述为“空”的数据，作为查询所有事件的选择，绑定@change事件get_table(),

get_table()函数的逻辑是，每次通过该查询时，将当前页设置成1，若选择的是“空”，再根据当前页面是三个部分中的哪个，发送对应的axios请求，若选择是其中一个不良事件类型，在发送请求的数据中带上这个参数，同样根据当前页面是三个部分中的哪个，发送对应的axios请求。

3、分页的实现

使用Pagination分页实现，layout表示你想展示哪些部分；current-page绑定数据，表示当前页；page-sizes表示每页显示个数选择器的选项设置；total表示数据总条数；page-size表示每页的数据条数；page-count表示展示的页数按钮数量；@current-change绑定事件（currentPage 改变时会触发），当前页改变时触发

current_change(page)的实现逻辑是，page表示要跳转到的页数，将其值赋值给当前页对应的字段；判断是否有不良事件类型的查询，若有，data数据要携带上该数据；data数据再携带上page数据；再判断当前页面属于三个部分中的哪个，发送对应的axios请求，获得对应的数据。

4、查看事件具体情况

每个事件配上一个查看按钮，绑定点击事件handleClick（），传入参数当前事件的id，

使用$router.push()进行页面跳转，而数据采用EventBus进行数据传递

传Id主要是为了下一个页面通过这个Id发送axios请求获取对应事件的详情，传activeName主要是为了下一个页面返回时，再传回这个activeName，进行页面属于三个部分中的哪个部分的判断。

5、事件具体情况的展示

实现对整个事件的数据展示，以及事件对应附件的下载功能。

使用Descriptions 描述列表进行数据展示，数据展示的关键就是，created（）发送请求获取数据，

整理数据赋值到data对应的数据中，同时根据数据修改对应的v-if实现按需展示。

6、浏览器刷新

主要通过浏览器缓存实现，监听页面刷新，存入eventId，和activeName（返回功能），在页面重新加载时取出这些数据。

注意在destoryed（）中清除缓存。

7、返回

前面基本已经讲到了，主要是对activeName数据的传值。

三、下一篇

质控办--我的受理