vue-form-producer v0.7.1

vue-form-producer

By linking form creation required for business applications, input screens using forms, and data display screens with JSON data, Vue.js / Bootstrap-Vue the productivity of form development in front-end development. It is a component that improves in terms of productivity.

業務アプリケーションに必要とされるフォームの作成から、フォームを使った入力画面、データ表示画面までをJSONデータで連携し、Vue.js / Bootstrap-Vue でのフロントエンド開発におけるフォーム開発の生産性を飛躍的に向上するコンポーネントです。

DEMO

デモサイトはこちら

Install

npm install vue-form-producer

BootstrapVue Setup

Register BootstrapVue in your app entry point (typically app.js or main.js):

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

詳しくは BootstrapVue のサイトを参照ください

Setup

import { swFormEditor, swFormInputter, swFormViewer } from 'vue-form-producer'

Usage

vue-form-producer は、以下の3つのコンポーネントで構成されています。

• フォーム作成コンポーネント / sw-form-editor
• 入力フォームコンポーネント / sw-form-inputter
• データ表示コンポーネント / sw-form-viewer

フォーム作成コンポーネント / sw-form-editor

<template>
  <div>
    <sw-form-editor type_info="ALL" item_key_option="false" v-model="form_info" />
  </div>
</template>

<script>
  import { swFormEditor } from 'vue-form-producer'

  export default {
    data() {
      return {
        form_info: null
      }
    }
  }
</script>

Properties

v-model

type-info

入力フォームコンポーネント / sw-form-inputter

<template>
  <div>
    <sw-form-inputter :form_info="form_info" v-model="form_data"" />
  </div>
</template>

<script>
  import { swFormInputter } from 'vue-form-producer'

  export default {
    data() {
      return {
        form_info: null,
        form_data: null
      }
    }
  }
</script>

Properties

form_list_info

[ 
  {
    item_key: "select-1";
    item_options: [
      { value: 'value1', text: 'text 1' },
      { value: 'value2', text: 'text 2' },...,{}
    ]
  },...,{}
]

v-model

データ表示コンポーネント / sw-form-viewer

<template>
  <div>
    <sw-form-viewer :form_data="form_data" 
          pdf_output pdf_output_button="PDF出力" pdf_output_placement="top" />
  </div>
</template>

<script>
  import { swFormViewer } from 'vue-form-producer'
  
  export default {
    data() {
      return {
        form_data: null
      }
    }
  }
</script>

Properties