Skip to main content

Base Template Usage

The base template dynamically generates the input screen according to the settings of the backend data store. Also, detailed changes can be written in the front-end source code.

Usage environment​

  • Python 2.7系
$ py -V         # Current version
$ py --list     # Installed list
$ py -2.7 -V    # Switch to specified version
  • node.js 14.18系
$ nvm version           # Current version
$ nvm install 14.18     # Installation of specified version
$ nvm ls                # Installed list
$ nvm use 14.18         # Switch to specified version
  • vue.js 2.6
  • vee-validate
  • axios
  • vue-router
  • vuetify
  • vuex

Usage procedure​

To run the base template in your local environment, do the following:

$ git clone [email protected]:b-eee/xxxxxxxx-xxxxx.git
$ npm install
$ npm run serve

Source code settings​

Add search item field​

VueBaseApp\src\domains\sample1Tran\constants\sample1TranList.ts

/**
 * Define search items on the search screen
 * ※Explicit specification is required when using a database reference type.
 * Specify the display position by specifying the grid
 * col: X coordinate, row: Y coordinate, sizeX: width, sizeY: height
 */
const searchForm = [
  {
    display_id: 'Status', //Target display ID
    component: 'SelectArea', //Optional components
    props: {
      label: 'ステータス',
      name: 'Status',
      placeholder: '全ステータス'
    },
    row: 0, //Number of rows to display in Grid (vertical)
    col: 0, //Starting number of columns to display in Grid (horizontal)
    sizeX: 4, //Width occupied by the component
    sizeY: 1
  },
        // Omission ...
  {
    display_id: 'tran_elem_10',
    col: 0,
    row: 2,
    sizeX: 4,
    sizeY: 1
  },
];

Add display column for search results​

VueBaseApp\src\domains\sample1Tran\constants\sample1TranList.ts

/** Search screen Search result display table column **/
const ColumnList: Array<{ [k: string]: string | number }> = [
  { name: 'Status', order: 0, width: 50 },
  { name: 'tran_elem_1', order: 1 },
  { name: 'tran_elem_2', order: 2 },
  { name: 'tran_elem_3', order: 3 },
  { name: 'tran_elem_4', order: 4 },
  { name: 'tran_elem_5', order: 5 },
  { name: 'tran_elem_10', order: 6 }
];

Added number of display rows for search results​

VueBaseApp\src\domains\sample1Tran\constants\sample1TranList.ts

/** Specify the number of records to display per page of search results **/
const listPerPage = 10;

A frontend restart is required.