0.2.3 • Published 2 years ago

mitsumori-vue v0.2.3

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

mitsumori-vue

さまざまな見積もりを算出するためのインターフェースコンポーネントです。 mitsumori-vueコンポーネントは、propsのurlで設定したパスからjson形式のデータを読み込み、画面を構成しています。 propsの設定値についてはこちらを参照してください。

Dependency

Vue3(3.2+)

導入(npm)

npm i mitsumori-vue

'main.js'

import { createApp } from 'vue'
import { MitsumoriVue } from 'mitsumori-vue'
import '../node_modules/mitsumori-vue/dist/style.css'

const SETTINGS = {
  url: "../node_modules/mitsumori-vue/dist/example.json"
}
createApp(MitsumoriVue, SETTINGS).mount('#mitsumori-vue-app')

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mitsumori-vue</title>
  </head>
  <body>
    <div id="mitsumori-vue-app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

導入(CDN)

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/mitsumori-vue@0.2.3/dist/style.css">
    <title>mitsumori-vue-app</title>
  </head>
  <body>
    <div id="mitsumori-vue-app"></div>
  </body>
  <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@next/dist/vue.esm-browser.js",
        "mitsumori-vue": "https://unpkg.com/mitsumori-vue@0.2.3/dist/mitsumori-vue.es.js"
      }
    }
  </script>
  <script type="module">
  import { createApp } from 'vue';
  import { MitsumoriVue } from 'mitsumori-vue';
  
  const SETTINGS = {
    url: "https://unpkg.com/mitsumori-vue@0.2.3/dist/example.json"
  }
  
  createApp(MitsumoriVue, SETTINGS).mount('#mitsumori-vue-app')

  </script>
</html>

デモ

https://kentikegami.github.io/mitsumori-vue/

jsonの入力例

https://unpkg.com/mitsumori-vue@0.2.3/dist/example.json

HTMLをJSONに埋め込める形に変換

一部のjson項目はhtml表示に対応している。 こちらでHTMLのエスケープ処理を行ってください。

Props

propsの項目

KeyDescriptionRequiredTypeDefault
urljsonデータの取得先falseString'./example.json'
initCategoryIndexカテゴリーの初期選択のインデックス番号falseNumber?null
initProcessIndexプロセスの初期選択のインデックス番号falseNumber?null
debugtrueでデバッグログをコンソールに吐き出します。falseBooleanfalse
useCheckJsontrueで読み込むjsonの書式チェックを行います。falseBooleanfalse
useLoadingページ読み込み時にローディングを表示します。falseBooleantrue
useTerms利用規約を表示します。falseBooleantrue
useTermsConfirmationCheck利用規約を許諾するかのチェックボックスを表示します。falseBooleantrue
useEmailEstimateメールによる見積もりの問い合わせボタンを表示します。falseBooleantrue
usePdfEstimatePDFの見積書をプレビューするためのボタンを表示します。falseBooleantrue
usePdfEstimateMetaFieldPDFの見積書に載せる、御中・自社名・自社住所の設定を行うためのフィールドを表示します。falseBooleantrue
categorySelectTitleカテゴリー選択の上部に表示する文字列の設定falseString'見積もりの種類'
ownerCompanyNamePDFに載せる自社名falseString'〇〇コーポレーション'
ownerCompanyAddressPDFに載せる自社住所falseString'東京都 中央区 1-1-1'
ownerEmailメールによる見積もりの送信先アドレスfalseString'info@example.com'
prosessColorsプロセス選択ボタンの色設定falseString※
partsColorパーツの色設定 パーツはチェックボックス・レンジ・ボタンfalseString'#2e80ff'
itemBackColorアイテムの背景色設定falseString'#d9e9ff'

※'#5f91a6','#8CBFBF','#84B5A7','#B899F2','#A79FFC''#9DAAE6','#9FC9FC','#99D8F2'

設定例

const SETTINGS = {
  url: 'https://unpkg.com/mitsumori-vue@0.2.3/dist/example.json',
  initCategoryIndex: 0,
  initProcessIndex: 0,
  debug: false,
  useCheckJson: false,
  useLoading: true,
  useTerms: true,
  useTermsConfirmationCheck: true,
  useEmailEstimate: true,
  usePdfEstimate: true,
  usePdfEstimateMetaField: true,
  categorySelectTitle: '見積もりの種類',
  ownerCompanyName: '株式会社〇〇',
  ownerCompanyAddress: '東京都丸々市1-1-1',
  ownerEmail: 'mitsumori@example.com',
  prosessColors: [
    '#fe7d7d',
    '#fd9f68',
    '#fdb64f',
    '#ffc037',
    '#ffd137',
    '#ffe237',
    '#fff11e',
    '#fbff38',
    '#eaff38',
    '#d9ff38'
  ],
  partsColor: '#FFC338',
  itemBackColor: '#FFFFC2'
}

考え方

見積もりを以下の3つの段階に落とし込んで考ます。

カテゴリー Categories

同時に検討されることない、各々が独立した算出ロジックを持つ、サービスの種別になります。

例えば、家を建てる業者を考えた場合、一軒家新築 / 屋根・壁修理 / ガレージ新築 といったカテゴリーになります。

コーディング会社の場合、ホームページ制作 / 業務システム開発 / LP制作 といったカテゴリーになります。

プロセス Processes

カテゴリーの中の工程を指します。これらは、見積もりをする人が見積もりしやすい単位で設定すると良いです。

ホームページ制作の場合、デザイン / 開発 / 要件定義 / テスト /　アフターフォロー というプロセスになります。

プロセスは発注後の業務フローに沿って設定してもいいし、見積もりをする時に頭の上で積み上げる順番にしてもよいです。

ホームページ制作の場合、業務フローだとまず要件定義から行いますが、見積もりのフェーズではデザインや開発といった項目から決めていくので、それらを前にしてもかまいません。

アイテム items

これ以上分解できない、最小のサービスの単位です。

基本料金や出張費、外壁塗装、パソコン初期セットアップ対応、家具設置 、レンタル衣装料、落とし穴設置、 魔王討伐代行 といった項目が考えられます。

細かいことを指摘すると、魔王討伐代行 のサービスは、剣でトドメを刺すとか回復薬を使わないで倒すとか、いくつかの(素人にはわからない)オプションの差異があります。

これらの差異で料金が変わるなら、アイテムを分けた方がいいし、指定されたくない場合は分けない方がいいでしょう。

json仕様

{
  "version": "String",
  "title": "String",
  "description": "String(html)",
  "terms_html": "String(html)",
  "categories": 
  [
    {
      "name": "String",
      "description": "String",
      "extra_computeds":
      [
        {
          "description": "String",
          "calc_result": "String",
          "is_show": "Boolean",
          "trigger_item_ids":["String"],
          "var_items":
          [
            {
              "var_name": "String",
              "item_id": "String",
              "property": "String"
            }
          ],
          "calc_logic": "String",
          "show_logic": "String"
        }
      ],
      "propagation_groups":
      [
        {
          "description": "String",
          "propagations": 
          [
            {
              "from_id": "String",
              "to_id": "String",
              "type": "String"
            }
          ]
        }
      ],
      "processes":
      [
        {
          "name": "String",
          "base": "Boolean",
          "items":
          [
            {
              "item_id": "String",
              "name": "String",
              "is_disabled": "Boolean",
              "is_required": "Boolean",
              "description": "String",
              "type": "String(static/dynamic/dependence)",
              "quantity": "Number",
              "cost": "Number",
              "detail_static": 
              {
                "unit_cost": "Number", 
              },
              "detail_dynamic": 
              {
                "unit_name": "String",
                "unit_mass": "Number",
                "unit_description": "String",
                "unit_cost": "Number", 
                "min_quantity": "Number",
                "max_quantity": "Number",
                "coefficient": "Number"
              },
              "detail_dependence": 
              {
                "coefficient": "Number"
              },
            },
          ]
        }
      ]
    } 
  ]
}

Root

{
  "version": "0.0.0",
  "title": "見積もりサービスのタイトルを設定します。",
  "description": "〇〇の各サービスのいろいろな見積もりを手軽に算出できます! <br> 登録不要で無料でお使いいただけます。ここはHTML入力可能です。",
  "terms_html": "プライバシーポリシーや利用規約を設定します。   <p class=\"h4\">利用規約< ...",
  "categories":[]
}
KeyDescriptionRequiredTypeUse html
versionjsonのバージョン管理に使ってください。画面に表示しません。falseString
title画面上部のタイトルを設定falseString
description画面上部の説明文を設定falseString○
terms_html利用規約のHTMLを設定falseString○
categoriesカテゴリーの配列trueCategory

Category

Category配列の順番が、画面表示時の順番になります。

{
  "categories":
  [
    {
      "name": "パソコンサポート",
      "description": "",
      "propagation_groups":[],
      "processes": [],
      "extra_computeds": []
    }
  ]
}
KeyDescriptionRequiredTypeUse html
nameカテゴリーの表示名trueString
descriptionカテゴリーの端的な説明　※表示していません。falseString
propagation_groups伝播グループの配列falsePropagationGroup
processesプロセスの配列trueProcess
extra_computeds追加のコンピューテッド(自動計算)falseExtraComputed

Process

Process配列の順番が、画面表示時の順番になります。

{
  "categories":
  [
    {
      "processes": 
      [
        {
          "name": "サポートメニュー",
          "base": true,
          "items":[]
        }
      ]
    }
  ]
}
KeyDescriptionRequiredTypeUse html
nameプロセスの表示名trueString
base後述する、item.type: "dependence" の時にベースとなるプロセスにtrueを設定します。falseBoolean
itemsアイテムの配列trueItem

Item

Item配列の順番が、画面表示時の順番になります。

{
  "categories":
  [
    {
      "processes": 
      [
        {
          "items":
          [
            {
              "item_id": "7e249a24-ebc7-4f87-b1c5-d77bd37e430c",
              "name": "簡易サーバー構築セット",
              "is_disabled": false,
              "is_required": false,
              "description": "セット内容: レンタルサーバの設定、ドメイン・DNSの設定、ホームページ・Webサイトのデプロイ、一時的なアクセス制限、無料SSL(https)設定",
              "type": "static",
              "quantity": 0,
              "cost": 0,
              "detail_static": 
              {
                "unit_cost": 15000
              },
               "detail_dynamic": 
              {
                "unit_name": "回",
                "unit_mass": 1,
                "unit_description": "(例: 色変更、フォント変更、画像差し替えなどをまとめて承り、１回とカウントします。)",
                "unit_cost": 20000, 
                "min_quantity": 0,
                "max_quantity": 10
              },
              "detail_dependence": 
              { 
                "coefficient": 0.12
              }
            }
          ]
        }
      ]
    }
  ]
}
KeyDescriptionRequiredTypeUse html
item_iditemのID。UUID形式である必要はないですが、ユニークである必要はあります。trueString
name項目名trueString
is_disabled初期状態で編集不可かどうかを設定します。ユーザーの操作で変動する項目。trueBoolean
is_required必須項目設定　赤字で必須であるメッセージがでます。今の所、制御では使っていません。飾りです。trueBoolean
description説明trueString○
typestatic/dynamic/dependenceのいずれかを設定します。 また、typeの設定に合わせてdetail_static/detail_dynamic/detail_dependenceのいずれかを設定します。trueString
quantity初期状態での数量を設定します。ユーザーの操作で変動する項目。　特に理由がなければ初期値0を設定します。trueNumber
cost項目の小計を設定します。ユーザーの操作で変動する項目。　特に理由がなければ初期値0を設定します。trueNumber
detail_statictype:"static"を設定した場合は必須です。falseDetailStatic
detail_dynamictype:"dynamic"を設定した場合は必須です。falseDetailDynamic
detail_dependencetype:"dependence"を設定した場合は必須です。falseDetailDependence

item.type

KeyNameDescriptioninput tag
static静的項目0~1個の注文になる項目checkbox
dynamic動的項目0~n個の注文になる項目range
dependence依存項目baseとなるプロセスのアイテムの小計に、係数をかけて金額を出す項目checkbox

DetailStatic

KeyDescriptionRequiredTypeUse html
unit_cost単価trueNumber

DetailDynamic

KeyDescriptionRequiredTypeUse html
unit_name単位名trueString
unit_mass注文単位 例えば本の出版など、100部ずつ発注させたい場合は、100を設定します。trueNumber
unit_description単位の説明trueString
unit_cost単価trueNumber
min_quantity発注数の最小数。0を設定してください。0以外は未対応。trueNumber
max_quantity発注数の最大数。trueNumber

DetailDependence

KeyDescriptionRequiredTypeUse html
coefficient係数 baseとなるプロセスのアイテムの小計にこの係数を掛け合わせたものが、このアイテムのcostになります。trueNumber

Propagation

アイテムを編集した際に、他のアイテムに対して影響を与えたい場合があります。

例)

  • 宇宙船製造の発注をする場合だけ、内装のオプションを注文できるようにしたい。内装だけの注文は断りたい。
  • 火星探索を注文した場合、木星探索は発注させたくない。同時にできないから片方だけの注文にさせたい。

あるアイテムAを変化させたときにあるアイテムBに指定した影響を与えるという設定を、Propagation 伝播　で行います。

仕様

  • 同一グループ内で矛盾した設定も許すが、配列の最後のものが優先される。
  • 他グループとの矛盾した設定も許すが、配列の最後のものが優先される。
  • 違うカテゴリーのアイテムIDは設定できない。
{
  "categories":
  [
    {
      "propagation_groups":
      [
        {
          "description": "〇〇市内を選んだら他は選べない。〇〇市内を外したら、他のものが選べるようになります。",
          "propagations":
          [
            {
              "from_id": "55dd4635-cf8c-4ee8-8878-1fef35b88b56",
              "to_id": "63107151-869e-4963-af89-5ea5fa966e2c",
              "type": "ONE_TO_DISABLE"
            },
            {
              "from_id": "55dd4635-cf8c-4ee8-8878-1fef35b88b56",
              "to_id": "63107151-869e-4963-af89-5ea5fa966e2c",
              "type": "ZERO_TO_ABLE"
            }
          ]
        },
      ],
    }
  ]
}

PropagationGroup

KeyDescriptionRequiredTypeUse html
description伝播の説明。 画面には現れません。メモ書き。falseString
propagations伝播設定の配列falsePropagation

Propagation

KeyDescriptionRequiredType
from_idA側のアイテムのID。trueString
to_idB側のアイテムのID。trueString
type伝播のタイプtrueString

propagation.type

KeyDescription
ZERO_TO_ZEROAが0になった時、Bを0にする
ONE_TO_ONEAが1になった時、Bを1にする
N_TO_NAがNになった時、BをNにする
ZERO_TO_DISABLEAが0になった時、Bを編集不可にする
ZERO_TO_ABLEAが0になった時、Bを編集可にする
ONE_TO_DISABLEAが1になった時、Bを編集不可にする
ONE_TO_ABLEAが1になった時、Bを編集可にする

ExtraComputed

画面上部の固定エリア上に、独自定義のラベルを設定します。

{
  "categories":
  [
    {
      "extra_computeds": 
      [
        {
          "description": "インターネット接続設定の総発注数を表示する",
          "calc_result": "",
          "is_show": true,
          "trigger_item_ids":["a1aff844-9f4f-4520-ac4d-40f593de9809", "7ea3f236-1b23-4ce5-b103-35416d84ff5e", "db7e538d-dc4b-4440-903e-a4f6fa19e302", "c2e972cf-0e4c-4336-b504-bb54e921265a"],
          "var_items":
          [
            {
              "var_name": "a",
              "item_id": "a1aff844-9f4f-4520-ac4d-40f593de9809",
              "property": "quantity"
            },
            {
              "var_name": "b",
              "item_id": "7ea3f236-1b23-4ce5-b103-35416d84ff5e",
              "property": "quantity"
            },
            {
              "var_name": "c",
              "item_id": "db7e538d-dc4b-4440-903e-a4f6fa19e302",
              "property": "quantity"
            },
            {
              "var_name": "d",
              "item_id": "c2e972cf-0e4c-4336-b504-bb54e921265a",
              "property": "quantity"
            }
          ],
          "calc_logic": "'合計' + (a + b + c + d) + '回線'",
          "show_logic": "a + b + c + b > 0"
        }
      ],
    }
  ]
}
KeyDescriptionRequiredTypeUse html
description説明。 画面には現れません。メモ書き。falseString
calc_result画面表示の初期値。特に理由がなければ "" を設定しておく。後述のcalc_logicで変化する。trueString
is_show画面表示するかを制御する。後述のshow_logicで変化する。trueBoolean
trigger_item_idsここに指定したitemの数量が変化した時に発火する。trueString
var_itemscalc_logicとshow_logicで使う変数を設定する。trueVarItem
calc_logic結果がnumberかstringになるように記述してください。trueString
show_logic結果がbooleanになるように記述してください。trueString

VarItem

{
  "categories":
  [
    {
      "extra_computeds": 
      [
        {
          "var_items":
          [
            {
              "var_name": "a",
              "item_id": "a1aff844-9f4f-4520-ac4d-40f593de9809",
              "property": "quantity"
            },
            {
              "var_name": "b",
              "item_id": "7ea3f236-1b23-4ce5-b103-35416d84ff5e",
              "property": "quantity"
            },
            {
              "var_name": "c",
              "item_id": "db7e538d-dc4b-4440-903e-a4f6fa19e302",
              "property": "quantity"
            },
            {
              "var_name": "d",
              "item_id": "c2e972cf-0e4c-4336-b504-bb54e921265a",
              "property": "quantity"
            }
          ],
        }
      ],
    }
  ]
}
KeyDescriptionRequiredTypeUse html
var_name接頭辞trueString
item_id接尾辞trueString
propertyItemの各キーを設定してください。quantity / cost 等trueString
vuemitsumori-vue
vue
@everything-registry/sub-chunk-2178@infinitebrahmanuniverse/nolb-mit@zalastax/nolb-mit
0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago