单表查询-前端页面开发


 views 目录中新建功能文件夹 docno 并添加页面 index.vue

代码如下:

<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

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
评论列表

发表评论

评论内容
昵称:
关联文章

查询-前端页面开发
动态存储设计
查询-后台API开发
页面快排插件开发
element-ui改进el-form样式,取消form-item底部的边距:form-inner-error
使用.NET 6开发TodoList应用(16)——实现查询排序
JQuery将form转换为json,并提交后台处理
主从表演练之采购2-个性化调整
html禁止浏览器对form自动填充
百亿级数据 分库分 后怎么分页查询
主从表演练之采购
YES-WEB快速开发框架,.NET WEB开发平台,高效的web项目开发框架
使用.NET 6开发TodoList应用(13)——实现查询分页
页面快排插件配置支持图片上传
使用.NET 6开发TodoList应用(14)——实现查询过滤
使用.NET 6开发TodoList应用(15)——实现查询搜索
百亿级数据 分库分 后怎么分页查询
javascriptForm转json进行ajax提交Jqueryjson提交
当CDN服务不可用时,前端有什么解决办法
记一次数据库查询优化记录