最新推荐文章于 2024-07-31 14:35:30 发布

18你磊哥

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量76

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40453972/article/details/140820480

版权

概述：需求就是需要可以看列表，然后点击列表的右侧详情看详情，通过详情来实现新增上一份，下一份按钮来实现直接看之后的详情。

网上的解决方法有很多

1.后台获取将全量的id，前台再去直接取下一个id方式。（获取全部的id，对于大数据来说，前后台负担都比较大）

2.查询列表的时候直接获取所有的数据和详情，直接前台处理下一份。（这样无法解决分页问题，而且前台负担太大）

我采取的方法是：

查询列表的时候，列表中包含查询条件queryForm,详情中点击下一份的是时候，将查询条件和当前id传给后台调用获取下一页数据内容。

一、前端处理

1.1 listIndex.vue，注：备份选择的查询条件queryBakForm，传给详情页的时候一起传过去，

必须要做Object - - ->> json转化

    const fetchData = async () => {
      state.listLoading = true
      const {
        retCode, success, data, msg
      } = await getReviewList(state.queryForm)
      state.list = data.records;
      //此处备份查询数据 
      state.queryBakForm = state.queryForm;
      state.total = data.total;
      state.listLoading = false
    }


    const handleReview = (row) => {
      if (row.id)
        router.push({
          path: '/reviewManage/reviewReportDetail',
          query: {id: row.id,
            reportType: row.reportType,
            queryBakForm:JSON.stringify(state.queryBakForm)},
          //此处必须做类型转化，否则接收的对象为'[Object Object]'
        })
    }

1.2 detail.vue，注：后台接口通过封装的nextChangeReview直接查询下一页的所有详细信息，然后刷新路由，刷新页面

必须要做 json - - ->> Object转化,object的内容保持一致

<el-button type="primary" @click="nextChange(0)" >上一份</el-button>
<el-button type="primary" @click="nextChange(1)" >下一份</el-button>

    const nextChange = async (next) => {
      state.queryBakForm = JSON.parse(route.query.queryBakForm);
      state.queryBakForm.id = route.query.id;
      state.queryBakForm.isNext = next;
      state.listLoading = true;
      const {
        retCode, success, data, msg
      } = await nextChangeReview(state.queryBakForm)
      if (retCode == 0) {
        if(data == null){
          if(next=='0'){
            proxy.$baseMessage("已经是第一份报告！", 'success', 'vab-hey-message-success');
          }else if(next=='1'){
            proxy.$baseMessage("已经是最后一份报告！", 'success', 'vab-hey-message-success');
          }else{
            proxy.$baseMessage("输入错误！", 'success', 'vab-hey-message-success');
          }
        }else{
          // 修改路由，刷新数据
          router.push({
            path: '/reviewManage/reviewReportDetail',
            query: {id: data.id,
              reportType: data.reportType,
              queryBakForm:JSON.stringify(state.queryBakForm)
              //此处必须做类型转化，否则接收的对象为'[Object Object]'
            }
          })
        
          state.form = data;
          //一些值做初始化处理
          state.btnClick = false;
        }

      } else {
        proxy.$baseMessage(msg, 'error', 'vab-hey-message-error');
      }
    }

二、后端处理

下一页思路：

1.通过条件和下一份标志，来查询出下一份的id

2.将此id直接调用查询详情页方法

2.1.查询下一份数据id的数据库语句（注：数据库是mysql,id是顺序变大的）

<select id="getNextChangeModify" resultMap="reviewDetailDtoMap">
        select rr.id, rr.report_type
        from review_report rr
        where rr.is_delete = '0'
        <if test="data.uploadTimeStart != null ">
            and DATE(rr.report_upload_time) <![CDATA[>=]]> #{data.uploadTimeStart}
        </if>
        <if test="data.uploadTimeEnd != null ">
            and DATE(rr.report_upload_time) <![CDATA[<=]]> #{data.uploadTimeEnd}
        </if>
        ...........等等查询条件...........
        <if test="data.isNext == '1'.toString()">
            and rr.id  <![CDATA[<]]> #{data.id} order by rr.id desc
        </if>
        <if test="data.isNext == '0'.toString()">
            and rr.id  <![CDATA[>]]> #{data.id} order by rr.id asc
        </if>
        limit 1
    </select>