rex0220 計算式プラグイン スペース項目で見積書の印刷

計算式プラグインと項目検証プラグインでスペース項目に見積書を表示・印刷してみます。

概要

スペース項目に見積書を作成して、印刷してみます。
PDFにすると、罫線の表示がいまいち。(太くなったり細くなったり)
昔よりはよくなったと思いますが、ちょっと気になります。
kintone 標準の印刷機能ではなく、スペース項目を画像データとして、PDFを作るともう少しましかもしれません。そうするとPDFにテキストが残らなくなりますが、見積書であればテキストは不要かも。

• html 見積書のメリットとしては、
  • 折り返しや行数増加に対応できる
  • 印刷回数の制限が無い
• デメリットとしては、
  • 計算式作成が面倒
  • html と css の基礎知識が必要
  • 罫線の表示品質がいまいち
  • 定型フォーマットが使え無い
  • 添付ファイル項目には、マニュアルでアップロードが必要

タブ表示プラグインで、スペース項目をプレビューとしています。

• 印刷画面

• 印刷画面：　行数が多いケース

• PDF例：　印刷時「背景のグラフィック」を無し

アプリ設定

項目検証プラグインで非表示にできない「ラベル」、「罫線」などは、配置しないようにします。
スペース項目は、要素IDを付与してください。

計算式プラグイン設定

明細行をデフォルト１０行とし、明細が少ないときは行数を足します。

.js

OPTION: 

// 見積有効期限日 DATE
DATE_ENDOF(DATE_ADD(見積日,1,"month"),"month")

// sp1:(sp1) SPACER
LET(
  fields, ARRAY("型番","商品名","単価","数量","金額"),
  table, JSON_P(OTVAL(見積明細)),
  drows, 10-ARRAY_COUNT(table),
  label, TAGS_HTML(
    TAG("style", JOIN(ARRAY(
      ".body-record-print .showlayout-gaia .row-gaia .control-value-gaia { border: initial; background: initial; }",
      ".custom-layout-div { color:blue; }",
      ".custom-layout-row { height: 10px; }",
      ".custom-layout-row div { display: inline-block; font-size: 20px; }",
      ".custom-layout-destination { font-size:24px !important; border-bottom: 2px solid darkgray; }",
      ".custom-layout-no { float: right; }",
      ".custom-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 16px;}",
      ".custom-table td { height: 24px; }",
      ".custom-table th { background-color: lightgray; }",
      ".custom-table th, .custom-table td { border: 2px solid darkgray; padding: 4px 6px; }",
    ), NEWLINE(), 1)),
  ),
  body, TAGS_HTML(
    TAG("div", ATTR("class","custom-layout-row"), STYLE("font-size:32px; margin:10px; text-align: center;"),
      TAG("span", "お見積書"),
    ),    
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div", ATTR("class","custom-layout-destination"),
        TAG("span", 宛名&" 様")),
      TAG("div", ATTR("class","custom-layout-no"),
        TAG("span", "見積番号 "),
        TAG("span", 見積番号)
      )
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div", ATTR("class","custom-layout-no"),
        TAG("span", "見積日 "),
        TAG("span", DATE_FORMAT(見積日,"YYYY年MM月DD日"))
      )
    ),
    TAG("div", ATTR("class","custom-layout-row")),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div",
        TAG("span", "お見積り有効期限："&DATE_FORMAT(見積有効期限日,"YYYY年MM月DD日"),
          STYLE("font-size:18px;"))
      ),
      TAG("div",
        STYLE("font-size:24px; float: right; margin-right:10px;"),
        TAG("span", "ｘｘｘｘ株式会社")
      ),
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div",
        TAG("span", "下記のとおりお見積申し上げます。",
          STYLE("font-size:18px;"))
      ),
      TAG("div",
        STYLE("position: absolute; right: 18px; margin-right:10px; font-size:20px;"),        
        TAG("span", "ＹＹＹＹ部")
      ),
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      STYLE("margin-top:10px; margin-bottom:16px;"),
      TAG("div",
        TAG("span", "お見積り金額：　￥"&FIXED(合計金額),
          STYLE("font-size:20px; border-bottom: 2px solid darkgray;"))
      )
    ),
    TAG("table", ATTR("class", "custom-table"),
      TAG("thead", TAG("tr",
        TAG("th", "型番", STYLE("width:80px;")),
        TAG("th", "商品名"),
        TAG("th", "単価", STYLE("width:120px;")),
        TAG("th", "数量", STYLE("width:120px;")),
        TAG("th", "金額", STYLE("width:120px;")),
      )),
      TAG("tbody",
        ARRAY_MAP(table, row,
          TAG("tr", 
            TAG("td", DIC_ITEM(row, "型番")),
            TAG("td", DIC_ITEM(row, "商品名")),
            TAG("td", "￥"&FIXED(DIC_ITEM(row, "単価")), STYLE("text-align:right;")),
            TAG("td", FIXED(DIC_ITEM(row, "数量")), STYLE("text-align:right;")),
            TAG("td", "￥"&FIXED(DIC_ITEM(row, "金額")), STYLE("text-align:right;")),
        )),
        ARRAY_FOR(drows, TAG("tr", ARRAY_MAP(fields, fc, TAG("td"))))
      )
    ),
    TAG("table", ATTR("class", "custom-table"), STYLE("position: absolute; right: 16px; width: auto;"),
      TAG("tr", 
        TAG("td", "小計", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(小計), STYLE("width:120px; text-align:right;")),
      ),
      TAG("tr", 
        TAG("td", "消費税 (10%)", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(消費税), STYLE("width:120px; text-align:right;")),
      ),
      TAG("tr", 
        TAG("td", "合計金額", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(合計金額), STYLE("width:120px; text-align:right;")),
      ),
    ),
    TAG("div", STYLE("max-width: 560px; min-height: 110px; margin: -20px 10px 20px 10px;"),
      TAG("dic", "備考：", STYLE("font-size:18px; display: block;")),
      TAG("dic", 備考, STYLE("font-size:18px; max-width: 300px;"))
    )
  ),
  ARRAY(label,"",body,"")
)

項目検証プラグイン設定

スペース項目以外の項目を印刷時は非表示にします。
EV_INFO("cate")="print"

※非表示にする項目欄をまとめて選択して、「EV_INFO("cate")="print"」をコピペできます。