在DataEase上支持服务端分页功能（下）

二、前端服务端分页刷新

        前端调用分页接口时，只需要传入chart_id及page即可，pageSize不需要传递，该参数在设计页面设置好后存储在后台数据库中，并以json对象的形式存在，在后端的getPageData实现时通过解析ChartViewDTO对象中的customAtrr属性获得tablePageSize的值，resultMode则是返回ChartViewDTO对象中的resultMode，该值是设计页面设置后存入数据库中的。

frontend 修改文件及代码如下：

1.frontend/src/api/link/index.js（接口定义）

#增加ViewPageInfo接口，在原viewInfo接口的基础上增加了pageNo参数，而分页大小参数则在backend的
getPageData接口实现中从仪表板设计页面的参数对象中解析，这与通常的服务端分页直接从客户端传递分页大小是有差别的。

export function viewPageInfo(id, panelId, data, pageNo) {
  return request({
    url: 'api/link/viewPageDetail/' + id + '/' + panelId + '/' + pageNo,
    method: 'post',
    hideMsg: true,
    data
  })
}

2.frontend/src/api/panel/panel.js（panel接口定义）

#仪表板展示页及详情页面调用的分页接口

export function viewPageData(id, panelId, data, pageNo) {
  return request({
    url: '/chart/view/getPageData/' + id + '/' + panelId + '/' + pageNo,
    method: 'post',
    hideMsg: true,
    data
  })
}

3.frontend/src/api/chart/chart.js（chart接口定义）

#设计页面调用的分页接口

export function ajaxGetPageDataOnly(id, panelId, data, pageNo = 1) {
  return request({
    url: '/chart/view/getPageData/' + id + '/' + panelId + '/' + pageNo,
    method: 'post',
    loading: true,
    hideMsg: true,
    data
  })
}

4.frontend/src/views/chart/view/ChartEdit.vue（chart编辑组件）

#引入定义的分页接口

import { ajaxGetPageDataOnly, post } from '@/api/chart/chart'

#引入事件bus，在点击分页时触发getPageData和getData事件去获取分页数据

import eventBus from '@/components/canvas/utils/eventBus'

#在生命周期函数created中注册getData事件，用于调用vm的getData方法

created() {
    // this.get(this.$store.state.chart.viewId);
    // this.initAreas()
    eventBus.$on('getData', e => {
      console.log('$on getData', e)
      this.getData(e.id, e.page)
    })
  },

#在生命周期函数beforeDestory中销毁getData事件，避免重复调用

beforeDestroy() {
    eventBus.$off('getData')
  },


#calcData(getData, trigger, needRefreshGroup = false, switchType = false) 修改为：
calcData(getData, trigger, needRefreshGroup = false, switchType = false, pageNo = 1) 

#post('/chart/view/calcData/' + this.panelInfo.id, { 修改为：
post('/chart/view/calcPageData/' + this.panelInfo.id + '/' + pageNo, {

#getData(id) { 修改为：
getData(id, page = 1)

#ajaxGetDataOnly(id, this.panelInfo.id, { 修改为：
ajaxGetPageDataOnly(id, this.panelInfo.id, {

#}).then(response => { 修改为：
}, page).then(response => {

5.frontend/src/components/canvas/custom-component/UserView.vue（设计及展示页面组件）

#引入新增的分页接口

import { viewPageData } from '@/api/panel/panel'
import { viewPageInfo } from '@/api/link'

#在created函数中增加getPageData注册,该调用来自两个地方，一个是frontend/src/views/chart/components/ChartComponentS2.vue
另外一个是frontend/src/views/chart/components/table/TableNormal.vue
这里使用click_from进行区分

eventBus.$on('getPageData', e => {
      console.log('$on getPageData', e)
      this.getData(e.id, false, e.page)
      if (e.click_from && e.click_from ==='tableNormal') {
        this.openChartDetailsDialog() //在点击TableNormal中的分页时，将数据到传递UserViewDialog中的TableNormal上
      }
    })

#在beforeDestroy中销毁注册

beforeDestroy() {
    eventBus.$off('getPageData')
  },

#getData(id, cache = true) { 修改为：
getData(id, cache = true, page = 1) {

#let method = viewData 修改为：
let method = viewPageData

#method = viewInfo 修改为：
method = viewPageInfo

#method(id, this.panelInfo.id, requestInfo).then(response => { 修改为：
method(id, this.panelInfo.id, requestInfo, page).then(response => {

6.frontend/src/views/chart/components/ChartComponentS2.vue（设计及展示页面表格组件）

#<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span> 修改为：

<span>{{ currentPage.show }}</span>

#引入事件bus

import eventBus from '@/components/canvas/utils/eventBus'

#增加设计页面设置的显示模式resultMode判断（该参数来自于后台数据库配置，在请求获得分页数据时返回）设置数据总数

if (this.chart.resultMode === 'all') {
    this.currentPage.show = this.chart.resultCount
} else {
    #以下为原来的代码，保留
    this.currentPage.show = datas.length
    const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
    const pageEnd = pageStart + this.currentPage.pageSize
    datas = datas.slice(pageStart, pageEnd)
}

#在点击分页时，触发getPageData和getData事件，并传入id及page(pageNo)参数
pageClick(val) {
    this.currentPage.page = val
    console.log('pageNo:',val)
    if (this.chart.resultMode === 'all') {
        eventBus.$emit('getPageData', { id: this.chart.id, page: val })
        eventBus.$emit('getData', { id: this.chart.id, page: val })
      }
}

7.frontend/src/views/chart/components/table/TableNormal.vue（详情页面表格组件）

#<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span> 修改为：

<span>{{ currentPage.show }}</span>

#增加设计页面设置的显示模式resultMode判断（该参数来自于后台数据库配置，在请求获得分页数据时返回）设置数据总数
if (this.chart.resultMode === 'all') {
   this.currentPage.show = this.chart.resultCount
} else {


#点击分页时触发getPageData事件

pageClick(val) {
   this.currentPage.page = val
   if (this.chart.resultMode === 'all') {
      eventBus.$emit('getPageData', { id: this.chart.id, page: val, click_from: 'tableNormal'})
      }
      this.init()
 },

        至此，在DataEase v1.8.0上增加服务端分页的功能（mysql、dorisdb）完成了，其它数据库的支持需要自行实现。

---

分享给大家，祝大家520快乐！