单表查询-前端页面开发

代码如下：

<template>
  <div class="gz-page-content gz-layout gz-mx-2">
    <el-row class="gz-my-1">
      <gz-button icon="el-icon-refresh" @click="onRefresh">刷新</gz-button>
    </el-row>
    <ag-grid-vue class="ag-theme-balham gz-layout-item" :gridOptions="gridOptions" :defaultColDef="ag_defaultColDef" :columnDefs="columnDefs" @grid-ready="onGridReady" :rowData="rowData" :getRowNodeId="getRowNodeId" v-initContextMenuItems v-agScroll @modelUpdated="autoSizeColumns" v-loading="isLoading">
    </ag-grid-vue>
  </div>
</template>

<script>

import { agGridCommon } from 'yesweb-libs/mixins'
import { authorize } from '@/mixins'
import { utils } from 'yesweb-libs/utils'
import { AgGridVue } from "ag-grid-vue";

import request from './request'

export default {
  name: 'docno',
  components: {
    AgGridVue
  },
  mixins: [agGridCommon, authorize],
  data () {
    return {
      isLoading:false,
      rowData: [],
      gridOptions: {
        rowSelection: "single",
        animateRows: true,
        context: this
      },
      columnDefs: [
        {
          headerName: '序号',
          valueGetter: params => params.node.rowIndex + 1,
          width: 48
        },
        {
          headerName: '单据编号',
          field: 'docCode',
        },
        {
          headerName: '单据描述',
          field: 'docName',
        }, 
        {
          headerName: 'DocHeader',
          field: 'docHeader',
        },
        {
          headerName: 'Separate',
          field: 'separate',
        },
        {
          headerName: '规则类型',
          field: 'docType',
        },
        {
          headerName: '流水号长度',
          field: 'length',
        },
      ]
    }
  },
  methods: {
    getRowNodeId (data) {
      return data.rowID
    },
    onGridReady (params) {
      this.onRefresh();
    },
    // 刷新
    onRefresh (btn) {
      this.isLoading = true
      request.list(this)
        .then(res => {
          this.rowData = res.data
        })
        .catch(err => {
          this.dataList = []
        }).finally(() => {
          this.isLoading = false
          if (btn) btn.loading = false
        });
    }
  }
}
</script>

require.js代码如下

import { ajax } from 'yesweb-libs'

const request = {
  list(context) {
    return ajax.get(context, '/docnos/sn/List')
  }
}

export default request

配置页面路由：

修改 src\router\data.js 添加路由配置

参考：YESWEB快速开发框架《 路由配置》

/**
 * 路由配置：参考：http://doc.yesdotnet.com/archive/YESWEB/1618253355.html
 */
const routes = [
  {
    path: '/docno',
    name: 'docno',
    type: 'normal',
    title: '流水单号管理',
    defaultURLs: [],
    authorize: [],
    component: () =>
      import(
        /* webpackChunkName: "docno" */ '../views/docno/index.vue'
      ),
  },
]

module.exports = routes