メインコンテンツまでスキップ

ベーステンプレートの利用方法

ベーステンプレートは、バックエンド側のデータストアの設定内容に合わせて入力画面を動的に生成します。また、詳細な変更は、フロントエンドのソースコードで記述できます。

利用環境

  • Python 2.7系
$ py -V         # 現在のバージョン
$ py --list # インストール済みの一覧
$ py -2.7 -V # 指定バージョンに切り替える
  • node.js 14.18系
$ nvm version           # 現在のバージョン
$ nvm install 14.18 # 指定バージョンのインストール
$ nvm ls # インストール済みの一覧
$ nvm use 14.18 # 指定バージョンに切り替える
  • vue.js 2.6
  • vee-validate
  • axios
  • vue-router
  • vuetify
  • vuex

利用手順

ローカル環境でベーステンプレートを実行するには、次のように操作します。

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

ソースコードの設定

検索項目のフィールドを追記

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

/**
* 検索画面の検索項目について定義する
* ※データベース参照型を利用する場合は明示的な指定が必要となる
* グリッド指定で表示位置を指定する
* col: X座標, row: Y座標, sizeX: 横幅, sizeY: 縦幅
*/
const searchForm = [
{
display_id: 'Status', //対象となるdisplay_id
component: 'SelectArea', //任意で使用するコンポーネント
props: {
label: 'ステータス',
name: 'Status',
placeholder: '全ステータス'
},
row: 0, //Gridで表示する行数(縦)
col: 0, //Gridで表示する開始コラム数(横)
sizeX: 4, //コンポーネントが占有する横幅
sizeY: 1
},
// 中略 ...
{
display_id: 'tran_elem_10',
col: 0,
row: 2,
sizeX: 4,
sizeY: 1
},
];

検索結果の表示カラムを追加

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

/** 検索画面 検索結果表示テーブルカラム **/
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 }
];

検索結果の表示行数を追加

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

/** 検索結果の1ページあたりに表示するレコード数を指定する **/
const listPerPage = 10;

フロントエンドの再起動が必要です。