【金秋打卡】第10天全新升级，基于Vue3最新标准，打造后台综合解决方案之处理上传excel剩余BUG@慕课网原创_慕课网

课程名称：全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节：7-10：业务落地：处理剩余BUG

课程讲师：Sunday

课程内容：

目标：处理上传excel剩余的三个BUG。
核心点：不要忘记了之前的分页的遗留BUG。

截止到目前整个 excel 上传我们就已经处理完成了，只不过目前还存在三个小 bug 需要处理：

点击分页没有效果，分页的数据传输错误
上传之后的时间解析错误
返回用户列表之后，数据不会自动刷新

实现步骤：

点击分页没有效果。和分页的接口处理有问题是因为我们之前写分页接口的时候page应该是赋值给params属性

// api/user-manage.js
export const getUserManageList = (data) => {
  return request({
    url: '/user-manage/list',
    params: data
  })
}

再加没有写分页的两个事件。view/user-manage/index.vue

const handleSizeChange = (currentSize) => {
  size.value = currentSize
  getListData()
}
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getListData()
}

上传时候的时间解析错误
导致该问题出现的原因是因为 excel 导入解析时间会出现错误，处理的方案也很简单，是一个固定方案，我们只需要进行固定的时间解析处理即可：
a. 在 import/utils 中新增事件处理方法（固定方式直接使用即可）

/**
 * 解析 excel 导入的时间格式
 */
export const formatDate = (numb) => {
  const time = new Date((numb - 1) * 24 * 3600000 + 1)
  time.setYear(time.getFullYear() - 70)
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() - 1 + ''
  return (
    year +
    '-' +
    (month < 10 ? '0' + month : month) +
    '-' +
    (date < 10 ? '0' + date : date)
  )
}

b.在generateData 中针对 openTime 进行单独处理 view/import/index.vue

/**
 * 筛选数据
 */
const generateData = results => {
  ...
    Object.keys(item).forEach(key => {
      if (USER_RELATIONS[key] === 'openTime') {
        userInfo[USER_RELATIONS[key]] = formatDate(item[key])
        return
      }
      userInfo[USER_RELATIONS[key]] = item[key]
    })
    ...
  })
  return arr
}

返回用户列表之后，数据不会自动刷新：
出现该问题的原因是因为：appmain 中使用 keepAlive 进行了组件缓存。
解决的方案也很简单，只需要：监听 onActivated 事件，重新获取数据即可
在 user-manage 中

import { ref, onActivated } from 'vue'

// 处理导入用户后数据不重新加载的问题
onActivated(getListData)

课程收获：

谢谢老师，讲的非常细致，很容易懂。这一节学的是在我们处理上传excel文件之后遗留下来的BUG。不要小看这些BUG的存在，而往往这些BUG才是体现核心的解决问题的能力的关键。例如那个分页的BUG。要定位到data属性的赋值问题这个就需要一定的经验。再加上那个数据不会自动刷新那个BUG。在实际过程中会经常使用到。特别是组件进行的缓存，然后需要从一个页面跳转到之前的页面的时候，重新激活该组件这个方法和思路是非常正规和值得借鉴的。一定要记牢，未来一定会用到。还有时间处理的常用utils也会经常用到。

课程截图：

组件被重新激活的时候的一个生命周期钩子

【金秋打卡】第10天 全新升级，基于Vue3最新标准，打造后台综合解决方案之处理上传excel剩余BUG