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

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

利用環境

• 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;

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